<template>
    <div class="container">
        <header>
          <transition name="fade-slide">
            <el-form
                v-show="!expanded"
                class="simple-form"
            >
              <el-row class="search-flex-row">
                <el-col>
                  <el-form-item label="问题录入时间" style="width: 450px">
                    <date-time-range-picker-ext
                        v-model="query.crtTime"
                    />
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-input
                      placeholder="事情简要描述"
                      v-model="query.thingDesc"
                      clearable
                      style="width: 400px"
                  />
                </el-col>

                <el-col>
                  <el-tree-select
                      :data="dictProblemSources"
                      :props="{ value: 'id' }"
                      node-key="id"
                      v-model="query.problemSourcesCode"
                      clearable
                      filterable
                      multiple
                      collapse-tags
                      style="width: 200px"
                      placeholder="问题来源"
                  />
                </el-col>

                <el-col>
                  <el-select
                      style="width: 200px"
                      placeholder="专项督察"
                      clearable
                      v-model="query.specialSupervision"
                  >
                    <el-option
                        v-for="item in dict.specialSupervision"
                        :key="item.id"
                        :label="item.dictLabel"
                        :value="item.dictValue"
                    />
                  </el-select>
                </el-col>

                <el-col>
                  <div style="width: 200px">
                    <depart-tree-select
                        v-model="query.handleDepartId"
                        placeholder="办理单位"
                    />
                  </div>
                </el-col>

                <el-col>
                  <div class="flex gap-4" style="height: 32px">
                    <el-select
                        v-model="query.responderKey"
                        style="width: 120px"
                        @change="delete query.responderValue"
                    >
                      <el-option value="name" label="姓名" />
                      <el-option value="phone" label="电话" />
                    </el-select>
                    <el-input
                        placeholder="投诉反映人"
                        v-model="query.responderValue"
                        clearable
                        style="width: 325px"
                    />
                  </div>
                </el-col>
                <el-col>
                  <el-select
                      style="width: 193px"
                      placeholder="办理状态"
                      clearable
                      v-model="query.processingStatus"
                      multiple
                      collapse-tags
                  >
                    <el-option
                        v-for="item in dict.processingStatus"
                        :key="item.id"
                        :label="item.dictLabel"
                        :value="item.dictValue"
                    />
                  </el-select>
                </el-col>
                <el-col >
                    <problem-type-select
                        style="width: 193px"
                        placeholder="问题类型"
                        v-model="query.threeLevelCode"
                        @change="(node) =>handleChangeProblem(node, problem)"
                    />
                </el-col>

                <el-col>
                  <el-select
                      style="width: 200px"
                      placeholder="申请延期"
                      clearable
                      v-model="query.extensionFlag"
                  >
                    <el-option label="已申请" :value="true" />
                    <el-option label="未申请" :value="false" />
                  </el-select>
                </el-col>
                <el-col>
                  <el-select
                      style="width: 200px"
                      placeholder="核查结论"
                      clearable
                      v-model="query.checkStatusCode"
                      multiple
                      collapse-tags
                  >
                    <el-option
                        v-for="item in dict.checkStatus"
                        :key="item.id"
                        :label="item.dictLabel"
                        :value="item.dictValue"
                    />
                  </el-select>
                </el-col>
                <el-col>
                  <div style="width: 200px">
                    <el-select
                        placeholder="处理结果"
                        v-model="query.handleResultCode"
                        multiple
                        @change="(val) => handleChangeResultCode(item, val) "
                        clearable
                    >
                      <el-option
                          v-for="dictItem in dict.handleResult"
                          :key="dictItem.dictCode"
                          :value="dictItem.dictValue"
                          :label="dictItem.dictLabel"
                      />
                    </el-select>
                  </div>
                </el-col>

              </el-row>

            </el-form>
          </transition>
          <transition name="fade-slide">
            <div v-show="expanded" class="form-collapse-wrapper">
            <el-form
                :label-width="120"
                class="full-form"
            >
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="问题发现时间">
                            <date-time-range-picker-ext
                                v-model="query.discoveryTime"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="问题发生时间">
                            <date-time-range-picker-ext
                                v-model="query.happenTime"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="问题录入时间">
                            <date-time-range-picker-ext
                                v-model="query.crtTime"
                            />
                        </el-form-item>
                    </el-col>
