<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.departLevel">
                                <el-option value="3" 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>/</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="{ row }">
                        <el-button
                            type="primary"
                            link
                            @click="handleShowProfile(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>
    </div>

    <el-dialog
        title="单位问题详情"
        v-model="show"
        width="85vw"
        top="1vh"
        style="margin: 1vh auto"
    >
        <header class="flex center v-center gap">
            <label>统计范围</label>
            <div style="width: 320px">
                <date-time-range-picker-ext
                    v-model="time"
                    @change="getProfileData"
                    style="width: 300px"
                />
            </div>
            <el-button type="primary" @click="getProfileData">查询</el-button>
        </header>
        <el-scrollbar
            max-height="calc(98vh - 120px)"
            v-loading="loading"
            element-loading-text="单位问题详情加载中..."
        >
            <main>
                <el-row class="mb-20">
                    <el-col :span="8">
                        <h5>单位情况</h5>
                        <div class="row">
                            <div class="col col-24">
                                <label>单位名称</label>
                                <span>{{ departInfo.name }}</span>
                            </div>
                            <div class="col col-24">
                                <label>所长</label>
                                <span>{{ departInfo.mainRole }}</span>
                            </div>
                            <div class="col col-24">
                                <label>副所长</label>
                                <span>
                                    <span
                                        v-for="item in departInfo.deputyRole"
                                        :key="item"
                                        class="mr-10"
                                        >{{ item }}</span
                                    >
                                </span>
                            </div>
                        </div>
                        <el-row>
                            <el-col :span="12">
                                <description-pair
                                    label1="民警总人数"
                                    label2="问题涉及民警数"
                                    :value1="activeRow.policeSize"
                                    :value2="departInfo.negativePoliceSize"
                                    size="large"
                                />
                            </el-col>
                            <el-col :span="12">
                                <description-pair
                                    label1="协辅警人数"
                                    label2="问题涉及协辅警数"
                                    :value1="activeRow.auxSize"
                                    :value2="departInfo.negativeAuxSize"
                                    size="large"
                                />
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="8">
                        <h5>问题情况</h5>
                        <el-row
                            class="flex v-center"
                            style="height: calc(100% - 76px)"
                        >
                            <el-col :span="6" class="text-center">
                                <div
                                    class="text-primary"
                                    style="font-size: 34px"
                                >
                                    {{ activeRow.verifySize }}
                                </div>
                                <div>问题总数</div>
                            </el-col>
                            <el-col :span="18">
                                <el-row>
                                    <el-col
                                        :span="12"
                                        class="mb-20"
                                        v-if="
                                            negativeInfo.jcj110BusinessSize ||
                                            negativeInfo.jcj110Size
                                        "
                                    >
                                        <description-pair
                                            label1="110接处警量"
                                            label2="问题数"
                                            :value1="
                                                negativeInfo.jcj110BusinessSize
                                            "
                                            :value2="negativeInfo.jcj110Size"
                                        />
                                    </el-col>
                                    <el-col
                                        :span="12"
                                        v-if="
                                            negativeInfo.jcj122BusinessSize ||
                                            negativeInfo.jcj122Size
                                        "
                                    >
                                        <description-pair
                                            label1="122接处警量"
                                            label2="问题数"
                                            :value1="
                                                negativeInfo.jcj122BusinessSize
                                            "
                                            :value2="negativeInfo.jcj122Size"
                                        />
                                    </el-col>
                                    <el-col :span="12">
                                        <description-pair
                                            label1="执法办案"
                                            label2="问题数"
                                            :value1="
                                                negativeInfo.zfbaBusinessSize
                                            "
                                            :value2="negativeInfo.zfbaSize"
                                        />
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="8">
                        <h5>风险指数</h5>
                        <div class="flex center">
                            <el-progress
                                type="dashboard"
                                :percentage="78"
                                :stroke-width="16"
                                :width="250"
                                color="#DC6231"
                            >
                                <div style="line-height: 64px" class="mt-40">
                                    <span
                                        style="
                                            font-weight: 600;
                                            font-size: 60px;
                                            color: #e87749;
                                        "
                                        >78</span
                                    >
                                    <span style="font-size: 18px; color: #999"
                                        >分</span
                                    >
                                </div>
                                <div style="font-size: 14px" class="mb-10">
                                    分险指标值
                                </div>
                                <div style="color: #e87749; font-size: 28px">
                                    中风险
                                </div>
                            </el-progress>
                        </div>
                    </el-col>
                </el-row>
                <el-row class="mb-20">
                    <el-col :span="8">
                        <h5>问题来源占比</h5>
                        <v-charts
                            style="height: 320px"
                            :option="problemSourcesPieOptions"
                            autoresize
                        />
                    </el-col>
                    <el-col :span="8">
                        <h5>业务类型占比</h5>
                        <v-charts
                            style="height: 320px"
                            :option="businessTypePieOptions"
                            autoresize
                        />
                    </el-col>
                    <el-col :span="8">
                        <h5>风险问题构成</h5>
                        <v-charts
                            style="height: 320px"
                            :option="radarOption"
                            autoresize
                        />
                    </el-col>
                </el-row>
                <el-row class="mb-20" :gutter="20">
                    <el-col :span="8">
                        <h5>个人问题排名</h5>
                        <el-scrollbar max-height="300px">
                            <datav-chart-bar
                                size="small"
                                :data="policeBarList"
                                :color="colors"
                            />
                            <el-empty v-if="policeBarList.length === 0" />
                        </el-scrollbar>
                    </el-col>
                    <el-col :span="8">
                        <h5>突出问题排名</h5>

                        <el-scrollbar max-height="300px">
                            <datav-chart-bar
                                size="small"
                                :data="problemTypeBarList"
                                :color="colors"
                                labelPosition="top"
                            />
                            <el-empty v-if="policeBarList.length === 0" />
                        </el-scrollbar>
                    </el-col>
                    <el-col :span="8">
                        <h5>单位问题标签</h5>
                    </el-col>
                </el-row>
                <div style="margin-top: 60px">
                    <h5>问题变化趋势</h5>
                    <v-charts
                        style="height: 320px"
                        :option="barOption"
                        autoresize
                    />
                    <div></div>
                </div>
                <h5>问题清单</h5>
                <el-table :data="negativeList">
                    <el-table-column label="发现时间" prop="discoveryTime" />
                    <el-table-column label="问题来源" prop="problemSources" />
                    <el-table-column label="业务类别" prop="businessTypeName" />
                    <el-table-column
                        label="涉及单位"
                        prop="involveDepartName"
                    />
                    <el-table-column
                        label="核查情况"
                        prop="checkStatusName"
                        width="140"
                        align="center"
                    />
                    <el-table-column label="操作" width="160">
                        <template #default="{ row }">
                            <el-button
                                type="primary"
                                link
                                @click="handleAction(row)"
                                >查看详情</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
                <div class="flex end mt-8">
                    <el-pagination
                        @size-change="getNegativeList"
                        @current-change="getNegativeList"
                        :current-page="negativeQuery.current"
                        :page-sizes="[10, 20, 50]"
                        :page-size="negativeQuery.size"
                        v-model:current-page="negativeQuery.current"
                        layout="total, sizes, prev, pager, next"
                        :total="negativeTotal"
                    >
                    </el-pagination>
                </div>
            </main>
        </el-scrollbar>
    </el-dialog>

    <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 { listNegative } from "@/api/work/negative";
