<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"
                                                >
                                                    {{
                                                    leftOverview.proTotal
                                                    }}
                                                </div>
                                                <div class="descriptions_label">
                                                    问题数
                                                </div>
                                            </div>
                                        </el-col>
                                        <el-col :span="6">
                                            <div
                                                class="descriptions_cell text-center"
                                            >
                                                <div
                                                    class="descriptions_content"
                                                >
                                                    {{
                                                    leftOverview.processingNumber
                                                    }}
                                                </div>
                                                <div class="descriptions_label">
                                                    办理中
                                                </div>
                                            </div>
                                        </el-col>
                                        <el-col :span="6">
                                            <div
                                                class="descriptions_cell text-center"
                                            >
                                                <div
                                                    class="descriptions_content"
                                                >
                                                    {{
                                                    leftOverview.completedNumber
                                                    }}
                                                </div>
                                                <div class="descriptions_label">
                                                    已办结
                                                </div>
                                            </div>
                                        </el-col>
                                        <el-col :span="6">
                                            <div
                                                class="descriptions_cell text-center"
                                            >
                                                <div
                                                    class="descriptions_content"
                                                >
                                                    {{
                                                    leftOverview.completedRate
                                                    }}%
                                                </div>
                                                <div class="descriptions_label">
                                                    办结率
                                                </div>
                                            </div>
                                        </el-col>
                                    </el-row>
                                    <el-scrollbar height="350px">
                                        <datav-chart-bar
                                            :data="fxsjChangedRankList"
                                            size="large"
                                            title="办结率排名"
                                            sub-title="已办结/问题数"
                                            unit="%"
                                            :isgroupby="true"
                                            :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"
                                                >
                                                    {{
                                                    leftOverview.proTotal
                                                    }}
                                                </div>
                                                <div class="descriptions_label">
                                                    问题数
                                                </div>
                                            </div>
                                        </el-col>
                                        <el-col :span="6">
                                            <div
                                                class="descriptions_cell text-center"
                                            >
                                                <div
                                                    class="descriptions_content"
                                                >
                                                    {{
                                                    leftOverview.processingNumber
                                                    }}
                                                </div>
                                                <div class="descriptions_label">
                                                    办理中
                                                </div>
                                            </div>
                                        </el-col>
                                        <el-col :span="6">
                                            <div
                                                class="descriptions_cell text-center"
                                            >
                                                <div
                                                    class="descriptions_content"
                                                >
                                                    {{
                                                    leftOverview.completedNumber
                                                    }}
                                                </div>
                                                <div class="descriptions_label">
                                                    已办结
                                                </div>
                                            </div>
                                        </el-col>
                                        <el-col :span="6">
                                            <div
                                                class="descriptions_cell text-center"
                                            >
                                                <div
                                                    class="descriptions_content"
                                                >
                                                    {{
                                                    leftOverview.completedRate
                                                    }}%
                                                </div>
                                                <div class="descriptions_label">
                                                    办结率
                                                </div>
                                            </div>
                                        </el-col>
                                    </el-row>
                                    <el-scrollbar height="350px">
                                        <datav-chart-bar
                                            :data="jsdwChangedRankList"
                                            size="large"
                                            title="办结率排名"
                                            sub-title="已办结/问题数"
                                            unit="%"
                                            :isgroupby="true"
                                            :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.reportNumber"
                              title="通报期数"
                              style="width: 16.66%"
                              @click="handleShow"
                          />
                            <datav-statistic
                                :value="overview.processingNumber"
                                title="办理中"
                                style="width: 16.66%"
                            />
                            <datav-statistic
                                :value="overview.completedNumber"
                                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%"
                            />
                        </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 dictData"
                                    :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"
                                                            >
                                                                {{
                                                                    rightOverview.proTotal
                                                                }}
                                                            </div>
                                                            <div
                                                                class="descriptions_label"
                                                            >
                                                                问题数
                                                            </div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div
                                                            class="descriptions_cell text-center"
                                                        >
                                                            <div
                                                                class="descriptions_content"
                                                            >
                                                                {{
                                                                rightOverview.processingNumber
                                                                }}
                                                            </div>
                                                            <div
                                                                class="descriptions_label"
                                                            >
                                                                办理中
                                                            </div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div
                                                            class="descriptions_cell text-center"
                                                        >
                                                            <div
                                                                class="descriptions_content"
                                                            >
                                                                {{
                                                                rightOverview.completedNumber
                                                                }}
                                                            </div>
                                                            <div
                                                                class="descriptions_label"
                                                            >
                                                                已办结
                                                            </div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div
                                                            class="descriptions_cell text-center"
                                                        >
                                                            <div
                                                                class="descriptions_content"
                                                            >
                                                                {{
                                                                rightOverview.completedRate
                                                                }}%
                                                            </div>
                                                            <div
                                                                class="descriptions_label"
                                                            >
                                                                办结率
                                                            </div>
                                                        </div>
                                                    </el-col>
                                                </el-row>
                                                <el-scrollbar height="350px">
                                                    <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"
                                                            >
                                                                {{
                                                                rightOverview.proTotal
                                                                }}
                                                            </div>
                                                            <div
                                                                class="descriptions_label"
                                                            >
                                                                问题数
                                                            </div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div
                                                            class="descriptions_cell text-center"
                                                        >
                                                            <div
                                                                class="descriptions_content"
                                                            >
                                                                {{
                                                                rightOverview.processingNumber
                                                                }}
                                                            </div>
                                                            <div
                                                                class="descriptions_label"
                                                            >
                                                                办理中
                                                            </div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div
                                                            class="descriptions_cell text-center"
                                                        >
                                                            <div
                                                                class="descriptions_content"
                                                            >
                                                                {{
                                                                rightOverview.completedNumber
                                                                }}
                                                            </div>
                                                            <div
                                                                class="descriptions_label"
                                                            >
                                                                已办结
                                                            </div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div
                                                            class="descriptions_cell text-center"
                                                        >
                                                            <div
                                                                class="descriptions_content"
                                                            >
                                                                {{
                                                                rightOverview.completedRate
                                                                }}%
                                                            </div>
                                                            <div
                                                                class="descriptions_label"
                                                            >
                                                                办结率
                                                            </div>
                                                        </div>
                                                    </el-col>
                                                </el-row>
                                                <el-scrollbar height="350px">
                                                    <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"
                                >
                                    <template #link>
                                        <div class="message-link" @click="handlePerviewFile(msg)" v-if="msg.files">查看图片</div>
                                    </template>
                                </datav-message>
                            </el-scrollbar>
                        </datav-card>
                    </el-col>
                </el-row>
            </main>
        </div>
    </el-scrollbar>

    <file-preview :files="files" v-model:show="filePreviewShow" />

    <el-dialog v-model="show" width="70vw" title="通报报告" >
      <div class="table-container" v-loading="loading">
        <el-table
            :data="listData"
            ref="tableRef"
            style="width: 100%"
        >
          <el-table-column prop="reportName" label="督察报告名称"></el-table-column>
          <el-table-column prop="crtTime" label="创建时间" >
            <template #default="{row}">
              {{ row.crtTime }}
            </template>
          </el-table-column>
          <el-table-column prop="superviseNumber" label="督察问题数">
            <template #default="{row}">
              <el-button type="primary" link @click="handleNegativeTable(row)">{{row.superviseNumber}}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="flex end mt-8">
        <el-pagination
            @size-change="getReportList"
            @current-change="getReportList"
            :page-sizes="[10, 20, 50]"
            v-model:page-size="query.size"
            v-model:current-page="query.current"
            layout="total, sizes, prev, pager, next"
            :total="total"
        />
      </div>
    </el-dialog>

  <!--    督察报告关联问题-->
  <el-dialog :title="`督察报告关联问题`" v-model="negativeShow" width="90vw" >
    <el-table :data="negativeTable" v-loading="loading">
      <el-table-column
          label="问题录入时间"
          prop="crtTime"
          width="150"
          sortable="custom"
      />
      <el-table-column
          label="问题发现时间"
          prop="discoveryTime"
          width="150"
          sortable="custom"
      />
      <el-table-column
          label="问题来源"
          prop="problemSources"
          width="110"
          show-overflow-tooltip
      />
      <el-table-column
          label="业务类别"
          prop="businessTypeName"
          width="110"
      />
      <el-table-column
          label="问题内容"
          prop="thingDesc"
          show-overflow-tooltip
      />
      <el-table-column label="办理单位" show-overflow-tooltip>
        <template #default="{ row }">
                            <span
                            >{{ row.handleSecondDepartName
                              }}{{ row.handleThreeDepartName }}</span
                            >
        </template>
      </el-table-column>
      <el-table-column
          label="是否属实"
          prop="checkStatusName"
          width="100"
          align="center"
      />
      <el-table-column
          label="流程限时"
          width="150"
          align="center"
          v-if="remainingTimeFlag"
      >
        <template #default="{ row }">
          <countdown
              :time="row.remainingDuration"
              v-if="
                                    row.remainingDuration &&
                                    row.processingStatus !==
                                        ProcessingStatus.COMPLETED
                                "
          />
          <el-tag
              v-else-if="row.handleTimeout"
              type="danger"
              effect="dark"
          >办结超时
            {{ formatTimeText(row.handleTimeout) }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="办理状态" width="110">
        <template #default="{ row }">
          <el-tag
              :type="
                                    row.processingStatus ===
                                    ProcessingStatus.COMPLETED
                                        ? 'success'
                                        : 'primary'
                                "
              v-if="row.processingStatus"
          >{{
              getDictLable(
                  dict.processingStatus,
                  row.processingStatus
              )
            }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column
          label="当前处理对象"
          prop="currentProcessingObject"
          show-overflow-tooltip
      >
        <template #default="{ row }">
                            <span
                                v-if="
                                    row.processingStatus ===
                                    ProcessingStatus.COMPLETED
                                "
                            >无</span
                            >
          <span v-else>{{
              row.currentProcessingObject
            }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex end mt-8">
      <el-pagination
          @size-change="getNegativePageFun"
          @current-change="getNegativePageFun"
          :page-sizes="[10, 20, 50, 100]"
          v-model:page-size="negativeQuery.size"
          v-model:current-page="negativeQuery.current"
          layout="total, sizes, prev, pager, next"
          :total="negativeTotal"
      >
      </el-pagination>
    </div>
  </el-dialog>


</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 { workDynamicColorMapping } from "@/enums/workDynamicColorMapping.js";
import { mapOrgNameMapping } from "@/enums/orgMapping.js";

import useCatchStore from "@/stores/modules/catch";
import { onMounted } from "vue";
import {getListData,getNegativePageByQuery} from "@/api/superviseReport/superviseReport";
import {timeFormat,formatTimeText, getDictLable, getInvolveProblem} from "@/utils/util";
import {ProcessingStatus} from "@/enums/flowEnums";

const catchStore = useCatchStore();
const dict = catchStore.getDicts(["specialSupervision","suspectProblem","processingStatus"]);
const show =ref(false)

const dictData = computed(()=>{
  return dict?.specialSupervision?.filter((s)=>s.dictLabel !== '枪支管理')
})




// region 所有变量
const time = ref([
    moment().startOf("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,
    processingNumber: 0,
    completedNumber: 0,
    departNumber: 0,
    personNumber: 0,
    completedRate: 0,
}); // 中央数据总览
const leftOverview = ref({});
const fxsjRankOverview = ref({}); // 日常督察总览分县市局
const jsdwRankOverview = ref({}); // 日常督察总览局属单位
const fxsjChangedRankList = ref([]); // 日常督察问题排行分县市局
const jsdwChangedRankList = ref([]); // 日常督察问题排行局属单位
const wtlxList = ref([]); // 问题涉及方面分布
const rightOverview = ref({});
const fxsjYellowBetOverview = ref({
    proTotal: 0,
    processingNumber: 0,
    completedNumber: 0,
    completedRate: 0,
}); // 总览分县市局
const jsdwYellowBetOverview = ref({
    proTotal: 0,
    processingNumber: 0,
    completedNumber: 0,
    completeRate: 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))
          );
          //  <li>办结率 <span>${dataItem.completedRate}%</span></li>
          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.processingNumber}</span></li>
              <li>已办结 <span>${dataItem.completedNumber}</span></li>
              <li>问责单位数 <span>${dataItem.relationOrg}</span></li>
              <li>问责人次 <span>${dataItem.personNum}</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>
            </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);
    leftOverview.value =res.overview;
    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 data = await getSupervisionNotifyCount(time.value);
    overview.value = data
};
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;
    console.log('mappedData',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);
    rightOverview.value = res.overView;
    fxsjYellowBetOverview.value = res.countyOverview;
    jsdwYellowBetOverview.value = res.bureauOverview;
    fxsjYellowBetRankList.value = res.countyRankList;
    jsdwYellowBetRankList.value = res.bureauRankList;
};