<!--                  <el-col :span="6">-->
<!--                    <el-form-item label="报告时间" style="width: 360px; margin-bottom: 0;">-->
<!--                      <el-date-picker-->
<!--                          v-model="query.reportDateRange"-->
<!--                          type="daterange"-->
<!--                          unlink-panels-->
<!--                          range-separator="至"-->
<!--                          start-placeholder="开始日期"-->
<!--                          end-placeholder="结束日期"-->
<!--                          value-format="YYYY-MM-DD"-->
<!--                          format="YYYY-MM-DD"-->
<!--                          style="width: 100%;"-->
<!--                      />-->
<!--                    </el-form-item>-->
<!--                  </el-col>-->
                </el-row>
                <div class="form-row flex">
                    <label class="text-center">问题信息</label>
                    <div class="flex wrap query-box">
                        <el-input
                            placeholder="问题编号 / 样本源头编号"
                            v-model="query.originId"
                            clearable
                            style="width: 200px"
                        />
                        <el-input
                            placeholder="涉及案件 / 警情编号"
                            v-model="query.caseNumber"
                            clearable
                            style="width: 200px"
                        />
                        <el-input
                            placeholder="事情简要描述"
                            v-model="query.thingDesc"
                            clearable
                            style="width: 220px"
                        />
                        <el-select
                            style="width: 146px"
                            placeholder="业务类别"
                            clearable
                            v-model="query.businessTypeCode"
                        >
                            <el-option
                                v-for="item in dict.businessType"
                                :key="item.id"
                                :label="item.dictLabel"
                                :value="item.dictValue"
                            />
                        </el-select>
                        <el-tree-select
                            :data="dictProblemSources"
                            :props="{ value: 'id' }"
                            node-key="id"
                            v-model="query.problemSourcesCode"
                            clearable
                            filterable
                            multiple
                            collapse-tags
                            style="width: 140px"
                            placeholder="问题来源"
                        />
                        <el-select
                            style="width: 146px"
                            placeholder="专项督察"
                            clearable
                            v-model="query.specialSupervision"
                        >
                            <el-option
                                v-for="item in dict.specialSupervision"
                                :key="item.id"
                                :label="item.dictLabel"
                                :value="item.dictValue"
                            />
                        </el-select>
                        <el-input
                            placeholder="通报期数"
                            style="width: 146px"
                            v-model="query.reportNumber"
                            clearable
                        />
                        <problem-type-select
                            multiple
                            style="width: 150px"
                            placeholder="问题类型"
                            v-model="query.threeLevelCode"
                            @change="(node) =>handleChangeProblem(node, problem)"
                        />
                    </div>
                </div>
                <div class="form-row flex">
                    <label class="text-center">核查情况</label>
                    <div class="flex wrap query-box">
                        <div style="width: 200px">
                            <depart-tree-select
                                v-model="query.involveDepartId"
                                placeholder="涉及单位"
                            />
                        </div>
                        <div style="width: 200px">
                            <depart-tree-select
                                v-model="query.handleDepartId"
                                placeholder="办理单位"
                            />
                        </div>
                        <el-select
                            style="width: 160px"
                            placeholder="核查结论"
                            clearable
                            v-model="query.checkStatusCode"
                            multiple
                            collapse-tags
                        >
                            <el-option
                                v-for="item in dict.checkStatus"
                                :key="item.id"
                                :label="item.dictLabel"
                                :value="item.dictValue"
                            />
                        </el-select>
                        <el-select
                            style="width: 120px"
                            placeholder="是否整改"
                            clearable
                            v-model="query.isRectifyCode"
                        >
                            <el-option
                                v-for="item in dict.isRectify"
                                :key="item.id"
                                :label="item.dictLabel"
                                :value="item.dictValue"
                            />
                        </el-select>
                        <div class="flex gap-4">
                            <el-select
                                v-model="query.blameKey"
                                style="width: 90px"
                                @change="delete query.blameValue"
                            >
                                <el-option value="name" label="姓名" />
                                <el-option value="empNo" label="警号" />
                                <el-option value="idCode" label="身份证" />
                            </el-select>
                            <el-input
                                placeholder="涉及人员"
                                v-model="query.blameValue"
                                clearable
                                style="width: 150px"
                            />
                        </div>
                        <div style="width: 120px">
                          <el-select
                              placeholder="处理结果"
                              v-model="query.handleResultCode"
                              multiple
                              @change="(val) => handleChangeResultCode(item, val) "
                              clearable
                          >
                            <el-option
                                v-for="dictItem in dict.handleResult"
                                :key="dictItem.dictCode"
                                :value="dictItem.dictValue"
                                :label="dictItem.dictLabel"
                            />
                          </el-select>
                        </div>
                      <div style="width: 145px">
                        <el-select
                            placeholder="审批超时"
                            clearable
                            collapse-tags
                            collapse-tags-tooltip
                            multiple
                            v-model="query.approvalTimeoutStatus"
                        >
                          <el-option label="市局审批超时" value="city_timeout" />
                          <el-option label="市局审批未超时" value="city_normal" />
                          <el-option label="分局审批超时" value="branch_timeout" />
                          <el-option label="分局审批未超时" value="branch_normal" />
                        </el-select>
                      </div>
                    </div>
                </div>
                <div class="form-row flex">
                    <label class="text-center">其他选项</label>
                    <div class="flex wrap query-box">
                        <el-select
                            style="width: 200px"
                            placeholder="流程阶段"
                            clearable
                            v-model="query.flowKey"
                        >
                            <el-option
                                v-for="item in flowNodes"
                                :key="item.flowKey"
                                :label="item.flowName"
                                :value="item.flowKey"
                            />
                        </el-select>
                        <el-select
                            style="width: 200px"
                            placeholder="审批阶段"
                            clearable
                            v-model="query.approvalFlow"
                        >
                            <el-option
                                v-for="item in dict.approvalFlow"
                                :key="item.id"
                                :label="item.dictLabel"
                                :value="item.dictValue"
                            />
                        </el-select>
                        <el-select
                            style="width: 160px"
                            placeholder="办理状态"
                            clearable
                            v-model="query.processingStatus"
                            multiple
                            collapse-tags
                        >
                            <el-option
                                v-for="item in dict.processingStatus"
                                :key="item.id"
                                :label="item.dictLabel"
                                :value="item.dictValue"
                            />
                        </el-select>

                        <el-select
                            style="width: 120px"
                            placeholder="是否超时"
                            clearable
                            v-model="query.timeoutFlag"
                        >
                            <el-option label="未超时" :value="false" />
                            <el-option label="已超时" :value="true" />
                        </el-select>

                        <div class="flex gap-4" style="height: 32px">
                            <el-select
                                v-model="query.responderKey"
                                style="width: 90px"
                                @change="delete query.responderValue"
                            >
                                <el-option value="name" label="姓名" />
                                <el-option value="phone" label="电话" />
                            </el-select>
                            <el-input
                                placeholder="投诉反映人"
                                v-model="query.responderValue"
                                clearable
                                style="width: 150px"
                            />
                        </div>
                        <el-select
                            style="width: 120px"
                            placeholder="申请延期"
                            clearable
                            v-model="query.extensionFlag"
                        >
                            <el-option label="已申请" :value="true" />
                            <el-option label="未申请" :value="false" />
                        </el-select>
                        <el-select
                            style="width: 146px"
                            placeholder="下发单位的层级"
                            clearable
                            v-model="query.crtDepartLevel"
                        >
                            <el-option label="市局下发" :value="0" />
                            <el-option label="二级机构下发" :value="2" />
                        </el-select>

                        <depart-tree-select
                            style="width: 146px"
                            v-model="query.issuingDepartId"
                            placeholder="下发单位"
                        />
                    </div>
                </div>
            </el-form>
            </div>
          </transition>
          <div class="toggle-area">
            <el-button
                type="primary"
                link
                @click="expanded = !expanded"
            >
              {{ expanded ? '收起' : '展开查看更多搜索' }}
              <el-icon class="ml-4">
                <ArrowUp v-if="expanded" />
                <ArrowDown v-else />
              </el-icon>
            </el-button>
          </div>
            <div class="flex between mt-20 mb-26">
              <div class="flex gap-4">
                <el-button type="primary" @click="handleExport"
                >数据导出</el-button
                >
                <el-button type="primary" @click="handleReportGenerate"
                           v-if="userStore.user?.userName === 'oumyye'"
                >报告生成</el-button
                >
              </div>
                <div>
                    <el-switch
                        v-model="remainingTimeFlag"
                        inline-prompt
                        active-text="显示流程限时"
                        inactive-text="隐藏流程限时"
                        :active-value="true"
                        :inactive-value="false"
                        class="mr-20"
                    />
                    <el-button type="primary" @click="getList">
                        <template #icon
                            ><icon name="el-icon-Search"
                        /></template>
                        查询</el-button
                    >
                    <el-button @click="reset">重置</el-button>
                </div>
            </div>
        </header>
        <main>
            <div class="table-container" v-loading="loading">
                <el-table
                    :data="list"
                    @sort-change="handleTableSort"
                    ref="tableRef"
                >
                    <el-table-column type="expand">
                        <template #default="{ row }">
                            <div class="row mt-10">
                                <div class="col col-6">
                                    <label>样本源头编号</label>
                                    <span>{{ row.originId }}</span>
                                </div>
                                <div class="col col-6">
                                    <label>问题发现时间</label>
                                    <span>{{ row.discoveryTime }}</span>
                                </div>
                                <div class="col col-6">
                                    <label>问题发生时间</label>
                                    <span>{{ row.happenTime || "/" }}</span>
                                </div>
                            </div>
                            <div class="row mt-10">
                                <div class="col col-6">
                                    <label>问题来源</label>
                                    <span>{{ row.problemSources }}</span>
                                </div>
                                <div class="col col-6">
                                    <label>业务类别</label>
                                    <span>{{ row.businessTypeName }}</span>
                                </div>
                                <div class="col col-12">
                                    <label>涉嫌问题</label>
                                    <span>{{
                                        getInvolveProblem(
                                            row.involveProblem,
                                            dict.suspectProblem
                                        ) || "/"
                                    }}</span>
                                </div>
                            </div>
                            <div class="row mt-10">
                                <div class="col col-6" v-if="row.responderName">
                                    <label>投诉反映人</label>
                                    <span>{{ row.responderName }}</span>
                                </div>
                                <div class="col col-6" v-if="row.contactPhone">
                                    <label>联系电话</label>
                                    <span>{{ row.contactPhone }}</span>
                                </div>
                            </div>

                            <div class="row mt-10">
                                <div class="col col-6">
                                    <label>涉及警种</label>
                                    <span>{{ row.policeTypeName }}</span>
                                </div>
                                <div class="col col-6">
                                    <label>涉及单位</label>
                                    <span>{{
                                        row.involveDepartName || "/"
                                    }}</span>
                                </div>
                            </div>
                            <div class="row mt-10">
                                <div class="col col-24">
                                    <label>事情简要描述</label>
                                    <span>{{ row.thingDesc }}</span>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="问题录入时间"
                        prop="crtTime"
                        width="150"
                        sortable="custom"
                    />
                    <el-table-column
                        label="问题发现时间"
                        prop="discoveryTime"
                        width="150"
                        sortable="custom"
                    />
                    <el-table-column
                        label="问题来源"
                        prop="problemSources"
                        width="110"
                        show-overflow-tooltip
                    />
                    <el-table-column
                        label="业务类别"
                        prop="businessTypeName"
                        width="110"
                    />
                    <el-table-column
                        label="问题内容"
                        prop="thingDesc"
                        show-overflow-tooltip
                    />
                    <el-table-column label="办理单位" show-overflow-tooltip>
                        <template #default="{ row }">
                            <span
                                >{{ row.handleSecondDepartName
                                }}{{ row.handleThreeDepartName }}</span
                            >
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="核查结论"
                        prop="checkStatusName"
                        width="100"
                        align="center"
                    />
                    <el-table-column
                        label="流程限时"
                        width="150"
                        align="center"
                        v-if="remainingTimeFlag"
                    >
                        <template #default="{ row }">
                            <countdown
                                :time="row.remainingDuration"
                                v-if="
                                    row.remainingDuration &&
                                    row.processingStatus !==
                                        ProcessingStatus.COMPLETED
                                "
                            />
                            <el-tag
                                v-else-if="row.handleTimeout"
                                type="danger"
                                effect="dark"
                                >办结超时
                                {{ formatTimeText(row.handleTimeout) }}</el-tag
                            >
                        </template>
                    </el-table-column>
                    <el-table-column label="办理状态" width="110">
                        <template #default="{ row }">
                            <el-tag
                                :type="
                                    row.processingStatus ===
                                    ProcessingStatus.COMPLETED
                                        ? 'success'
                                        : 'primary'
                                "
                                v-if="row.processingStatus"
                                >{{
                                    getDictLable(
                                        dict.processingStatus,
                                        row.processingStatus
                                    )
                                }}</el-tag
                            >
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="当前处理对象"
                        prop="currentProcessingObject"
                        show-overflow-tooltip
                    >
                        <template #default="{ row }">
                            <span
                                v-if="
                                    row.processingStatus ===
                                    ProcessingStatus.COMPLETED
                                "
                                >无</span
                            >
                            <span v-else>{{
                                row.currentProcessingObject
                            }}</span>
                        </template>
                    </el-table-column>
                  <el-table-column
                      label="下发单位"
                      prop="issuingDepartName"
                      width="100"
                      align="center"
                      show-overflow-tooltip
                  />
