<script setup lang="ts">
import { Ref, computed, unref, ref, watch, onMounted } from "vue";
import type { EChartsOption } from "echarts";
import { useECharts } from "../../../hooks/web/useECharts";
import ProgressBar from "../../../components/ProgressBar/ProgressBar.vue";
import DataAnalyse from "../components/DataAnalyse.vue";
import { screenDateOptions } from "../constants";
import { bigNumberTransform } from "../../../utils/utils";
import {
  colorList,
  mergeOptions,
  getGradientColorList,
  mapNameJoint,
} from "../../../components/chart/options/index";
import { registerMap } from "echarts";
import { isObject } from "../../../utils/is";
import { mapMapping } from "../../../assets/map/provinceData";
import { useGetChartData } from "../../../components/chart/logic";
import { useGlobalThreatEvent } from "../logic/useGlobalThreatEvent";
import safeScreenMapTipBg from "../../../assets/image/screen/safe-screen-map-tip-bg.png";
import img_top1 from "../../../assets/image/screen/icon_top1.png";
import img_top2 from "../../../assets/image/screen/icon_top2.png";
import img_top3 from "../../../assets/image/screen/icon_top3.png";
const top3 = [img_top1, img_top2, img_top3];
const chartRef = ref<HTMLDivElement | null>(null);
const mapData = mapMapping();
const tipCoord = ref({}) as any;
const { setOptions, getInstance, echarts } = useECharts(
  chartRef as Ref<HTMLDivElement>
);

const { currentCity, currentDate, setCurrentCity } = useGlobalThreatEvent();
let chartData = ref([]) as any;
let totalCount = ref(0);
let chartListTop3 = ref([]) as any;
let chartListLimitTop3 = ref([{}, {}, {}]) as any;

const MAP_COLOR = {
  areaColor: "rgba(52, 110, 175, 0)",
  borderColor: "#26C9FE",
  shadowColor: "rgba(26, 86, 123, 1)",
  labelColor: "rgba(255, 255, 255, 1)",
  emphasisLabelColor: "rgba(255, 255, 255, 1)",
  emphasisAreaColor: "rgba(145, 140, 73, 1)",
  emphasisBorderColor: "rgba(255, 222, 65, 1)",
  // selectedAreaColor: "rgba(145, 140, 73, 1)",
  // selectedBorderColor: "rgba(255, 222, 65, 1)",
  // selectedLabelColor: "rgba(255, 255, 255, 1)",
};

const getCurrentDateStr = computed(() => {
  const _date = screenDateOptions.find(
    (item) => item.value === unref(currentDate)
  ) as any;
  const { name } = _date;
  if (name === "今日" || name === "全部") return name;
  return `近${name}`;
});

let options: EChartsOption = {
  tooltip: {
    show: false,
  },
  geo: {
    map: "ShanDong",
    aspectScale: mapData?.en === "anhui" ? 1.2 : 0.85,
    itemStyle: {
      areaColor: "transparent",
      borderColor: "transparent",
      shadowColor: "transparent",
    },
  },
  series: [
    {
      type: "map",
      map: "ShanDong",
      geoIndex: 1,
      aspectScale: mapData?.en === "anhui" ? 1.2 : 0.85,
      zoom: 1,
      labelLayout(params) {
        return {
          x: params.rect.x + params.rect.width / 2,
          y: params.rect.y + params.rect.height / 2,
          verticalAlign: "middle",
          align: "center",
        };
      },
      label: {
        show: true,
        color: MAP_COLOR.labelColor,
        fontSize: 12,
        lineHeight: 15,
        rich: {},
      },

      itemStyle: {
        areaColor: MAP_COLOR.areaColor,
        borderColor: MAP_COLOR.borderColor,
        shadowColor: MAP_COLOR.shadowColor,
      },

      emphasis: {
        disabled: true,
      },

      select: {
        disabled: true,
      },

      data: [],
    },
  ],
};

