<template>
  <div class="container h100">
    <el-tabs v-model="activeTab">
      <!-- 问题线索 -->
      <el-tab-pane label="问题线索" name="modelClue">
        <div class="h100">
          <el-row :gutter="20" class="h100">
            <el-col :span="6" class="h100">
              <model-tree v-model="modelClueQuery.modelIds" />
            </el-col>
            <el-col :span="18">
              <header>
                <el-form :label-width="140">
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="预警时间">
                        <date-time-range-picker-ext
                            v-model="modelClueQuery.createTime"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="涉及单位">
                        <depart-tree-select
                            v-model="modelClueQuery.involveDepartId"
                            :check-strictly="false"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="预警内容">
                        <el-input
                            placeholder="请输入"
                            v-model="modelClueQuery.thingDesc"
                            clearable
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="分发状态">
                        <el-select
                            v-model="modelClueQuery.distributionState"
                            clearable
                        >
                          <el-option
                              v-for="item in dict.distributionState"
                              :label="item.dictLabel"
                              :value="item.dictValue"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="modelClueQuery.distributionState === '1'">
                      <el-form-item label="办理状态">
                        <el-select
                            placeholder="办理状态"
                            clearable
                            v-model="modelClueQuery.processingStatus"
                        >
                          <el-option
                              v-for="item in dict.processingStatus"
                              :key="item.id"
                              :label="item.dictLabel"
                              :value="item.dictValue"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
                <div class="flex end mb-20">
                  <div>
                    <el-button type="primary" @click="getModelClueList">
                      <template #icon>
                        <icon name="el-icon-Search" />
                      </template>
                      查询
                    </el-button>
                    <el-button @click="resetModelClue">重置</el-button>
                  </div>
                </div>
              </header>
              <div class="table-container" v-loading="modelClueLoading">
                <el-table :data="modelClueList">
                  <el-table-column
                      label="预警时间"
                      prop="createTime"
                      width="150"
                  />
                  <el-table-column
                      label="涉及单位"
                      show-overflow-tooltip
                      width="160"
                  >
                    <template #default="{ row }">
                                            <span>{{ row.involveParentDepartName }}</span
                                            ><span v-if="row.involveDepartName"
                    ><br />{{ row.involveDepartName }}</span
                    >
                    </template>
                  </el-table-column>
                  <el-table-column
                      label="涉及人员"
                      prop="involvePoliceName"
                      width="160"
                  >
                    <template #default="{ row }">
                      <div v-if="row.involvePoliceName">
                        <div
                            v-for="item in row.involvePoliceName.split(
                                                        ' '
                                                    )"
                            class="text-nowrap"
                        >
                          {{ item }}
                        </div>
                      </div>
                      <div v-else>略</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                      label="预警内容"
                      prop="thingDesc"
                      show-overflow-tooltip
                  />
                  <el-table-column
                      label="分发状态"
                      align="center"
                      width="130"
                  >
                    <template #default="{ row }">
                      <el-tag
                          v-if="row.distributionState === '0'"
                          type="info"
                      >未分发</el-tag
                      >
                      <el-tag
                          v-if="row.distributionState === '1'"
                          type="success"
                      >已分发
                        <span v-if="row.processingStatus">{{ row.processingStatus ? `(${getDictLable(dict.processingStatus, row.processingStatus)})` : "" }}</span>
                      </el-tag
                      >
                      <el-tag v-if="row.distributionState === '2'"
                      >已处置{{
                          row.negativeId ? "" : " (未分发)"
                        }}</el-tag
                      >
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="180">
                    <template #default="{ row }">
                      <el-button
                          type="primary"
                          link
                          @click="handleModelClueShowDetail(row)"
                      >查看详情
                      </el-button>
                      <el-button
                          v-if="row.negativeId"
                          type="primary"
                          link
                          @click="handleModelClueAction(row)"
                      >处理详情
                      </el-button>
                      <el-button
                          type="primary"
                          link
                          v-if="row.notificationId"
                          @click="handleModelClueClue(row)"
                      >查看提醒
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="flex end mt-8">
                <el-pagination
                    @size-change="getModelClueList"
                    @current-change="getModelClueList"
                    :page-sizes="[9, 18, 36]"
                    v-model:page-size="modelClueQuery.size"
                    v-model:current-page="modelClueQuery.current"
                    layout="total, sizes, prev, pager, next"
                    :total="modelClueTotal"
                >
                </el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>

      <!-- 任务分发 -->
      <el-tab-pane label="任务分发" name="modelTask">
        <div class="h100">
          <el-row :gutter="20" class="h100">
            <el-col :span="4">
              <model-tree  v-model="modelTaskQuery.modelIds" />
            </el-col>
            <el-col :span="20">
              <header>
                <el-form :label-width="140">
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="任务名称">
                        <el-input
                            placeholder="请输入"
                            v-model="modelTaskQuery.thingDesc"
                            clearable
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="下发时间">
                        <date-time-range-picker-ext
                            v-model="modelTaskQuery.createTime"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
                <div class="flex end mb-20">
                  <div>
                    <el-button type="primary" @click="getModelTaskList">
                      <template #icon>
                        <icon name="el-icon-Search" />
                      </template>
                      查询</el-button
                    >
                    <el-button @click="resetModelTask">重置</el-button>
                  </div>
                </div>
              </header>
              <div class="table-container">
                <el-table :data="modelTaskList">
                  <el-table-column
                      label="任务名称"
                      prop="taskName"
                      width="200"
                      show-overflow-tooltip
                  />
                  <el-table-column
                      label="模型名称"
                      prop="modelName"
                      width="200"
                      show-overflow-tooltip
                  />
                  <el-table-column
                      label="下发时间"
                      prop="distributionTime"
                      width="200"
                  />
                  <el-table-column
                      label="问题条数"
                      prop="size"
                      align="center"
                  />
                  <el-table-column
                      label="办结数量"
                      align="center"
                      prop="completedSize"
                  />
                  <el-table-column
                      label="查实数量"
                      align="center"
                      prop="verifySize"
                  />
                  <el-table-column
                      label="涉及单位数"
                      align="center"
                      prop="departSize"
                      width="130"
                  />
                  <el-table-column
                      label="涉及人数"
                      align="center"
                      prop="personalSize"
                  />
                  <el-table-column label="操作" width="200">
                    <template #default="{ row }">
                      <el-button
                          type="primary"
                          link
                          @click="handleModelTaskStatisticsShow(row.id)"
                      >任务统计</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="flex end mt-8">
                <el-pagination
                    @size-change="getModelTaskList"
                    @current-change="getModelTaskList"
                    :page-sizes="[10, 20, 50, 100]"
                    v-model:page-size="modelTaskQuery.size"
                    v-model:current-page="modelTaskQuery.current"
                    layout="total, sizes, prev, pager, next"
                    :total="modelTaskTotal"
                    v-if="modelTaskList.length"
                >
                </el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>

      <!-- 人工核验 -->
      <el-tab-pane label="人工核验" name="modelClueManual">
        <div class="h100">
          <el-row :gutter="20" class="h100">
            <el-col :span="6">
              <model-tree v-model="modelClueManualQueryUndistributed.modelIds" />
            </el-col>
            <el-col :span="18">
              <!-- 查询表单 -->
              <header>
                <el-form :label-width="140">
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="预警时间">
                        <date-time-range-picker-ext
                            v-model="currentManualQuery.createTime"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="涉及单位">
                        <depart-tree-select
                            v-model="currentManualQuery.involveDepartId"
                            :check-strictly="false"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="预警内容">
                        <el-input
                            placeholder="请输入"
                            v-model="currentManualQuery.thingDesc"
                            clearable
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
                <!-- 按钮行 -->
                <div class="flex between mb-20">
                  <div class="flex gap" v-if="modelClueManualInnerTab === 'undistributed'">
                    <el-button type="primary" @click="handleBathJoin">
                      <template #icon>
                        <icon name="el-icon-Plus" />
                      </template>
                      批量加入</el-button>
                    <el-badge :value="manualList.length">
                      <el-button
                          type="primary"
                          :disabled="manualList.length === 0"
                          @click="manualShow = true"
                      >分发列表</el-button>
                    </el-badge>
                  </div>
                  <div v-else></div>
                  <div>
                    <el-button type="primary" @click="currentGetListFunc()">
                      <template #icon>
                        <icon name="el-icon-Search" />
                      </template>
                      查询</el-button>
                    <el-button @click="currentResetFunc()">重置</el-button>
                  </div>
                </div>
              </header>

              <!-- 子tab -->
              <el-tabs v-model="modelClueManualInnerTab" class="mb-20">
                <el-tab-pane label="未分发" name="undistributed" />
                <el-tab-pane label="已分发" name="distributed" />
                <el-tab-pane label="已处置" name="disposed" />
                <el-tab-pane label="查否" name="untrue" />
              </el-tabs>

              <!-- 共享表格 -->
              <div class="table-container" v-loading="modelClueManualLoading">
                <el-table :data="currentManualTableData" :ref="(el) => { tableRefs[modelClueManualInnerTab] = el }" max-height="500">
                  <!-- 未分发：带选择列 -->
                  <el-table-column type="selection" width="55" v-if="modelClueManualInnerTab === 'undistributed'" />
                  <el-table-column label="预警时间" prop="createTime" width="150" />
                  <el-table-column label="预警模型" prop="modelName" width="180" show-overflow-tooltip />
                  <el-table-column label="涉及单位" show-overflow-tooltip width="200">
                    <template #default="{ row }">
                      <span>{{ row.involveParentDepartName }}</span>
                      <span>{{ row.involveDepartName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="涉及人员" prop="involvePoliceName" width="120">
                    <template #default="{ row }">
                      <div v-if="row.involvePoliceName">
                        <div v-for="item in row.involvePoliceName.split(' ')" class="text-nowrap">{{ item }}</div>
                      </div>
                      <div v-else>略</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="预警内容" prop="thingDesc" show-overflow-tooltip />
                  <el-table-column label="分发状态" align="center" width="130">
                    <template #default="{ row }">
                      <el-tag v-if="row.distributionState === '0'" type="info">未分发</el-tag>
                      <el-tag v-if="row.distributionState === '1'" type="success">已分发<span v-if="row.processingStatus">({{ getDictLable(dict.processingStatus, row.processingStatus) }})</span></el-tag>
                      <el-tag v-if="row.distributionState === '2'">已处置</el-tag>
                      <el-tag v-if="row.distributionState === '3'" type="danger">查否</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="260">
                    <template #default="{ row }">
                      <template v-if="modelClueManualInnerTab === 'undistributed'">
                        <el-button type="primary" link @click="handleAddManuel(row)"
                          v-if="manualList.filter((item) => item.id === row.id).length === 0">加入分发列表</el-button>
                        <el-button link type="info" @click="handleRemoveManuel(row)" v-else>从分发列表移除</el-button>
                        <el-button type="warning" link @click="handleCheckUntrue(row)">查否</el-button>
                      </template>
                      <template v-else-if="modelClueManualInnerTab === 'untrue'">
                        <el-button type="primary" link @click="handleModelClueShowDetail(row)">查看详情</el-button>
                        <el-button type="success" link @click="handleRecover(row)">恢复</el-button>
                      </template>
                      <template v-else>
                        <el-button type="primary" link @click="handleModelClueShowDetail(row)">查看详情</el-button>
                        <el-button type="primary" link v-if="modelClueManualInnerTab === 'disposed' || row.negativeId" @click="handleModelClueAction(row)">处理详情</el-button>
                        <el-button type="primary" link v-if="row.notificationId" @click="handleModelClueClue(row)">查看提醒</el-button>
                      </template>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="flex end mt-8">
                <el-pagination
                    @size-change="currentGetListFunc()"
                    @current-change="currentGetListFunc()"
                    :page-sizes="[10, 20, 50, 100]"
                    v-model:page-size="currentManualQuery.size"
                    v-model:current-page="currentManualQuery.current"
                    layout="total, sizes, prev, pager, next"
                    :total="currentManualTotal"
                />
              </div>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 模型预警问题 - 详情弹窗 -->
    <el-dialog title="预警线索数据详情" v-model="modelClueShow" width="50vw">
      <div class="dialog-container">
        <div class="row mt-10">
          <div class="col col-12">
            <label>预警时间</label>
            <span>{{ activeModelClue.createTime }}</span>
          </div>
          <div class="col col-12">
            <label>预警模型</label>
            <span>{{ activeModelClue.modelName }}</span>
          </div>
          <div class="col col-12">
            <label>涉及单位</label>
            <span>
                            <span>{{
                                activeModelClue.involveParentDepartName
                              }}</span
                            ><span>{{
                activeModelClue.involveDepartName
                    ? "/" + activeModelClue.involveDepartName
                    : ""
              }}</span>
                        </span>
          </div>
          <div class="col col-6">
            <label>涉及人员</label>
            <span>{{ activeModelClue.involvePoliceName }}</span>
          </div>
          <div class="col col-12">
            <label>分发状态</label>
            <span>{{
                getDictLable(
                    dict.distributionState,
                    activeModelClue.distributionState
                )
              }}</span>
          </div>
        </div>
        <div class="row mt-10" style="margin-bottom: 60px">
          <div class="col col-24">
            <label>预警内容</label>
            <span>{{ activeModelClue.thingDesc }}</span>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 模型预警问题 - 提醒详情弹窗 -->
    <el-dialog title="查看详情" v-model="modelClueDialogShow" width="800">
      <el-form :model="modelClueShowData" :label-width="120" ref="fomrRef">
        <el-row>
          <el-col :span="12">
            <el-form-item label="提醒类型">
              <div>{{ modelClueShowData.alarmType }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="提醒时间">
              <el-text>{{ modelClueShowData.alarmTime }}</el-text>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 5px">
          <el-col :span="12">
            <el-form-item label="被通知单位">
              <el-text>{{ modelClueShowData.notificationDepartName }}</el-text>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="modelClueShowData.policeName != undefined">
            <el-form-item label="被通知民警">
              <el-text>{{ modelClueShowData.policeName }}</el-text>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 5px">
          <el-form-item label="提醒内容">
            <el-text style="width: 588px">{{
                modelClueShowData.alarmContent
              }}</el-text>
          </el-form-item>
        </el-row>
        <el-row style="margin-top: 5px" v-if="modelClueShowData.replyState == 1">
          <el-form-item label="回复内容">
            <el-text style="width: 588px">{{
                modelClueShowData.replyResultContent
              }}</el-text>
          </el-form-item>
        </el-row>
        <el-row
            style="margin-top: 10px"
            v-if="modelClueShowData.files != undefined && modelClueShowData.files.length > 0"
        >
          <el-form-item label="问题附件">
            <div
                v-for="(item, index) in modelClueShowData.files"
                :key="index"
                style="margin-top: 10px"
            >
              <el-image
                  :preview-src-list="modelCluePreviewList"
                  style="
                                    width: 100px;
                                    height: 100px;
                                    margin-right: 8px;
                                "
                  :initial-index="index"
                  :src="item.path"
                  fit="cover"
                  :hide-on-click-modal="true"
                  :lazy="true"
                  :z-index="index"
              />
            </div>
          </el-form-item>
        </el-row>
      </el-form>
      <footer class="flex end">
        <el-button @click="modelClueDialogShow = false">关闭</el-button>
      </footer>
    </el-dialog>

    <!-- 模型预警问题 - 处理详情弹窗 -->
    <negative-dialog
        v-model="modelClueNegativeShow"
        :id="modelClueActiveNegativeId"
        @close="modelClueNegativeShow = false"
    />

    <!-- 任务分发 - 任务统计弹窗 -->
    <el-dialog title="任务统计" v-model="modelTaskStatisticsShow" width="80vw">
      <div style="min-height: 500px">
        <div class="table-container">
          <el-table :data="modelTaskDepartList">
            <el-table-column
                label="单位名称"
                prop="departName"
                width="200"
                show-overflow-tooltip
            />
            <el-table-column
                label="问题数量"
                prop="size"
                width="200"
                show-overflow-tooltip
            />
            <el-table-column
                label="办结数量"
                prop="completedSize"
                width="200"
            />
            <el-table-column
                label="办结率"
                align="center"
                prop="completedSize"
            />
            <el-table-column
                label="查实数量"
                align="center"
                prop="verifySize"
            />
            <el-table-column
                label="涉及人数"
                align="center"
                prop="personalSize"
            />
          </el-table>
        </div>
      </div>
    </el-dialog>

    <!-- 人工核验 - 分发列表弹窗 -->
    <el-dialog title="问题分发" v-model="manualShow" width="80vw" top="5vh" style="margin-bottom: 0">
      <header>
        <el-form :label-width="140">
          <el-row>
            <el-col :span="8">
              <el-form-item label="模型">
                <el-select v-model="manualQuery.modelId" clearable>
                  <el-option
                      v-for="item in modelOptions"
                      :key="item.value"
                      :value="item.value"
                      :label="item.label"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="涉及单位">
                <depart-tree-select
                    v-model="manualQuery.involveDepartId"
                    :check-strictly="false"

                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="预警内容">
                <el-input
                    placeholder="请输入"
                    v-model="manualQuery.thingDesc"
                    clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="flex v-center end mb-20">
                    <span class="mr-20"
                    >共
                        <span class="text-primary">{{
                            filterManualList.length
                          }}</span>
                        条预警线索</span
                    >

          <el-button @click="manualReset">重置</el-button>
        </div>
      </header>
      <div style="min-height: 500px">
        <div class="table-container">
          <el-table :data="filterManualList" max-height="580">
            <el-table-column type="index" width="50" />
            <el-table-column
                label="预警时间"
                prop="createTime"
                width="160"
            />
            <el-table-column
                label="预警模型"
                prop="modelName"
                width="120"
                show-overflow-tooltip
            />
            <el-table-column
                label="涉及单位"
                show-overflow-tooltip
                width="200"
            >
              <template #default="{ row }">
                <span>{{ row.involveParentDepartName }}</span>
                <span>{{ row.involveDepartName }}</span>
              </template>
            </el-table-column>
            <el-table-column
                label="涉及人员"
                prop="involvePoliceName"
                width="120"
            >
              <template #default="{ row }">
                <div v-if="row.involvePoliceName">
                  <div
                      v-for="item in row.involvePoliceName.split(
                                                ' '
                                            )"
                      class="text-nowrap"
                  >
                    {{ item }}
                  </div>
                </div>
                <div v-else>略</div>
              </template>
            </el-table-column>
            <el-table-column
                label="预警内容"
                prop="thingDesc"
                show-overflow-tooltip
            />
            <el-table-column label="操作" width="140">
              <template #default="{ row }">
                <el-button
                    type="info"
                    link
                    @click="handleRemoveManuel(row)"
                >移除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <footer class="flex end mt-20">
        <el-button
            type="primary"
            size="large"
            @click="handleShowDistributeDialog"
            :disabled="manualList.length === 0"
        >确认预警线索</el-button
        >
      </footer>
    </el-dialog>

    <!-- 人工核验 - 任务分发弹窗 -->
    <el-dialog title="任务分发" v-model="distributeShow" width="50vw" top="2vh" style="margin-bottom: 0">
      <el-form :label-width="120" ref="formRef" :model="form" v-loading="submitLoading">
        <el-form-item
            label="任务名称"
            prop="taskName"
            :rules="{
                        required: true,
                        message: '请输入任务名称',
                    }"
        >
          <el-input
              v-model="form.taskName"
              style="width: 280px"
              placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="指定办理单位" prop="handleDepartId">
          <div class="flex gap">
            <div style="width: 280px">
              <depart-tree-select v-model="form.handleDepartId" />
            </div>
            <div class="tips mt-10">
              <p>指定具体办理单位 指将问题分派给哪个单位办理。</p>
            </div>
          </div>
        </el-form-item>
        <el-form-item
            label="业务类别"
            prop="businessTypeCode"
            :rules="{
                        required: true,
                        message: '请选择业务类别',
                        trigger: ['blur'],
                    }"
        >
          <el-select v-model="form.businessTypeCode" style="width: 280px">
            <el-option
                v-for="item in dict.businessType"
                :key="item.id"
                :label="item.dictLabel"
                :value="item.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item
            label="涉嫌问题"
            prop="involveProblem"
            :rules="{
                        required: true,
                        message: '请选择涉嫌问题',
                        trigger: ['blur'],
                    }"
        >
          <el-select
              v-model="form.involveProblem"
              multiple
              clearable
              style="width: 280px"
          >
            <el-option
                v-for="item in dict.suspectProblem"
                :key="item.id"
                :label="item.dictLabel"
                :value="item.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="涉及警种" prop="policeType">
          <el-select
              v-model="form.policeType"
              clearable
              style="width: 280px"
          >
            <el-option
                v-for="item in dict.policeType"
                :key="item.id"
                :label="item.dictLabel"
                :value="item.dictValue"
            />
          </el-select>
        </el-form-item>
        <div class="flex center mb-12">
          <el-button
              @click="handleAddProblem()"
              plain
              type="primary"
              size="small"
          >
            <template #icon>
              <icon name="el-icon-Plus" />
            </template>
            添加问题
          </el-button>
        </div>
        <el-form-item
            label="问题类型"
            prop=""
            v-for="(item, index) in form.problems"
            :key="index"
        >
          <div class="flex v-center">
            <problem-type-select v-model="item.threeLevelCode" />
            <el-button
                plain
                type="danger"
                size="small"
                class="ml-20"
                @click="handleRemoveProblem(index)"
            >
              <template #icon>
                <icon name="el-icon-Delete" />
              </template>
              删除问题
            </el-button>
          </div>
        </el-form-item>
        <el-form-item
            label="办理时限"
            prop="timeLimit"
            :rules="{
                        required: true,
                        message: '请选择办理时限',
                    }"
        >
          <time-limit-select
              v-model="form.timeLimit"
              v-model:maxSignDuration="form.maxSignDuration"
              v-model:maxHandleDuration="form.maxHandleDuration"
              v-model:maxExtensionDuration="form.maxExtensionDuration"
          />
        </el-form-item>

        <el-form-item
            label="下发流程"
            prop="distributionFlow"
            :rules="{
                        required: true,
                        message: '请选择下发流程',
                    }"
        >
          <el-radio-group v-model="form.distributionFlow" class="block">
            <el-radio
                v-for="item in dict.distributionFlow"
                :key="item.dictCode"
                :value="item.dictValue"
            >{{ item.dictLabel
              }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item
            label="审核流程"
            prop="approvalFlow"
            :rules="{
                        required: true,
                        message: '请选择审核流程',
                    }"
        >
          <el-radio-group v-model="form.approvalFlow">
            <el-radio
                v-for="item in dict.approvalFlow"
                :key="item.dictCode"
                :value="item.dictValue"
            >{{ item.dictLabel
              }}{{ item.remark ? `(${item.remark})` : "" }}</el-radio
            >
          </el-radio-group>
          <div class="tips mt-10">
            <p>
              三级审核　在问题提交办结时，需经过"所队—>二级机构—>市局"三级审核，通过后方可办结；
            </p>
            <p>
              二级审核　在问题提交办结时，仅需经过"所队—>二级机构"两级审核，通过后即可办结；
            </p>
          </div>
        </el-form-item>
        <el-form-item label="附件说明" prop="thingFiles">
          <file-upload v-model:files="form.thingFiles" />
        </el-form-item>
      </el-form>
      <footer class="flex end mt-20">
        <el-button
            type="primary"
            size="large"
            @click="handleSubmitManuelModelClueTask"
            v-loading="submitLoading"
        >确认下发</el-button
        >
      </footer>
    </el-dialog>

    <!-- 人工核验 - 配置涉及单位弹窗 -->
    <el-dialog title="配置涉及单位" v-model="editDepartShow" width="500">
      <el-form
          :label-width="120"
          :model="editDepartForm"
          ref="editDepartFormRef"
      >
        <el-form-item
            label="涉及单位"
            :rules="{
                        required: true,
                        message: '请选择涉及单位',
                    }"
        >
          <depart-tree-select
              v-model="editDepartForm.departId"
              @node-click="
                            (node) => (editDepartForm.name = node.shortName)
                        "
          />
        </el-form-item>
      </el-form>
      <footer class="flex end mt-40">
        <el-button @click="editDepartShow = false">取消</el-button>
        <el-button type="primary" @click="handleUpdatDepartModelClue"
        >确认</el-button
        >
      </footer>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed, onMounted } from "vue";
