<script setup lang="ts">
import { Ref, defineProps, watchEffect, ref, computed, watch, onMounted, unref } from "vue";
import type { EChartsOption } from "echarts";
import { useECharts } from "../../../hooks/web/useECharts";
import { bigNumberTransform } from "../../../utils/utils";
import ProgressBar from "../../../components/ProgressBar/ProgressBar.vue";
import DataAnalyseProcess from "../components/DataAnalyseProcess.vue";
import { countryOptions, countryOptions1 } from "../constants";
import BlockCom from "./BlockCom.vue";
import {
  colorList,
  mergeOptions,
  getGradientColorList,
  mapNameJoint,
} from "../../../components/chart/options/index";
import { registerMap } from "echarts";
import { mapMapping } from "../../../assets/map/provinceData";
import { isObject } from "../../../utils/is";
import { useGlobalAttackMap } from "../logic/useGlobalAttackMap";
import { useGetChartData } from "../../../components/chart/logic";
import { getProvinceVisitObject } from "../../../api/screen/attackSituationScreen";
const mapData = mapMapping();
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions, getInstance, echarts } = useECharts(
  chartRef as Ref<HTMLDivElement>
);

const {
  currentCity,
  attackData,
  setCurrentCity,
  setVisitCount,
  setAttacksCount,
} = useGlobalAttackMap();

let chartData = ref([]) as any;
let statisticsList = ref([]) as any;
const statisticsCount = ref(0);
const maxCount = ref(0);
const minCount = ref(0);
const mapOptions = [
  {
    name: "访问地图",
    title: "今日被访问统计",
    colors: ["rgba(89, 185, 157, 1)", "rgba(255,255,255,0)"],
    gradientColor: ["rgba(89, 185, 157, 1)", "rgba(89, 185, 157, 0.11)"],
    color: "89, 185, 157",
    api: "bigScreen/netAttack/provinceVisitStat",
    colorTitle: "被访问数",
    subTitle: "被访问总数",
    top: "访问者地域TOP3",
  },
  {
    name: "攻击地图",
    title: "今日被攻击统计",
    colors: ["rgba(124, 109, 186, 1)", "rgba(255,255,255,0)"],
    gradientColor: ["rgba(124, 109, 186, 1)", "rgba(124, 109, 186, 0.11)"],
    color: "124, 109, 186",
    api: "bigScreen/netAttack/provinceAttackStat",
    colorTitle: "被攻击数",
    subTitle: "被攻击总数",
    top: "攻击者地域TOP3",
  },
];

const currentMapType = ref("攻击地图");

const switchMapType = (map) => {
  currentMapType.value = map.name;
};

const currentMapData = computed(() => {
  return mapOptions.find((item) => item.name === currentMapType.value);
}) as any;

const activeCountry = ref("国内");

const switchCountry = (country) => {
  activeCountry.value = country;
};

const MAP_COLOR = {
  areaColor: "transparent",
  borderColor: "#26C9FE",
  shadowColor: "transparent",
  labelColor: "#fff",
  emphasisLabelColor: "#0095FF",
  emphasisAreaColor: "#c7e8ff",
  emphasisBorderColor: "#0095FF",
  geoMapAreaColor: "rgba(255,255,255,0.2)",
  geoMapBorderColor: "rgba(152, 164, 183, 1)",
};