const getMakePoint = (chartData, showName) => {
  let markPoint = {
    show: true,
    symbol:
      "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE4AAAB2CAMAAABRXVXvAAAC91BMVEUAAAD/7qX/8Lf/+bD/+73/6rn/8bf/8sD/8bj/8rf/1mz/0nD/02z/0XL/027/0Wz/0nH/7rz/8Lf/1mP/2Jb/3Gf/8LT/8rf/y3f/3Wb/1G3/8rb/1mr/1G7/8Lb/3WX/0nL/77X/7rH/3mb/8LX/12r/3Wf/8bT/12v/8bb/9L//3Wb/3Gf/5H/+3Gf922n/2Gv/8Ln/03D/9bz/8LP/1Wv/1W//8rb/8Lr/zWz/8br98rr/2Wn/12r/8LT/12v/1XH/8bX/1Gr922j/2Gr/1Wr/02v/1m7/8Lf/8bf/8r/98LT/1m7/8bb/8LD/8r3+8rn/0m3/0HL/z23/4nP/8Lf+8LP/8br/8bf/8LT/8Lf/0HH/6JX/3mf/2Gr/1m3/8bb/03D/76//1nr47rn98Lj+88T++eD/32j/3mT/77b98bT/22f/22n/8r3/8L3/7bH/8bX/8bT67bL/8r7y6q/+9c7+99n/8bb/7q7/8LT/8Lb/8LL/87b/++n98bX+6Jf/2Wj/12n/8r//77H/99n/9tL98b3//fP/9Mz/88H/7av/8bX/8bT/543/8ML/8LT/77P/6Z//5Yj/6p//5ZP+6J394IP956L/45D/9MT/8bn/877/88H/8bv/77z/5o7/66r/55j/5o796Kf+8bv/7aX/3X3/3oL/zXH57K3+88T/9tP/8r3/88P/8b3/8bX/7Kz/66j/4XX+7rj/5Ib/4HX/6aH/4oj945b/88H/8bz/2XT/763/2nr/5pH/++z/5YL/43v/8L3/43//7rT/55b/4oL/33f+4Yr/5Jr/6Jz/34n/3Zf/+uf/9Mj/88P/9Mz/7Kf/66H/7ar/8bn/77T/4G3/8bT/6aP+6qz988P+6Kb/5pb/33v/3IH/8sL/6ZH/7Kv/1Hz/65//5YL/55T/8LX/8sH96a3+3XX/347/23X/237/5Yr/6qL/8sj/6p3/4ZX/8r7/55H/2mX/5qT/4JX/88D/88T/9Mj/+eH/9c2w4m9rAAAA+HRSTlMABDsFBws3E0A5Qyo8Hj8lGA4+DAqSMycHllM1WkYZpjIsHaJ0X5pqZEsWqo27ioZ1RC0fVU9JKRAP2JFxamFQLyQjg3lMOTUwLviDVkci5IcnIBK2qYB5Z2VCG8WdZ2FbSx8W/vr597Gsm41/e0cimH1t/vz8+fbV1a54eBX4oYJubFBP/vz8+vXu3crDwrq6trWyo56RiYV2Vxvp3d21tbGuqo2MfHt0FP789O7NwL63qamkpKGdlIp8b29dWj74t7KvrKumnJeBfXVvB/779OHZ19LKxbixrKKYl5eQamJFLhrRwLemn5OBaWhjYkvgzHFfVlVRKdwK2GkAAAjzSURBVGje1NS9asJQGMbxuvoZMMOhtJChUscSqhBoaxDURUrVUVBKtk72DqxXobuguYRCSGejvQahTqK2UGi79iQm8byuj0P7h/fo9CPTc/S/iwgd4TEhXIswJjN+3oN/HpOFGM6lhXBODi1NS8swx5VdaZjTGl6m6b4azJmSYUj8vBoH4IRMmJMWkrTg52XAXFNMgrkE6a9xdRK8AEUSugEsRUK5V8oxdAFqJBldgBgJ3QDtsFxDJWnoAqiqruv8tg86KYauK4p729dEB0UhoRuQqJCaIFcsk+ogl4qTiiAXo1wK5NQkKQZyOuVUkKtESQrIlSlXBrn4KSkOctF8PqDcf0mQ44hYFOTu/Uol7ycPciW/XI4//DAtktsrAnFyYS8GceljUtWWIU4jWNW2sXU3qkJcezewbT8RszerBbbtotberFa32LZndrU389nnD8TVBC3Ltekbtu3tsOx6PhtMXyBOyQZ5muNgXCXUWuvZeOD0P7AxboVZrtb/hrjkdRjnuv3hJTbGAdazxmOnPxzeYHPX87O2H7c8h7jCk581Hk26w2XnDOK+roIuRpNnzj1CXGanuVzn4Q7ifkmrf5cEwjiO4wSOTYHELTkIV3H+ChscIoJzaU5HJZpMFKWxJfoLzt+2nadU8/l79TQLojkUbdOiv6LvIz53h2OfNzzP+OK7fQ4CPNIqs2z7EeLiXAuvuGQ7CXEn4XXp5+qK+4G4gMn9Epe9i0YhLr2OtGplNm0Ph4j2keIRN+9Nv4eqA9lFmUql6MnVPnEvqhICuAuZ5+fcFTJkfrOvfrnXJG4XGTJT8xFXat6qyjkyZD6eh3M7yPJscJqqHAHcmcfs7bVcmmh55RBZHlNzEjdm3DHAbTt5nMtdIlNh5zrjuqbnTpGpEAgSBPbWXH4fmQrBTOx2GvWJrt8gU7HBFTT9HZkKkSWwL7biCvoTwMVFM8Yx7wHg7mNW3dYI5dJuK+KKtWWhAnCyjXMxrracA5zPZcU4Oq8McE6bJrVGBp03BjhRstcy6LwGwLmvKUmix0oYxmBQBDjCqAQvQtzgX9CWI7QXzHxSESuvd7FYZIJ7IcdfZWYTmjYYxnHMh4nHhJIcAoEEQRR2EIWIguDND/y4+FHZQaQ6UNBqu67Ttg50ujpbOhiDadtbe2jXtYzBYKV0MHYaW7t+jEIv7Rhsp32wHbTtYU+0dt3YyvYnJG/yPu8v/+d5kzeHKP4DhenSaQOBKxSvwBAwftUrhQInDOm0DvsnFJCw019iry5dmpycvHymyUnYek5/nmHAvBiJ8ukGLqNOhU9e/vp+e+v2qba237//ehk/qwfYbKR59C/VotINrIuCSFuq/m17+zpo2NzWsNze2vpWT9nwn3FYI039oZIUS6AQ1LmroVhPGTB0dAdQMzMzX96AvszMzAJyZxTFDKl60aDoRqMES/0+jyzRTVLRqNdZIEMcPzzrrY4PlW+2VR4ar3pnh/lOH1uvNxTdpAn2/FwreLDSPoewAw5DQRhmOHgcax6dlG8eH78GHR/fLJ8cNWOPDwxYJ4I7YLujMAN/xkNtui5NF3JAE7rFpw9bzaVY66R87crYs1ugZ2NXrpVPWrGlZuvhU7ET5QjpujydDe1YQyUC73jtIYsmHEMxStqPw5jD/sHF8QfncQ/GFwf7D+FO8X2JgkDcVCR7OtXCCaltCTU0TDi0gFskdVQPiuKrm/GPHI4eLlY2ZdyVsbFnY2NjV2TcZmXxEMW5j/HNVRxFeygdWeyMxU0Ng+yPcOg67ihab+OB7NlvPdTadCZ8vhVzxseHHlwDIrCuPRgajztjrXncpLNpH7b2PcDgbXqa6rjTOQjA2aM8Qck4MfhOiAL5aWvZiAjiKPXyaCAGwI2hoaFyGXYbAIsNHL2kRkUBMS63ngIjKrwL8jKOIvioHXCkJ8q3s0UiCMcCZWY6rzGGGTa6bu5bGIj1VSrx+OJiPF6p9MUGFvrM61GWCRs1+ekZ4LIcElG2c+WjHhJwetYGDEi3GHGTDCvqnGaLKxvR0sz699nKwsLAwEBfW9BYWKjMfl9naG0k67KYnTqRZUh3RAupAtnG6mWcJNlEqBQWDpVKJCd4vNUPhWRGYzWWPn96VG31XT1TX6v66NPnktGqySQLH6pej8CRpVKIxKCaok2SZJxKcAjAI6h3vlKk5Ebsiab3jj+RDKg11rW1+3d3ljaO2tpY2rl7f23NqlEHkgn/HW8zYUfcpYjRJ1EE0ACjAhyPMIzARvlRj3Y1ZDVqw5HnzWptKldIJF2Bkfn5Gzdu3Hty9+6Te9CYnx8JuJKJQm6qVm0+j4S1RmtoVRsd5aOswDAIDzhKUnKMQ/KIUU82aO1dMxqtfmfTW1uZ2vMXEv3JpM/lcgUCsPMlk/2Jgn9vaqXmbTr9VqNxrdcazHpE0SM5GE4lUe2FSaVUKcGgzSNE5rJZTa+1N7/sbDqnzbWJlak7e7ncCz/oRS63d2dqZaJmnobO5TyEabLZuYjgsYE1JUA6CxVKKBFOydkFVhJSlmBvSBPSqH3L083m4JLXPFybmJh4C4JDbdjsXRpsNqeXfWoNhPUGLSlBYgU7DEeUBHq6oOAsSdOIknEIAlO0+NQjI3m1Wp3x707DWKAOOkGDnbZ315+BzvzIiNpnKdoFwcEoEZomWRy8dXk8Sct+OcauJI0+sAiJwAT2F3Iru8PmWS8I1s7dlVyhH6YcCgLGfEZSaWc4uVI0yQPt/Pop6vVhkkZUQLQz2qDFIpc/kMnkZR9tged8JhOQr1ssQS3EQfkRmgzr9eLvX0r5Y0eTHPQjKqUSId1aa3DOYvFloEhQTZB8UGd8Fstc0Kp1k4hSKcdyHEkbiI6134go4XCnwCINYcDkVKT8YK0GXb45gPhcwVV4LPWkigMSoGgwlnI7CBRYf1BnWZAQkuba1YVoyEPvBmlB8hFOw3C/9rxxNIlIncXoAil6CNFBprQpPY38RbQeukmHSPRcSOp6xHHKRPAGyQ4pqeS0YYMdbO0LdsnAEyYKx8/7+icuYHUiPPUOu90Bb42oA8zFlB821t8NN07J0wAAAABJRU5ErkJggg==",
    symbolSize: [0, 0],
    label: {
      show: false,
    },
    data: [],
  } as any;
  const _data = unref(chartData).map((item: any) => {
    const city = mapData?.coord.find(
      (city: any) => city.name === item.name
    ) as any;
    const _new = {
      name: item.name,
      coord: city.centroid,
      value: item.value,
    } as any;
    if (item.name === showName) {
      _new.symbolSize = [39, 59];
    }
    return _new;
  });
  markPoint.data = _data;
  return markPoint;
};

