<template>
  <div class="center-map">
    <v-chart
        class="chart"
        :option="option"
        ref="centerMapRef"
        :loading="loading"
        :loading-options="loadingOptions"
    />
  </div>
</template>
<script setup lang="ts">
import {ref, onMounted, watch} from "vue";
import {registerMap, getMap} from "echarts/core";
import {optionHandle} from "./center.map";
import {loopShowTooltip} from "@/utils/tooltip-auto-show";
import axios from "axios";
import {areaDetail} from "api/home";
import dayjs from "dayjs";
import {loadingOptions} from "@/utils/constants";

const props = defineProps({
  dateArray: {
    type: Array,
    default: () => []
  }
})
const date = ref([]);
watch(() => props.dateArray, (val: any) => {
  date.value = val;
}, {immediate: true})

watch(() => props.dateArray, (val: any) => {
  getData();
})
const loading = ref(false);
const option = ref({});
const code = ref("511500"); //100000 代表中国 其他地市是行政编码
const dataSetHandle = async (regionCode: string, list: object[]) => {
  code.value = regionCode;
  const geoJson: any = await getGeoJson(regionCode);
  let cityCenter: any = {};
  //获取当前地图每块行政区中心点
  geoJson.features.forEach((element: any) => {
    cityCenter[element.properties.name] =
        element.properties.centroid || element.properties.center;
  });
  option.value = optionHandle(regionCode, list);
};

const getGeoJson = (regionCode: string) => {
  return new Promise<boolean>(async (resolve) => {
    let mapJson = getMap(regionCode);
    if (mapJson) {
      mapJson = mapJson.geoJSON;
      resolve(mapJson);
    } else {
      mapJson = await axios.get(`./map-geojson/${regionCode}.json`).then(
          (data) => data.data
      );
      code.value = regionCode;
      registerMap(regionCode, {
        geoJSON: mapJson as any,
        specialAreas: {},
      });
      resolve(mapJson);
    }
  });
};
// 获取数据设置到地图中
const getData = async () => {
  loading.value = true;
  try {
    const {result} = await areaDetail({
      StartDate: dayjs(date.value[0]).format('YYYY-MM-DD'),
      EndDate: dayjs(date.value[1]).format('YYYY-MM-DD')
    });
    const regionData = result.map((item: any) => {
      return {
        name: item.areaName,
        ...item
      }
    })
    await dataSetHandle(code.value, regionData);
    loading.value = false;
  } catch (e) {
    console.log(e);
    loading.value = false;
  }
};
const tooltipTimer = ref<any>(null);
const centerMapRef = ref<any>(null);
const tooltipMap = (myChart, option) => {
  tooltipTimer.value && tooltipTimer.value.clearLoop(); // this.tooltipTimer 在data里定义
  tooltipTimer.value = 0;
  // 调用轮播的方法
  // myChart为Echarts容器实例
  tooltipTimer.value = loopShowTooltip(myChart, option, {
    interval: 5000, // 轮播间隔时间
    loopSeries: false, // 是否开启轮播循环
    seriesIndex: 0, // 开始轮播的系列索引
    // shunXu: "daoXu", // 显示顺序
    // loopSeries: boolean类型，默认为false。true表示循环所有series的tooltip；false则显示指定seriesIndex的tooltip。
    // seriesIndex: 默认为0，指定某个系列（option中的series索引）循环显示tooltip，当loopSeries为true时，从seriesIndex系列开始执行。
  });
};
setTimeout(() => {
  tooltipMap(centerMapRef.value!.chart, option.value);
  centerMapRef.value.setOption(option.value);
}, 1000);

onMounted(() => {
  getData();
});
</script>

<style scoped lang="scss">
.center-map {
  height: 500px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  margin-top: 10px;
}
</style>
<style lang="scss">
.chartTooltip {
  position: relative;
  background-color: rgba(0, 0, 0, 0.6);
  border: 1px solid #00f7f6;
  border-radius: 10px;
  padding: 10px;

  .textTooltip {
  }
}

.map-tooltip {
  height: 100%;
  width: 100%;
  list-style: none;
  font-size: 18px;
  display: flex;
  flex-flow: nowrap column;
  font-family: PingFang SC, serif;
  font-weight: 500;

  .title {
    flex: 1.5;

    .circle {
      height: 22px;
      width: 22px;
      border-radius: 50%;
      background: radial-gradient(white 30%, orange 30.01%, orange 100%);
      padding: 0 5px;
    }

    .province {
      padding: 0 10px;
    }

    .province-name {
      background: #048afc;
      padding: 5px 15px;
      border-radius: 6px;
      color: white;
    }
  }

  li {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #264a6c;

    .name {
      flex: 4;
      text-align: right;
    }

    .color {
      flex: 6;
      font-weight: 600;
      padding-left: 5px;
    }
  }
}
</style>
<style lang="scss">
.custom-tooltip-box {
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important;
  // 给子盒子自定义样式
  .custom-tooltip-style {
    width: 355px;
    height: 219px;
    background-image: url('@/assets/img/home/tool_tip_bg.png');
    background-size: 100% 100%;
    color: #fff;
    padding: 30px;

    .custom-tooltip-name {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 15px;
      display: flex;
      align-items: center;

      .custom-tooltip-arrow {
        display: inline-block;
        width: 18px;
        height: 18px;
        background-image: url("@/assets/img/home/tool_tip_arrow.png");
        margin-right: 10px;
      }
    }

    .custom-tooltip-style-box {
      display: flex;
      color: #d5e7e7;
      font-size: 14px;

      .ball {
        width: 121px;
        height: 121px;
        background-image: url("@/assets/img/home/tool_tip_circel.png");

        .ball-value {
          color: #fff;
          font-size: 28px;
          font-weight: bold;
          text-align: center;
          margin-top: 37px;

          span {
            font-size: 16px;
            font-weight: normal;
            margin-left: 1px;
          }
        }

        .ball-text {
          color: #fff;
          font-size: 16px;
          text-align: center;
          margin-top: 3px;
        }
      }

      .custom-tooltip-style-box-text {
        flex: 1;
        margin-left: 10px;

        .custom-tooltip-style-box-text-item {
          margin-bottom: 8px;
          display: flex;
          align-items: center;

          span {
            display: inline-block;
            color: #fff;
            font-weight: bold;
            max-width: 90px;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          b {
            color: #fff;
            font-weight: normal;
          }
        }
      }

    }
  }
}
</style>
