<template>
    <el-dialog width="80vw" top="5vh" v-model="show" :title="title">
        <div style="height: 600px">
            <template v-if="step === 1">
                <div class="mt-20">
                    <span>案件核查问题台账模板</span>
                    <a
                        class="link"
                        :href="`${BASE_PATH}/templates/案件核查问题台账（模板）.xlsx`"
                        target="__blank"
                        >下载</a
                    >
                </div>
                <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">
                            点击或拖拽文件到此区域上传
                        </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>
                <el-radio-group v-model="dataUpdateMethod" class="mt-20">
                    <el-radio value="incremental" border>增量更新</el-radio>
                    <el-radio value="overwrite" border>覆盖更新</el-radio>
                </el-radio-group>
            </template>
            <template v-else>
                <el-page-header @back="step = 1" class="mb-20"></el-page-header>
                <div style="height: 556px; overflow: hidden">
                    <el-scrollbar height="556px">
                        <el-tabs v-model="activeTab">
                            <el-tab-pane label="全部" name="all">
                                <div class="table-container">
                                    <el-table
                                        :data="importTableData"
                                        ref="tableRef"
                                    >
                                        <el-table-column
                                            type="selection"
                                            :selectable="
                                                (row) => row.state === 'success'
                                            "
                                        />
                                        <el-table-column
                                            label="案件编号"
                                            prop="originId"
                                            show-overflow-tooltip
                                        />
                                        <el-table-column
                                            label="受理时间"
                                            prop="discoveryTime"

                                            show-overflow-tooltip
                                        />
                                        <el-table-column
                                            label="问题发生时间"
                                            prop="happenTime"
                                            width="160"
                                            show-overflow-tooltip
                                        />
                                        <el-table-column
                                            label="问题来源"
                                            prop="problemSources"
                                            show-overflow-tooltip
                                        />
                                        <el-table-column
                                            label="投诉人"
                                            prop="responderName"
                                            width="90"
                                        />
                                        <el-table-column
                                            label="投诉人电话"
                                            prop="contactPhone"
                                            width="120"
                                        />
                                        <el-table-column
                                            label="涉企涉冻"
                                            prop="involvedIssue"
                                            width="120"
                                        />
                                        <el-table-column
                                            label="业务类别"
                                            prop="businessTypeName"
                                        />
                                        <el-table-column
                                            label="涉嫌问题"
                                            prop="involveProblem"
                                        />
                                        <el-table-column
                                            label="涉及警种"
                                            prop="policeTypeName"
                                        />
                                        <el-table-column
                                            label="涉及单位二级机构"
                                            prop="secondDepartName"
                                            show-overflow-tooltip
                                        />
                                        <el-table-column
                                            label="涉及单位所队"
                                            prop="thirdDepartName"
                                            show-overflow-tooltip
                                        />
                                        <el-table-column
                                            label="具体内容"
                                            prop="thingDesc"
                                            show-overflow-tooltip
                                        />
                                        <el-table-column
                                            label="数据校验"
                                            width="120"
                                            align="center"
                                        >
                                            <template #default="{ row }">
                                                <el-tag
                                                    type="success"
                                                    v-if="
                                                        row.state === 'success'
                                                    "
                                                    >正确</el-tag
                                                >
                                                <el-tooltip
                                                    effect="dark"
                                                    :content="row.errMsg"
                                                    placement="top-start"
                                                    v-else
                                                >
                                                    <el-tag type="danger"
                                                        >异常</el-tag
                                                    >
                                                </el-tooltip>
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            label="操作"
                                            width="120"
                                        >
                                            <template #default="{ row }">
                                                <el-button
                                                    type="primary"
                                                    link
                                                    @click="handleEdit(row)"
                                                    >编辑</el-button
                                                >
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane name="fail">
                                <template #label>
                                    <el-badge
                                        :value="importTableFailData.length"
                                    >
                                        <span>异常</span>
                                    </el-badge>
                                </template>
                                <div class="table-container">
                                    <el-table :data="importTableFailData">
                                        <el-table-column
                                            label="案件编号"
                                            prop="originId"
                                            show-overflow-tooltip
                                        />
                                        <el-table-column
                                            label="受理时间"
                                            prop="discoveryTime"
                                            show-overflow-tooltip
                                        />
                                        <el-table-column
                                            label="问题发生时间"
                                            prop="happenTime"
                                        />
                                        <el-table-column
                                            label="问题来源"
                                            prop="problemSources"
                                            show-overflow-tooltip
                                        />
                                        <el-table-column
                                            label="投诉人"
                                            prop="responderName"
                                            width="90"
                                        />
                                        <el-table-column
                                            label="投诉人电话"
                                            prop="contactPhone"
                                            width="120"
                                        />
                                        <el-table-column
                                            label="业务类别"
                                            prop="businessTypeName"
                                        />
                                        <el-table-column
                                            label="涉嫌问题"
                                            prop="involveProblem"
                                        />
                                        <el-table-column
                                            label="涉及警种"
                                            prop="policeTypeName"
                                        />
                                        <el-table-column
                                            label="涉及单位二级机构"
                                            prop="secondDepartName"
                                            show-overflow-tooltip
                                        />
                                        <el-table-column
                                            label="涉及单位所队"
                                            prop="thirdDepartName"
                                            show-overflow-tooltip
                                        />
                                        <el-table-column
                                            label="具体内容"
                                            prop="thingDesc"
                                            show-overflow-tooltip
                                        />
                                        <el-table-column
                                            label="数据校验"
                                            width="100"
                                            align="center"
                                        >
                                            <template #default="{ row }">
                                                <el-tooltip
                                                    effect="dark"
                                                    :content="row.errMsg"
                                                    placement="top-start"
                                                >
                                                    <el-tag type="danger"
                                                        >异常</el-tag
                                                    >
                                                </el-tooltip>
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            label="操作"
                                            width="120"
                                        >
                                            <template #default="{ row }">
                                                <el-button
                                                    type="primary"
                                                    link
                                                    @click="handleEdit(row)"
                                                    >编辑</el-button
                                                >
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </el-scrollbar>
                </div>
            </template>
        </div>
        <footer class="flex end mt-20 v-center">
            <span class="mr-20" v-if="step === 2"
                >选中：<b>{{ checkRowSize }}</b
                >条数据</span
            >
            <el-button size="large" @click="show = false">取消</el-button>
            <el-button
                type="primary"
                size="large"
                @click="handleImport"
                :disabled="fileList.length === 0"
                v-if="step === 1"
                v-loading="loading"
                >下一步</el-button
            >
            <el-button
                type="primary"
                size="large"
                @click="handleSaveImport"
                :disabled="checkRowSize === 0"
                v-else
                >确认导入</el-button
            >
        </footer>
    </el-dialog>

    <el-dialog width="660px" top="5vh" v-model="editShow" title="编辑数据">
        <el-form :label-width="120" :model="form" ref="formRef">
            <el-form-item
                label="案件编号"
                prop="originId"
                :rules="{
                    required: true,
                    message: '请选择',
                    trigger: ['blur'],
                }"
            >
                <el-input placeholder="请输入" v-model="form.originId" />
            </el-form-item>
            <el-form-item label="受理时间">
                <el-date-picker type="datetime" v-model="form.discoveryTime" />
            </el-form-item>
            <el-form-item label="问题发生时间">
                <el-date-picker type="datetime" v-model="form.happenTime" />
            </el-form-item>
            <el-form-item label="问题来源">
                <el-input placeholder="请输入" v-model="form.problemSources" />
            </el-form-item>
            <el-form-item label="投诉人">
                <el-input placeholder="请输入" v-model="form.responderName" />
            </el-form-item>
            <el-form-item label="投诉人电话">
                <el-input placeholder="请输入" v-model="form.contactPhone" />
            </el-form-item>
            <el-form-item label="业务类别">
                <el-input placeholder="请输入" v-model="form.businessTypeName" />
            </el-form-item>
            <el-form-item label="涉嫌问题">
                <el-input placeholder="请输入" v-model="form.involveProblem" />
            </el-form-item>
            <el-form-item label="涉及警种">
                <el-input placeholder="请输入" v-model="form.policeTypeName" />
            </el-form-item>
            <el-form-item label="涉企涉冻">
              <el-select  v-model="form.involvedIssue">
                  <el-option value="涉企问题" label="涉企问题"></el-option>
                <el-option value="涉冻问题" label="涉冻问题"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
                label="涉及单位"
                prop="involveThirdDepartId"
            >
                <depart-tree-select
                    v-model="form.involveThirdDepartId"
                    :check-strictly="false"
                    @node-click="(node) => form.involveThirdDepartName = node.shortName"
                />
            </el-form-item>
            <el-form-item
                label="具体内容"
                prop="thingDesc"
                :rules="{
                    required: true,
                    message: '请输入',
                    trigger: ['blur'],
                }"
            >
                <el-input type="textarea" v-model="form.thingDesc" />
            </el-form-item>
        </el-form>
        <footer class="flex end mt-20">
            <el-button @click="editShow = false">取消</el-button>
            <el-button type="primary" @click="handleEditSumbit"
                >确认修改</el-button
            >
        </footer>
    </el-dialog>