import { useRoute } from "vue-router";
import { listModelClue } from "@/api/sensitivePerception/modelClue";
import { alarmDetails } from "@/api/work/alarm";
import { listModelClueTask, listModelClueByDepart, listModelClues } from "@/api/sensitivePerception/modelClueTask";
import { DistributionMethod } from "@/enums/dictEnums";
import { manuelModelClueTask, updateDepartModelClue, checkUntrueModelClue } from "@/api/sensitivePerception/modelClue";
import useCatchStore from "@/stores/modules/catch";
import { getDictLable } from "@/utils/util";
import feedback from "@/utils/feedback";

const catchStore = useCatchStore();
const dict = catchStore.getDicts(["distributionState", "handleState", "processingStatus", "timeLimit", "approvalFlow", "distributionFlow", "businessType", "suspectProblem", "policeType"]);

// 标签页状态
const activeTab = ref('modelClue');

// 模型预警问题相关
const modelClueQuery = ref({});
const modelClueList = ref([]);
const modelClueTotal = ref(0);
const modelClueLoading = ref(false);
const modelClueShow = ref(false);
const activeModelClue = ref({});
const modelClueDialogShow = ref(false);
let modelClueShowData = ref({});
let modelCluePreviewList = ref([]);
const modelClueNegativeShow = ref(false);
const modelClueActiveNegativeId = ref("");

