<template>
    <div class="container h100">
        <el-row :gutter="20" class="h100">
            <el-col :span="6">
                <model-tree v-model="query.modelIds" />
            </el-col>
            <el-col :span="18">
                <header>
                    <el-form :label-width="140">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="预警时间">
                                    <date-time-range-picker-ext
                                        v-model="query.createTime"
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="涉及单位">
                                    <depart-tree-select
                                        v-model="query.involveDepartId"
                                        :check-strictly="false"
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="预警内容">
                                    <el-input
                                        placeholder="请输入"
                                        v-model="query.thingDesc"
                                        clearable
                                    />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div class="flex between mb-20">
                        <div class="flex gap">
                            <el-button type="primary" @click="handleBathJoin">
                                <template #icon>
                                    <icon name="el-icon-Plus" />
                                </template>
                                批量加入</el-button
                            >
                            <el-badge :value="manualList.length">
                                <el-button
                                    type="primary"
                                    :disabled="manualList.length === 0"
                                    @click="manualShow = 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" v-loading="loading">
                    <el-table :data="list" ref="tableRef" max-height="600">
                        <el-table-column type="selection" width="55" />
                        <el-table-column
                            label="预警时间"
                            prop="createTime"
                            width="150"
                        />
                        <el-table-column
                            label="预警模型"
                            prop="modelName"
                            width="180"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            label="涉及单位"
                            show-overflow-tooltip
                            width="200"
                        >
                            <template #default="{ row }">
                                <span>{{ row.involveParentDepartName }}</span>
                                <span>{{ row.involveDepartName }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="涉及人员"
                            prop="involvePoliceName"
                            width="120"
                        >
                            <template #default="{ row }">
                                <div v-if="row.involvePoliceName">
                                    <div v-for="item in row.involvePoliceName.split(
                                            ' ')"
                                        class="text-nowrap"
                                    >
                                        {{ item }}
                                    </div>
                                </div>
                                <div v-else>略</div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="预警内容"
                            prop="thingDesc"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            label="分发状态"
                            align="center"
                            width="120"
                        >
                            <template #default="{ row }">
                                <span
                                    :class="
                                        row.involveDepartId
                                            ? ''
                                            : 'text-warning'
                                    "
                                    >{{
                                        getDictLable(
                                            dict.distributionState,
                                            row.distributionState
                                        )
                                    }}</span
                                >
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="200">
                            <template #default="{ row }">
                                <el-button
                                    type="primary"
                                    link
                                    @click="handleAddManuel(row)"
                                    v-if="
                                        manualList.filter(
                                            (item) => item.id === row.id
                                        ).length === 0
                                    "
                                    >加入分发列表</el-button
                                >
                                <el-button
                                    link
                                    type="info"
                                    @click="handleRemoveManuel(row)"
                                    v-else
                                    >从分发列表移除</el-button
                                >
                                <!-- <el-button
                                    type="danger"
                                    link
                                    @click="handleNotProcessed(row)"
                                    v-if="
                                        manualList.filter(
                                            (item) => item.id === row.id
                                        ).length === 0
                                    "
                                    >暂不处理</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, 100]"
                        v-model:page-size="query.size"
                        v-model:current-page="query.current"
                        layout="total, sizes, prev, pager, next"
                        :total="total"
                    >
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
    </div>

    <el-dialog title="问题分发" v-model="manualShow" width="80vw" top="5vh" style="margin-bottom: 0">
        <header>
            <el-form :label-width="140">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="模型">
                            <el-select v-model="manualQuery.modelId" clearable>
                                <el-option
                                    v-for="item in modelOptions"
                                    :key="item.value"
                                    :value="item.value"
                                    :label="item.label"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="涉及单位">
                            <depart-tree-select
                                v-model="manualQuery.involveDepartId"
                                :check-strictly="false"
                                
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="预警内容">
                            <el-input
                                placeholder="请输入"
                                v-model="manualQuery.thingDesc"
                                clearable
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="flex v-center end mb-20">
                <span class="mr-20"
                    >共
                    <span class="text-primary">{{
                        filterManualList.length
                    }}</span>
                    条预警线索</span
                >

                <el-button @click="manualReset">重置</el-button>
            </div>
        </header>
        <div style="min-height: 500px">
            <div class="table-container">
                <el-table :data="filterManualList" max-height="580">
                    <el-table-column type="index" width="50" />
                    <el-table-column
                        label="预警时间"
                        prop="createTime"
                        width="160"
                    />
                    <el-table-column
                        label="预警模型"
                        prop="modelName"
                        width="120"
                        show-overflow-tooltip
                    />
                    <el-table-column
                        label="涉及单位"
                        show-overflow-tooltip
                        width="200"
                    >
                        <template #default="{ row }">
                            <span>{{ row.involveParentDepartName }}</span>
                            <span>{{ row.involveDepartName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="涉及人员"
                            prop="involvePoliceName"
                            width="120"
                        >
                            <template #default="{ row }">
                                <div v-if="row.involvePoliceName">
                                    <div
                                        v-for="item in row.involvePoliceName.split(
                                            ' '
                                        )"
                                        class="text-nowrap"
                                    >
                                        {{ item }}
                                    </div>
                                </div>
                                <div v-else>略</div>
                            </template>
                        </el-table-column>
                    <el-table-column
                        label="预警内容"
                        prop="thingDesc"
                        show-overflow-tooltip
                    />
                    <el-table-column label="操作" width="140">
                        <template #default="{ row }">
                            <el-button
                                type="info"
                                link
                                @click="handleRemoveManuel(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="manualList.length === 0"
                >确认预警线索</el-button
            >
        </footer>
    </el-dialog>

    <el-dialog title="任务分发" v-model="distributeShow" width="50vw" top="2vh" style="margin-bottom: 0">
        <el-form :label-width="120" ref="formRef" :model="form" v-loading="submitLoading">
            <el-form-item
                label="任务名称"
                prop="taskName"
                :rules="{
                    required: true,
                    message: '请输入任务名称',
                }"
            >
                <el-input
                    v-model="form.taskName"
                    style="width: 280px"
                    placeholder="请输入"
                />
            </el-form-item>
            <el-form-item label="指定办理单位" prop="handleDepartId">
                <div class="flex gap">
                    <div style="width: 280px">
                        <depart-tree-select v-model="form.handleDepartId" />
                    </div>
                    <div class="tips mt-10">
                        <p>指定具体办理单位 指将问题分派给哪个单位办理。</p>
                    </div>
                </div>
            </el-form-item>
            <el-form-item
                label="业务类别"
                prop="businessTypeCode"
                :rules="{
                    required: true,
                    message: '请选择业务类别',
                    trigger: ['blur'],
                }"
            >
                <el-select v-model="form.businessTypeCode" style="width: 280px" @change="(val) => form.businessTypeCode = dict.businessType.filter(
                                (item) => item.dictValue === val
                            )[0].dictLabel">
                    <el-option
                        v-for="item in dict.businessType"
                        :key="item.id"
                        :label="item.dictLabel"
                        :value="item.dictValue"
                    />
                </el-select>
            </el-form-item>
            <el-form-item
                label="涉嫌问题"
                prop="involveProblem"
                :rules="{
                    required: true,
                    message: '请选择涉嫌问题',
                    trigger: ['blur'],
                }"
            >
                <el-select
                    v-model="form.involveProblem"
                    multiple
                    clearable
                    style="width: 280px"
                >
                    <el-option
                        v-for="item in dict.suspectProblem"
                        :key="item.id"
                        :label="item.dictLabel"
                        :value="item.dictValue"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="涉及警种" prop="policeType">
                <el-select
                    v-model="form.policeType"
                    clearable
                    style="width: 280px"
                >
                    <el-option
                        v-for="item in dict.policeType"
                        :key="item.id"
                        :label="item.dictLabel"
                        :value="item.dictValue"
                    />
                </el-select>
            </el-form-item>
            <div class="flex center mb-12">
                <el-button
                    @click="handleAddProblem()"
                    plain
                    type="primary"
                    size="small"
                >
                    <template #icon>
                        <icon name="el-icon-Plus" />
                    </template>
                    添加问题
                </el-button>
            </div>
            <el-form-item
                label="问题类型"
                prop=""
                v-for="(item, index) in form.problems"
                :key="index"
            >
                <div class="flex v-center">
                    <problem-type-select v-model="item.threeLevelCode" />
                    <el-button
                        plain
                        type="danger"
                        size="small"
                        class="ml-20"
                        @click="handleRemoveProblem(index)"
                    >
                        <template #icon>
                            <icon name="el-icon-Delete" />
                        </template>
                        删除问题
                    </el-button>
                </div>
            </el-form-item>
            <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="distributionFlow"
                :rules="{
                    required: true,
                    message: '请选择下发流程',
                }"
            >
                <el-radio-group v-model="form.distributionFlow" class="block">
                    <el-radio
                        v-for="item in dict.distributionFlow"
                        :key="item.dictCode"
                        :value="item.dictValue"
                        >{{ item.dictLabel
                        }}</el-radio
                    >
                </el-radio-group>
            </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-item label="附件说明" prop="thingFiles">
                <file-upload v-model:files="form.thingFiles" />
            </el-form-item>
        </el-form>
        <footer class="flex end mt-20">
            <el-button
                type="primary"
                size="large"
                @click="handleSubmitManuelModelClueTask"
                v-loading="submitLoading"
                >确认下发</el-button
            >
        </footer>
    </el-dialog>

    <el-dialog title="配置涉及单位" v-model="editDepartShow" width="500">
        <el-form
            :label-width="120"
            :model="editDepartForm"
            ref="editDepartFormRef"
        >
            <el-form-item
                label="涉及单位"
                :rules="{
                    required: true,
                    message: '请选择涉及单位',
                }"
            >
                <depart-tree-select
                    v-model="editDepartForm.departId"
                    @node-click="
                        (node) => (editDepartForm.name = node.shortName)
                    "
                />
            </el-form-item>
        </el-form>
        <footer class="flex end mt-40">
            <el-button @click="editDepartShow = false">取消</el-button>
            <el-button type="primary" @click="handleUpdatDepartModelClue"
                >确认</el-button
            >
        </footer>
    </el-dialog>
