<template>
    <el-scrollbar height="100vh">
        <div class="wrapper">
            <datav-header />
            <main>
                <el-row :gutter="16">
                    <el-col :span="6">
                        <datav-card title="日常督察情况">
                            <datav-tabs
                                v-model="rcdcProRankTab"
                                type="bottom-button"
                                ref="sceneInspRcdcProRankTabs"
                            >
                                <datav-tab-item label="分县市局" name="1">
                                    <el-row class="mb-32">
                                        <el-col :span="6">
                                            <div
                                                class="descriptions_cell text-center"
                                            >
                                                <div
                                                    class="descriptions_content"
                                                >
                                                    {{
                                                        fxsjRankOverview.proTotal
                                                    }}
                                                </div>
                                                <div class="descriptions_label">
                                                    问题数
                                                </div>
                                            </div>
                                        </el-col>
                                        <el-col :span="6">
                                            <div
                                                class="descriptions_cell text-center"
                                            >
                                                <div
                                                    class="descriptions_content"
                                                >
                                                    {{
                                                        fxsjRankOverview.changing
                                                    }}
                                                </div>
                                                <div class="descriptions_label">
                                                    整改中
                                                </div>
                                            </div>
                                        </el-col>
                                        <el-col :span="6">
                                            <div
                                                class="descriptions_cell text-center"
                                            >
                                                <div
                                                    class="descriptions_content"
                                                >
                                                    {{
                                                        fxsjRankOverview.changed
                                                    }}
                                                </div>
                                                <div class="descriptions_label">
                                                    已整改
                                                </div>
                                            </div>
                                        </el-col>
                                        <el-col :span="6">
                                            <div
                                                class="descriptions_cell text-center"
                                            >
                                                <div
                                                    class="descriptions_content"
                                                >
                                                    {{
                                                        fxsjRankOverview.correctionRate
                                                    }}%
                                                </div>
                                                <div class="descriptions_label">
                                                    整改率
                                                </div>
                                            </div>
                                        </el-col>
                                    </el-row>
                                    <el-scrollbar height="350px">
                                        <datav-chart-bar
                                            :data="fxsjChangedRankList"
                                            size="small"
                                            title="整改率排名"
                                            sub-title="已整改/问题数"
                                            unit="%"
                                            :color="dayTimeColors"
                                        />
                                    </el-scrollbar>
                                </datav-tab-item>
                                <datav-tab-item label="局属单位" name="2">
                                    <el-row class="mb-32">
                                        <el-col :span="6">
                                            <div
                                                class="descriptions_cell text-center"
                                            >
                                                <div
                                                    class="descriptions_content"
                                                >
                                                    {{
                                                        jsdwRankOverview.proTotal
                                                    }}
                                                </div>
                                                <div class="descriptions_label">
                                                    问题数
                                                </div>
                                            </div>
                                        </el-col>
                                        <el-col :span="6">
                                            <div
                                                class="descriptions_cell text-center"
                                            >
                                                <div
                                                    class="descriptions_content"
                                                >
                                                    {{
                                                        jsdwRankOverview.changing
                                                    }}
                                                </div>
                                                <div class="descriptions_label">
                                                    整改中
                                                </div>
                                            </div>
                                        </el-col>
                                        <el-col :span="6">
                                            <div
                                                class="descriptions_cell text-center"
                                            >
                                                <div
                                                    class="descriptions_content"
                                                >
                                                    {{
                                                        jsdwRankOverview.changed
                                                    }}
                                                </div>
                                                <div class="descriptions_label">
                                                    已整改
                                                </div>
                                            </div>
                                        </el-col>
                                        <el-col :span="6">
                                            <div
                                                class="descriptions_cell text-center"
                                            >
                                                <div
                                                    class="descriptions_content"
                                                >
                                                    {{
                                                        jsdwRankOverview.correctionRate
                                                    }}%
                                                </div>
                                                <div class="descriptions_label">
                                                    整改率
                                                </div>
                                            </div>
                                        </el-col>
                                    </el-row>
                                    <el-scrollbar height="350px">
                                        <datav-chart-bar
                                            :data="jsdwChangedRankList"
                                            size="small"
                                            title="整改率排名"
                                            sub-title="已整改/问题数"
                                            unit="%"
                                            :color="dayTimeColors"
                                        />
                                    </el-scrollbar>
                                </datav-tab-item>
                            </datav-tabs>
                        </datav-card>

                        <datav-card title="问题类型占比">
                            <v-charts
                                style="height: 310px"
                                :option="wtlxPieOption"
                                autoresize
                                ref="sceneProblemTypeRate"
                            />
                        </datav-card>
                    </el-col>

                    <el-col :span="12">
                        <datav-date-picker v-model="time" />
                        <div class="flex gap-42">
                            <datav-statistic
                                :value="overview.problemNumber"
                                title="通报问题数"
                                style="width: 16.66%"
                            />
                            <datav-statistic
                                :value="overview.rectifingNumber"
                                title="整改中"
                                style="width: 16.66%"
                            />
                            <datav-statistic
                                :value="overview.rectifedNumber"
                                title="已整改"
                                style="width: 16.66%"
                            />
                            <datav-statistic
                                :value="overview.departNumber"
                                title="涉及单位数"
                                style="width: 16.66%"
                            />
                            <datav-statistic
                                :value="overview.personNumber"
                                title="涉及人数"
                                style="width: 16.66%"
                            />
                            <datav-statistic
                                :value="overview.rectifyRate"
                                value-unit="%"
                                title="整改率"
                                style="width: 16.66%"
                            />
                        </div>
                        <v-charts
                            style="height: 450px"
                            :option="option"
                            autoresize
                            @click="handleClick"
                            ref="sceneMap"
                        />
                        <datav-card title="问题趋势">
                            <v-charts
                                style="height: 280px"
                                :option="proTrend"
                                autoresize
                                ref="sceneInspProTrend"
                            />
                            <div class="gobal-dropdown-container">
                                <el-dropdown
                                    class="test"
                                    @command="handleCommand"
                                >
                                    <span
                                        class="el-dropdown-link my-gobal-yearselect"
                                    >
                                        {{ selectedYear + " 年" }}
                                    </span>
                                    <template #dropdown>
                                        <el-dropdown-menu style="width: 90px">
                                            <el-dropdown-item
                                                v-for="year in years"
                                                :key="year"
                                                :command="year"
                                                >{{ year + " 年" }}
                                            </el-dropdown-item>
                                        </el-dropdown-menu>
                                    </template>
                                </el-dropdown>
                            </div>
                        </datav-card>
                    </el-col>

                    <el-col :span="6">
                        <datav-card>
                            <datav-tabs
                                v-model="zxdcProRankTab"
                                size="small"
                                ref="sceneInspZxdcProRankTabs"
                            >
                                <template
                                    v-for="item in dict.specialSupervision"
                                    :key="item.dictValue"
                                >
                                    <datav-tab-item
                                        :label="item.dictLabel"
                                        :name="item.dictValue"
                                    >
                                        <datav-tabs type="bottom-button">
                                            <datav-tab-item
                                                label="分县市局"
                                                name="1"
                                            >
                                                <el-row class="mb-32">
                                                    <el-col :span="6">
                                                        <div
                                                            class="descriptions_cell text-center"
                                                        >
                                                            <div
                                                                class="descriptions_content"
                                                            >
                                                                {{
                                                                    fxsjYellowBetOverview.proTotal
                                                                }}
                                                            </div>
                                                            <div
                                                                class="descriptions_label"
                                                            >
                                                                问题数
                                                            </div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div
                                                            class="descriptions_cell text-center"
                                                        >
                                                            <div
                                                                class="descriptions_content"
                                                            >
                                                                {{
                                                                    fxsjYellowBetOverview.changing
                                                                }}
                                                            </div>
                                                            <div
                                                                class="descriptions_label"
                                                            >
                                                                整改中
                                                            </div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div
                                                            class="descriptions_cell text-center"
                                                        >
                                                            <div
                                                                class="descriptions_content"
                                                            >
                                                                {{
                                                                    fxsjYellowBetOverview.changed
                                                                }}
                                                            </div>
                                                            <div
                                                                class="descriptions_label"
                                                            >
                                                                已整改
                                                            </div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div
                                                            class="descriptions_cell text-center"
                                                        >
                                                            <div
                                                                class="descriptions_content"
                                                            >
                                                                {{
                                                                    fxsjYellowBetOverview.correctionRate
                                                                }}%
                                                            </div>
                                                            <div
                                                                class="descriptions_label"
                                                            >
                                                                整改率
                                                            </div>
                                                        </div>
                                                    </el-col>
                                                </el-row>
                                                <el-scrollbar height="330px">
                                                    <datav-chart-bar
                                                        :data="
                                                            fxsjYellowBetRankList
                                                        "
                                                        size="large"
                                                        title="问题数排名"
                                                        sub-title="问题数"
                                                        :color="colors"
                                                    />
                                                </el-scrollbar>
                                            </datav-tab-item>
                                            <datav-tab-item
                                                label="局属单位"
                                                name="2"
                                            >
                                                <el-row class="mb-32">
                                                    <el-col :span="6">
                                                        <div
                                                            class="descriptions_cell text-center"
                                                        >
                                                            <div
                                                                class="descriptions_content"
                                                            >
                                                                {{
                                                                    jsdwYellowBetOverview.proTotal
                                                                }}
                                                            </div>
                                                            <div
                                                                class="descriptions_label"
                                                            >
                                                                问题数
                                                            </div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div
                                                            class="descriptions_cell text-center"
                                                        >
                                                            <div
                                                                class="descriptions_content"
                                                            >
                                                                {{
                                                                    jsdwYellowBetOverview.changing
                                                                }}
                                                            </div>
                                                            <div
                                                                class="descriptions_label"
                                                            >
                                                                整改中
                                                            </div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div
                                                            class="descriptions_cell text-center"
                                                        >
                                                            <div
                                                                class="descriptions_content"
                                                            >
                                                                {{
                                                                    jsdwYellowBetOverview.changed
                                                                }}
                                                            </div>
                                                            <div
                                                                class="descriptions_label"
                                                            >
                                                                已整改
                                                            </div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div
                                                            class="descriptions_cell text-center"
                                                        >
                                                            <div
                                                                class="descriptions_content"
                                                            >
                                                                {{
                                                                    jsdwYellowBetOverview.correctionRate
                                                                }}%
                                                            </div>
                                                            <div
                                                                class="descriptions_label"
                                                            >
                                                                整改率
                                                            </div>
                                                        </div>
                                                    </el-col>
                                                </el-row>
                                                <el-scrollbar height="330px">
                                                    <datav-chart-bar
                                                        :data="
                                                            jsdwYellowBetRankList
                                                        "
                                                        size="large"
                                                        title="问题数排名"
                                                        sub-title="问题数"
                                                        :color="colors"
                                                    />
                                                </el-scrollbar>
                                            </datav-tab-item>
                                        </datav-tabs>
                                    </datav-tab-item>
                                </template>
                            </datav-tabs>
                        </datav-card>

                        <datav-card title="督察工作动态">
                            <el-scrollbar height="310px" ref="sceneScrollbar">
                                <datav-message
                                    v-for="(msg, index) in messages"
                                    :key="index"
                                    :type="msg.type"
                                    :title="msg.workType"
                                    :content="msg.contentTxt"
                                    :date="msg.releaseTime"
                                />
                            </el-scrollbar>
                        </datav-card>
                    </el-col>
                </el-row>
            </main>
        </div>
    </el-scrollbar>