<!--                    <el-table-column-->
<!--                        label="二级审批时长"-->
<!--                        width="120"-->
<!--                        align="center"-->
<!--                    >-->
<!--                        <template #default="{ row }">-->
<!--                            <span>{{ formatTimeText(row.secondApprovalTime) }}</span>-->
<!--                        </template>-->
<!--                    </el-table-column>-->
<!--                    <el-table-column-->
<!--                        label="市局审批时长"-->
<!--                        width="120"-->
<!--                        align="center"-->
<!--                    >-->
<!--                        <template #default="{ row }">-->
<!--                            <span>{{ formatTimeText(row.firstApproveTime) }}</span>-->
<!--                        </template>-->
<!--                    </el-table-column>-->
                    <el-table-column label="操作" width="160">
                        <template #default="{ row }">
                            <div class="flex v-center">
                                <el-button
                                    type="primary"
                                    link
                                    @click="handleAction(row)"
                                    >详情</el-button
                                >
                                <el-dropdown
                                    trigger="click"
                                    placement="bottom-start"
                                    class="ml-10"
                                >
                                    <el-button type="primary" link
                                        >更多操作</el-button
                                    >
                                    <template #dropdown>
                                        <el-dropdown-menu>
                                            <el-dropdown-item>
                                                <el-button
                                                    type="primary"
                                                    text
                                                    @click="handleEdit(row)"
                                                    v-perms="['negative:edit']"
                                                    >编辑</el-button
                                                >
                                            </el-dropdown-item>
                                            <el-dropdown-item>
                                                <el-button
                                                    type="danger"
                                                    text
                                                    @click="handleDel(row)"
                                                    v-perms="['negative:del']"
                                                    >删除</el-button
                                                >
                                            </el-dropdown-item>
                                            <el-dropdown-item>
                                                <el-button
                                                    type="primary"
                                                    text
                                                    @click="
                                                        handleTransferTodo(row)
                                                    "
                                                    v-perms="[
                                                        'negative:transferTodo',
                                                    ]"
                                                    v-if="
                                                        row.processingStatus ===
                                                        ProcessingStatus.COMPLETED
                                                    "
                                                    >转待办</el-button
                                                >
                                            </el-dropdown-item>
                                            <el-dropdown-item>
                                                <el-button
                                                    type="primary"
                                                    text
                                                    v-if="
                                                        row.processingStatus ===
                                                        ProcessingStatus.COMPLETED
                                                    "
                                                    @click="
                                                        handleSpotCheck(row)
                                                    "
                                                    v-perms="['negative:spotCheck']"
                                                    >抽查</el-button
                                                >
                                            </el-dropdown-item>
                                        </el-dropdown-menu>
                                    </template>
                                </el-dropdown>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="flex end mt-8">
                <el-pagination
                    @size-change="getList"
                    @current-change="getList"
                    :page-sizes="[10, 20, 50, 100]"
                    v-model:page-size="query.size"
                    v-model:current-page="query.current"
                    layout="total, sizes, prev, pager, next"
                    :total="total"
                >
                </el-pagination>
            </div>
        </main>
    </div>

    <negative-dialog
        v-model="show"
        :id="activeNegativeId"
        @close="show = false"
        ref="negativeDialogRef"
    />

    <el-dialog v-model="editShow" title="问题编辑" width="900px">
        <el-form label-width="148" :model="formData" ref="formRef">
            <div style="margin-bottom: 80px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item
                            label="问题来源"
                            prop="problemSourcesCode"
                            :rules="{
                                required: true,
                                message: '请选择问题来源',
                                trigger: ['blur'],
                            }"
                        >
                            <dict-select
                                name="problemSources"
                                v-model="formData.problemSourcesCode"
                                @change="
                                    (nodeData) =>
                                        (formData.problemSources =
                                            nodeData.label)
                                "
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                            label="业务类别"
                            prop="businessTypeCode"
                            :rules="{
                                required: true,
                                message: '请选择业务类别',
                                trigger: ['blur'],
                            }"
                        >
                            <el-select
                                v-model="formData.businessTypeCode"
                                @change="
                                    (val) =>
                                        (formData.businessTypeName =
                                            dict.businessType.filter(
                                                (item) => item.dictValue === val
                                            )[0].dictLabel)
                                "
                            >
                                <el-option
                                    v-for="item in dict.businessType"
                                    :key="item.id"
                                    :label="item.dictLabel"
                                    :value="item.dictValue"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col
                        :span="12"
                        v-if="
                            formData.problemSourcesCode === ProblemSources.ZXDC
                        "
                    >
                        <el-form-item
                            label="专项督察"
                            prop="specialSupervision"
                            :rules="{
                                required: true,
                                message: '请选择专项督察',
                                trigger: ['blur'],
                            }"
                        >
                            <el-select
                                v-model="formData.specialSupervision"
                                clearable
                            >
                                <el-option
                                    v-for="item in dict.specialSupervision"
                                    :key="item.id"
                                    :label="item.dictLabel"
                                    :value="item.dictValue"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col
                        :span="12"
                        v-if="
                            formData.problemSourcesCode ===
                                ProblemSources.ZXDC ||
                            formData.problemSourcesCode === ProblemSources.XCDC
                        "
                    >
                        <el-form-item
                            label="通报期数"
                            prop="reportNumber"
                            :rules="{
                                required: true,
                                message: '请选择通报期数',
                                trigger: ['blur'],
                            }"
                        >