const getFillChartData = () => {
  return mapData?.coord.map((item: any) => {
    return {
      name: item.name,
      value: 0,
    };
  });
};

const dotColor = [
  "rgba(255, 169, 81, 1)",
  "rgba(219, 211, 142, 1)",
  "rgba(180, 140, 255, 1)",
];
// 获取地图数据
const getMapChartData = async () => {
  const params = {
    type: unref(currentDate),
  } as any;
  if (unref(currentCity) !== mapData?.name) {
    params.region = unref(currentCity);
  }
  // chartData.value = getFillChartData();
  chartData.value = [];
  options.series![0].data = [];
  try {
    const res = await useGetChartData(
      "/threatIncidentScreen/queryThreatRiskNum",
      (res) => res,
      params
    );
    totalCount.value = bigNumberTransform(res.total);
    chartListLimitTop3.value = [{}, {}, {}];
    options.series!.splice(1, options.series!.length);
    chartListTop3.value = res.datum || [];
    if (res.datum && res.datum.length) {
      res.datum.forEach((item, index) => {
        item.num = bigNumberTransform(item.num);
        if (item.city === tipCoord.value.name) {
          tipCoord.value.value = item.num;
        }
        chartData.value.push({ name: item.city, value: item.num });
        if (index < 3) {
          chartListLimitTop3.value[index] = item;
        }
      });
      options.series![0].data = chartData;
      options.series!.push(
        ...chartListLimitTop3.value.map((item, i) => {
          const city = mapData?.coord.find(
            (city: any) => city.name === item.city
          ) as any;
          city.value = item.num;
          return {
            type: "effectScatter",
            coordinateSystem: "geo",
            geoIndex: 0,
            symbolSize: function () {
              return 15;
            },
            itemStyle: {
              color: dotColor[i],
            },
            data: [city.center],
            name: `${city.name}/${city.value}`,
          };
        })
      );
    } else {
      tipCoord.value.showTip = false;
    }
  } catch (error) {
    totalCount.value = 0;
    chartListTop3.value = [];
    chartListLimitTop3.value = [{}, {}, {}];
    options.series!.splice(1, options.series!.length);
    console.log(error);
  }
};