</template>

<script setup>
import vCharts from "vue-echarts";
import changshaMap from "@/assets/data/changsha.json";
import * as echarts from "echarts/core";
import moment from "moment";
import {
    getChangedRank,
    getProblemTypeRate,
    getSupervisionNotifyCount,
    getSupervisionNotifyMap,
    getSupervisionTrend,
    getWorkDynamics,
    getYellowBetDrug,
} from "@/api/data/supervisionNotify.ts";
import router from "@/router/index.ts";
import {
    circularChart,
    workDynamics,
} from "@/views/datav/simulateData/AnimationTestData.js";
import { workDynamicColorMapping } from "@/enums/workDynamicColorMapping.js";
import { mapOrgNameMapping } from "@/enums/orgMapping.js";

import useCatchStore from "@/stores/modules/catch";
import { onMounted } from "vue";

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

// region 所有变量
const time = ref([
    moment().subtract(1, "year").format("YYYY-MM-DD"),
    moment().format("YYYY-MM-DD"),
]);
const currentYear = new Date().getFullYear();
const years = ref([
    currentYear.toString(),
    (currentYear - 1).toString(),
    (currentYear - 2).toString(),
]); // 年份列表
const selectedYear = ref(currentYear); // 当前选中的年份

const overview = ref({
    problemNumber: 0,
    rectifingNumber: 0,
    rectifedNumber: 0,
    departNumber: 0,
    personNumber: 0,
    rectifyRate: 0,
}); // 中央数据总览
const fxsjRankOverview = ref({}); // 日常督察总览分县市局
const jsdwRankOverview = ref({}); // 日常督察总览局属单位
const fxsjChangedRankList = ref([]); // 日常督察问题排行分县市局
const jsdwChangedRankList = ref([]); // 日常督察问题排行局属单位
const wtlxList = ref([]); // 问题类型占比

