<template>
    <div class="container h100">
        <el-row :gutter="20" class="h100">
            <el-col :span="6" class="h100">
                <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-col :span="8">
                                <el-form-item label="分发状态">
                                    <el-select
                                        v-model="query.distributionState"
                                        clearable
                                    >
                                        <el-option
                                            v-for="item in dict.distributionState"
                                            :label="item.dictLabel"
                                            :value="item.dictValue"
                                        />
                                    </el-select>
                                </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="createTime"
                            width="150"
                        />
<!--                        <el-table-column-->
<!--                            label="预警模型"-->
<!--                            prop="modelName"-->
<!--                            width="160"-->
<!--                            show-overflow-tooltip-->
<!--                        />-->
                      <el-table-column
                          label="涉及单位"
                          show-overflow-tooltip
                          width="200"
                      >
                        <template #default="{ row }">
                          <span>{{ row.involveParentDepartName }}</span><span v-if="row.involveDepartName"><br>{{ row.involveDepartName }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column
                          label="涉及人员"
                          prop="involvePoliceName"
                          width="100"
                      >
                        <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>{{
                                    getDictLable(
                                        dict.distributionState,
                                        row.distributionState
                                    )
                                }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="180">
                            <template #default="{ row }">
                                <el-button
                                    type="primary"
                                    link
                                    @click="handleShowDetail(row)"
                                    >查看详情</el-button
                                >
                                <el-button
                                    v-if="row.negativeId"
                                    type="primary"
                                    link
                                    @click="handleAction(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="[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="show" width="80vw">
        <div class="dialog-container">
            <div class="row mt-10">
                <div class="col col-6">
                    <label>预警时间</label>
                    <span>{{ activeModelClue.createTime }}</span>
                </div>
                <div class="col col-6">
                    <label>预警模型</label>
                    <span>{{ activeModelClue.modelName }}</span>
                </div>
                <div class="col col-6">
                    <label>涉及单位</label>
                    <span>
                        <span>{{ activeModelClue.involveParentDepartName }}</span><span>{{ activeModelClue.involveDepartName ? '/' + activeModelClue.involveDepartName : '' }}</span>
                    </span>
                </div>
                <div class="col col-6">
                    <label>涉及人员</label>
                    <span>{{ activeModelClue.involvePoliceName }}</span>
                </div>
            </div>
            <div class="row mt-10">
                <div class="col col-24">
                    <label>预警内容</label>
                    <span>{{ activeModelClue.thingDesc }}</span>
                </div>
            </div>
            <div class="row mt-10">
                <div class="col col-6">
                    <label>分发状态</label>
                    <span>{{
                        getDictLable(
                            dict.distributionState,
                            activeModelClue.distributionState
                        )
                    }}</span>
                </div>
            </div>
            <h3>详细信息</h3>
            <div style="min-height: 200px">
                <el-empty description="无数据" />
            </div>
        </div>
    </el-dialog>

    <negative-dialog
        v-model="negativeShow"
        :id="activeNegativeId"
        @close="negativeShow = false"
    />
</template>
<script lang="ts" setup>
import { listModelClue } from "@/api/sensitivePerception/modelClue";
import useCatchStore from "@/stores/modules/catch";
import { getDictLable } from "@/utils/util";

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

const query = ref({});

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

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

const route = useRoute();
watch(
    () => route.query.modelId,
    (val) => {
        query.value.modelIds = [val];
    }
);
watch(
    () => query.value.modelIds,
    (newVal, oldVal) => {
        if (newVal !== oldVal) {
            query.value.current = 1;
            getList();
        }
    }
);

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

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

const show = ref(false);
const activeModelClue = ref({});

function handleShowDetail(row) {
    activeModelClue.value = row;
    show.value = true;
}

const activeNegativeId = ref('')
const negativeShow = ref(false)

function handleAction(row) {
    
    negativeShow.value = true;
    activeNegativeId.value = row.negativeId;
}
</script>
<style lang="scss" scoped>
</style>