watch(zxdcProRankTab, () => {
  getYellowBetDrugData()
},{deep:true})

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

const getData =async () => {
       Promise.all([
         getChangedRankData(),
         getSupervisionNotifyMapData(),
         getProblemTypeRateData(),
         getSupervisionNotifyCountData(),
         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 = () => {
  if(dictData.value){
    const dictItem = dictData.value.find(
        (item) => (item.dictValue === zxdcProRankTab.value)
    );
    if (dictItem) {
      const index = dictData.value.indexOf(dictItem);
      if (index === dictData.value.length - 1) {
        zxdcProRankTab.value = dictData[0]?.dictValue;
      } else {
        zxdcProRankTab.value = dictData[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) => {
  console.log('params',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
        );
    });
};

const files = ref([])
const filePreviewShow = ref(false)
function handlePerviewFile(msg) {
  if (msg.files) {
    filePreviewShow.value = true
    files.value = JSON.parse(msg.files)
  }
}

const handleShow =()=>{
  show.value=true
  getReportList()
}


const tableRef = ref(null)
const query = ref({
  current: 1,
  size: 10,
  departBranch:false
})
const listData = ref([]);
const total = ref(0);
const loading = ref(false);
/**
 * 获取表单数据
 * */
const getReportList =async ()=>{
  loading.value=true
  try{
    const res = await  getListData(query.value);
    listData.value=res.records;
    total.value = res.total;
    loading.value = false
  }catch (e) {
    loading.value = false
  }
}
//督察问题
const negativeShow = ref(false)
const negativeTable = ref();
const negativeQuery = ref({
  current: 1,
  size: 10,
  departBranch:false
})
const negativeTotal = ref(0);
const negativeLoging = ref(false);
const handleNegativeTable =async (row)=>{
  if(row.superviseNumber > 0){
    try{
      negativeLoging.value=true;
      negativeQuery.value.id =row.id;
      await getNegativePageFun();
      negativeShow.value = true;
    }catch (e){
      console.log("督察问题获取失败")
      negativeLoging.value=false;
    }
  }
}
const getNegativePageFun = async ()=>{

  const res = await getNegativePageByQuery(negativeQuery.value);
  negativeTable.value =res.records;
  negativeTotal.value = res.total;
  negativeLoging.value=false;
}

</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; /* 水平居中 */
    }

}

.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;
}
.message-link {
  font-size: 12px;
  color: #eee;
  &:hover {
    cursor: pointer;
    text-decoration: underline;

  }
}
</style>