const fxsjYellowBetOverview = ref({
    proTotal: 0,
    changing: 0,
    changed: 0,
    correctionRate: 0,
}); // 总览分县市局
const jsdwYellowBetOverview = ref({
    proTotal: 0,
    changing: 0,
    changed: 0,
    correctionRate: 0,
}); // 总览局属单位
const fxsjYellowBetRankList = ref([]); // 问题排行分县市局
const jsdwYellowBetRankList = ref([]); // 问题排行局属单位

const messages = ref([]);
const rcdcProRankTab = ref("1"); // 日常督察问题排行tab
const zxdcProRankTab = ref("1"); // 专项督察问题排行tab
const sceneInspRcdcProRankTabs = ref(null);
const sceneProblemTypeRate = ref(null);
const sceneMap = ref(null);
const sceneInspProTrend = ref(null);
const sceneInspZxdcProRankTabs = ref(null);
const sceneScrollbar = ref(null);
const currentIndex = ref(0);
let sceneInspRcdxIntervalId;
let sceneProblemTypeRateIntervalId;
let sceneInspMapIntervalId;
let sceneInspTrendIntervalId;
let sceneInspZxdxIntervalId;
let sceneWorkDynamicsIntervalId;

const colors = [
    {
        color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
        percentage: 80,
    },
    {
        color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
        percentage: 60,
    },
    {
        color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
        percentage: 0,
    },
];
const dayTimeColors = [
    {
        color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",

        percentage: 80,
    },
    {
        color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
        percentage: 75,
    },
    {
        color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
        percentage: 0,
    },
];
// endregion