<!--                            <el-input-->
<!--                                placeholder="请输入"-->
<!--                                v-model="formData.reportNumber"-->
<!--                            />-->
                          <el-select v-model="reportData"
                                     filterable
                                     remote
                                     reserve-keyword
                                     placeholder="请选择通报期数"
                                     :remote-method="getReportListDataFun"
                                     :loading="reportLoading"
                          >
                            <el-option
                                v-for="(item,id) in reportList"
                                :key="id"
                                :label="item.reportName"
                                :value="item.id"
                            />
                          </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item
                            label="涉及案件/警情编号"
                            prop="caseNumber"
                        >
                            <el-input
                                v-model="formData.caseNumber"
                                placeholder="请输入"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                            label="涉嫌问题"
                            prop="involveProblem"
                            :rules="{
                                required: true,
                                message: '请选择涉嫌问题',
                                trigger: ['blur'],
                            }"
                        >
                            <el-select
                                v-model="formData.involveProblem"
                                multiple
                                clearable
                            >
                                <el-option
                                    v-for="item in dict.suspectProblem"
                                    :key="item.id"
                                    :label="item.dictLabel"
                                    :value="item.dictValue"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                            label="问题涉及单位"
                            prop="involveDepartId"
                            :rules="{
                                required: true,
                                message: '请选择问题涉及单位',
                                trigger: ['blur'],
                            }"
                        >
                            <depart-tree-select
                                v-model="formData.involveDepartId"
                                :check-strictly="true"
                                @node-click="
                                    (row) =>
                                        (formData.involveDepartName =
                                            row.shortName)
                                "
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item-ext
                            label="涉及警种"
                            content="囊括了市局除分县市局以外的所有业务警种，便于后期统计分析业务条线的问题。"
                            prop="policeType"
                        >
                            <el-select
                                v-model="formData.policeType"
                                @change="
                                    (val) =>
                                        (formData.policeTypeName =
                                            dict.policeType.filter(
                                                (item) => item.dictValue === val
                                            )[0].dictLabel)
                                "
                                clearable
                            >
                                <el-option
                                    v-for="item in dict.policeType"
                                    :key="item.id"
                                    :label="item.dictLabel"
                                    :value="item.dictValue"
                                />
                            </el-select>
                        </el-form-item-ext>
                    </el-col>
                </el-row>
                <el-row
                    v-if="
                        ProblemSources_XFTS.includes(
                            formData.problemSourcesCode
                        )
                    "
                >
                    <el-col :span="12">
                        <el-form-item label="投诉反映人" prop="responderName">
                            <el-input
                                placeholder="请输入"
                                v-model="formData.responderName"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系电话" prop="contactPhone">
                            <el-input
                                v-model="formData.contactPhone"
                                placeholder="请输入"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item
                            label="问题发现时间"
                            prop="discoveryTime"
                            :rules="{
                                required: true,
                                message: '请选择问题发现时间',
                                trigger: ['blur'],
                            }"
                        >
                            <el-date-picker
                                v-model="formData.discoveryTime"
                                type="datetime"
                                placeholder="请选择"
                                value-format="YYYY-MM-DD HH:mm"
                                time-format="HH:mm"
                                style="width: 100%"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="问题发生时间" prop="happenTime">
                            <el-date-picker
                                v-model="formData.happenTime"
                                type="datetime"
                                placeholder="请选择"
                                value-format="YYYY-MM-DD HH:mm"
                                time-format="HH:mm"
                                style="width: 100%"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="督察报告附件" v-if="reportFiles?.length > 0">
                  <file-list v-model:files="reportFiles" :removeEnable="false" />
                </el-form-item>
                <el-form-item
                    label="事情简要描述"
                    prop="thingDesc"
                    :rules="{
                        required: true,
                        message: '请输入事情简要描述',
                        trigger: ['blur'],
                    }"
                >
                    <el-input
                        type="textarea"
                        placeholder="请输入"
                        v-model="formData.thingDesc"
                        :autosize="{ minRows: 4 }"
                    />
                </el-form-item>
            </div>
        </el-form>
        <footer class="flex end">
            <el-button @click="editShow = false" size="large">取消</el-button>
            <el-button type="primary" @click="handleSumbit" size="large"
                >确定</el-button
            >
        </footer>
    </el-dialog>

