<template>
  <el-scrollbar height="100vh">
    <div class="wrapper">
      <sub-one-header :depart-id="currentDepartId"/>
      <main>
        <el-row :gutter="16">
          <el-col :span="6">
            <datav-card title="所队排名" subTitle="查处问题数">
              <datav-tabs
                  type="bottom-button"
                  v-model="subOneCaseVerifRankTab"
                  ref="subOneCaseVerifRankTabs"
              >
                <datav-tab-item label="派出所" name="1">
                  <el-scrollbar height="350px">
                    <datav-chart-bar
                        :data="fxsjBarList"
                        size="large"
                        :color="colors"
                    />
                  </el-scrollbar>
                </datav-tab-item>
                <datav-tab-item label="大队" name="2">
                  <el-scrollbar height="350px">
                    <datav-chart-bar
                        :data="jsdwBarList"
                        :max="11"
                        size="large"
                    />
                  </el-scrollbar>
                </datav-tab-item>
              </datav-tabs>
            </datav-card>
            <datav-card title="案件问题性质">
              <datav-tabs>
                <datav-tab-item label="执法办案" name="1">
                  <v-charts
                      style="height: 320px"
                      :option="zfbaPieOption"
                      autoresize
                      ref="subOneZfbaProProperty"
                  />
                </datav-tab-item>
                <datav-tab-item label="服务管理" name="2">
                  <v-charts
                      style="height: 320px"
                      :option="fwglPieOption"
                      autoresize
                  />
                </datav-tab-item>
                <datav-tab-item label="警纪警规" name="3">
                  <v-charts
                      style="height: 320px"
                      :option="jgjjPieOption"
                      autoresize
                  />
                </datav-tab-item>
              </datav-tabs>
            </datav-card>
          </el-col>
          <el-col :span="12">
            <datav-date-picker v-model="time"/>
            <div class="flex gap-42">
              <datav-statistic
                  :value="overview.total"
                  title="案件总数（起）"
                  style="width: 16.66%"
              />
              <datav-statistic
                  :value="overview.confirmed"
                  title="查实案件数"
                  style="width: 16.66%"
              />
              <datav-statistic
                  :value="overview.dealCasePro"
                  title="查处问题（个）"
                  style="width: 16.66%"
              />
              <datav-statistic
                  :value="overview.punishOrg"
                  title="问责单位数"
                  style="width: 16.66%"
              />
              <datav-statistic
                  :value="overview.punishPre"
                  title="问责人次"
                  style="width: 16.66%"
              />

              <datav-statistic
                  :value="overview.rate"
                  value-unit="%"
                  title="查实率"
                  style="width: 16.66%"
              />
            </div>
            <v-charts
                style="height: 420px"
                :option="option"
                autoresize
                ref="subOneCaseVerifMap"
                @click="handleClick"
            />
            <datav-card title="查实问题趋势">
              <v-charts
                  style="height: 320px"
                  :option="proTrend"
                  autoresize
                  ref="subOneCaseVerifProTrend"
              />
              <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>
                <datav-tab-item label="案件来源占比" name="1">
                  <div class="mb-40">
                    <v-charts
                        style="height: 340px"
                        :option="ajlyPieOption"
                        autoresize
                        ref="subOneCaseSourceRate"
                    />
                  </div>
                </datav-tab-item>
                <datav-tab-item label="问责处理情况" name="2">
                  <div class="mb-40">
                    <v-charts
                        style="height: 340px"
                        :option="wzclPieOption"
                        autoresize
                    />
                  </div>
                </datav-tab-item>
              </datav-tabs>
            </datav-card>
            <datav-card>
              <datav-tabs>
                <datav-tab-item label="禁闭处理情况" name="1">
                  <div class="mb-40">
                    <v-charts
                        style="height: 340px"
                        :option="jbcloption"
                        autoresize
                        ref="subOneJbclSituation"
                    />
                  </div>
                </datav-tab-item>
<!--                <datav-tab-item label="停职处理情况" name="2" style="display: none">-->
<!--                  <div class="mb-40">-->
<!--                    <v-charts-->
<!--                        style="height: 340px"-->
<!--                        :option="tzcloption"-->
<!--                        autoresize-->
<!--                    />-->
<!--                  </div>-->
<!--                </datav-tab-item>-->
              </datav-tabs>
            </datav-card>
          </el-col>
        </el-row>
      </main>
    </div>
  </el-scrollbar>
  <negative-info-depart-dialog v-model="showDialog" :departId="tempDepartId"/>