const initChart = async () => {
  setMapCurrentCity();
  addChartEvent();
};

const addChartEvent = () => {
  const chartInstance = getInstance() as any;
  chartInstance.on("click", (params) => {
    if (params.componentType === "series") {
      let { data, seriesName } = params;
      if (!data || !seriesName) return;
      if (!data.name) {
        if (seriesName) {
          const [first, second] = seriesName.split("/");
          data.name = first;
          data.value = second;
        } else {
          return;
        }
      }
      const { offsetX, offsetY } = params.event || {};
      tipCoord.value.showTip = true;
      tipCoord.value.left = offsetX;
      tipCoord.value.top = offsetY;
      tipCoord.value.value = data.value;
      tipCoord.value.name = data.name;
      tipCoord.value.number = params?.dataIndex;
      if (data.name) {
        setCurrentCity(data.name);
      }
    }
  });

  chartInstance.getZr().on("click", (params) => {
    if (params.target === undefined && unref(currentCity) !== mapData?.name) {
      tipCoord.value.showTip = false;
      setCurrentCity();
    }
  });
};

const setSelectedMap = (name = "") => {
  if (!name) {
    options.series![0].data = unref(chartData);
  } else {
    const _list = unref(chartData).map((item) => {
      const newItem = {
        ...item,
      };

      if (item.name === name) {
        newItem.itemStyle = {
          areaColor: MAP_COLOR.selectedAreaColor,
          borderColor: MAP_COLOR.selectedBorderColor,
          shadowColor: "transparent",
        };
      }
      return newItem;
    });
    options.series![0].data = _list;
  }
};