// 任务分发相关
const modelTaskQuery = ref({});
const modelTaskList = ref([]);
const modelTaskTotal = ref(0);
const modelTaskStatisticsShow = ref(false);
const modelTaskDepartList = ref([]);

// 人工核验相关
const modelClueManualQuery = ref({
  distributionMethod: DistributionMethod.MANUALLY_DISTRIBUTE,
  distributionState: "0",
});

// 人工核验 - 按分发状态分组查询参数
const modelClueManualQueryUndistributed = ref({
  distributionMethod: DistributionMethod.MANUALLY_DISTRIBUTE,
  distributionState: "0",
  current: 1,
  size: 10
});

const modelClueManualQueryDistributed = ref({
  distributionMethod: DistributionMethod.MANUALLY_DISTRIBUTE,
  distributionState: "1",
  current: 1,
  size: 10
});

const modelClueManualQueryDisposed = ref({
  distributionMethod: DistributionMethod.MANUALLY_DISTRIBUTE,
  distributionState: "2",
  current: 1,
  size: 10
});

const modelClueManualQueryUntrue = ref({
  distributionMethod: DistributionMethod.MANUALLY_DISTRIBUTE,
  distributionState: "3",
  current: 1,
  size: 10
});

// 人工核验 - 按分发状态分组数据
const modelClueManualListUndistributed = ref([]);
const modelClueManualTotalUndistributed = ref(0);
const modelClueManualListDistributed = ref([]);
const modelClueManualTotalDistributed = ref(0);
const modelClueManualListDisposed = ref([]);
const modelClueManualTotalDisposed = ref(0);
const modelClueManualListUntrue = ref([]);
const modelClueManualTotalUntrue = ref(0);