</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 {getSubOneStreetMap} from "@/api/screen/subScreen/subOneGlobal.ts";
import {
  getSubOneAllCaseVerificationCount,
  getSubOneCaseProblemProperty,
  getSubOneCaseSourceRateAndDealSituation,
  getSubOneCaseVerificationMap,
  getSubOneCaseVerificationRank,
  getSubOneCaseVerificationTrend, getSubOneConfinementAndPause
} from "@/api/screen/subScreen/subOneCaseVerif.ts";
import {circularChart} from "@/views/datav/simulateData/AnimationTestData.js";
import SubOneHeader from "@/components/datav/subOne/subOneHeader.vue";

// region 所有变量
const currentYear = new Date().getFullYear();
const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
const selectedYear = ref(currentYear); // 当前选中的年份
const time = ref([
  moment().startOf("year").format("YYYY-MM-DD"),
  moment().format("YYYY-MM-DD"),
]);
const route = useRoute();
let currentDepartId = route.query.departId;
import useUserStore from "@/stores/modules/user";
const userStore = useUserStore();
watch(()=>route.query.departId,(newVal)=>{
  if(newVal!= null){
    currentDepartId = newVal
  }else{
    currentDepartId=userStore.user.departId;
  }
},{immediate:true})
const currentMapData = ref({})  // 地图数据
const fxsjBarList = ref([]);
const jsdwBarList = ref([]);
const overview = ref({
  total: 0,
  confirmed: 0,         // 查实案件数
  dealCasePro: 0,     // 查处问题（个）
  punishPre: 0,   // 问责人次
  punishOrg: 0,   // 问责单位数、
  rate: 0,   // 查实率
});
const gobalTempMapVoList = ref([]);
const colors = [
  {
    color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
    percentage: 80,
  },
  {
    color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
    percentage: 60,
  },
];
const showDialog = ref(false);
const tempDepartId = ref(0);  // 临时部门id

const subOneCaseVerifRankTab = ref('1');
const subOneCaseVerifRankTabs = ref(null);
const subOneZfbaProProperty = ref(null);
const subOneCaseVerifMap = ref(null);
const subOneCaseVerifProTrend = ref(null);
const subOneCaseSourceRate = ref(null);
const subOneJbclSituation = ref(null);
let subOneCaseVerifRankIntervalId;
let subOneCaseVerifProPropertyIntervalId;
let subOneCaseVerifMapIntervalId;
let subOneCaseVerifTrendIntervalId;
let subOneCaseVerifCaseSourceIntervalId;
let subOneCaseVerifJbclSituationIntervalId;

// endregion