const setMapCurrentCity = () => {
  if (unref(currentCity) === mapData?.name) {
    // setMakePoint();
    setSelectedMap();
  } else {
    // setMakePoint(unref(currentCity));
    setSelectedMap(unref(currentCity));
  }
};

const setMakePoint = (name = "") => {
  // if (!name) {
  //   options.series![0].markPoint = {
  //     show: false,
  //   };
  // } else {
  //   const _makePoint = getMakePoint(unref(chartData), name);
  //   options.series![0].markPoint = _makePoint;
  // }
};

watch(currentCity, () => {
  initChart();
});

watch(currentDate, async () => {
  // tipCoord.value.showTip = false;
  await getMapChartData();
  setOptions(options);
  initChart();
});

onMounted(async () => {
  registerMap("ShanDong", mapData?.coordjson);
  await getMapChartData();
  setOptions(options);
  initChart();
});
</script>

<template>
  <div class="chart-box chart-box-anhui">
    <!-- 顶部卡片 -->
    <div class="ya-header">
      <div class="ya-header-left">
        <img src="../../../assets/image/screen/icon_card.png" alt="" />
        <div class="ya-content">
          <div class="ya-content-num">{{ totalCount }}</div>
          <div class="ya-content-title">威胁事件总数(个)</div>
        </div>
      </div>
      <div class="ya-header-right">
        <div class="ya_top">
          <span>TOP3地市</span>
          <span class="ya_unit">单位：个</span>
        </div>
        <div class="ya_cot">
          <div class="ya-item" v-for="(item, index) in chartListLimitTop3" :key="index">
            <div class="ya-item-num">{{ item.num || "暂无数据" }}</div>
            <div class="ya-item-name" v-if="item.city">
              <img src="../../../assets/image/screen/icon_top1.png" v-if="index == 0" alt="" />
              <img src="../../../assets/image/screen/icon_top2.png" v-if="index == 1" alt="" />
              <img src="../../../assets/image/screen/icon_top3.png" v-if="index == 2" alt="" />
              <span>{{ item.city }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 地图区域 -->
    <div class="ya-chart-map">
      <!-- <div class="ya-bg">
        <img
          class="icon_circel_inner"
          src="@/assets/image/screen/icon_circel_inner.png"
          alt=""
        />
        <img
          class="icon_circel_center"
          src="@/assets/image/screen/icon_circel_center.png"
          alt=""
        />
        <img
          class="icon_circel_out"
          src="@/assets/image/screen/icon_circel_out.png"
          alt=""
        />
      </div> -->
      <div class="ya-map-bg" :class="mapData?.en">
        <img :src="'./resource/images/map/' + mapData?.en + '.png'" alt="" />
      </div>
      <div class="ya-echart" :class="mapData?.en">
        <div class="ya-echarts" ref="chartRef"></div>
        <div class="ya-echart-tip" v-show="tipCoord.showTip" :style="{
          left: tipCoord.left + 'px',
          top: tipCoord.top + 'px',
        }">
          <span class="ya_total">{{ tipCoord.value }}</span>
          <span class="ya_name">
            <img v-if="tipCoord.number < 3" :src="top3[tipCoord.number]" alt="" />
            <!-- <span class="ya_icon" v-else>{{ tipCoord.number }}</span> -->
            <span>{{ tipCoord.name }} </span>
          </span>
        </div>
      </div>
      <!-- <div class="ya-echart" :class="mapData.en" ref="chartRef"></div> -->
    </div>
    <!-- 数据分析 -->
    <!-- <DataAnalyse
      :titleName="'风险总数（个）'"
      :title="currentCity + getCurrentDateStr + '事件类型分布'"
      :total="totalCount"
      :list="chartListTop3"
      class="ya-data-analyse"
    ></DataAnalyse> -->
  </div>