// 人工核验 - 内部 tab 切换
const modelClueManualInnerTab = ref('undistributed');

// 人工核验 - 当前激活tab的数据
const currentManualTableData = computed(() => {
  switch (modelClueManualInnerTab.value) {
    case 'undistributed': return modelClueManualListUndistributed.value;
    case 'distributed': return modelClueManualListDistributed.value;
    case 'disposed': return modelClueManualListDisposed.value;
    case 'untrue': return modelClueManualListUntrue.value;
    default: return modelClueManualListUndistributed.value;
  }
});

const currentManualQuery = computed(() => {
  switch (modelClueManualInnerTab.value) {
    case 'undistributed': return modelClueManualQueryUndistributed.value;
    case 'distributed': return modelClueManualQueryDistributed.value;
    case 'disposed': return modelClueManualQueryDisposed.value;
    case 'untrue': return modelClueManualQueryUntrue.value;
    default: return modelClueManualQueryUndistributed.value;
  }
});

const currentManualTotal = computed(() => {
  switch (modelClueManualInnerTab.value) {
    case 'undistributed': return modelClueManualTotalUndistributed.value;
    case 'distributed': return modelClueManualTotalDistributed.value;
    case 'disposed': return modelClueManualTotalDisposed.value;
    case 'untrue': return modelClueManualTotalUntrue.value;
    default: return modelClueManualTotalUndistributed.value;
  }
});