// region 所有图表
const wtlxPieOption = computed(() => {
    return {
        tooltip: {
            trigger: "item",
        },
        series: [
            {
                type: "pie",
                radius: ["40%", "70%"],
                label: {
                    color: "#fff",
                },
                data: wtlxList.value,
            },
        ],
    };
});
echarts.registerMap("changsha", changshaMap);
const superviseTempMapVoList = ref([]);
const option = ref({
    geo: {
        map: "changsha",
        itemStyle: {
            normal: {
                opacity: 0, // 设置透明度
            },
        },
    },
    tooltip: {
        trigger: "item",
        position: "bottom",
        formatter: function (params) {
            // console.log(params)
            const dataItem = superviseTempMapVoList.value.find((item) =>
                item.name.includes(params.name.substring(0, 2))
            );
            if (dataItem) {
                return `
        <div class="tooltip">
          <div class="tooltip-title">${dataItem.originalName}</div>
          <div class="tooltip-content">
            <ul class="tooltip-ul" >
              <li>通报问题数 <span>${dataItem.totalPro}</span></li>
              <li>整改中 <span>${dataItem.changing}</span></li>
              <li>已整改 <span>${dataItem.changed}</span></li>
              <li>涉及单位数 <span>${dataItem.relationOrg}</span></li>
              <li>涉及人数 <span>${dataItem.personNum}</span></li>
              <li>整改率 <span>${dataItem.changedRate}%</span></li>
            </ul>
          </div>
        </div>`;
            } else {
                return `<div class="tooltip">
          <div class="tooltip-title">${params.name}</div>
          <div class="tooltip-content">
            <ul class="tooltip-ul"">
              <li>通报问题数 <span>-</span></li>
              <li>整改中 <span>-</span></li>
              <li>已整改 <span>-</span></li>
              <li>涉及单位数 <span>-</span></li>
              <li>涉及人数 <span>-</span></li>
              <li>整改率 <span>-</span></li>
            </ul>
          </div>
        </div>`;
            }
        },
    },
    visualMap: {
        type: "piecewise",
        bottom: 10,
        pieces: [
            { gte: 0, lte: 200, label: "低于平均问题30%", color: "#4987F6" },
            {
                gte: 200,
                lte: 400,
                label: "平均问题上下浮动30%内",
                color: "#F6A149",
            },
            { gte: 400, label: "高于平均问题30%", color: "#D34343" },
        ],
        right: 10,
        realtime: false,

        orient: "horizontal",
        textStyle: {
            color: "#fff",
        },
        calculable: true,
        // inRange: {
        //   color: ['#4987F6', '#F6A149', '#D34343']
        // }
    },
    series: [
        {
            name: "长沙",
            type: "map",
            map: "changsha",
            hoverAnimation: true,
            roam: true,
            label: {
                show: true,
                color: "white",
            },
            itemStyle: {
                normal: {
                    areaColor: "#02215E",
                    borderColor: "#24D2EE",
                    borderWidth: 1, // 高亮时边框宽度
                },
            },
            emphasis: {
                areaColor: "#FFD700", // 高亮时区域颜色
                borderColor: "#FF0000", // 高亮时边框颜色
                borderWidth: 4, // 高亮时边框宽度
            },
            data: [],
        },
    ],
});
const proTrend = ref({
    grid: {
        left: "5%", // 图表距离容器左边的距离
        right: "2%", // 图表距离容器右边的距离
        top: "10%", // 图表距离容器上边的距离
        bottom: "20%", // 图表距离容器下边的距离
        containLabel: false, // 是否包含坐标轴的标签
    },
    xAxis: {
        type: "category",
        data: [],
        boundaryGap: true,
        axisTick: {
            // 去掉X轴刻度线
            show: false,
        },
    },
    yAxis: {
        type: "value",
        splitLine: {
            show: true,
            lineStyle: {
                color: "#193775",
            },
        },
    },
    tooltip: {
        trigger: "axis",
        axisPointer: {
            type: "line",
            label: {
                backgroundColor: "#6a7985",
            },
        },
    },
    series: [
        {
            type: "line",
            smooth: true,
            label: {
                show: false,
            },
            lineStyle: {
                color: "#28E6FF",
                width: 4,
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: "rgba(40,230,255,0.47)", // 渐变起始颜色
                    },
                    {
                        offset: 1,
                        color: "rgba(40,230,255,0)", // 渐变结束颜色
                    },
                ]),
            },
            data: [],
        },
    ],
});
// endregion