</template>

<style lang="scss" scoped>
.chart-map {
  position: relative;
  top: -30px;
}

.chart-box {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;

  .ya-header {
    height: 123px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    z-index: 1;

    .ya-header-left {
      margin-right: 23px;
      width: 304px;
      height: 100%;
      position: relative;
      padding: 25px 15px 23px;
      box-sizing: border-box;

      img {
        height: 100%;
        width: 100%;
        position: absolute;
        transform: rotateY(180deg);
        top: 0;
        left: 0;
        z-index: -1;
      }

      .ya-content {
        .ya-content-num {
          font-size: 39px;
          font-family: YouSheBiaoTiHei;
          font-weight: 400;
          color: #ffffff;
          line-height: 1;
        }

        .ya-content-title {
          font-size: 20px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #8cecff;
          padding-top: 10px;
        }
      }
    }

    .ya-header-right {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-top: 1px;

      .ya_top {
        position: relative;
        background: rgba(0, 174, 255, 0.16);
        border: 1px solid #1281b5;
        box-shadow: -1px 0px 21px 0px rgba(0, 174, 255, 0.34);
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;

        span {
          font-size: 20px;
          font-family: YouSheBiaoTiHei;
          font-weight: 400;
          color: #ffffff;
          line-height: 12px;
          line-height: 1;
          background: linear-gradient(0deg,
              rgb(8, 173, 208) 0%,
              rgb(255, 255, 255) 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        .ya_unit {
          position: absolute;
          right: 13px;
          font-size: 14px;
          font-family: Source Han Sans CN;
          color: #ffffff;
          background: linear-gradient(0deg,
              rgba(26, 215, 255, 0.99) 1.07421875%,
              rgba(140, 240, 255, 0.4) 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }

      .ya_cot {
        display: flex;
        justify-content: space-between;

        .ya-item {
          background-image: url("../../../assets/image/screen/icon_card.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          width: 222px;
          height: 86px;
          padding: 23px 0 13px 19px;
          box-sizing: border-box;

          .ya-item-num {
            font-size: 27px;
            font-family: YouSheBiaoTiHei;
            line-height: 1;
          }

          .ya-item-name {
            font-size: 20px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #8cecff;
            line-height: 1;
            padding-left: 86px;
            padding-top: 4px;
            display: flex;

            img {
              margin-right: 5px;
            }
          }
        }
      }
    }
  }

  .ya-chart-map {
    flex: 1;
    margin-left: 0;
    position: relative;

    .ya-map-bg {
      // top: 161px;
      width: 730px;
      top: 30px;

      // height: 334px;
      // left: 12px;
      &.hubei {
        width: 739px;
        top: 34px;
      }
    }

    .anhui {
      top: 57px;
      width: 508px;
      height: 478px;
    }

    .ya-echart {
      width: 920px;
      height: 920px;
      top: -187px;

      .ya-echarts {
        width: 100%;
        height: 100%;
      }

      &.anhui {
        top: 3px;
        width: 630px;
        height: 630px;
      }
    }
  }

  .map-chart-tip {
    position: absolute;
    bottom: 15px;
    right: 0;
    width: 419px;
    height: 182px;

    .list-box {
      width: 238px;
      height: 114px;
      overflow-y: auto;
      position: absolute;
      right: 18px;
      top: 50px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .list-item {
        width: 100%;
        height: 32px;
        background: rgba(83, 42, 53, 1);
        display: flex;
        align-items: center;
        padding: 0 10px 0 5px;
        box-sizing: border-box;
        margin-bottom: 10px;

        .top-level {
          width: 38px;
          height: 18px;
          background: #ae001c;
          opacity: 0.36;
          border-radius: 8px;
          font-size: 10px;
          font-weight: 400;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 5px;
        }

        .list-name {
          flex: 1;
          font-size: 14px;
          font-weight: 400;
          color: #ffffff;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-right: 8px;
        }

        .list-count {
          text-align: right;
          font-size: 18px;
          font-family: "DIN";
          font-weight: 400;
          color: #ffffff;
          flex-shrink: 0;
        }
      }
    }

    .title {
      width: 240px;
      font-size: 16px;
      font-weight: 400;
      color: #ffffff;
      position: absolute;
      right: 0;
      top: 9px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .count-box {
      width: 125px;
      height: 125px;
      position: absolute;
      bottom: 15px;
      left: 15px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .name {
        font-size: 18px;
        font-weight: 400;
        color: #ffffff;
      }

      .count {
        font-size: 20px;
        font-family: "DIN";
        font-weight: 400;
        color: #ffffff;
      }
    }

    .rote-without-img {
      width: 125px;
      height: 125px;
      position: absolute;
      bottom: 15px;
      left: 15px;
      animation: clockWiseRotate 5s linear infinite;
    }

    @keyframes clockWiseRotate {
      0% {
        -webkit-transform: rotate(0deg);
      }

      50% {
        -webkit-transform: rotate(180deg);
      }

      100% {
        -webkit-transform: rotate(360deg);
      }
    }

    .back-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
}
</style>