const currentGetListFunc = computed(() => {
  switch (modelClueManualInnerTab.value) {
    case 'undistributed': return getModelClueManualListUndistributed;
    case 'distributed': return getModelClueManualListDistributed;
    case 'disposed': return getModelClueManualListDisposed;
    case 'untrue': return getModelClueManualListUntrue;
    default: return getModelClueManualListUndistributed;
  }
});

const currentResetFunc = computed(() => {
  switch (modelClueManualInnerTab.value) {
    case 'undistributed': return resetModelClueManualUndistributed;
    case 'distributed': return resetModelClueManualDistributed;
    case 'disposed': return resetModelClueManualDisposed;
    case 'untrue': return resetModelClueManualUntrue;
    default: return resetModelClueManualUndistributed;
  }
});

// 人工核验 - 批量选择列表
const modelClueManualList = ref([]);
const modelClueManualTotal = ref(0);
const modelClueManualLoading = ref(false);
// 人工核验 - 批量选择列表
const manualList = ref([]);
const manualShow = ref(false);
const manualQuery = ref({});
const distributeShow = ref(false);
const form = ref({
  modelClues: [],
  thingFiles: [],
  problems: []
});
// 表格 refs 对象
const tableRefs = ref({
  undistributed: null,
  distributed: null,
  disposed: null,
  untrue: null
});
const formRef = ref(null);
const submitLoading = ref(false);
const editDepartShow = ref(false);
const editDepartForm = ref({});
const editDepartFormRef = ref();
let activeModelClueId = 0;

