<template>
    <div class="container">
        <header class="mb-20">
            <el-form :label-width="114">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="任务名称">
                            <el-input
                                placeholder="请输入任务名称"
                                v-model="query.taskName"
                                clearable
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="数据来源">
                            <el-select v-model="query.source" clearable>
                                <el-option
                                    label="标准模板"
                                    value="标准模板"
                                ></el-option>
                                <el-option
                                    label="审计监督"
                                    value="审计监督"
                                ></el-option>
                                <el-option
                                    label="案件核查"
                                    value="案件核查"
                                ></el-option>
                                <el-option
                                    label="12337"
                                    value="12337"
                                ></el-option>
                            </el-select>
                        </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-row>
            </el-form>
            <div class="flex between">
                <div>
                    <el-button type="primary" @click="handleShowImport">
                        <template #icon>
                            <icon name="el-icon-Top" />
                        </template>
                        标准问题批量下发</el-button
                    >
                    <el-button type="primary" @click="handleShowAuditImport">
                        <template #icon>
                            <icon name="el-icon-Top" />
                        </template>
                        审计监督问题批量下发</el-button
                    >
                </div>
                <div>
                    <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>
        <div class="table-container">
            <el-table :data="list">
                <el-table-column label="任务名称" prop="taskName" />
                <el-table-column label="数据来源" prop="source" width="160" />
                <el-table-column label="下发时间" prop="crtTime" width="160" />
                <el-table-column
                    label="问题条数"
                    prop="importRow"
                    width="100"
                    align="center"
                />
                <!-- <el-table-column label="办结数量" prop="" width="100" align="center" />
                <el-table-column label="查实数量" prop="" width="100" align="center" />
                <el-table-column label="涉及单位数" prop="" width="100" align="center" />
                <el-table-column label="涉及人数" prop="" width="100" align="center" /> -->
                <el-table-column label="操作人" prop="crtUser" width="160" />
                <el-table-column label="操作" width="200">
                    <template #default="{ row }">
                        <el-button
                            type="primary"
                            link
                            @click="handleDetailShow(row.id)"
                            >查看详情</el-button
                        >
                        <el-button
                            type="primary"
                            link
                            v-if="row.source === '12337'"
                            @click="handleExport12337(row.id)"
                            >生成结果文件</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="flex between v-center mt-8">
            <div>
                说明：批量下发列表，展示问题导入标准模板及其他来源问题导入模板下发的任务情况。
            </div>
            <el-pagination
                @size-change="getList"
                @current-change="getList"
                :page-sizes="[10, 20, 50]"
                v-model:page-size="query.size"
                v-model:current-page="query.current"
                layout="total, sizes, prev, pager, next"
                :total="total"
            >
            </el-pagination>
        </div>
    </div>

    <el-dialog v-model="importShow" title="问题批量下发" width="80vw">
        <header class="flex center mb-40">
            <el-steps
                :space="200"
                :active="activeStep"
                finish-status="success"
                style="width: 800px"
            >
                <el-step title="数据导入" />
                <el-step title="数据校验" />
                <el-step title="问题下发" />
                <el-step title="完成下发" />
            </el-steps>
        </header>
        <div style="min-height: 50vh">
            <template v-if="activeStep === 0">
                <el-upload
                    drag
                    :multiple="false"
                    :auto-upload="false"
                    :show-file-list="false"
                    v-model:file-list="fileList"
                    accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                    class="mt-20"
                >
                    <template v-if="fileList.length === 0">
                        <el-icon class="el-icon--upload"
                            ><upload-filled
                        /></el-icon>
                        <div class="el-upload__text">
                            <p>点击选择文件或拖拽文件到此区域上传</p>
                        </div>
                    </template>
                    <template v-else>
                        <el-icon class="el-icon--upload"><Select /></el-icon>
                        <div class="el-upload__text">
                            已选择文件：{{ fileList[fileList.length - 1].name }}
                        </div>
                    </template>
                </el-upload>
                <div class="mt-20">
                    <span>文件模板</span>
                    <a
                        class="link"
                        :href="`${BASE_PATH}/templates/问题批量导入标准模板.xlsx`"
                        target="__blank"
                        >问题批量导入标准模板.xlsx 下载</a
                    >
                </div>
                <div class="mt-10">
                    说明：请上传“问题批量导入标准模板”，上传成功后点击“下一步”进行数据校验。
                </div>
            </template>
            <template v-if="activeStep === 1">
                <div class="table-container">
                    <el-table :data="importTableData">
                        <el-table-column
                            label="问题涉及单位"
                            prop="discoverTime"
                            width="180"
                        >
                          <template #header>
                            <el-tooltip content="点击单位格，重新选择单位">
                              <span>问题涉及单位<el-icon><QuestionFilled /></el-icon></span>
                            </el-tooltip>
                          </template>
                            <template #default="{ row ,$index}">
                                <depart-tree-select
                                    v-if="row.editMode"
                                    size="small"
                                    v-model="row.involveDepartId"
                                />

                              <div style="width: 100%"  v-else  @click="handleCellClick(row,$index)" >{{getDepartShortName(departs,row.involveDepartId)}}</div>
                            </template>
                        </el-table-column>
                      <el-table-column
                          label="通报期数"
                          prop="reportNumber"
                          width="110"
                      >
                        <template #default="{ row }">

                          <el-select    v-model="row.reportId"
                                      filterable
                                      remote
                                      clearable
                                      reserve-keyword
                                      @change="setReportNameFun(row)"
                                      placeholder="请选择通报期数"
                                      :remote-method="getReportListDataFun"
                                      :loading="reportLoading"
                          >
                            <el-option
                                v-for="(item,id) in reportList"
                                :key="item.id"
                                :value="item.id"
                                :label="item.reportName"
                            />
                          </el-select>


                        </template>
                      </el-table-column>
                        <el-table-column
                            label="案件/警情编号"
                            prop="caseNumber"
                            width="130"
                        />
                        <el-table-column
                            label="业务类别"
                            prop="businessTypeName"
                            width="110"
                        />
                        <el-table-column
                            label="涉嫌问题"
                            prop="involveProblemStr"
                            width="120"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            label="涉及警种"
                            prop="policeTypeName"
                            width="90"
                        />
                        <el-table-column
                            label="问题发现时间"
                            prop="discoveryTime"
                            width="160"
                        />
                        <el-table-column
                            label="具体问题内容"
                            prop="thingDesc"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            label="专项督察"
                            prop="specialSupervisionName"
                            width="110"
                        />

                        <el-table-column
                            label="问题发生时间"
                            prop="happenTime"
                            width="160"
                        />
                        <el-table-column
                            label="投诉人"
                            prop="responderName"
                            width="90"
                        />
                        <el-table-column
                            label="投诉人联系电话"
                            prop="contactPhone"
                            width="130"
                        />
                    </el-table>
                </div>
            </template>
            <template v-if="activeStep === 2">
                <el-form :model="formData" ref="formRef" style="margin: 0 80px">
                    <el-form-item
                        label="任务名称"
                        prop="taskName"
                        :rules="{
                            required: true,
                            message: '请输入任务名称',
                        }"
                    >
                        <el-input
                            v-model="formData.taskName"
                            style="width: 280px"
                            placeholder="请输入"
                        />
                    </el-form-item>
                    <el-form-item
                        label="办理时限"
                        prop="timeLimit"
                        :rules="{
                            required: true,
                            message: '请选择办理时限',
                        }"
                    >
                        <time-limit-select
                            v-model="formData.timeLimit"
                            v-model:maxSignDuration="formData.maxSignDuration"
                            v-model:maxHandleDuration="
                                formData.maxHandleDuration
                            "
                            v-model:maxExtensionDuration="
                                formData.maxExtensionDuration
                            "
                        />
                    </el-form-item>
                    <el-form-item
                        label="下发流程"
                        prop="distributionFlow"
                        :rules="{
                            required: true,
                            message: '请选择下发流程',
                        }"
                    >
                        <el-radio-group v-model="formData.distributionFlow">
                            <el-radio
                                v-for="item in dict.distributionFlow"
                                :key="item.dictCode"
                                :value="item.dictValue"
                                >{{ item.dictLabel
                                }}{{
                                    item.remark ? `(${item.remark})` : ""
                                }}</el-radio
                            >
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item
                        label="审核流程"
                        prop="approvalFlow"
                        :rules="{
                            required: true,
                            message: '请选择审核流程',
                        }"
                    >
                        <div>
                            <el-radio-group v-model="formData.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>
                        </div>
                    </el-form-item>
                    <el-form-item label="附件说明" prop="thingFiles">
                        <file-upload v-model:files="formData.thingFiles" />
                    </el-form-item>
                </el-form>
            </template>
            <template v-if="activeStep === 3">
                <el-result icon="success" title="下发成功">
                    <template #sub-title>
                        <p>
                            <span>{{ formData.taskName }}</span>
                            已成功导入系统，并完成下发。您可通过“<span
                                class="link pointer"
                                @click="router.push('/work/BatchDistribute')"
                                >批量下发</span
                            >
                            ”或“<span
                                class="link pointer"
                                @click="router.push('/query')"
                                >综合查询</span
                            >”功能进行查看。
                        </p>
                    </template>
                </el-result>
            </template>
        </div>
        <footer class="flex end mt-20 v-center">
            <el-button
                size="large"
                @click="handlePrev"
                v-if="activeStep !== 3 && activeStep !== 0"
                >上一步</el-button
            >
            <el-button
                type="primary"
                size="large"
                @click="handleNext"
                v-loading="loading"
                >{{ activeStep === 3 ? "确定" : "下一步" }}</el-button
            >
        </footer>
    </el-dialog>

    <Loading :loading="loading" :loadingText="loadingText" />

    <el-dialog title="查看详情" v-model="show" width="80vw">
        <div style="min-height: 500px">
            <div class="table-container">
                <el-table :data="taskDetailList">
                    <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 v-model="auditImportShow" title="审计监督问题批量下发" width="80vw">
        <header class="flex center mb-40">
            <el-steps
                :space="200"
                :active="activeStep"
                finish-status="success"
                style="width: 800px"
            >
                <el-step title="数据导入" />
                <el-step title="数据校验" />
                <el-step title="问题下发" />
                <el-step title="完成下发" />
            </el-steps>
        </header>
        <div style="min-height: 50vh">
            <template v-if="activeStep === 0">
                <el-upload
                    drag
                    :multiple="false"
                    :auto-upload="false"
                    :show-file-list="false"
                    v-model:file-list="fileList"
                    accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                    class="mt-20"
                >
                    <template v-if="fileList.length === 0">
                        <el-icon class="el-icon--upload"
                            ><upload-filled
                        /></el-icon>
                        <div class="el-upload__text">
                            <p>点击选择文件或拖拽文件到此区域上传</p>
                        </div>
                    </template>
                    <template v-else>
                        <el-icon class="el-icon--upload"><Select /></el-icon>
                        <div class="el-upload__text">
                            已选择文件：{{ fileList[fileList.length - 1].name }}
                        </div>
                    </template>
                </el-upload>
                <div class="mt-20">
                    <span>文件模板</span>
                    <a
                        class="link"
                        :href="`${BASE_PATH}/templates/审计监督问题批量导入模板.xlsx`"
                        target="__blank"
                        >审计监督问题批量导入模板.xlsx 下载</a
                    >
                </div>
                <div class="mt-10">
                    说明：请上传“审计监督问题批量导入模板”，上传成功后点击“下一步”进行数据校验。
                </div>
            </template>
            <template v-if="activeStep === 1">
                <div class="table-container">
                    <el-table :data="importTableData">
                        <el-table-column
                            label="问题涉及单位"
                            prop="discoverTime"
                            width="180"
                        >
                          <template #header>
                            <el-tooltip content="点击单位格，重新选择单位">
                              <span>问题涉及单位<el-icon><QuestionFilled /></el-icon></span>
                            </el-tooltip>
                          </template>
                          <template #default="{ row ,$index}">
                            <depart-tree-select
                                v-if="row.editMode"
                                size="small"
                                v-model="row.involveDepartId"
                            />
                            <div style="width: 100%"  v-else  @click="handleCellClick(row,$index)" >{{getDepartShortName(departs,row.involveDepartId)}}</div>
                          </template>