</template>
<script lang="ts" setup>
import { DistributionMethod } from "@/enums/dictEnums";
import {
    listModelClue,
    manuelModelClueTask,
    updateDepartModelClue,
} from "@/api/sensitivePerception/modelClue";

import useCatchStore from "@/stores/modules/catch";
import { getDictLable } from "@/utils/util";
import feedback from "@/utils/feedback";

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

const query = ref({
    distributionMethod: DistributionMethod.MANUALLY_DISTRIBUTE,
    distributionState: "0",
});

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

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

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

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

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

const manualList = ref([]);

async function handleAddManuel(row) {
    if (!row.involveDepartId) {
        activeModelClueId = row.id;
        await feedback.confirm(
            `该数据的"涉及单位"为空，请先配置"涉及单位"再下发`,
            "去配置"
        );
        editDepartShow.value = true;
        return;
    }
    manualList.value.push(row);
}

function handleRemoveManuel(row) {
    manualList.value.splice(manualList.value.indexOf(row), 1);
}

async function handleNotProcessed(row) {
    await feedback.confirm(`确认该数据暂不处理？`);
}

const manualShow = ref(false);
const manualQuery = ref({});

const filterManualList = computed(() => {
    let arr = manualList.value;
    if (manualQuery.value.modelId) {
        arr = arr.filter((item) => item.modelId === manualQuery.value.modelId);
    }
    if (manualQuery.value.involveDepartId) {
        arr = arr.filter(
            (item) => item.involveDepartId === manualQuery.value.involveDepartId
        );
    }
    if (manualQuery.value.thingDesc) {
        arr = arr.filter((item) =>
            item.thingDesc.includes(manualQuery.value.thingDesc)
        );
    }
    return arr;
});

