<template>
    <div class="container">
        <header>
            <el-form :label-width="114">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="信件编号">
                            <el-input
                                placeholder="请输入"
                                v-model="query.originId"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="投诉人">
                            <div class="flex gap">
                                <el-select
                                    v-model="query.responderKey"
                                    style="width: 160px"
                                    @change="delete query.responderValue"
                                >
                                    <el-option value="name" label="姓名" />
                                    <el-option value="phone" label="电话" />
                                </el-select>
                                <el-input
                                    placeholder="请输入"
                                    v-model="query.responderValue"
                                    clearable
                                />
                            </div>
                        </el-form-item>
                    </el-col>
                    <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="具体内容">
                            <el-input
                                placeholder="请输入"
                                v-model="query.thingDesc"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="是否属实">
                            <el-select clearable v-model="query.checkStatus">
                                <el-option
                                    v-for="item in dict.inspectCase"
                                    :key="item.id"
                                    :label="item.dictLabel"
                                    :value="item.dictValue"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                  <el-col :span="6">
                    <el-form-item label="被投诉机构">
                      <depart-tree-select v-model="query.departId" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="状态">
                      <el-select
                          v-model="query.distributionState"
                          clearable
                      >
                        <el-option label="未分发" value="0"></el-option>
                        <el-option label="已分发" value="1"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
            </el-form>
            <div class="mb-25 flex between">
                <div>
                    <el-button type="primary" @click="importShow = true"
                        >数据导入
                    </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="onlyId"
                    show-overflow-tooltip
                    width="180"
                />
                <el-table-column
                    label="投诉渠道"
                    prop="letterSource"
                    width="120"
                />

                <el-table-column
                    label="登记时间"
                    prop="discoverTime"
                    width="150"
                />
                <el-table-column label="投诉人" prop="name" width="90" />
                <el-table-column label="电话" prop="phone" width="116" />

                <el-table-column label="被投诉机构" show-overflow-tooltip>
                    <template #default="{ row }">
                        <span>{{ row.secondDepartName }}</span>
                        <span>{{ row.thirdDepartName }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="具体内容"
                    prop="wjwfProject"
                    show-overflow-tooltip
                />
                <el-table-column label="是否属实" prop="isReal" width="100">
                    <template v-slot="scope">
                        <span v-if="scope.row.isReal === 1">属实</span>
                        <span v-else-if="scope.row.isReal === 2">部分属实</span>
                        <span v-else-if="scope.row.isReal === 3">不属实</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="120">
                    <template #default="{ row }">
                        <el-tag
                            >{{
                                getDictLable(
                                    dict.distributionState,
                                    row.distributionState
                                )
                            }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template #default="{ row }">
                        <el-button type="primary" link @click="handleAction(row)" v-if="row.distributionState === '1'">问题详情</el-button>
                        <el-button
                            type="primary"
                            link
                            @click="handleDetail(row)"
                            >详情</el-button
                        >
                        <el-button type="danger" link @click="handleDel(row)"
                            >删除
                        </el-button>
                    </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]"
                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="12337信访投诉导入"
        width="80vw"
        top="8vh"
    >
        <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">
                <div v-loading="loading">
                    <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-10">
                        说明：请上传12337信访投诉台账表格进行导入操作，上传成功后点击“下一步”进行数据核验。
                    </div>
                </div>
            </template>
            <template v-if="activeStep === 1">
                <div class="table-container">
                    <el-table :data="importTableData" max-height="500px">
                        <el-table-column width="180">
                            <template #header>
                                <span class="text-danger">核查办理单位*</span>
                            </template>
                            <template #default="{ row }">
                                <template v-if="row.departId">
                                    <span>{{ row.departName }}</span>
                                </template>
                                <depart-tree-select
                                    size="small"
                                    v-model="row.departId"
                                    v-else
                                />
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="核查单位"
                            prop="reviewOrg"
                            width="120"
                        />
                        <el-table-column
                            label="被举报单位名称"
                            prop="reportedOrgName"
                            width="170"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            label="信息受理登记时间"
                            prop="discoverTime"
                            width="170"
                        >
                            <template #header>
                                <span class="text-danger"
                                    >信息受理登记时间*</span
                                >
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="线索来源"
                            prop="letterSource"
                            width="86"
                        />
                        <el-table-column
                            label="举报人姓名"
                            prop="name"
                            width="80"
                        />
                        <el-table-column
                            label="手机号码"
                            prop="phone"
                            width="116"
                        />
                        <el-table-column
                            label="身份证号"
                            prop="idCode"
                            width="174"
                        />
                        <el-table-column
                            label="现住地详址"
                            prop="address"
                            width="80"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            prop="wjwfProject"
                            show-overflow-tooltip
                            width="250"
                        >
                            <template #header>
                                <span class="text-danger"
                                    >涉嫌违纪违法事项*</span
                                >
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="是否政法干警"
                            prop="isLawPolice"
                            width="70"
                        />
                        <el-table-column
                            label="单位所属层级"
                            prop="reportedOrgLevel"
                            width="80"
                        />
                        <el-table-column
                            label="涉嫌违纪问题项目"
                            prop="againstProProject"
                            width="140"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            label="涉嫌贪污贿赂类犯罪"
                            prop="corruptionGuilt"
                            width="140"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            label="涉嫌渎职类犯罪"
                            prop="omissionGuilt"
                            width="140"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            label="涉嫌侵犯公民人身权利类犯罪"
                            prop="invadeEntitlementGuilt"
                            width="140"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            label="涉嫌侵犯财产类犯罪"
                            prop="invadeFinanceGuilt"
                            width="140"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            label="其他"
                            prop="otherGuilt"
                            width="80"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            label="转办时间"
                            prop="passTime"
                            width="170"
                        />
                        <el-table-column
                            label="核查时间"
                            prop="reviewTime"
                            width="110"
                        />

                        <el-table-column
                            label="核查人"
                            prop="reviewPersonName"
                            width="90"
                        />
                        <el-table-column
                            label="核查人联系方式"
                            prop="reviewPersonPhone"
                            width="120"
                        />
                        <el-table-column
                            label="被核查人类别"
                            prop="reviewedPersonType"
                            width="120"
                        />
                        <el-table-column
                            label="被核查人是否属于领导班子成员"
                            prop="reviewedPersonIsleader"
                            width="130"
                        />

                        <el-table-column
                            label="办理结果"
                            prop="processResult"
                            width="130"
                        />
                        <el-table-column
                            label="是否办结"
                            prop="isOver"
                            width="60"
                        />
                        <el-table-column
                            label="是否申请异议"
                            prop="isDissent"
                            width="70"
                        />
                        <el-table-column
                            label="是否存在附件"
                            prop="isAnnex"
                            width="70"
                        />
                        <el-table-column
                            label="线索举报时间"
                            prop="reportTime"
                            width="180"
                        />
                    </el-table>
                </div>
                <div class="mt-10">
                    说明：数据校验展示信访投诉关键信息，标红内容为必填项！
                </div>
                <div class="text-danger text-wrap mt-10 text-small">
                    {{ errMsg }}
                </div>
            </template>
            <template v-if="activeStep === 2">
                <el-form
                    :model="formData"
                    ref="formRef"
                    style="margin: 0 80px"
                    v-loading="loading"
                >
                    <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="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)
                            "
                            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="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"
                :disabled="loading"
                >{{ activeStep === 3 ? "确定" : "下一步" }}</el-button
            >
        </footer>
    </el-dialog>

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

    <el-dialog title="详情" v-model="detailShow" width="60vw">
        <div style="min-height: 50vh">
            <div class="row" style="margin: 0 60px">
                <div class="col col-12">
                    <label>信件编号</label>
                    <span>{{ activeRow.onlyId }}</span>
                </div>
                <div class="col col-12">
                    <label>投诉渠道</label>
                    <span>{{
                        activeRow.letterSource || "/"
                    }}</span>
                </div>
                <div class="col col-12">
                    <label>登记时间</label>
                    <span>{{ activeRow.discoverTime }}</span>
                </div>
                <div class="col col-12">
                    <label>投诉人</label>
                    <span>{{ activeRow.name }}</span>
                </div>
                <div class="col col-12">
                    <label>投诉人联系方式</label>
                    <span>{{ activeRow.phone }}</span>
                </div>
                <div class="col col-12">
                    <label>被投诉机构</label>
                    <span
                        ><span>{{ activeRow.secondDepartName }}</span>
                        <span>{{ activeRow.thirdDepartName }}</span></span
                    >
                </div>
                <div class="col col-24">
                    <label>具体内容</label>
                    <span class="content">{{ activeRow.wjwfProject }}</span>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script setup>
import { delPetitionComplaint } from "@/api/data/petitionComplaint";
import { getIdByOriginId } from "@/api/work/negative";
import { ProblemSources, DistributionState } from "@/enums/dictEnums";
import feedback from "@/utils/feedback";

import { getDictLable ,getYearTime} from "@/utils/util";

import useCatchStore from "@/stores/modules/catch";
import {
    delPetitionComplaint12337,
    listPetitionComplaint12337,
    importPetitionComplaint12337,
    distributePetitionComplaint12337,
} from "@/api/data/petition12337.ts";

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

const route = useRoute();

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

const list = ref([]);
const total = ref(0);
//检测跳转来源界面是否为大屏
watch(()=>route.query.toString(),
    ()=>{
      if(route.query.open){
        query.value.createTime=getYearTime()
      }
      getList()
    },{immediate:true,deep:true})

function getList() {
    listPetitionComplaint12337(query.value).then((data) => {

        list.value = data.records;
        total.value = data.total;
    });
}

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

getList();

const show = ref(false);

// 删除操作
async function handleDel(row) {
    await feedback.confirm("确定要删除该数据？");
    await delPetitionComplaint12337(row.onlyId);
    getList();
}

const activeStep = ref(0);

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

const importTableData = ref([]);
const formData = ref({});
const formRef = ref();

function handlePrev() {
    activeStep.value = activeStep.value - 1;
}

const errMsg = ref("");
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;
        try {
            importTableData.value = await importPetitionComplaint12337(
                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.departId) {
                feedback.msgWarning("请选择办理单位");
                throw e;
            }
        });
        errMsg.value = "";
        const error = [];
        for (let i = 0; i < importTableData.value.length; i++) {
            const item = importTableData.value[i];
            let message = "";
            if (!item.departId) {
                message += "核查办理单位为空；";
            }
            if (!item.discoverTime) {
                message += "信息受理登记时间为空；";
            }
            if (!item.wjwfProject) {
                message += "涉嫌违纪违法事项为空；";
            }
            if (message) {
                error.push(`第${i + 1}条数据：` + message);
            }
        }
        if (error.length > 0) {
            feedback.msgWarning("数据不符合规范！");
            errMsg.value = error.join("\n");
            throw new Error("数据不符合规范！");
        }
        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;
        formData.value.data = importTableData.value;
        try {
            await distributePetitionComplaint12337(formData.value);
        } catch (e) {
            loading.value = false;
            throw e;
        }
        activeStep.value = 3;
        loading.value = false;
        getList();
        return;
    }
    if (activeStep.value === 3) {
        importShow.value = false;
        activeStep.value = 0;
        formData.value = {};
        importTableData.value = [];
        fileList.value = [];
    }
}

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


const activeNegativeId = ref('')
const negativeDetailShow = ref(false)
async function handleAction(row) {
    activeNegativeId.value = await getIdByOriginId(row.onlyId);
    negativeDetailShow.value = true;
}
const detailShow = ref(false);
const activeRow = ref({});

function handleDetail(row) {
    activeRow.value = row;
    detailShow.value = true;
}
</script>