<!--                            <template #default="{ row }">-->
<!--                                <depart-tree-select-->
<!--                                    size="small"-->
<!--                                    v-model="row.involveDepartId"-->
<!--                                />-->
<!--                            </template>-->
                        </el-table-column>
                        <el-table-column
                            label="项目名称"
                            prop="projectName"
                            width="110"
                        />
                        <el-table-column
                            label="问题金额（元）"
                            prop="involveMoney"
                            width="90"
                        />
                        <el-table-column
                            label="案件名称"
                            prop="caseName"
                            width="130"
                        />
                        <el-table-column
                            label="案件/警情编号"
                            prop="caseNumber"
                            width="130"
                        />
                        <el-table-column
                            label="问题来源"
                            prop="problemSources"
                            width="110"
                        />
                        <el-table-column
                            label="业务类别"
                            prop="businessTypeName"
                            width="110"
                        />
                        <el-table-column
                            label="问题类型"
                            prop="problemsStr"
                            width="120"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            label="涉及警种"
                            prop="policeTypeName"
                            width="90"
                        />
                        <el-table-column
                            label="问题发现时间"
                            prop="discoveryTime"
                            width="160"
                        />
                        <el-table-column
                            label="具体问题内容"
                            prop="thingDesc"
                            show-overflow-tooltip
                        />
                    </el-table>
                </div>
            </template>
            <template v-if="activeStep === 2">
                <el-form :model="formData" ref="formRef" style="margin: 0 80px">
                    <el-form-item
                        label="任务名称"
                        prop="taskName"
                        :rules="{
                            required: true,
                            message: '请输入任务名称',
                        }"
                    >
                        <el-input
                            v-model="formData.taskName"
                            style="width: 280px"
                            placeholder="请输入"
                        />
                    </el-form-item>
                    <el-form-item
                        label="办理时限"
                        prop="timeLimit"
                        :rules="{
                            required: true,
                            message: '请选择办理时限',
                        }"
                    >
                        <time-limit-select
                            v-model="formData.timeLimit"
                            v-model:maxSignDuration="formData.maxSignDuration"
                            v-model:maxHandleDuration="
                                formData.maxHandleDuration
                            "
                            v-model:maxExtensionDuration="
                                formData.maxExtensionDuration
                            "
                        />
                    </el-form-item>
                    <el-form-item
                        label="下发流程"
                        prop="distributionFlow"
                        :rules="{
                            required: true,
                            message: '请选择下发流程',
                        }"
                    >
                        <el-radio-group v-model="formData.distributionFlow">
                            <el-radio
                                v-for="item in dict.distributionFlow"
                                :key="item.dictCode"
                                :value="item.dictValue"
                                >{{ item.dictLabel
                                }}{{
                                    item.remark ? `(${item.remark})` : ""
                                }}</el-radio
                            >
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item
                        label="审核流程"
                        prop="approvalFlow"
                        :rules="{
                            required: true,
                            message: '请选择审核流程',
                        }"
                    >
                        <div>
                            <el-radio-group v-model="formData.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>
                        </div>
                    </el-form-item>
                    <el-form-item label="附件说明" prop="thingFiles">
                        <file-upload v-model:files="formData.thingFiles" />
                    </el-form-item>
                </el-form>
            </template>
            <template v-if="activeStep === 3">
                <el-result icon="success" title="下发成功">
                    <template #sub-title>
                        <p>
                            <span>{{ formData.taskName }}</span>
                            已成功导入系统，并完成下发。您可通过“<span
                                class="link pointer"
                                @click="router.push('/work/BatchDistribute')"
                                >批量下发</span
                            >
                            ”或“<span
                                class="link pointer"
                                @click="router.push('/query')"
                                >综合查询</span
                            >”功能进行查看。
                        </p>
                    </template>
                </el-result>
            </template>
        </div>
        <footer class="flex end mt-20 v-center">
            <el-button
                size="large"
                @click="handlePrev"
                v-if="activeStep !== 3 && activeStep !== 0"
                >上一步</el-button
            >
            <el-button
                type="primary"
                size="large"
                @click="handleNext"
                v-loading="loading"
                >{{ activeStep === 3 ? "确定" : "下一步" }}</el-button
            >
        </footer>
    </el-dialog>