// region  所有函数
const getChangedRankData = async () => {
    const res = await getChangedRank(time.value);
    fxsjRankOverview.value = res.fxsjRankOverview;
    jsdwRankOverview.value = res.jsdwRankOverview;
    fxsjChangedRankList.value = res.fxsjChangedRankList;
    jsdwChangedRankList.value = res.jsdwChangedRankList;
};
const getProblemTypeRateData = async () => {
    const res = await getProblemTypeRate(time.value);
    // wtlxList.value = circularChart;
    wtlxList.value = res.wtlxList;
};
const getSupervisionNotifyCountData = async () => {
    const res = await getSupervisionNotifyCount(time.value);
    overview.value = res.overview;
};
const getSupervisionNotifyMapData = async () => {
    const res = await getSupervisionNotifyMap(time.value);
    const mappedData = mapOrgNameMapping(
        res.superviseTempMapVoList,
        "totalPro"
    );
    const total = mappedData.reduce((sum, item) => sum + Number(item.value), 0);
    const avg = total / mappedData.length; // 计算平均值
    const range30Percent = avg * 0.3; // 不用取整，小数也可以
    option.value.visualMap.pieces = [
        {
            gte: 0,
            lte: avg - range30Percent,
            label: "低于平均问题30%",
            color: "#4987F6",
        },
        {
            gte: avg - range30Percent,
            lte: avg + range30Percent,
            label: "平均问题上下浮动30%内",
            color: "#F6A149",
        },
        {
            gte: avg + range30Percent,
            label: "高于平均问题30%",
            color: "#D34343",
        },
    ];
    superviseTempMapVoList.value = mappedData;
    option.value.series[0].data = mappedData;
};
const getSupervisionTrendData = async () => {
    const res = await getSupervisionTrend(selectedYear.value);
    const supervisionTrend = res.supervisionTrend;
    const categories = supervisionTrend.map((item) => item.name);
    const values = supervisionTrend.map((item) => item.value);
    // 更新图表数据
    proTrend.value.xAxis.data = categories;
    proTrend.value.series[0].data = values;
};
const getYellowBetDrugData = async () => {
    const res = await getYellowBetDrug(time.value, zxdcProRankTab.value);
    fxsjYellowBetOverview.value = res.countyOverview;
    jsdwYellowBetOverview.value = res.bureauOverview;
    fxsjYellowBetRankList.value = res.countyRankList;
    jsdwYellowBetRankList.value = res.bureauRankList;
};

