<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="登记时间">
                            <el-date-picker
                                type="datetimerange"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                v-model="query.happenTime"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="具体内容">
                            <el-input
                                placeholder="请输入"
                                v-model="query.userName"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="mb-25 flex between">
                <el-button type="primary" @click="show = true"
                    >国家信访数据导入</el-button
                >
                <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="originId"
                    show-overflow-tooltip
                />
                <el-table-column
                    label="投诉渠道"
                    prop="channelForFilingComplaints"
                />
                <el-table-column
                    label="受理层级"
                    prop="acceptanceLevel"
                    show-overflow-tooltip
                />
                <el-table-column
                    label="登记时间"
                    width="discoveryTime"
                    show-overflow-tooltip
                />
                <el-table-column
                    label="投诉人"
                    prop="responderName"
                    width="90"
                />
                <el-table-column label="电话" prop="responderPhone" />
                <el-table-column
                    label="初重信访"
                    prop="initialPetition"
                    align="center"
                    width="90"
                />
                <el-table-column
                    label="缠访闹访"
                    prop="entanglementVisits"
                    align="center"
                    width="90"
                />
                <el-table-column label="群众集访" prop="massVisits" />
                <el-table-column label="涉嫌问题" prop="involveProblem" />
                <el-table-column
                    label="涉及单位"
                    prop="involveProblem"
                    show-overflow-tooltip
                />
                <el-table-column
                    label="具体内容"
                    prop="thingDesc"
                    show-overflow-tooltip
                />
                <el-table-column label="操作" width="200">
                    <template #default="{ row }">
                        <el-button type="primary" link>核查情况</el-button>
                        <!-- <el-button
                            type="primary"
                            link
                            >问题核查</el-button
                        > -->
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="flex end mt-8">
            <el-pagination
                @size-change="getList"
                @current-change="getList"
                :current-page="query.current"
                :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 title="国家信访投诉 数据导入" v-model="show" width="80vw">
        <div style="min-height: 500px">
            <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 class="table-container">
                    <el-table :data="importTableData" ref="tableRef">
                        <el-table-column type="selection" />
                        <el-table-column
                            label="信件编号"
                            prop="originId"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            label="投诉渠道"
                            prop="channelForFilingComplaints"
                        />
                        <el-table-column
                            label="受理层级"
                            prop="acceptanceLevel"
                        />
                        <el-table-column
                            label="登记时间"
                            prop="discoveryTime"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            label="投诉人"
                            prop="responderName"
                            width="90"
                        />
                        <el-table-column
                            label="投诉人电话"
                            prop="contactPhone"
                            width="120"
                        />
                        <el-table-column
                            label="初重信访"
                            prop="initialPetition"
                            align="center"
                            width="90"
                        />
                        <el-table-column
                            label="缠访闹访"
                            prop="entanglementVisits"
                            width="90"
                        />
                        <el-table-column
                            label="群众集访"
                            prop="massVisits"
                            width="90"
                        />
                        <el-table-column
                            label="被投诉机构"
                            prop="complainedDepartName"
                        />
                        <el-table-column
                            label="具体内容"
                            prop="thingDesc"
                            show-overflow-tooltip
                        />
                        <el-table-column label="数据校验" width="120">
                            <template #default="{ row }">
                                <el-tag type="success">正确</el-tag>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </template>
        </div>
        <footer class="flex end mt-20 v-center">
            <span class="mr-20" v-if="step === 2"
                >选中：{{ checkRowSize }}条</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"
                >下一步</el-button
            >
            <el-button
                type="primary"
                size="large"
                @click="handleSaveImport"
                :disabled="checkRowSize === 0"
                v-else
                >确认导入</el-button
            >
        </footer>
    </el-dialog>
</template>
<script setup>
import { BASE_PATH } from "@/api/request";
import {
    importPetitionComplaint,
    listPetitionComplaint,
    addPetitionComplaint,
} from "@/api/data/petitionComplaint";
import feedback from "@/utils/feedback";

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

const list = ref([]);
const total = ref(0);
function getList() {
    listPetitionComplaint(query.value).then((data) => {
        list.value = data.records;
        total.value = data.total;
    });
}

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

getList();

const show = ref(false);
const dataUpdateMethod = ref("incremental");

const fileList = ref([]);

const importTableData = ref([]);
const step = ref(1);
async function handleImport() {
    const formData = new FormData();
    formData.append("file", fileList.value[fileList.value.length - 1].raw);
    importTableData.value = await importPetitionComplaint(formData);
    step.value = 2;
    nextTick(() => {
        tableRef.value.toggleAllSelection();
    });
}

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

const tableRef = ref(null);
async function handleSaveImport() {
    const rows = tableRef.value.getSelectionRows();
    await addPetitionComplaint([...rows]);
    feedback.msgSuccess(`成功导入${rows.length}条数据`);
    show.value = false;
    getList();
}
</script>
<style lang="scss" scoped>
</style>