const modelOptions = computed(() => {
    const items = manualList.value.map((item) => {
        return {
            value: item.modelId,
            label: item.modelName,
        };
    });
    const uniqueItems = [
        ...new Map(items.map((item) => [item.value, item])).values(),
    ];
    return uniqueItems;
});

function manualReset() {
    manualQuery.value = {};
}

function handleShowDistributeDialog() {
    if (new Set(filterManualList.value.map((item) => item.modelId)).size > 1) {
        feedback.msgWarning("线索数据包含两个模型，请筛选单个模型再下发");
        return;
    }
    distributeShow.value = true;
    console.log(filterManualList.value)
    form.value.taskName = filterManualList.value[0].modelName
}

const form = ref({
    modelClues: [],
    thingFiles: [],
    problems: []
});
const formRef = ref(null);
const distributeShow = ref(false);

function handleAddProblem() {
    form.value.problems.push({})
}

function handleRemoveProblem(index) {
    form.value.problems.splice(index, 1)
}

const submitLoading = ref(false)
async function handleSubmitManuelModelClueTask() {
    await formRef.value.validate();
    form.value.modelClues = filterManualList.value;
    submitLoading.value = true
    try {
        await manuelModelClueTask(form.value);
    } catch(e) {
        submitLoading.value = false
        return
    }
    submitLoading.value = false
    feedback.msgSuccess("下发成功");
    form.value = {
        modelClues: [],
        thingFiles: [],
        problems: []
    };
    distributeShow.value = false;
    manualShow.value = false;
    manualList.value = [];
    getList();
}

const editDepartShow = ref(false);
const editDepartForm = ref({});
const editDepartFormRef = ref();
let activeModelClueId = 0;

async function handleUpdatDepartModelClue() {
    await editDepartFormRef.value.validate();
    await updateDepartModelClue(activeModelClueId, editDepartForm.value);
    editDepartShow.value = false;
    editDepartForm.value = {};
    getList();
}

const tableRef = ref();
function handleBathJoin() {
    const rows = tableRef.value.getSelectionRows();
    rows.forEach((row) => {
        if (
            manualList.value.filter((item) => item.id === row.id).length === 0
        ) {
            manualList.value.push(row);
        }
    });
}
</script>
<style lang="scss" scoped>
</style>