watch(zxdcProRankTab, () => {
  getYellowBetDrugData()
})

const getWorkDynamicsData = async () => {
    const data = await getWorkDynamics(time.value);
    const colorNewsVoList = workDynamicColorMapping(data);
    messages.value = colorNewsVoList;
};

const getData = () => {
    getChangedRankData();
    getProblemTypeRateData();
    getSupervisionNotifyCountData();
    getSupervisionNotifyMapData();
    getSupervisionTrendData();
    getYellowBetDrugData();
    getWorkDynamicsData();
};
// endregion

// region 动画
// 日常督察问题排行动画
const sceneInspRcdxRankAnimation = () => {
    rcdcProRankTab.value = (
        (parseInt(rcdcProRankTab.value) % 2) +
        1
    ).toString();
};
sceneInspRcdxIntervalId = setInterval(sceneInspRcdxRankAnimation, 3000);
// 问题类型占比
const sceneProblemTypeRateAnimation = () => {
    const temp = sceneProblemTypeRate?.value?.chart;
    if (!temp) return;
    const length = wtlxPieOption.value.series[0].data.length;
    const randomNum = Math.floor(Math.random() * length);
    temp?.dispatchAction({ type: "downplay", seriesIndex: 0 });
    temp?.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: randomNum,
    }); // 显示
    temp?.dispatchAction({
        type: "showTip",
        seriesIndex: 0,
        dataIndex: randomNum,
    });
};
sceneProblemTypeRateIntervalId = setInterval(
    sceneProblemTypeRateAnimation,
    2000
);
// 地图动画
const sceneInspMapAnimation = () => {
    const mapTemp = sceneMap?.value?.chart;
    if (!mapTemp) return;
    // 来个随机数，9个图  0~8的整数就ok
    const randomNum = Math.floor(Math.random() * 9);
    mapTemp.dispatchAction({
        type: "downplay", //downplay 取消高亮
        seriesIndex: 0,
    });
    mapTemp.dispatchAction({
        type: "highlight", //highLight 高亮指定的数据图形
        seriesIndex: 0, //系列index
        dataIndex: randomNum, //数据index
    });
    mapTemp.dispatchAction({
        type: "showTip", //showTip 显示提示框
        seriesIndex: 0,
        dataIndex: randomNum,
    });
};
// 启动定时器，每隔 2 秒执行一次
sceneInspMapIntervalId = setInterval(sceneInspMapAnimation, 2000);
// 问题趋势动画
const sceneInspTrendAnimation = () => {
    const trendTemp = sceneInspProTrend?.value?.chart;
    if (!trendTemp) return;
    const randomNum = Math.floor(Math.random() * 12);
    trendTemp.dispatchAction({
        type: "showTip",
        seriesIndex: 0,
        dataIndex: randomNum,
    });
};
sceneInspTrendIntervalId = setInterval(sceneInspTrendAnimation, 2000);
// 专项督察问题排行动画
const sceneInspZxdxRankAnimation = () => {
    const dictItem = dict.specialSupervision.find(
        (item) => (item.dictValue === zxdcProRankTab.value)
    );
    if (dictItem) {
        const index = dict.specialSupervision.indexOf(dictItem);
        if (index === dict.specialSupervision.length - 1) {
            zxdcProRankTab.value = dict.specialSupervision[0].dictValue;
        } else {
            zxdcProRankTab.value = dict.specialSupervision[index + 1].dictValue;
        }
    }
};