// 路由和生命周期
const route = useRoute();
onMounted(() => {
  if (route.query.modelId) {
    modelClueQuery.value.modelIds = [route.query.modelId];
    modelTaskQuery.value.modelIds = [route.query.modelId];
    modelClueManualQueryUndistributed.value.modelIds = [route.query.modelId];
    modelClueManualQueryDistributed.value.modelIds = [route.query.modelId];
    modelClueManualQueryDisposed.value.modelIds = [route.query.modelId];
    modelClueManualQueryUntrue.value.modelIds = [route.query.modelId];
  }
  getModelClueList();
  getModelTaskList();
  getModelClueManualListUndistributed();
  getModelClueManualListDistributed();
  getModelClueManualListDisposed();
  getModelClueManualListUntrue();
});

// 模型预警问题相关方法
function getModelClueList() {
  modelClueLoading.value = true
  listModelClue(modelClueQuery.value).then((data) => {
    modelClueList.value = data.records;
    modelClueTotal.value = data.total;
    modelClueLoading.value = false
    console.log('length:', modelClueList.value.length, 'total:', modelClueTotal.value);
  });
}

function resetModelClue() {
  modelClueQuery.value = {
    current: 1,
    size: 9
  };
  getModelClueList();
}

function handleModelClueShowDetail(row) {
  activeModelClue.value = row;
  modelClueShow.value = true;
}