let options: EChartsOption = {
  tooltip: {
    show: false,
  },

  series: [
    {
      type: "map",
      map: "ShanDong",
      geoIndex: 1,
      aspectScale: mapData?.aspectScale,
      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,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",
    symbolSize: [0, 0],
    label: {
      show: false,
    },
    data: [],
  } as any;
  let _data = unref(chartData).map((item: any) => {
    const city = mapData?.coord.find(
      (city: any) => city.name === item.name
    ) as any;
    if (!city) {
      return;
    }
    const _new = {
      name: item.name,
      coord: city.centroid,
      value: item.value,
    } as any;
    if (item.name === showName) {
      _new.symbolSize = [39, 59];
    }
    return _new;
  });
  _data = _data.filter((item) => {
    return item;
  });
  markPoint.data = _data;
  return markPoint;
};

const initChart = async () => {
  registerMap("ShanDong", mapData?.coordjson);
  getMapChartData();
  setOptions(options);
  if (unref(currentCity) === mapData?.name) {
    setMakePoint();
  } else {
    setMakePoint(unref(currentCity));
  }
  const chartInstance = getInstance() as any;
  chartInstance.on("click", (params) => {
    if (params.componentType === "series") {
      const name = params.name;
      if (name) {
        setCurrentCity(name);
      }
    }
  });

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

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

const handleInterFaceData = (res) => {
  const total = (res && res[0]?.total) || 0;
  const isVisit = currentMapType.value === "访问地图";
  const _list = res;
  return _list.map((item) => {
    return {
      name: mapNameJoint(item.region),
      value: item.count,
    };
  });
};

function getTwoDimensionList(list) {
  const res = Object.values(
    list.reduce((res, item) => {
      res[item.value] ? res[item.value].push(item) : (res[item.value] = [item]);
      return res;
    }, {})
  );
  return res.sort((a: any, b: any) => {
    return b[0].value - a[0].value;
  });
}

const getCurrentColorsMap = (list) => {
  const notZeroList = list.filter((item) => item.value !== 0);
  console.log("notZeroList", notZeroList);
  const _twoDimensionList = getTwoDimensionList(notZeroList);
  const _colorList = getGradientColorList(
    _twoDimensionList.length,
    unref(currentMapData).gradientColor,
    unref(currentMapData).color
  );
  console.log("_twoDimensionList", _twoDimensionList);
  console.log("_colorList", _colorList);
  const colorsMap = {};
  _twoDimensionList.forEach((item: any, index) => {
    if (item.length === 1) {
      colorsMap[item[0].name] = _colorList[index];
    } else {
      item.forEach((_item, _index) => {
        colorsMap[_item.name] = _colorList[index];
      });
    }
  });
  return colorsMap;
};

const getMapSeriesData = (list) => {
  const colorsMap = getCurrentColorsMap(list);
  console.log("colorsMap", colorsMap);
  const zeroColor = unref(currentMapData).colors[1];
  return list.map((item) => {
    console.log("item.value", item.value);
    return {
      ...item,
      itemStyle: {
        areaColor: item.value === 0 ? zeroColor : colorsMap[item.name],
      },
    };
  });
};

const handleStatisticsList = (res) => {
  const isVisit = currentMapType.value === "访问地图";
  const _list = res;
  if (_list.length === 0) {
    statisticsList.value = [];
    return;
  }
  const maxCount = _list[0].count;
  const result = _list.map((item) => {
    return {
      name: isVisit ? item.visitedRegion : item.attackedRegion,
      value: item.count,
      percentage: parseInt((item.count / maxCount) * 100),
    };
  });
  statisticsList.value = result;
};

const setAllCount = (res) => {
  const total = (res && res[0]?.total) || 0;
  // const _visitAllTotalCount = total;
  // const _attackAllTotalCount = total;
  const isVisit = currentMapType.value === "访问地图";
  let _statisticsCount = 0;
  _statisticsCount = (isVisit ? total : total) || 0;
  statisticsCount.value = _statisticsCount;
  setVisitCount(total);
  setAttacksCount(total);
};

function getMinCount(list) {
  let lastIndex = list.length - 1;
  if (-1) return 0;
  while (list[lastIndex].value === 0 && lastIndex !== 0) {
    lastIndex--;
  }
  return list[lastIndex].value;
}

const getMapChartData = async () => {
  // const params = {
  //   regionType: unref(activeCountry) === "国内" ? 1 : 2,
  // } as any;
  // if (unref(currentCity) !== mapData.name) {
  //   params.attackDestRegion = unref(currentCity);
  // }
  let data = attackData.value;
  setAllCount(data);
  handleStatisticsList(data);
  const mapList = handleInterFaceData(data);
  const _maxCount = mapList.length && mapList[0].value;
  const _minCount = getMinCount(mapList);
  maxCount.value = _maxCount;
  minCount.value = _minCount;
  console.log("mapList", mapList);
  const _chartData = getMapSeriesData(mapList);
  chartData.value = _chartData;
  console.log("图表数据", _chartData);
  options.series![0].data = _chartData;
  setOptions(options);
};

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

// 监听城市数据变化
watch(attackData, () => {
  getMapChartData();
});

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

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

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

<template>
  <div class="chart-box">
    <!-- 地图 -->
    <div class="ya-chart-map">
      <div class="ya-bg">
        <img class="icon_circel_out" src="../../../assets/image/screen/icon_circel_inner.png" alt="" />
        <img class="icon_circel_inner" src="../../../assets/image/screen/icon_circel_center.png" alt="" />
        <img class="icon_circel_center" 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" ref="chartRef"></div>

      <div class="color-block" :class="currentMapData.name === '访问地图' ? 'visit-block' : 'attack-block'
        ">
        <div class="title">{{ currentMapData.colorTitle }}</div>
        <div class="top-max">
          <div class="count">{{ bigNumberTransform(maxCount) }}</div>
        </div>
        <div class="gradient-box">
          <div class="count">1</div>
        </div>
        <div class="bottom-min">
          <div class="count">0</div>
        </div>
      </div>
    </div>
    <div class="ya-right">
      <BlockCom name="攻击者地域TOP3" unit="次" />
    </div>

    <!-- 数据分析 -->
    <!-- <DataAnalyseProcess
      style="width: 230px"
      :title="currentCity"
      :state="currentMapData"
      :list="statisticsList"
      :total="statisticsCount"
      class="ya-data-analyse"
    >
      <div class="ya-tags">
        <img
          v-for="item in mapData.en == 'anhui'
            ? countryOptions1
            : countryOptions"
          @click="switchCountry(item.name)"
          :src="activeCountry === item.name ? item.activeIcon : item.icon"
          alt=""
          class="icon"
        />
      </div>
    </DataAnalyseProcess> -->
  </div>
</template>

<style lang="scss" scoped>
.chart-box {
  width: 100%;
  height: 700px;
  position: relative;
  display: flex;

  .ya-chart-map {
    flex: 1;
    height: 100%;
    box-sizing: border-box;

    .ya-bg {
      width: 1100px;
      height: 1100px;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: rotateX(74deg);
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) rotateX(45deg);
    }

    .ya-map-bg {
      width: 807px;
      height: 512px;
      top: 359px;
      transform: translate(-50%, -50%);
      padding-top: 0;

      &.anhui {
        width: 587px;
        height: 561px;
        top: 352px;
      }

      &.hubei {
        height: 432px;
        width: 807px;
        top: 299px;
      }
    }

    .ya-echart {
      width: 1015px;
      height: 1015px;
      top: -168px;

      &.anhui {
        width: 730px;
        height: 730px;
        top: -20px;
      }

      &.hubei {
        width: 1000px;
        height: 1000px;
        // height: 446px;
        top: -155px;
      }
    }
  }

  .ya-right {
    width: 280px;
  }

  .ya-tags {
    position: absolute;
    top: 5px;
    right: 0;

    img {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
      margin-right: 12px;
      cursor: pointer;
    }
  }
}

// .map-type-switch {
//   position: absolute;
//   top: 10px;
//   left: 0;
//   display: flex;
//   flex-direction: column;
//   z-index: 3;

//   .item {
//     width: 120px;
//     height: 30px;
//     display: flex;
//     align-items: center;
//     justify-content: center;
//     cursor: pointer;
//     font-size: 14px;
//     font-weight: 400;
//     color: rgba(255, 255, 255, 0.5);

//     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAAA8BAMAAACqUSpuAAAAD1BMVEX///8AAAD///////////9cEmbOAAAABXRSTlMhAGZDGyOhYr0AAACiSURBVFjD7c9BDYQAFMTQJiggWQUsAggOwL8oboyDKYdfA81jfbv/FMv4tx00s8BYYCwwFhgLjAXGAmOBscBYYCwwFhgLjAXGAmOBscBYYCwwFhgLzME0TdM0fasFqROnZcPp3KkW8EW1gFeqBVweB9wdB1weB9wdB1weB9wdB1weB9wdByyMA+6NAxbGAffGAQvjgHvjgIVxwL1xwOVxwG8Pwv8eSYLTKuQAAAAASUVORK5CYII=)
//       no-repeat;
//     background-size: 100%;
//   }

//   .is-active {
//     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAAA8BAMAAACqUSpuAAAAD1BMVEUP9/8AAAAE+f8F+v8C+f9i8/QlAAAABHRSTlMhAIBto50rbwAAAL5JREFUWMPtz7ENg0AABMGXXMG7AyQKcOAKbPqviXAIiZbkLz5ptGPa+wh3hfejGFjwZ2S7wvt/BAO3weA4GBwHg+NgcBwMjoPBcTA4DgbHweA4GBwHg+NgcBwMjoPBcTA4DgbHweA4GBwHg+NgcB0MvvVb8IIXvOAFv56Cv78WFry1sODZwoJjWHALC45hwS0sOIYFt7DgGBbcwoJjWHALC45hwS0sOIYFt7DgGBbcwoJjWHANCwaHExzD27QTRyWq3vva3iAAAAAASUVORK5CYII=)
//       no-repeat;
//     background-size: contain;
//     color: #fff;
//   }

//   &.anhui {
//     .item {
//       height: 36px;
//       font-weight: 400;
//       color: #74f8fd;
//       background: #2d3b6d;
//       border: 1px solid #68d9e4;
//       background-image: none;
//       // background-image: url("@/assets/image/screen/tab_bg.png");
//       // background-size: 100% 100%;
//     }
//     .is-active {
//       box-shadow: 0px 4px 10px 0px rgba(35, 45, 123, 0.3),
//         inset 0px 0px 10px 0px #68d9e4;
//       // background-image: url("@/assets/image/screen/tab_active_bg.png");
//     }
//   }

//   .item + .item {
//     margin-top: 22px;
//   }
// }

.chart-tip-box {
  width: 361px;
  height: 221px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: url(data:image/png;base64,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) no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 10px;
  left: 0;

  .top {
    width: 100%;
    display: flex;
    margin-top: 8px;
    padding-left: 71px;
    box-sizing: border-box;
    font-size: 18px;
    font-weight: 400;
    color: #ffffff;
    align-items: center;

    .icon {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
      margin-left: 12px;
      cursor: pointer;
    }
  }

  .bottom-box {
    margin-top: 30px;
    padding: 0 26px 0 28px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .bottom-top {
      display: flex;
      align-items: center;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.75);

      .count {
        font-size: 33px;
        font-family: "DIN";
        font-weight: normal;
        color: #e4da39;
        margin: 0 10px;
      }
    }
  }

  .progress-box {
    display: flex;
    flex-direction: column;
    width: 100%;

    .progress-item {
      display: flex;
      align-items: center;
      margin-top: 5px;
    }

    .progress-bar {
      margin-left: 8px;
    }

    .city-name {
      width: 90px;
      text-align: left;
      font-size: 16px;
      font-weight: 400;
      color: #cccccc;
      flex-shrink: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .progress-count {
      width: 70px;
      text-align: right;
      font-size: 18px;
      font-weight: 800;
      color: #cccccc;
      margin-left: 20px;
    }
  }
}

.color-block {
  position: absolute;
  bottom: 55px;
  right: 49px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .title {
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
  }

  .top-max {
    margin-top: 6px;
    width: 32px;
    height: 7px;
    border-radius: 4px;
    position: relative;

    .count {
      position: absolute;
      right: -112px;
      top: -5px;
      min-width: 100px;
    }
  }

  .gradient-box {
    margin-top: 1px;
    width: 28px;
    height: 70px;
    border-radius: 3px;
    position: relative;

    .count {
      position: absolute;
      right: -20px;
      bottom: 0px;
    }
  }

  .bottom-min {
    margin-top: 3px;
    width: 32px;
    height: 7px;
    border-radius: 4px;
    position: relative;

    .count {
      position: absolute;
      right: -20px;
      bottom: -5px;
    }
  }

  .count {
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
  }
}

.color-block.visit-block {
  .top-max {
    background: rgba(89, 185, 157, 1);
  }

  .gradient-box {
    background: linear-gradient(0deg,
        rgba(89, 185, 157, 0.11) 1%,
        rgba(89, 185, 157, 1) 100%);
  }

  .bottom-min {
    background: rgba(255, 255, 255, 0.2);
  }
}

.color-block.attack-block {
  .top-max {
    background: rgba(124, 109, 186, 1);
  }

  .gradient-box {
    background: linear-gradient(0deg,
        rgba(124, 109, 186, 0.11) 1%,
        rgba(124, 109, 186, 1) 100%);
  }

  .bottom-min {
    background: rgba(255, 255, 255, 0.2);
  }
}
</style>
