<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/monitoring/overview/components/IndicatorMap.vue
 * @Date: 2022-08-27 10:39:57
 * @Description: 
 * @LastEditTime: 2023-08-31 14:13:12
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import ProvincesMap from "../../../../components/chart/map/ProvincesMap.vue";
import CommonCard from "../../../../components/CommonCard/CommonCard.vue";
import { bigNumberTransform } from "../../../../utils/utils";
import {
  queryCityDistribution,
  queryMapCityDistribution,
} from "../../../../api/monitoring/InternetStiff/totalSituations";
import { ElScrollbar } from "element-plus";
import { getThemeColor } from "../../../../components/chart/options/theme";
import { mapMapping } from "../../../../assets/map/provinceData";
const mapData = reactive(mapMapping());
const colorList = getThemeColor().colorList || [];
const chartData = ref([]);
const tooltipFormatter = function (params) {
  let _data = {
    value: 0,
    valueTwo: 0,
  };
  let name;
  name = params.name;
  chartData.value.forEach((item, index) => {
    if (item.name == name) {
      _data.value = item.value;
    }
  });
  chartDataTwo.value.map((item, index) => {
    if (item.name == name) {
      _data.valueTwo = item.value;
    }
  });
  if (_data.value > 0 && _data.valueTwo == 0) {
    return `<div class="light-map-tip-box">
      <div class="light-map-tip-box-name">${params.name}</div>
      <div class="light-map-tip-box-content">
        <div class="light-map-tip-box-item">
          <div class="light-map-tip-box-label">被感染主机数量</div>
          <div class="light-map-tip-box-value">${bigNumberTransform(
      _data.value || 0
    )}</div>
        </div>
      </div>
    </div>`;
  } else if (_data.valueTwo > 0 && _data.value == 0) {
    return `<div class="light-map-tip-box">
      <div class="light-map-tip-box-name">${params.name}</div>
      <div class="light-map-tip-box-content">
        <div class="light-map-tip-box-item">
          <div class="light-map-tip-box-label">控制端主机数量</div>
          <div class="light-map-tip-box-value">${bigNumberTransform(
      _data.valueTwo || "0"
    )}</div>
        </div>
      </div>
    </div>`;
  } else if (_data.valueTwo > 0 && _data.value > 0) {
    return `<div class="light-map-tip-box">
      <div class="light-map-tip-box-name">${params.name}</div>
      <div class="light-map-tip-box-content">
        <div class="light-map-tip-box-item">
          <div class="light-map-tip-box-label">被感染主机数量</div>
          <div class="light-map-tip-box-value">${bigNumberTransform(
      _data.value || 0
    )}</div>
        </div>
        <div class="light-map-tip-box-item">
          <div class="light-map-tip-box-label">控制端主机数量</div>
          <div class="light-map-tip-box-value">${bigNumberTransform(
      _data.valueTwo || "0"
    )}</div>
        </div>
      </div>
    </div>`;
  }
};

const resetData = (e) => {
  let arr = [];
  let city = e.city.split(",");
  let num = e.num.split(",");
  let proportion = e.proportion.split(",");
  return city.map((item, i) => {
    return {
      city: city[i],
      num: num[i],
      proportion: proportion[i].split("%")[0] > 1 ? proportion[i] : "0.5%",
    };
  });
};

const list = ref([]);
const controlList = ref([]);
const init = async () => {
  const res = await queryCityDistribution();
  if (res.code === 200 && res.data) {
    if (res.data.infection) {
      list.value = resetData(res.data.infection);
    }
    if (res.data.control) {
      controlList.value = resetData(res.data.control);
    }
  }
};
const getMapList = async () => {
  let res = await queryMapCityDistribution();
  if (res.code == 200 && res.data) {
    console.log(res);
    const { infection = [], control = [] } = res.data || {};
    if (infection?.length) {
      const maxInfection = infection[0].infectionNum;
      chartData.value = infection.map((item) => {
        return {
          name: item.city,
          value: item.infectionNum,
          valuePercent: ((item.infectionNum / maxInfection) * 100) / 2,
          percentage: item.infectionProportion,
          // realValue: item.infectionNum / maxInfection,
        };
      });
    }
    if (control?.length) {
      let maxControl = control[0].controlNum;
      chartDataTwo.value = control.map((item) => {
        return {
          name: item.city,
          value: item.controlNum,
          valuePercent: ((item.controlNum / maxControl) * 100) / 2,
          percentageTwo: item.controlProportion,
        };
      });
    }
  }
};
const chartDataTwo = ref([]);
const isIframe = ref(self !== top);
onMounted(() => {
  init();
  getMapList();
});
</script>