onMounted(() => {
    // sceneInspZxdxIntervalId = setInterval(sceneInspZxdxRankAnimation, 5000);
});

// 工作动态动画
const sceneWorkDynamicsAnimation = () => {
    const sceneScrollTemp = sceneScrollbar?.value;
    const maxScroll =
        sceneScrollTemp?.wrapRef?.scrollHeight -
        sceneScrollTemp?.wrapRef?.clientHeight;
    currentIndex.value > maxScroll
        ? (currentIndex.value = 0)
        : (currentIndex.value += 1);
    if (currentIndex.value === 0) {
        sceneScrollTemp?.scrollTo({ top: currentIndex.value });
    } else {
        sceneScrollTemp?.scrollTo({ top: currentIndex.value });
    }
};
sceneWorkDynamicsIntervalId = setInterval(sceneWorkDynamicsAnimation, 50);
// endregion

// region 事件
watch(time, () => {
    getData();
});
onMounted(() => {
    getData();
    setupEventListeners();
});
const handleCommand = (year) => {
    selectedYear.value = year; // 更新当前选中的年份
    getSupervisionTrend(year).then((res) => {
        const supervisionTrend = res.supervisionTrend;
        const categories = supervisionTrend.map((item) => item.name);
        const values = supervisionTrend.map((item) => item.value);
        // 更新图表数据
        proTrend.value.xAxis.data = categories;
        proTrend.value.series[0].data = values;
    });
};

const handleClick = (params) => {
    const departId = params.data.departId;
    const url = router.resolve({
        path: "/datav/subOneSceneInsp",
        query: { departId: departId },
    }).href;
    window.open(url, "_blank");
};

// 鼠标经过地图事件
const setupEventListeners = () => {
    sceneInspRcdxRankAnimationStop();
    sceneProblemTypeRateAnimationStop();
    sceneInspMapAnimationStop();
    SceneInspTrendAnimationStop();
    sceneInspZxdxRankAnimationStop();
    sceneWorkDynamicsAnimationStop();
};
const sceneInspRcdxRankAnimationStop = () => {
    const temp = sceneInspRcdcProRankTabs.value?.$el;
    temp.addEventListener("mouseenter", () => {
        clearInterval(sceneInspRcdxIntervalId);
    });
    temp.addEventListener("mouseleave", () => {
        clearInterval(sceneInspRcdxIntervalId);
        sceneInspRcdxIntervalId = setInterval(sceneInspRcdxRankAnimation, 3000);
    });
};
const sceneProblemTypeRateAnimationStop = () => {
    const temp = sceneProblemTypeRate?.value?.chart;
    temp.on("mousemove", (e) => {
        clearInterval(sceneProblemTypeRateIntervalId);
        temp.dispatchAction({ type: "downplay", seriesIndex: 0 });
        temp.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: e.dataIndex,
        });
        temp.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: e.dataIndex,
        });
    });
    temp.on("mouseout", () => {
        clearInterval(sceneProblemTypeRateIntervalId);
        sceneProblemTypeRateIntervalId = setInterval(
            sceneProblemTypeRateAnimation,
            2000
        );
    });
};
const sceneInspMapAnimationStop = () => {
    const mapTemp = sceneMap?.value?.chart;
    // 鼠标移入
    mapTemp.on("mousemove", (e) => {
        clearInterval(sceneInspMapIntervalId);
        mapTemp.dispatchAction({ type: "downplay", seriesIndex: 0 });
        mapTemp.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: e.dataIndex,
        });
        mapTemp.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: e.dataIndex,
        });
    });
    // 鼠标移出
    mapTemp.on("mouseout", () => {
        clearInterval(sceneInspMapIntervalId); // 确保没有多个定时器同时运行
        sceneInspMapIntervalId = setInterval(sceneInspMapAnimation, 2000);
    });
};
const SceneInspTrendAnimationStop = () => {
    const temp = sceneInspProTrend?.value.getDom();
    temp.addEventListener("mouseenter", () => {
        clearInterval(sceneInspTrendIntervalId);
    });
    temp.addEventListener("mouseleave", () => {
        clearInterval(sceneInspTrendIntervalId);
        sceneInspTrendIntervalId = setInterval(sceneInspTrendAnimation, 2000);
    });
};
const sceneInspZxdxRankAnimationStop = () => {
    const temp = sceneInspZxdcProRankTabs.value?.$el;
    temp.addEventListener("mouseenter", () => {
        clearInterval(sceneInspZxdxIntervalId);
    });
    temp.addEventListener("mouseleave", () => {
        clearInterval(sceneInspZxdxIntervalId);
    });
};
const sceneWorkDynamicsAnimationStop = () => {
    const temp = sceneScrollbar.value?.$el;
    temp.addEventListener("mouseenter", () => {
        // alert(1);
        clearInterval(sceneWorkDynamicsIntervalId);
    });
    temp.addEventListener("mouseleave", () => {
        clearInterval(sceneWorkDynamicsIntervalId);
        sceneWorkDynamicsIntervalId = setInterval(
            sceneWorkDynamicsAnimation,
            50
        );
    });
};
// endregion
</script>