</template>
<script setup>
import moment from "moment";
import { ElLoading } from "element-plus";
import {
  listNegative,
  negativeExport,
  delNegative,
  updateNegative,
  transferTodo,  createReportTask,
} from "@/api/work/negative";
import { getDictLable, formatTimeText, getInvolveProblem ,getYearTime} from "@/utils/util";
import feedback from "@/utils/feedback";

import { ProcessingStatus } from "@/enums/flowEnums";
import { ProblemSources_XFTS, ProblemSources } from "@/enums/dictEnums";

import useCatchStore from "@/stores/modules/catch";
import {computed, watch} from "vue";
import {getListData} from "@/api/superviseReport/superviseReport";
import {ArrowDown, ArrowUp} from "@element-plus/icons-vue";
import useUserStore from "@/stores/modules/user.ts";
const userStore = useUserStore();

const catchStore = useCatchStore();
const dict = catchStore.getDicts([
    "businessType",
    "inspectCase",
    "checkStatus",
    "isRectify",
    "suspectProblem",
    "policeType",
    "specialSupervision",
    "approvalFlow",
    "handleResult"
]);
const flowNodes = catchStore.getFlowNodes();
const dictProblemSources = catchStore.getDictProblemSources();

const queryCrumbs = ref([]);
const query = ref({
    current: 1,
    size: 10,
    responderKey: "name",
    blameKey: "name",
});