<template>
  <CommonCard title="近一周被感染/控制端主机地域分布" unit="个">
    <div class="ya-map">
      <div class="ya-map-item">
        <div class="ya-box-echart" :class="mapData?.en">
          <img v-if="mapData?.en !== 'shandong'" class="ya-map-bg" :class="{ isIframe }"
            :src="'./resource/images/map/bg_' + mapData?.en + '.png'" alt="" />
          <ProvincesMap class="ya-echart-map" :class="mapData?.en" :zoom="1.2" makePoint autotip twoMakePoint
            :chartData="chartData" :chartDataTwo="chartDataTwo" :tooltipFormatter="tooltipFormatter" />
        </div>
        <div class="map-label ya-regular-text">
          <div class="map-label-flex">
            <div class="map-label-line" :style="'background-color: ' + colorList[0]"></div>
            <div>被感染主机数</div>
          </div>
          <div class="map-label-flex">
            <div class="map-label-line new-bg" :style="'background-color: ' + colorList[1]"></div>
            <div>控制端主机数</div>
          </div>
        </div>
      </div>
      <div class="ya-map-item process">
        <div class="adress-center">
          <div class="adress ya-border-color">
            <div class="title ya-fill-color ya-primary-text">
              近一周被感染主机地域分布TOP10
            </div>
            <div v-if="list.length" style="height: 100%; overflow: hidden">
              <div class="adress-flex" v-for="item in list">
                <div class="ya-regular-text ya-adress-name" :class="mapData?.en" style="white-space: nowrap">
                  {{ item.city }}
                </div>
                <div class="adress-flex-item">
                  <div class="adress-line">
                    <div class="adress-line-item" :style="{
                      width: item.proportion,
                      background:
                        (getThemeColor().colorList &&
                          getThemeColor().colorList[0]) ||
                        '#f18301',
                    }"></div>
                  </div>
                  <div class="ya-regular-text" style="white-space: nowrap">
                    {{ bigNumberTransform(item.num) }}
                  </div>
                </div>
              </div>
            </div>
            <ya-empty v-else></ya-empty>
          </div>
          <div class="adress ya-border-color">
            <div class="title ya-fill-color ya-primary-text">
              近一周控制端主机地域分布TOP10
            </div>
            <div v-if="controlList.length" style="height: 100%; overflow: hidden">
              <div class="adress-flex" v-for="item in controlList">
                <div class="ya-regular-text ya-adress-name" :class="mapData?.en" style="white-space: nowrap">
                  {{ item.city }}
                </div>
                <div class="adress-flex-item">
                  <div class="adress-line">
                    <div class="adress-line-item newbg" :style="{
                      width: item.proportion,
                      background:
                        (getThemeColor().colorList &&
                          getThemeColor().colorList[1]) ||
                        '#8d92ff',
                    }"></div>
                  </div>
                  <div class="ya-regular-text" style="white-space: nowrap">
                    {{ bigNumberTransform(item.num) }}
                  </div>
                </div>
              </div>
            </div>
            <ya-empty v-else></ya-empty>
          </div>
        </div>
      </div>
    </div>
  </CommonCard>
</template>

<style scope lang="scss">
.ya-map {
  width: 100%;
  height: 100%;
  padding: 20px 0;
  box-sizing: border-box;
  display: flex;
  position: relative;

  .ya-box-echart {
    width: 100%;
    height: 100%;
    // position: absolute;
    // width: 800px;
    // height: 600px;
    // left: 0;
    // top: -12vh;
    transform: rotateX(45deg);

    .ya-map-bg {
      position: absolute;
    }

    &.shandong {
      transform: rotate(0);
    }

    &.anhui {
      .ya-map-bg {
        width: 880px;
        height: 892px;
        top: -180px;
        left: -109px;

        &.isIframe {
          width: 883px;
          height: 899px;
          top: -181px;
          left: -112px;
        }
      }
    }

    &.hubei {
      transform: rotate(0);

      .ya-map-bg {
        position: absolute;
        width: 895px;
        top: -202px;
        left: -56px;
      }

      .chart {
        width: 70% !important;
        left: 70px;
      }
    }
  }

  .ya-map-item {
    width: 800px;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    flex: none;

    // justify-content: center;
    &.process {
      flex: 1;
    }

    .adress-center {
      display: flex;
      justify-content: space-between;
      // margin-top:30px;
      width: 100%;
      height: 88%;

      .adress {
        width: 48%;
        border-radius: 8px;
        border: 1px solid rgba(0, 0, 0, 0.2);
        font-size: 14px;
        display: flex;
        flex-direction: column;

        // overflow-y: auto;
        .title {
          font-weight: 400;
          color: rgba(0, 0, 0, 0.65);
          height: 31px;
          line-height: 31px;
          border-radius: 7px 7px 0px 0px;
          background: #f4f4f4;
          text-align: center;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .adress-flex {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-left: 24px;
          padding-right: 16px;
          height: 10%;
          line-height: 32px;
          color: rgba(0, 0, 0, 0.65);

          .adress-flex-item {
            display: flex;
            align-items: center;
            color: rgba(0, 0, 0, 0.4);
            flex: 1;
          }

          .ya-adress-name {
            width: 48px;

            &.anhui {
              width: 62px;
            }
          }

          .adress-line {
            height: 4px;
            flex: 1;
            // min-width: 150px;
            // max-width: 180px;
            margin-right: 5px;
            position: relative;

            .adress-line-item {
              height: 100%;
              background: #f18301;
              position: absolute;
              border-radius: 4px;
              left: 0;
            }

            .newbg {
              background: #8d92ff;
            }
          }
        }
      }
    }
  }
}

.light-map-tip-box {
  position: relative;
  top: 20px;
}

.map-label {
  position: absolute;
  bottom: 0;
  right: 20px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.4);

  .map-label-flex {
    display: flex;
    align-items: center;
    margin-bottom: 8px;

    .map-label-line {
      width: 4px;
      height: 10px;
      border-radius: 2px;
      background: #f18301;
      margin-right: 7px;
    }

    .new-bg {
      background: #8d92ff;
    }
  }
}
</style>
