<template>
    <div class="container">
        <header>
            <el-form :label-width="114">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="单位类型">
                            <el-select v-model="query.departGroupId" clearable>
                                <el-option
                                    value="10"
                                    label="派出所"
                                ></el-option>
                                <el-option
                                    value="11"
                                    label="交警大队"
                                ></el-option>
                                <el-option
                                    value="13"
                                    label="刑侦大队"
                                ></el-option>
                                <el-option
                                    value="14"
                                    label="禁毒大队"
                                ></el-option>
                                <el-option
                                    value="15"
                                    label="治安大队"
                                ></el-option>
                                <el-option
                                    value="16"
                                    label="人境大队"
                                ></el-option>
                                <el-option value="12" label="其他"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="统计时间">
                            <date-time-range-picker-ext
                                v-model="query.crtTime"
                            />
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item label="单位">
                            <depart-tree-select
                                v-model="query.departId"
                                :check-strictly="false"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="单位简称">
                            <el-input
                                v-model="query.departName"
                                placeholder="请输入"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="mb-25 flex end">
                <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="mainLoading">
            <el-table :data="list">
                <el-table-column label="单位名称">
                    <template #default="{ row }">
                        <span
                            >{{ row.parentDepartName }}/{{
                                row.departName
                            }}</span
                        >
                    </template>
                </el-table-column>
                <el-table-column
                    label="民警人数"
                    prop="policeSize"
                    align="center"
                    width="160"
                />
                <el-table-column
                    label="协辅警人数"
                    prop="auxSize"
                    align="center"
                    width="160"
                />
                <el-table-column
                    label="查实问题涉及人数"
                    prop="verifyPoliceSize"
                    align="center"
                    width="160"
                />
                <el-table-column
                    label="查实问题数"
                    prop="verifySize"
                    align="center"
                    width="160"
                />
                <el-table-column label="风险指数" align="center" width="160">
                    <template #default="{ row }">
                        <span
                            :style="{ color: getColor(score) }"
                            v-if="row.score"
                            >{{ Math.round(row.score) }}</span
                        >
                        <span v-else>-</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="240">
                    <template #default="{ row }">
                        <el-button
                            type="primary"
                            link
                            @click="handleShowProfile(row)"
                            >问题详情</el-button
                        >
                        <el-button
                            type="primary"
                            link
                            @click="handleShowNotification(row)"
                            >预警提醒</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="[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>
    </div>

    <negativeInfo-depart-dialog v-model="show" :departId="activeRow.departId" />

    <alarm-dialog
        v-model="showNotification"
        :departId="activeDepartId"
        @close="showNotification = false"
    />

    <negative-dialog
        v-model="negativeShow"
        :id="activeNegativeId"
        @close="negativeShow = false"
    />
</template>
<script lang="ts" setup>

import vCharts from "vue-echarts";
import {
    listDepartNegative,
    getDepartProfile,
    listNegativeMonthly,
} from "@/api/sensitivePerception/profileDepart";

import moment from "moment";

const query = ref({
    current: 1,
    size: 10,
    departLevel: "3",
    crtTime: [
        moment().startOf("year").format("YYYY-MM-DD HH:mm:ss"),
        moment().format("YYYY-MM-DD HH:mm:ss"),
    ],
});
const list = ref<any[]>([]);
const total = ref(0);

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

function reset() {
    query.value = {
        current: 1,
        size: 10,
        departLevel: "3",
        crtTime: [
            moment().startOf("year").format("YYYY-MM-DD HH:mm:ss"),
            moment().format("YYYY-MM-DD HH:mm:ss"),
        ],
    };
    getList();
}

let showNotification = ref(false);
const activeDepartId = ref("");
const handleShowNotification = (row) => {
    showNotification.value = true;
    activeDepartId.value = row.departId;
};

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

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

async function handleShowProfile(row) {
    activeRow.value = row;
    show.value = true;
    
}

const negativeShow = ref(false);
const activeNegativeId = ref("");
function handleAction(row) {
    negativeShow.value = true;
    activeNegativeId.value = row.id;
}

function getColor(val) {
    if (val < 60) {
        return "var(--success-color)";
    }
    if (val < 80) {
        return "#e87749";
    }
    return "var(--danger-color)";
}
</script>