</template>
<script setup>
import {
    listNegativeTask,
    importNegative,
    distributeNegative,
    listGroupByDepart,
    importAuditNegative,
    distributeAuditNegative
} from "@/api/work/negativeTask";
import feedback from "@/utils/feedback";
import useCatchStore from "@/stores/modules/catch";
import { BASE_PATH } from "@/api/request";
import {getListData,getReportDetailFun} from "@/api/superviseReport/superviseReport";

const catchStore = useCatchStore();
const dict = catchStore.getDicts([
    "approvalFlow",
    "distributionFlow",
    "businessType",
]);

const router = useRouter();
const query = ref({
    size: 10,
    current: 1,
    category: "0",
});
const list = ref([]);
const total = ref(0);

function getList() {
    listNegativeTask(query.value).then((data) => {
        list.value = data.records;
        total.value = data.total;
    });
}

function reset() {
    query.value = {
        size: 10,
        current: 1,
        category: "0",
    };
    getList();
}

onMounted(() => {
    getList();


});

const activeStep = ref(0);

const importShow = ref(false);
const fileList = ref([]);
const loading = ref(false);
const loadingText = ref("");

const importTableData = ref([]);
const formData = ref({});
const formRef = ref();
const catchSotre = useCatchStore();
const departs = catchSotre.getDeparts();

