<template>
    <el-dialog title="公安部信访投诉导入" width="80vw" ref="dialogRef">
        <header class="flex center mb-40">
            <el-steps
                :space="400"
                :active="activeStep"
                finish-status="success"
                style="width: 800px"
            >
                <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/公安信访投诉数据导入模板.xls`"
                        target="__blank"
                        >公安信访投诉数据导入模板.xls 下载</a
                    >
                </div>
            </template>
            <template v-if="activeStep === 1">
                <div class="table-container">
                    <el-table :data="importTableData">
                        <el-table-column
                            label="办理单位"
                            prop="discoverTime"
                            width="180"
                        >
                            <template #default="{ row }">
                                <depart-tree-select
                                    size="small"
                                    v-model="row.departId"
                                />
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="责任部门"
                            prop="involveDepartName"
                            width="120"
                        />
                        <el-table-column
                            label="问题发生地"
                            prop="occurred"
                            width="160"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            label="信访件编号"
                            prop="originId"
                            width="160"
                        />
                        <el-table-column
                            label="信访形式"
                            prop="channelForFilingComplaints"
                            width="86"
                            align="center"
                        />
                        <el-table-column
                            label="姓名"
                            prop="responderName"
                            width="86"
                        />
                        <el-table-column
                            label="身份证号"
                            prop="responderIdCode"
                            width="174"
                        />
                        <el-table-column
                            label="住址"
                            prop="responderAddress"
                            width="174"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            label="手机号码"
                            prop="contactPhone"
                            width="120"
                        />
                        <el-table-column
                            label="信访日期"
                            prop="discoveryTime"
                            width="110"
                        />
                        
                        <el-table-column
                            label="信访内容"
                            prop="thingDesc"
                            width="160"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            label="异常动态"
                            prop="abnormal"
                            width="100"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            label="问题发生日期"
                            prop="happenTime"
                            width="120"
                        />
                        <el-table-column
                            label="信访人数"
                            prop="peopleNumber"
                            width="86"
                            align="center"
                        />
                        <el-table-column
                            label="信访诉求"
                            prop="appeal"
                            width="140"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            label="公安业务分类"
                            prop="businessTypeName"
                            width="140"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            label="档案编号"
                            prop="fileNo"
                            width="110"
                        />
                        <el-table-column
                            label="转往处"
                            prop="turnAround"
                            width="150"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            label="办理方式"
                            prop="handingMethod"
                            width="120"
                        />
                        <el-table-column
                            label="核查人"
                            prop="reviewPersonName"
                            width="90"
                        />
                        <el-table-column
                            label="具体承办单位"
                            prop="handleDepartName"
                            width="120"
                        />
                        
                    </el-table>
                </div>
            </template>
            <template v-if="activeStep === 2">
                <el-result
                    icon="success"
                    title="导入成功"
                    :sub-title="` 已成功导入${importTableData.length}条数据。`"
                >
                </el-result>
            </template>
        </div>
        <footer class="flex end mt-20 v-center">
            <el-button size="large" @click="handlePrev" v-if="activeStep !== 3"
                >上一步</el-button
            >
            <el-button
                type="primary"
                size="large"
                @click="handleNext"
                v-loading="loading"
                >{{ activeStep === 2 ? "确定" : "下一步" }}</el-button
            >
        </footer>
    </el-dialog>
</template>
<script setup>
import {
    importPetitionComplaintGab,
    addPetitionComplaintGab,
} from "@/api/data/petitionComplaint";
import feedback from "@/utils/feedback";
import { onMounted } from "vue";

const emit = defineEmits(["close", "update"]);

const activeStep = ref(0)

const fileList = ref([]);

const importTableData = ref([]);

const loading = ref(false);

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 importPetitionComplaintGab(
                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;
            }
        });
        loading.value = true;
        try {
            await addPetitionComplaintGab(importTableData.value);
        } catch(e) {
            loading.value = false
            return
        }
        loading.value = false
        activeStep.value = 2;
        emit('update')
        return;
    }
    if (activeStep.value === 2) {
        emit('close')
        activeStep.value = 0
        importTableData.value = []
        fileList.value = []
    }
}

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

const dialogRef = ref()

watch(() => dialogRef.value?.visible, (val) => {
    if (!val) {
        activeStep.value = 0
        importTableData.value = []
        fileList.value = []
    }
})

</script>
<style lang="scss" scoped>
</style>