function handleModelClueAction(row) {
  modelClueNegativeShow.value = true;
  modelClueActiveNegativeId.value = row.negativeId;
}

const handleModelClueClue = (row) => {
  alarmDetails(row.notificationId).then((res) => {
    modelClueShowData.value = res;
    let arr = [];
    if (res.files != undefined) {
      res.files.forEach((item) => {
        arr.push(item.path);
      });
    }
    modelCluePreviewList.value = arr;
    modelClueDialogShow.value = true;
  });
};

// 任务分发相关方法
function getModelTaskList() {
  listModelClueTask(modelTaskQuery.value).then((data) => {
    modelTaskList.value = data.records;
    modelTaskTotal.value = data.total;
  });
}

function resetModelTask() {
  modelTaskQuery.value = {};
  getModelTaskList();
}

async function handleModelTaskStatisticsShow(id) {
  const data = await listModelClueByDepart(id)
  modelTaskDepartList.value = data;
  modelTaskStatisticsShow.value = true;
}

// 人工核验相关方法 - 未分发
function getModelClueManualListUndistributed() {
  modelClueManualLoading.value = true
  listModelClue(modelClueManualQueryUndistributed.value).then((data) => {
    modelClueManualListUndistributed.value = data.records;
    modelClueManualTotalUndistributed.value = data.total;
    modelClueManualLoading.value = false
  });
}

function resetModelClueManualUndistributed() {
  modelClueManualQueryUndistributed.value = {
    distributionMethod: DistributionMethod.MANUALLY_DISTRIBUTE,
    distributionState: "0",
    current: 1,
    size: 10
  };
  getModelClueManualListUndistributed();
}

// 人工核验相关方法 - 已分发
function getModelClueManualListDistributed() {
  modelClueManualLoading.value = true
  listModelClue(modelClueManualQueryDistributed.value).then((data) => {
    modelClueManualListDistributed.value = data.records;
    modelClueManualTotalDistributed.value = data.total;
    modelClueManualLoading.value = false
  });
}

function resetModelClueManualDistributed() {
  modelClueManualQueryDistributed.value = {
    distributionMethod: DistributionMethod.MANUALLY_DISTRIBUTE,
    distributionState: "1",
    current: 1,
    size: 10
  };
  getModelClueManualListDistributed();
}