const list = ref([]);
const total = ref(0);

const loading = ref(true);
function  getList() {
    loading.value = true;
    listNegative(query.value).then((data) => {
        list.value = data.records;
        total.value = data.total;
        loading.value = false;
    });
}

function handleTableSort(orderObj) {
    if (orderObj.order) {
        query.value.order = orderObj.order;
        query.value.orderProp = orderObj.prop;
    } else {
        query.value.order = "";
        query.value.orderProp = "";
    }
    getList();
}

const tableRef = ref();
function reset() {
    query.value = {
        current: 1,
        size: 10,
        responderKey: "name",
        blameKey: "name",
    };
    tableRef.value.clearSort();
    getList();
    // 重置路由
    router.push("/query");
}

const route = useRoute();
watch(
    () => route.query.toString(),
    () => {
        updateQuery();
        getList();
    }
);

async function  updateQuery() {
    if (route.query.processingStatus) {
        query.value.processingStatus = [route.query.processingStatus];
    }
    if (route.query.crtTime === "today") {
        query.value.crtTime = [
            moment().startOf("day").format("YYYY-MM-DD HH:mm:ss"),
            moment().endOf("day").format("YYYY-MM-DD HH:mm:ss"),
        ];
    }
  //大屏（12337）跳转
  if(route.query.open && route.query.open === '12337'){
    query.value.crtTime =getYearTime()
    query.value.problemSourcesCode = ['24']
    await nextTick()
  }
  //大屏（局长信箱）跳转
  if(route.query.open && route.query.open === 'Mailbox'){
    query.value.crtTime =getYearTime()
    query.value.problemSourcesCode = ['23']
    await nextTick()
  }



    if (route.query.extensionFlag === "true") {
        query.value.extensionFlag = true;
        query.value.processingStatus = ['signing', 'processing', 'approval'];
    }
}