import { InspectCase } from "@/enums/dictEnums";
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();
}

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

const activeRow = ref({});
const show = ref(false);
const departInfo = ref({});
const negativeInfo = ref({});
const loading = ref(false);

const negativeQuery = ref({
    checkStatusList: [InspectCase.TRUE, InspectCase.TRUE],
});
const negativeList = ref([]);
const negativeTotal = ref(0);

const problemSourcesPieOptions = ref({
    tooltip: {
        trigger: "item",
    },
    series: [
        {
            type: "pie",
            radius: ["40%", "70%"],
            data: [],
        },
    ],
});
const businessTypePieOptions = ref({
    tooltip: {
        trigger: "item",
    },
    series: [
        {
            type: "pie",
            radius: ["40%", "70%"],
            data: [],
        },
    ],
});
const policeBarList = ref([]);

const barOption = ref({
    xAxis: {
        type: "category",
        data: [],
    },
    yAxis: {
        type: "value",
    },
    series: [
        {
            data: [],
            type: "bar",
            color: "#5B8FF9 ",
        },
    ],
});

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

watch(activeRow, async () => {
    time.value = [
        moment().startOf("year").format("YYYY-MM-DD HH:mm:ss"),
        moment().format("YYYY-MM-DD HH:mm:ss"),
    ];
    await getProfileData();
    listNegativeMonthly(activeRow.value.departId).then((data) => {
        barOption.value.xAxis.data = data.months;
        barOption.value.series[0].data = data.values;
    });
});

const time = ref([]);
const radarOption = ref({
    radar: {
        indicator: [],
    },
    series: [
        {
            type: "radar",
            data: [
                {
                    value: [],
                },
            ],
            label: {
                show: true,
            },
        },
    ],
});

const problemTypeBarList = ref([]);

async function getProfileData() {
    loading.value = true;
    negativeQuery.value.involveDepartId = activeRow.value.departId;
    getNegativeList();
    const data = await getDepartProfile(activeRow.value.departId, {
        beginTime: time.value.length ? time.value[0] : "",
        endTime: time.value.length ? time.value[1] : "",
    });

    departInfo.value = data.departInfo;
    negativeInfo.value = data.negativeInfo;
    problemSourcesPieOptions.value.series[0].data = data.problemSourcesList;
    businessTypePieOptions.value.series[0].data = data.businessTypeList;

    policeBarList.value = data.policeBarList;

    radarOption.value.radar.indicator = data.problemTypeRadarIndicator;
    radarOption.value.series[0].data[0].value = data.problemTypeRadarData;

    problemTypeBarList.value = data.problemTypeBarList;
    loading.value = false;
}

function getNegativeList() {
    listNegative(negativeQuery.value).then((data) => {
        negativeList.value = data.records;
        negativeTotal.value = data.total;
    });
}

const colors = [
    { color: "#5AD8A6", percentage: 40 },
    { color: "#F6BD16", percentage: 60 },
    { color: "#E8684A ", percentage: 80 },
];

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