<template>
    <div class="container">
        <header>
            <el-form :label-width="80">
                <el-row>
                    <el-col :span="6"> </el-col>
                </el-row>
                <div class="form-row flex">
                    <label class="text-center">基本信息</label>
                    <div class="flex wrap query-box">
                        <div style="width: 340px">
                            <el-form-item label="受理时间">
                                <date-time-range-picker-ext
                                    v-model="query.discoveryTime"
                                />
                            </el-form-item>
                        </div>
                        <el-input
                            placeholder="具体内容"
                            v-model="query.thingDesc"
                            clearable
                            style="width: 260px"
                        />
                        <el-select
                            style="width: 160px"
                            placeholder="初访重访"
                            clearable
                            v-model="query.initialPetition"
                        >
                            <el-option
                                v-for="item in dict.initialPetition"
                                :key="item.id"
                                :label="item.dictLabel"
                                :value="item.dictValue"
                            />
                        </el-select>
                    </div>
                </div>
                <div class="form-row flex">
                    <label class="text-center">核查情况</label>
                    <div class="flex wrap query-box">
                        <div style="width: 160px">
                            <depart-tree-select
                                v-model="query.involveDepartId"
                                placeholder="涉及单位"
                            />
                        </div>
                        <div style="width: 160px">
                            <depart-tree-select
                                v-model="query.handleDepartId"
                                placeholder="办理单位"
                            />
                        </div>
                        <el-input
                            placeholder="处理情况简要描述"
                            v-model="query.checkStatusDesc"
                            clearable
                            style="width: 260px"
                        />
                        <div class="flex gap-4">
                            <el-select
                                v-model="query.blameKey"
                                style="width: 90px"
                                @change="delete query.blameValue"
                            >
                                <el-option value="name" label="姓名" />
                                <el-option value="empNo" label="警号" />
                                <el-option value="idCode" label="身份证" />
                            </el-select>
                            <el-input
                                placeholder="问责人员（民警、辅警）"
                                v-model="query.blameValue"
                                clearable
                                style="width: 190px"
                            />
                        </div>
                        <el-select
                            style="width: 160px"
                            placeholder="办理状态"
                            clearable
                            v-model="query.processingStatus"
                            multiple
                        >
                            <el-option
                                v-for="item in dict.processingStatus"
                                :key="item.id"
                                :label="item.dictLabel"
                                :value="item.dictValue"
                            />
                        </el-select>
                    </div>
                </div>
            </el-form>
            <div class="flex between mt-20 mb-26">
                <div>
                    <el-button type="primary" @click="handleExport"
                        >数据导出</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>
        <main>
            <div class="table-container" v-loading="loading">
                <el-table :data="list" ref="tableRef">
                    <el-table-column
                        label="投诉渠道"
                        prop="channelForFilingComplaints"
                        width="90"
                        align="center"
                    />
                    <el-table-column
                        label="受理层级"
                        prop="acceptanceLevel"
                        width="90"
                    />
                    <el-table-column
                        label="受理时间"
                        prop="discoveryTime"
                        width="160"
                    />
                    <el-table-column
                        label="投诉人"
                        prop="responderName"
                        width="90"
                    />
                    <el-table-column
                        label="投诉人电话"
                        prop="responderPhone"
                        width="120"
                    />
                    <el-table-column
                        label="被投诉单位"
                        prop="involveDepartName"
                        width="160"
                        show-overflow-tooltip
                    />
                    <el-table-column
                        label="办理单位"
                        show-overflow-tooltip
                        width="160"
                    >
                        <template #default="{ row }">
                            <span
                                >{{ row.handleSecondDepartName
                                }}{{ row.handleThreeDepartName }}</span
                            >
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="具体内容"
                        prop="thingDesc"
                        show-overflow-tooltip
                        width="200"
                    />
                    <el-table-column
                        label="问题类别"
                        prop="involveProblem"
                        width="200"
                    >
                        <template #default="{ row }">
                            <span>{{
                                getInvolveProblem(
                                    row.involveProblem,
                                    dict.suspectProblem
                                )
                            }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="业务类别"
                        prop="businessTypeName"
                        width="200"
                        show-overflow-tooltip
                    />
                    <el-table-column
                        label="处理情况简要描述"
                        prop="checkStatusDesc"
                        show-overflow-tooltip
                        width="200"
                    />
                    <el-table-column label="初重信访" align="center" width="85">
                    <template #default="{ row }">
                        <span>{{
                            getDictLable(
                                dict.initialPetition,
                                row.initialPetition
                            )
                        }}</span>
                    </template>
                </el-table-column>
                    <el-table-column label="群众集访" width="85" align="center">
                        <template #default="{ row }">
                            <span v-if="row.massVisits === true">是</span>
                            <span v-if="row.massVisits === false">否</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="办理状态" width="100">
                        <template #default="{ row }">
                            <el-tag
                                :type="
                                    row.processingStatus ===
                                    ProcessingStatus.COMPLETED
                                        ? 'success'
                                        : 'primary'
                                "
                                v-if="row.processingStatus"
                                >{{
                                    getDictLable(
                                        dict.processingStatus,
                                        row.processingStatus
                                    )
                                }}</el-tag
                            >
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="80" fixed="right">
                        <template #default="{ row }">
                            <el-button
                                type="primary"
                                link
                                @click="handleAction(row)"
                                v-if="row.id"
                                >详情</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>
        </main>
    </div>

    <negative-dialog
        v-model="show"
        :id="activeNegativeId"
        @close="show = false"
        ref="negativeDialogRef"
    />
</template>
<script setup>
import { BASE_PATH } from "@/api/request";
import { ProcessingStatus } from "@/enums/flowEnums";
import { ProblemSources } from "@/enums/dictEnums";
import { listNegativeXf } from "@/api/books";
import { getDictLable, getInvolveProblem } from "@/utils/util";

import useCatchStore from "@/stores/modules/catch";

const catchStore = useCatchStore();
const dict = catchStore.getDicts([
    "initialPetition",
    "processingStatus",
    "suspectProblem"
]);

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

const list = ref([]);
const total = ref(0);

const loading = ref(false);
function getList() {
    loading.value = true;
    listNegativeXf(query.value, ProblemSources.GABXF).then((data) => {
        list.value = data.records;
        total.value = data.total;
        loading.value = false;
    });
}

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

onMounted(() => {
    getList();
});

const show = ref(false);
const activeNegativeId = ref("");

function handleAction(row) {
    show.value = true;
    activeNegativeId.value = row.id;
}

function handleExport() {

    window.open(`${BASE_PATH}/negative/books/export/xf/${ProblemSources.GABXF}?` + new URLSearchParams(query.value).toString())
}
</script>
<style lang="scss" scoped>
</style>