onMounted(() => {
    updateQuery();
    getList();
});

const show = ref(false);
const activeNegativeId = ref("");

function handleAction(row) {
    show.value = true;
    activeNegativeId.value = row.id;
}

const router = useRouter();
async function handleExport() {
    await feedback.confirm("请确定导出当前页面所有数据");
    const loading = ElLoading.service({
        lock: true,
        text: "导出中...",
        background: "rgba(0, 0, 0, 0.5)",
    });
    await negativeExport(query.value);
    loading.close();
    await feedback.confirm("导出任务已生成，请到“导出记录”页面查看");
    router.push("/negative/export");
}

async function handleReportGenerate() {
  const crtTime = query.value.crtTime;
  if (!crtTime) {
    feedback.msgError("请选择对应录入时间");
    return;
  }
  // 校验时间跨度不能超过一年
  if (crtTime.length === 2) {
    const startDate = new Date(crtTime[0]);
    const endDate = new Date(crtTime[1]);
    const timeDiff = endDate - startDate;
    const yearDiff = timeDiff / (1000 * 60 * 60 * 24 * 365);
    if (yearDiff > 1) {
      feedback.msgError("所选时间跨度不能超过一年");
      return;
    }
  }
  const loading = ElLoading.service({
    lock: true,
    text: "报告任务生成中...",
    background: "rgba(0, 0, 0, 0.5)",
  });
    await createReportTask(query.value);
    loading.close();
    await feedback.confirm("报告任务已生成，请到导出记录页面查看");
    router.push("/negative/export");
}


