<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="	受理时间">
                            <date-time-range-picker-ext
                                v-model="query.discoveryTime"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="具体内容">
                            <el-input
                                placeholder="请输入"
                                v-model="query.thingDesc"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="分发状态">
                            <el-select v-model="query.distributionState">
                                <el-option
                                    v-for="item in dict.distributionState"
                                    :key="item.id"
                                    :label="item.dictLabel"
                                    :value="item.dictValue"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="mb-25 flex between">
                <div>
                    <el-button type="primary" @click="show = true"
                        >数据导入</el-button
                    >
                    <el-badge
                        :value="distributeList.length"
                        class="ml-10"
                        v-if="distributeList.length"
                    >
                        <el-button
                            type="primary"
                            @click="distributeListShow = true"
                            >问题下发</el-button
                        >
                    </el-badge>
                </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>
        <div class="table-container">
            <el-table :data="list">
                <el-table-column
                    label="案件编号"
                    prop="originId"
                    show-overflow-tooltip
                />
                <el-table-column
                    label="受理时间"
                    prop="discoveryTime"
                    show-overflow-tooltip
                />
                <el-table-column
                    label="问题发生时间"
                    prop="happenTime"
                    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="businessTypeName" />
                <el-table-column label="涉嫌问题" prop="involveProblem" />
                <el-table-column label="涉及警种" prop="policeTypeName" />
                <el-table-column label="涉及单位" prop="involveDepartName" />
                <el-table-column
                    label="具体内容"
                    prop="thingDesc"
                    show-overflow-tooltip
                />
                <el-table-column label="状态">
                    <template #default="{ row }">
                        <el-tag>{{
                            getDictLable(
                                dict.distributionState,
                                row.distributionState
                            )
                        }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template #default="{ row }">
                        
                        <template
                            v-if="
                                row.distributionState ===
                                DistributionState.UNDISTRIBUTED
                            "
                        >
                            <el-button
                                type="primary"
                                link
                                @click="handleAddDistribute(row)"
                                v-if="
                                    distributeList.filter(
                                        (item) => item.originId === row.originId
                                    ).length === 0
                                "
                                >加入问题下发</el-button
                            >
                            <el-button
                                type="info"
                                link
                                v-else
                                @click="handleRemoveDistribute(row)"
                                >移除</el-button
                            >
                        </template>
                        
                        <el-button type="danger" link @click="handleDel(row)"
                            >删除</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>

    <data-import-case
        v-model="show"
        title="案件核查 数据导入"
        @close="show = false"
        @update="getList"
    />

    <el-dialog
        title="问题分发"
        v-model="distributeListShow"
        width="80vw"
        top="5vh"
    >
        <header>
            <div class="flex v-center end mb-20">
                <span class="mr-20"
                    >共
                    <span class="text-primary">{{
                        distributeList.length
                    }}</span>
                    条数据</span
                >
            </div>
        </header>
        <div style="min-height: 500px">
            <div class="table-container">
                <el-table :data="distributeList">
                    <el-table-column
                        label="案件编号"
                        prop="originId"
                        show-overflow-tooltip
                    />
                    <el-table-column
                        label="受理时间"
                        prop="discoveryTime"
                        show-overflow-tooltip
                    />
                    <el-table-column label="问题发生时间" prop="happenTime" 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="businessTypeName" />
                    <el-table-column label="涉嫌问题" prop="involveProblem" />
                    <el-table-column label="涉及警种" prop="policeTypeName" />
                    <el-table-column
                        label="涉及单位"
                        prop="involveDepartName"
                    />
                    <el-table-column
                        label="具体内容"
                        prop="thingDesc"
                        show-overflow-tooltip
                    />
                    <el-table-column label="操作" width="140">
                        <template #default="{ row }">
                            
                            <el-button
                                type="info"
                                link
                                @click="handleRemoveDistribute(row)"
                                >移除</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <footer class="flex end mt-20">
            <el-button
                type="primary"
                size="large"
                @click="handleShowDistributeDialog"
                :disabled="distributeList.length === 0"
                >确认数据</el-button
            >
        </footer>
    </el-dialog>

    <el-dialog title="任务分发" v-model="distributeShow" width="50vw" top="5vh">
        <el-form :label-width="120" ref="formRef" :model="form">
            <el-form-item
                label="办理时限"
                prop="timeLimit"
                :rules="{
                    required: true,
                    message: '请选择办理时限',
                }"
            >
                <time-limit-select
                    v-model="form.timeLimit"
                    v-model:maxSignDuration="form.maxSignDuration"
                    v-model:maxHandleDuration="form.maxHandleDuration"
                    v-model:maxExtensionDuration="form.maxExtensionDuration"
                />
            </el-form-item>
            <el-form-item
                label="审核流程"
                prop="approvalFlow"
                :rules="{
                    required: true,
                    message: '请选择审核流程',
                }"
            >
                <el-radio-group v-model="form.approvalFlow">
                    <el-radio
                        v-for="item in dict.approvalFlow"
                        :key="item.dictCode"
                        :value="item.dictValue"
                        >{{ item.dictLabel
                        }}{{ item.remark ? `(${item.remark})` : "" }}</el-radio
                    >
                </el-radio-group>
                <div class="tips mt-10">
                    <p>
                        三级审核　在问题提交办结时，需经过“所队—>二级机构—>市局”三级审核，通过后方可办结；
                    </p>
                    <p>
                        二级审核　在问题提交办结时，仅需经过“所队—>二级机构”两级审核，通过后即可办结；
                    </p>
                </div>
            </el-form-item>
        </el-form>
        <footer class="flex end mt-20">
            <el-button
                type="primary"
                size="large"
                @click="handleSubmit"
                >确认下发</el-button
            >
        </footer>
    </el-dialog>
</template>
<script setup>
import { BASE_PATH } from "@/api/request";
import {
    listCaseVerif,
    delCaseVerif,
    distributeCaseVerif,
} from "@/api/data/caseVerif";
import { DistributionState } from "@/enums/dictEnums";
import { getDictLable } from "@/utils/util";
import feedback from "@/utils/feedback";

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

const catchStore = useCatchStore();
const dict = catchStore.getDicts([
    "distributionState",
    "timeLimit",
    "approvalFlow"
]);

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

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

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

getList();

const show = ref(false);

async function handleDel(row) {
    await feedback.confirm("确定要删除该数据？");
    await delCaseVerif(row.originId);
    getList();
}

const distributeListShow = ref(false);
const distributeList = ref([]);
const distributeShow = ref(false);

function handleAddDistribute(row) {
    distributeList.value.push(row);
}

function handleShowDistributeDialog() {
    distributeShow.value = true;
}
const form = ref({});
const formRef = ref()

function handleRemoveDistribute(row) {
    distributeList.value.splice(
        distributeList.value.findIndex(
            (item) => item.originId === row.originId
        ),
        1
    );
}

async function handleSubmit() {
    await formRef.value.validate()
    form.value.data = distributeList.value
    await distributeCaseVerif(form.value)
    form.value = {}
    distributeShow.value = false
    distributeListShow.value = false
    feedback.msgSuccess('下发成功')
    getList()
}
</script>
<style lang="scss" scoped>
</style>