<template>
    <el-dialog title="国家信访投诉导入" width="80vw" ref="dialogRef" :lock-scroll="false">
        <header class="flex center mb-40">
            <el-steps
                :space="300"
                :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">
                <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-20">
                        <span>文件模板</span>
                        <a
                            class="link"
                            :href="`${BASE_PATH}/templates/国家信访投诉数据导入模板.xls`"
                            target="__blank"
                            >国家信访投诉数据导入模板.xls 下载</a
                        >
                    </div>
                </div>
            </template>
            <template v-if="activeStep === 1">
                <div class="table-container" v-loading="loading">
                    <el-table :data="importTableData.slice(0, Math.min(20, importTableData.length))" :max-height="500">
                        <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="handleDepartName"
                            width="120"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            label="问题发生地"
                            prop="occurred"
                            width="160"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            label="信访件编号"
                            prop="originId"
                            width="196"
                        />
                        <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="responderPhone"
                            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="involvedIssue"
                          width="110"
                      />
                        <el-table-column
                            label="是否重信"
                            prop="initialPetition"
                            width="86"
                            align="center"
                        />
                        <el-table-column
                            label="信访人数"
                            prop="peopleNumber"
                            width="86"
                            align="center"
                        />
                        <el-table-column
                            label="公安业务分类"
                            prop="businessTypeName"
                            width="140"
                            show-overflow-tooltip
                        />
                    </el-table>
                </div>
            </template>
            <template v-if="activeStep === 2">
                <el-result
                    icon="success"
                    title="导入成功"
                    :sub-title="` 已成功导入${importTableData.length}条数据。`"
                >
                    <template #sub-title>
                        <p>已成功导入{{ importTableData.length }}条数据。您可通过<span
                                class="link pointer"
                                @click="router.push('/data/ImportRecords')"
                                >导入记录</span
                            >功能查看导入记录。
                        </p>
                    </template>
                </el-result>
            </template>
        </div>
        <div class="demo-image__error" flex gap-2>
        <span class="link pointer" @click="openGuidePreview">
          导入模板已兼容国家信访平台的台账，在国家信访平台导出后直接在此处导入。
        </span>
        <el-image-viewer
            v-if="showPreview"
            show-progress
            :url-list="srcList"
            @close="showPreview = false"
            @switch="onPreviewChange"
        >
          <!-- 底部说明 -->
          <div class="image-desc">
            {{ imageList[currentIndex]?.desc }}
          </div>
        </el-image-viewer>
      </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 === 2 ? "确定" : "下一步" }}</el-button
            >
        </footer>
    </el-dialog>
</template>
<script setup>
import { BASE_PATH } from "@/api/request";
import {
    importPetitionComplaintGj,
    addPetitionComplaintGj,
} 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 importPetitionComplaintGj(formData);
        } catch (e) {
            loading.value = false;
            throw e;
        }
        loading.value = false;
        activeStep.value = 1;
        return;
    }
    if (activeStep.value === 1) {
        loading.value = true;
        try {
            await addPetitionComplaintGj(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 = [];
        }
    }
);

const showPreview = ref(false)
const currentIndex = ref(0);

const onPreviewChange = (index) => {
  currentIndex.value = index;
};
const imageList = [
  {
    url: "/imgs/5.jpg",
    desc: "步骤一：下载并填写 Excel 模板",
  },
];
const srcList = imageList.map(i => i.url);
const openGuidePreview = () => {
  // showPreview.value = true;
};
const router = useRouter();
</script>
<style lang="scss" scoped>
.demo-image__error .el-image {
  max-width: 300px;
  max-height: 200px;
  width: 100%;
}

.image-desc {
  position: fixed;
  left: 50%;
  top: 20%;
  transform: translateX(-50%);
  max-width: 70%;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 14px;
  border-radius: 6px;
  text-align: center;
}

</style>