async function handleDel(row) {
    await feedback.confirm(`确定删除该数据？`);
    await delNegative(row.id);
    feedback.msgSuccess("操作成功");
    getList();
}

const editShow = ref(false);
const formData = ref({});
const formRef = ref(null);

function handleEdit(row) {
    console.log(row);
    editShow.value = true;
    formData.value = { ...row };
    if (row.involveProblem) {
        formData.value.involveProblem =
            formData.value.involveProblem.split(",");
    } else {
        formData.value.involveProblem = [];
    }
}

async function handleSumbit() {
    await formRef.value.validate();
    await updateNegative(formData.value);
    editShow.value = false;
    feedback.msgSuccess("操作成功");
    getList();
}

async function handleTransferTodo(row) {
    await feedback.confirm(`确定将该数据转为待办？`);
    await transferTodo(row.id);
    feedback.msgSuccess("已成功转为待办，请到我的待办查看");
    getList();
}

const negativeDialogRef = ref();
function handleSpotCheck(row) {
    activeNegativeId.value = row.id;
    show.value = true;
    negativeDialogRef.value.spotCheck();
}

const remainingTimeFlag = ref(true);




const reportData = ref(null)
watch(()=>reportData.value,(val)=>{
  if(val){
    formData.value.reportNumber = reportList.value.find(s=>s.id == val).reportName;
    formData.value.reportId = val;
  }
},{deep:true,immediate:true})
const reportQuery = ref({
  current: 1,
  size: 100,
  type: 1
})
const reportList = ref([]);
const reportLoading = ref(false);
const getReportListDataFun =async (val=null)=>{
  reportLoading.value=true;
  try{
    if(val){
      reportQuery.value.reportName = val;
    }else{
      reportQuery.value.reportName =null;
    }
    const res = await  getListData(reportQuery.value);
    reportList.value=res.records;
    console.log('reportList.value',reportList.value)
    reportLoading.value=false;
  }catch (e){
    reportLoading.value=false;
  }
}
const reportFiles =  computed(()=>  {
  if( formData.value.reportNumber){
    let data= reportList.value.find(s=>s.id === formData.value.reportId);
    data = data?data:reportList.value.find(s=>s.reportNumber === formData.value.reportNumber);
    console.log('data',data)
    return data?.files;
  }else{
    return []
  }

})

const expanded = ref(false)
function handleChangeResultCode(item) {
  if (item.handleResultCode && item.handleResultCode.length > 0) {
    item.handleResultName = dict.handleResult
        .filter((obj) => item.handleResultCode.includes(obj.dictValue))
        .map((obj) => obj.dictLabel)
        .join("、");
  } else {
    item.handleResultName = "";
  }
}
function handleChangeProblem(node, problem) {
  if (node.level === 3) {
    problem.threeLevelContent = node.label;
    problem.oneLevelCode = node.parent.parent.key;
    problem.oneLevelContent = node.parent.parent.label;
    problem.twoLevelCode = node.parent.key;
    problem.twoLevelContent = node.parent.label;
  }
}
</script>
<style lang="scss" scoped>
:deep() {
    .el-dropdown-menu__item {
        padding: 0;
        .el-button {
            width: 100%;
        }
    }
}
/* 外层容器 */
.form-collapse-wrapper {
  overflow: hidden;
}

/* 进入 / 离开 */
.collapse-fade-enter-active,
.collapse-fade-leave-active {
  transition:
      max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.3s ease,
      transform 0.3s ease;
}

/* 初始状态 */
.collapse-fade-enter-from,
.collapse-fade-leave-to {
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
}

/* 展开完成状态 */
.collapse-fade-enter-to,
.collapse-fade-leave-from {
  max-height: 1200px; /* 大于表单最大高度 */
  opacity: 1;
  transform: translateY(0);
}
.toggle-area {
  display: flex;
  justify-content: center;
  height: 32px;
  margin: 8px 0 12px;
}
.collapse-fade-enter-active {
  transition-delay: 0s, 0.1s, 0.1s;
}

.compact-row {
  row-gap: 8px;   /* 原来大概是 20px */
}

.search-flex-row {
  display: flex;
  flex-wrap: wrap;      /* 排不下自动换行 */
  gap: 12px 16px;       /* 行间距 / 列间距 */
  align-items: center;  /* 垂直对齐 */
}

.search-flex-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
}

.search-flex-row .el-col {
  flex: none;
}

.search-flex-row .el-form-item {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

.search-flex-row .el-form-item__label {
  padding-right: 8px;
  line-height: 32px;
  white-space: nowrap;
}

</style>