function handleCellClick(row,index){
  importTableData.value.forEach((value,i)=>{
    if(i != index ){
      value.editMode=false
    }
  })
  row.editMode=true
}

function handleBlur(row){
  row.editMode=false
  console.log('row.editMode',row.editMode)
}


//获取单位为简称
function getDepartShortName(departData, id) {
  let name = null;
  if (departData) {

    for (let i = 0; i < departData.length; i++) {
      let s = departData[i];
      if (s.id === id) {
        name=  s.shortName;
        break;
      }
      if (s.children) {
        name = getDepartShortName(s.children, id)
        if(name != null){
          break;
        }
      }
    }
  }
  return name;

}


function handleShowImport() {
    importShow.value = true;
}

function handlePrev() {
    activeStep.value = activeStep.value - 1;
}
async function handleNext() {
    if (activeStep.value === 0) {
        if (fileList.value.length === 0) {
            return;
        }
        const formData = new FormData();
        formData.append("file", fileList.value[fileList.value.length - 1].raw);
        loading.value = true;
        loadingText.value = "数据校验中...";

        try {
            if (importShow.value) {
                importTableData.value = await importNegative(formData);
            } else {
                importTableData.value = await importAuditNegative(formData);
            }

        } catch (e) {
            loading.value = false;
            throw e;
        }
        loading.value = false;
        activeStep.value = 1;
        return;
    }
    if (activeStep.value === 1) {
        importTableData.value.forEach((item) => {
            if (!item.involveDepartId) {
                feedback.msgWarning("请选择问题涉及单位");
                throw e;
            }
        });
        activeStep.value = 2;
        formData.value.taskName =
            fileList.value[fileList.value.length - 1].name;
        return;
    }
    if (activeStep.value === 2) {
        await formRef.value.validate();
        loading.value = true;
        loadingText.value = "数据处理中，请稍后...";
        formData.value.data = importTableData.value;
        try {
            if (importShow.value) {
                await distributeNegative(formData.value);
            } else {
                await distributeAuditNegative(formData.value);
            }
        } catch (e) {
            loading.value = false;
            throw e;
        }
        activeStep.value = 3;
        loading.value = false;
        getList();
        return;
    }
    if (activeStep.value === 3) {
        importShow.value = false;
        auditImportShow.value = false
    }
}

watch(importShow, (val) => {
    if (val) {
        activeStep.value = 0;
        formData.value = {};
        importTableData.value = [];
        fileList.value = [];
    }
});

const auditImportShow = ref(false)
watch(auditImportShow, (val) => {
    if (val) {
        activeStep.value = 0;
        formData.value = {};
        importTableData.value = [];
        fileList.value = [];
    }
});


const reportQuery = ref({
  current: 1,
  size: 100,
  departBranch:false
})
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;
    reportLoading.value=false;
  }catch (e){
    reportLoading.value=false;
  }
}

const setReportNameFun = async(row)=>{
  let res =  await getReportDetailFun(row.reportId);
  row.reportNumber=res?.reportName;
}


function handleExport12337(id) {
    window.open(
        `${BASE_PATH}/data/petitionComplaint12337/export/result?taksId=${id}`
    );
}

const show = ref(false);
const taskDetailList = ref([]);

async function handleDetailShow(id) {
    const data = await listGroupByDepart(id);
    taskDetailList.value = data;
    show.value = true;
}


function handleShowAuditImport() {
    auditImportShow.value = true;
}
</script>