// 人工核验相关方法 - 已处置
function getModelClueManualListDisposed() {
  modelClueManualLoading.value = true
  listModelClue(modelClueManualQueryDisposed.value).then((data) => {
    modelClueManualListDisposed.value = data.records;
    modelClueManualTotalDisposed.value = data.total;
    modelClueManualLoading.value = false
  });
}

function resetModelClueManualDisposed() {
  modelClueManualQueryDisposed.value = {
    distributionMethod: DistributionMethod.MANUALLY_DISTRIBUTE,
    distributionState: "2",
    current: 1,
    size: 10
  };
  getModelClueManualListDisposed();
}

// 人工核验相关方法 - 查否
function getModelClueManualListUntrue() {
  modelClueManualLoading.value = true
  listModelClue(modelClueManualQueryUntrue.value).then((data) => {
    modelClueManualListUntrue.value = data.records;
    modelClueManualTotalUntrue.value = data.total;
    modelClueManualLoading.value = false
  });
}

function resetModelClueManualUntrue() {
  modelClueManualQueryUntrue.value = {
    distributionMethod: DistributionMethod.MANUALLY_DISTRIBUTE,
    distributionState: "3",
    current: 1,
    size: 10
  };
  getModelClueManualListUntrue();
}

// 查否处理
async function handleCheckUntrue(row) {
  await checkUntrueModelClue(row.id, "3");
  feedback.msgSuccess("查否成功");
  getModelClueManualListUndistributed();
  getModelClueManualListUntrue();
}

// 恢复处理
async function handleRecover(row) {
  await checkUntrueModelClue(row.id, "0");
  feedback.msgSuccess("恢复成功");
  getModelClueManualListUntrue();
  getModelClueManualListUndistributed();
}

async function handleAddManuel(row) {
  if (!row.involveDepartId) {
    activeModelClueId = row.id;
    await feedback.confirm(
        `该数据的"涉及单位"为空，请先配置"涉及单位"再下发`,
        "去配置"
    );
    editDepartShow.value = true;
    return;
  }
  manualList.value.push(row);
}

function handleRemoveManuel(row) {
  manualList.value.splice(manualList.value.indexOf(row), 1);
}

const filterManualList = computed(() => {
  let arr = manualList.value;
  if (manualQuery.value.modelId) {
    arr = arr.filter((item) => item.modelId === manualQuery.value.modelId);
  }
  if (manualQuery.value.involveDepartId) {
    arr = arr.filter(
        (item) => item.involveDepartId === manualQuery.value.involveDepartId
    );
  }
  if (manualQuery.value.thingDesc) {
    arr = arr.filter((item) =>
        item.thingDesc.includes(manualQuery.value.thingDesc)
    );
  }
  return arr;
});

const modelOptions = computed(() => {
  const items = manualList.value.map((item) => {
    return {
      value: item.modelId,
      label: item.modelName,
    };
  });
  const uniqueItems = [
    ...new Map(items.map((item) => [item.value, item])).values(),
  ];
  return uniqueItems;
});

function manualReset() {
  manualQuery.value = {};
}

function handleShowDistributeDialog() {
  if (new Set(filterManualList.value.map((item) => item.modelId)).size > 1) {
    feedback.msgWarning("线索数据包含两个模型，请筛选单个模型再下发");
    return;
  }
  distributeShow.value = true;
  form.value.taskName = filterManualList.value[0].modelName
}

function handleAddProblem() {
  form.value.problems.push({})
}

function handleRemoveProblem(index) {
  form.value.problems.splice(index, 1)
}

async function handleSubmitManuelModelClueTask() {
  await formRef.value.validate();
  form.value.modelClues = filterManualList.value;
  submitLoading.value = true
  try {
    await manuelModelClueTask(form.value);
  } catch(e) {
    submitLoading.value = false
    return
  }
  submitLoading.value = false
  feedback.msgSuccess("下发成功");
  form.value = {
    modelClues: [],
    thingFiles: [],
    problems: []
  };
  distributeShow.value = false;
  manualShow.value = false;
  manualList.value = [];
  getModelClueManualListUndistributed();
  getModelClueManualListDistributed();
  getModelClueManualListDisposed();
  getModelClueManualListUntrue();
}

async function handleUpdatDepartModelClue() {
  await editDepartFormRef.value.validate();
  await updateDepartModelClue(activeModelClueId, editDepartForm.value);
  editDepartShow.value = false;
  editDepartForm.value = {};
  getModelClueManualListUndistributed();
  getModelClueManualListDistributed();
  getModelClueManualListDisposed();
  getModelClueManualListUntrue();
}

function handleBathJoin() {
  const tableRef = tableRefs.value[modelClueManualInnerTab.value];
  const rows = tableRef?.getSelectionRows() || [];
  rows.forEach((row) => {
    if (manualList.value.filter((item) => item.id === row.id).length === 0) {
      manualList.value.push(row);
    }
  });
}
</script>
<style lang="scss" scoped>
</style>