</template>
<script setup>
import { BASE_PATH } from "@/api/request";
import { getDictLable } from "@/utils/util";
import { importCaseVerif, addCaseVerif } from "@/api/data/caseVerif";
import feedback from "@/utils/feedback";

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false,
    },
    title: {
        type: String,
    }
});
const emit = defineEmits(["update:modelValue", "close", "update"]);

const show = ref(false);
watch(
    () => props.modelValue,
    (val) => {
        show.value = val;
    }
);
watch(show, (val) => {
    emit("update:modelValue", val);
});

const dataUpdateMethod = ref("incremental");
const fileList = ref([]);

const importTableData = ref([]);
const importTableFailData = computed(() => {
    return importTableData.value.filter((item) => item.state === "fail");
});

const step = ref(1);
const loading = ref(false);
async function handleImport() {
    const formData = new FormData();
    formData.append("file", fileList.value[fileList.value.length - 1].raw);
    loading.value = true;
    try {
        importTableData.value = await importCaseVerif(formData);
    } catch(e) {
        loading.value = false;
        return
    }
    loading.value = false;
    step.value = 2;
    nextTick(() => {});
}

const checkRowSize = computed(
    () => tableRef.value?.getSelectionRows().length || 0
);

const tableRef = ref(null);
async function handleSaveImport() {
    const rows = tableRef.value.getSelectionRows();
    await addCaseVerif(dataUpdateMethod.value, [...rows]);
    feedback.msgSuccess(`成功导入${rows.length}条数据`);
    step.value = 1;
    importTableData.value = [];
    fileList.value = [];
    emit("close");
    emit("update");
}

let activeIndex = -1;
function handleEdit(row) {
    form.value = { ...row };
    activeIndex = importTableData.value.indexOf(row);
    editShow.value = true;
}
const editShow = ref(false);
const form = ref({});
const formRef = ref();
const activeTab = ref("all");

async function handleEditSumbit() {
    await formRef.value.validate();
    form.value.state = "success";
    importTableData.value[activeIndex] = form.value;
    editShow.value = false;
}
</script>
<style lang="scss" scoped>
</style>
