<template>
    <div class="container">
        <el-row :gutter="20">
            <el-col :span="4">
                <model-tree  v-model="query.modelIds" />
            </el-col>
            <el-col :span="20">
                <header>
                    <el-form :label-width="140">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="任务名称">
                                    <el-input
                                        placeholder="请输入"
                                        v-model="query.thingDesc"
                                        clearable
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="下发时间">
                                    <date-time-range-picker-ext
                                        v-model="query.createTime"
                                    />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div class="flex end mb-20">
                        <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="taskName"
                            width="200"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            label="模型名称"
                            prop="modelName"
                            width="200"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            label="下发时间"
                            prop="distributionTime"
                            width="200"
                        />
                        <el-table-column
                            label="问题条数"
                            prop="size"
                            align="center"
                        />
                        <el-table-column
                            label="办结数量"
                            align="center"
                            prop="completedSize"
                        />
                        <el-table-column
                            label="查实数量"
                            align="center"
                            prop="verifySize"
                        />
                        <el-table-column
                            label="涉及单位数"
                            align="center"
                            prop="departSize"
                            width="130"
                        />
                        <el-table-column
                            label="涉及人数"
                            align="center"
                            prop="personalSize"
                        />
                        <el-table-column label="操作" width="200">
                            <template #default="{ row }">
                                <el-button
                                    type="primary"
                                    link
                                    @click="handleStatisticsShow(row.id)"
                                    >任务统计</el-button
                                >
                                <!-- <el-button
                                    type="primary"
                                    link
                                    @click="handleCluesShow(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"
                        :current-page="query.current"
                        :page-sizes="[9, 18, 36]"
                        v-model:page-size="query.size"
                        v-model:current-page="query.current"
                        layout="total, sizes, prev, pager, next"
                        :total="total"
                        v-if="list.length"
                    >
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
    </div>

    <el-dialog title="任务统计" v-model="statisticsShow" width="80vw">
        <div style="min-height: 500px">
            <div class="table-container">
                <el-table :data="departList">
                    <el-table-column
                        label="单位名称"
                        prop="departName"
                        width="200"
                        show-overflow-tooltip
                    />
                    <el-table-column
                        label="问题数量"
                        prop="size"
                        width="200"
                        show-overflow-tooltip
                    />
                    <el-table-column
                        label="办结数量"
                        prop="completedSize"
                        width="200"
                    />
                    <el-table-column
                        label="办结率"
                        align="center"
                        prop="completedSize"
                    />
                    <el-table-column
                        label="查实数量"
                        align="center"
                        prop="verifySize"
                    />
                    <el-table-column
                        label="涉及人数"
                        align="center"
                        prop="personalSize"
                    />
                </el-table>
            </div>
        </div>
    </el-dialog>

    <el-dialog title="分发详情" v-model="show" width="80vw">
        
    </el-dialog>
</template>
<script lang="ts" setup>
import { listModelClueTask, listModelClueByDepart, listModelClues } from "@/api/sensitivePerception/modelClueTask";
import useCatchStore from "@/stores/modules/catch";
import { getDictLable } from "@/utils/util";

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

const query = ref({});

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

watch(
    () => query.value.modelIds,
    () => {
        getList();
    }
);
onMounted(() => {
    getList();
});

function getList() {
    listModelClueTask(query.value).then((data) => {
        list.value = data.records;
        total.value = data.total;
    });
}

function reset() {
    query.value = {};
    getList();
}

const statisticsShow = ref(false);
const departList = ref([])
async function handleStatisticsShow(id) {
    const data = await listModelClueByDepart(id)
    departList.value = data;
    statisticsShow.value = true;
}

const show = ref(false)
const modelClues = ref([])
const modelClueQuery = ref({
    current: 1,
    size: 10
})
async function handleCluesShow(id) {
    const data = await listModelClues(id, modelClueQuery.value)
    modelClues.value = data.records;
    show.value = true;
}
</script>
<style lang="scss" scoped>
</style>