<style lang="scss" scoped>
@import "@/style/datav.scss";

.message {
    padding: 10px;
    margin-bottom: 10px;
    background: linear-gradient(
        270deg,
        rgba(16, 151, 255, 0.1) 0%,
        rgba(0, 55, 236, 0.87) 100%
    );

    &[type="warning"] {
        background: linear-gradient(
            270deg,
            rgba(255, 190, 16, 0.1) 0%,
            rgba(236, 84, 0, 0.87) 100%
        );
    }

    &[type="success"] {
        background: linear-gradient(
            270deg,
            rgba(91, 216, 9, 0.14) 0%,
            #28813d 100%
        );
    }

    .message-title {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .message-content {
        margin-bottom: 10px;
    }
}

:deep() {
    // 弹框整体
    .tooltip {
        position: relative;
        width: 160px;
        height: 194px;
        background: linear-gradient(
            180deg,
            rgba(1, 4, 87, 0.8) 0%,
            rgba(3, 21, 119, 0.8) 100%
        );
        border: 1px solid #4e8fff;
        margin: -10px -10px -10px -10px;
    }

    ////浏阳市局
    .tooltip-title {
        width: 160px;
        height: 43px;
        background: linear-gradient(180deg, #0a2f86 0%, #04154e 100%);
        box-shadow: inset 0px -1px 0px 0px #253755;
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
        border-bottom: 1px solid #253755; /* 设置下边框 */
    }

    .tooltip-content {
        width: 160px;
        height: 150px;
        background: linear-gradient(180deg, #010457 0%, #031577 100%);
    }

    .tooltip-content ul {
        list-style-type: none; /* 移除默认的小圆点 */
        padding-left: 5px;
        margin: 0;
    }

    .tooltip-content ul li {
        height: 24px;
        color: #597ae9;
        font-weight: 400;
        font-size: 14px;
    }

    .tooltip-ul span {
        float: right;
        width: 55px;
        color: #fff;
        font-size: 14px;
        text-align: center; /* 水平居中 */
    }

    //.tooltip::before {
    //  content: '';
    //  position: absolute;
    //  top: 90px; /* 调整尖角的垂直位置 */
    //  left: -10px; /* 调整尖角的水平位置 */
    //  width: 0;
    //  height: 0;
    //  //border-top: 10px solid red; /* 顶边颜色 */
    //  //border-bottom: 10px solid green; /* 底边颜色 */
    //  //border-right: 10px solid blue; /* 右边颜色，与背景颜色相同 */
    //}
}

.test {
    width: 95px;
    height: 25px;
    background: #1c3472;
}

.gobal-dropdown-container {
    position: absolute;
    right: 20px;
    top: 15px;
}

.my-gobal-yearselect {
    font-size: 14px;
    padding-top: 6px;
    padding-left: 20px;
    width: 90px;
    color: #fff;
}
</style>