// region 所有图表
echarts.registerMap("changsha", changshaMap);
const option = ref({
  tooltip: {
    trigger: 'item',
    position: 'bottom',
    formatter: function (params) {
      console.log(params)
      const dataItem = gobalTempMapVoList.value.find(item => item.name === params.name) || {}; // 找到对应的数据项

      if (dataItem.name === params.name) {
        return `
        <div class="tooltip">
          <div class="tooltip-title">${params.name}</div>
          <div class="tooltip-content">
            <ul class="tooltip-ul" >
              <li>案件总数（起）<span>${dataItem.total}</span></li>
              <li>查实案件数 <span>${dataItem.confirmed}</span></li>
              <li>查处问题（个） <span>${dataItem.dealCasePro}</span></li>
              <li>问责人次 <span>${dataItem.punishPre}</span></li>
              <li>问责单位数 <span>${dataItem.punishOrg}</span></li>
              <li>查实率 <span>${dataItem.rate}</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: {
        areaColor: "#02215E", // 这里将地图区域的颜色修改为红色
        borderColor: "#24D2EE",
        borderWidth: 1 // 高亮时边框宽度
      },
      data: [],
    },
  ],
});
const proTrend = ref({
  grid: {
    left: '5%', // 图表距离容器左边的距离
    right: '2%', // 图表距离容器右边的距离
    top: '10%', // 图表距离容器上边的距离
    bottom: '20%', // 图表距离容器下边的距离
    containLabel: false // 是否包含坐标轴的标签
  },
  xAxis: {
    type: "category",
    boundaryGap: true,
    axisTick: {
      // 去掉X轴刻度线
      show: false
    },
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月'],
  },
  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: [],
    },
  ],
});
const ajlyPieOption = ref({
  series: [
    {
      type: "pie",
      radius: ["40%", "70%"],
      label: {
        color: "#fff",
      },
      data: [],
    },
  ],
  tooltip: {
    trigger: "item",
    position: "bottom"
  },
});
const wzclPieOption = ref({
  series: [
    {
      type: "pie",
      radius: ["40%", "70%"],
      label: {
        color: "#fff",
      },
      data: [],
    },
  ],
  tooltip: {
    trigger: "item",
  },
});
const zfbaPieOption = ref({
  series: [
    {
      type: "pie",
      radius: ["40%", "70%"],
      label: {
        color: "#fff",
      },
      data: [],
    },
  ],
  tooltip: {
    trigger: "item",
    position: "bottom"
  },
});
const fwglPieOption = ref({
  series: [
    {
      type: "pie",
      radius: ["40%", "70%"],
      label: {
        color: "#fff",
      },
      data: [],
    },
  ],
  tooltip: {
    trigger: "item",
  },
});
const jgjjPieOption = ref({
  series: [
    {
      type: "pie",
      radius: ["40%", "70%"],
      label: {
        color: "#fff",
      },
      data: [],
    },
  ],
  tooltip: {
    trigger: "item",
  },
});
const jbcloption = ref({
  tooltip: {
    trigger: "item",
    position: "bottom"
  },
  series: [
    {
      type: "pie",
      radius: ["40%", "70%"],
      label: {
        color: "#fff",
      },
      data: [
        // {value: 14, name: "工作饮酒"},
        // {value: 11, name: "违规办案"},
        // {value: 3, name: "涉嫌违纪"},
        // {value: 2, name: "违反“三个规定”"},
        // {value: 12, name: "违反生活纪律、工作纪律"},
        // {value: 8, name: "违规接受管理服务对象宴请"},
        // {value: 2, name: "酒后驾车、涉嫌违法"},
        // {value: 2, name: "执法乱作为"},
        // {value: 3, name: "为落实请示报告制度"},
      ],
    },
  ],
});
const tzcloption = ref({
  tooltip: {
    trigger: "item",
  },
  series: [
    {
      type: "pie",
      radius: ["40%", "70%"],
      label: {
        color: "#fff",
      },
      data: [
        // {value: 14, name: "工作饮酒"},
        // {value: 11, name: "违规办案"},
        // {value: 3, name: "涉嫌违纪"},
        // {value: 2, name: "违反“三个规定”"},
        // {value: 12, name: "违反生活纪律、工作纪律"},
        // {value: 8, name: "违规接受管理服务对象宴请"},
        // {value: 2, name: "酒后驾车、涉嫌违法"},
        // {value: 2, name: "执法乱作为"},
        // {value: 3, name: "为落实请示报告制度"},
      ],
    },
  ],
});
// endregion

// region 所有函数
const getMapJSON = async (departId) => {
  const res = await getSubOneStreetMap(departId);
  currentMapData.value = res;
  echarts.registerMap("changsha", res);
  subOneCaseVerifMap.value.chart.setOption(option.value);
}
const getSubOneCaseVerificationRankData = async () => {
  const body = {
    beginTime: time.value[0],
    endTime: time.value[1],
    departId: route.query.departId
  }
  const res = await getSubOneCaseVerificationRank(body);
  fxsjBarList.value = res.fxsjRankList
  jsdwBarList.value = res.jsdwRankList
}
const getSubOneCaseProblemPropertyData = async (departId, timeValue) => {
  const res = await getSubOneCaseProblemProperty(departId, timeValue);
  zfbaPieOption.value.series[0].data = res.zfbaPieList;
  fwglPieOption.value.series[0].data = res.fwglPieList;
  jgjjPieOption.value.series[0].data = res.fwglPieList;
}
const getSubOneAllCaseVerificationCountData = async () => {

  const body = {
    beginTime: time.value[0],
    endTime: time.value[1],
    departId: route.query.departId
  }

  const res = await getSubOneAllCaseVerificationCount(body)
  overview.value = res.overview
}
const getSubOneCaseVerificationMapData = async () => {
  const body = {
    beginTime: time.value[0],
    endTime: time.value[1],
    departId: route.query.departId
  }
  const res = await getSubOneCaseVerificationMap(body);
  const mappedData = res.caseVerificationMapList.map(item => {
    return {
      ...item,
      value: item.total,
    };
  });
  gobalTempMapVoList.value = mappedData
  const maxItem = mappedData.reduce((max, item) => (Number(item.value) > Number(max.value) ? item : max), mappedData[0]);
  const range60Percent = maxItem.value * 0.6   // 不用取整，小数也可以
  const range80Percent = maxItem.value * 0.8   // 不用取整，小数也可以
  option.value.series[0].data = mappedData;
  option.value.visualMap.pieces = [
    {gte: 0, lte: range60Percent, label: "低于最大问题的60%", color: "#4987F6"},
    {gte: range60Percent, lte: range80Percent, label: "介于最大问题的60%~80%", color: "#F6A149"},
    {gte: range80Percent, label: "高于最大问题80%", color: "#D34343"},
  ];
}
const getSubOneCaseVerificationTrendData = async (departId, year) => {
  const res = await getSubOneCaseVerificationTrend(departId, year);
  const temp = res.proTrendList;
  const categories = temp.map(item => item.name);
  const values = temp.map(item => item.value);
  proTrend.value.xAxis.data = categories;
  proTrend.value.series[0].data = values;
}
const getSubOneCaseSourceRateAndDealSituationData = async () => {
  const body = {
    beginTime: time.value[0],
    endTime: time.value[1],
    departId: route.query.departId
  }
  const res = await getSubOneCaseSourceRateAndDealSituation(body);
  ajlyPieOption.value.series[0].data = res.caseSourceRateList
  wzclPieOption.value.series[0].data = res.dealSituationPieList
}

// const getConfinementAndPauseList =  async (departId,timeValue)=>{
//   const res = await getConfinementAndPause(timeValue);
//   jbcloption.value.series[0].data = res.jbclList;
//   tzcloption.value.series[0].data = res.dzclList;
//   // jbcloption.value.series[0].data = circularChart;
// }
function getData() {
  getMapJSON(currentDepartId)
  getSubOneCaseVerificationRankData()
  getSubOneCaseProblemPropertyData(currentDepartId, time.value)
  getSubOneAllCaseVerificationCountData()
  getSubOneCaseVerificationMapData(currentDepartId, time.value)
  getSubOneCaseVerificationTrendData(currentDepartId, currentYear)
  getSubOneCaseSourceRateAndDealSituationData()
  getSubOneConfinementAndPauseData(currentDepartId, time.value)
}

// endregion


const getSubOneConfinementAndPauseData = async(departId, timeValue) =>{
  const  res = await  getSubOneConfinementAndPause(departId, timeValue);
  jbcloption.value.series[0].data=res.confinementList;
}


// region动画
// 分县市局排名动画
const subOneCaseVerifRankAnimation = () => {
  subOneCaseVerifRankTab.value = (parseInt(subOneCaseVerifRankTab.value) % 2 + 1).toString();
};
subOneCaseVerifRankIntervalId = setInterval(subOneCaseVerifRankAnimation, 2000);
const subOneCaseVerifProPropertyAnimation = () => {
  const temp = subOneZfbaProProperty?.value?.chart;
  if (!temp) return;
  const length = zfbaPieOption.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});
}
subOneCaseVerifProPropertyIntervalId = setInterval(subOneCaseVerifProPropertyAnimation, 2000);
// 地图动画
const subOneCaseVerifMapAnimation = () => {
  const mapTemp = subOneCaseVerifMap?.value?.chart;
  if (!mapTemp) return;
  // 取后端传过来的有地图数据的长度，有些街道没有数据，没有意义
  const mapLength = gobalTempMapVoList.value.length;
  const randomNum = Math.floor(Math.random() * mapLength);
  console.log(randomNum);
  mapTemp.dispatchAction({
    type: "downplay", //downplay 取消高亮
  });
  mapTemp.dispatchAction({
    type: "highlight", //highLight 高亮指定的数据图形
    seriesIndex: 0, //系列index
    dataIndex: randomNum, //数据index
  });
  mapTemp.dispatchAction({
    type: "showTip", //showTip 显示提示框
    seriesIndex: 0,
    dataIndex: randomNum,
  });
}
subOneCaseVerifMapIntervalId = setInterval(subOneCaseVerifMapAnimation, 2000);

// 问题趋势动画
const subOneCaseVerifTrendAnimation = () => {
  const proTrendTemp = subOneCaseVerifProTrend?.value?.chart;
  if (!proTrendTemp) return;
  const randomNum = Math.floor(Math.random() * 12);
  proTrendTemp.dispatchAction({
    type: 'showTip',
    seriesIndex: 0,
    dataIndex: randomNum,
  });
}
subOneCaseVerifTrendIntervalId = setInterval(subOneCaseVerifTrendAnimation, 2000);
// 案件来源占比
const subOneCaseVerifCaseSourceRateAnimation = () => {
  const temp = subOneCaseSourceRate?.value?.chart;
  if (!temp) return;
  const length = ajlyPieOption.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});
}
subOneCaseVerifCaseSourceIntervalId = setInterval(subOneCaseVerifCaseSourceRateAnimation, 2000);
// 禁闭处理情况
const subOneCaseVerifJbclSituationAnimation = () => {
  const temp = subOneJbclSituation?.value?.chart;
  if (!temp) return;
  const length = jbcloption.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});
}
subOneCaseVerifJbclSituationIntervalId = setInterval(subOneCaseVerifJbclSituationAnimation, 2000);

// endregion

// region 事件||监听
watch(time, () => {
  getData();
});
onMounted(() => {
  getData();
  setupEventListeners();
});
const handleCommand = (year) => {
  selectedYear.value = year; // 更新当前选中的年份
  getSubOneCaseVerificationTrendData(currentDepartId, year);
};
const handleClick = (params) => {
  const departId = params.data.departId;
  showDialog.value = true;
  tempDepartId.value = departId
  clearInterval(subOneCaseVerifMapIntervalId);
}
const setupEventListeners = () => {
  // caseVerifRankAnimationStop();
  // caseVerifProPropertyAnimationStop();
  // subOneCaseVerifMapAnimationStop();
  // subOneCaseVerifTrendAnimationStop();
  // subOneCaseVerifCaseSourceRateAnimationStop();
  // subOneCaseVerifJbclSituationAnimationStop();
};
const caseVerifRankAnimationStop = () => {
  const temp = subOneCaseVerifRankTabs.value.$el;
  temp.addEventListener('mouseenter', () => {
    clearInterval(subOneCaseVerifRankIntervalId)
  });
  temp.addEventListener('mouseleave', () => {
    clearInterval(subOneCaseVerifRankIntervalId); // 确保没有多个定时器同时运行
    subOneCaseVerifRankIntervalId = setInterval(subOneCaseVerifRankAnimation, 3000);
  });
}

const caseVerifProPropertyAnimationStop = () => {
  const temp = subOneZfbaProProperty?.value?.chart;
  temp.on('mousemove', (e) => {
    clearInterval(subOneCaseVerifProPropertyIntervalId);
    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(subOneCaseVerifProPropertyIntervalId);
    subOneCaseVerifProPropertyIntervalId = setInterval(subOneCaseVerifProPropertyAnimation, 2000);
  })
}
const subOneCaseVerifMapAnimationStop = () => {
  const mapTemp = subOneCaseVerifMap?.value?.chart;
  // 鼠标移入
  mapTemp.on('mousemove', (e) => {
    clearInterval(subOneCaseVerifMapIntervalId);
    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', () => {
    if (showDialog.value) {
      clearInterval(subOneCaseVerifMapIntervalId); // 确保没有多个定时器同时运行
    } else {
      clearInterval(subOneCaseVerifMapIntervalId); // 确保没有多个定时器同时运行
      subOneCaseVerifMapIntervalId = setInterval(subOneCaseVerifMapAnimation, 2000);
    }
  });
}
const subOneCaseVerifTrendAnimationStop = () => {
  const temp = subOneCaseVerifProTrend?.value.getDom();
  temp.addEventListener('mouseenter', () => {
    clearInterval(subOneCaseVerifTrendIntervalId);
  });
  temp.addEventListener('mouseleave', () => {
    clearInterval(subOneCaseVerifTrendIntervalId);
    subOneCaseVerifTrendIntervalId = setInterval(subOneCaseVerifTrendAnimation, 2000);
  });
}
const subOneCaseVerifCaseSourceRateAnimationStop = () => {
  const temp = subOneCaseSourceRate?.value?.chart;
  temp.on('mousemove', (e) => {
    clearInterval(subOneCaseVerifCaseSourceIntervalId);
    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(subOneCaseVerifCaseSourceIntervalId);
    subOneCaseVerifCaseSourceIntervalId = setInterval(subOneCaseVerifCaseSourceRateAnimation, 2000);
  })
}
const subOneCaseVerifJbclSituationAnimationStop = () => {
  const temp = subOneJbclSituation?.value?.chart;
  temp.on('mousemove', (e) => {
    clearInterval(subOneCaseVerifJbclSituationIntervalId);
    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(subOneCaseVerifJbclSituationIntervalId);
    subOneCaseVerifJbclSituationIntervalId = setInterval(subOneCaseVerifJbclSituationAnimation, 2000);
  })
}

// endregion
</script>

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

: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;
  }


  //// 数字的span
  .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; /* 右边颜色，与背景颜色相同 */
  //}

}

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

.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>


