<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/screen/safeComponents/OverallDistribution.vue
 * @Date: 2022-09-07 09:38:52
 * @Description: 
 * @LastEditTime: 2023-04-12 14:12:25
 * @LastEditors: 李佐宁
-->
<script setup lang="ts">
import { reactive, ref, onMounted, watch, unref } from 'vue'
import { useGetChartData } from "../../../components/chart/logic";
import { useGlobalSafeScreen } from "../logic/useGlobalSafeScreen";
import OverallDisBoxBg from "../../../assets/image/screen/overall-dis-box-bg.png";
import { bigNumberTransform } from "../../../utils/utils";
import { mapMapping } from "../../../assets/map/provinceData";
const mapData = mapMapping();
const { currentCity, currentDate } = useGlobalSafeScreen();

const totalCount = ref(0);
const unit = ref("个");
const chartData = ref([]) as any;

const handleServerData = (res) => {
  if (res.length === 0) return [];
  return res.map((item) => {
    return {
      name: item.eventName,
      value: item.num,
      num: bigNumberTransform(item.num),
      percent: item.ratio,
    };
  });
};

const getData = async () => {
  const params = {
    type: unref(currentDate),
  } as any;
  if (unref(currentCity) !== mapData?.name) {
    params.region = unref(currentCity);
  }
  const res = await useGetChartData(
    "largeScreen/comprehensiveSituation/queryOverallDistribution",
    (res) => res,
    params
  );
  console.log(res);
  unit.value = res.unit;
  totalCount.value = res?.total || 0;
  chartData.value = handleServerData(res.overallDistribution);
};

const init = () => {
  getData();
};

onMounted(() => {
  init();
});

watch(currentDate, () => {
  getData();
});

watch(currentCity, () => {
  getData();
});
</script>

<template>
  <div class="block">
    <!-- <img :src="OverallDisBoxBg" alt="" class="back-img" />
      <img
        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANQAAADUCAMAAADTAP0qAAAAolBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8ELnaCAAAANXRSTlMABvz0hFsMFYv4fB8I7TsSD+FVNd2dS/HMsJFQReVpLhrSx6mWI9fCt3RAKumkZSYybr9gaAYGZkUAAAQiSURBVHja7MExAQAAAMIg+6e2xg5gAAAAAAAAAAAAAAAAAAAAAAAAAAAAQMPbuQ9ktYEgiqJXOSMEIoqcc/p++9+aC4cqL8G0fXbQhZgO01JdX4qikBwMGeinNoakx+et00xa/PeXW5xb/WCWxhmG7PXTBENGkrx6NepiyLmb5RhVRhiSzfzra+fpiiF9/bTHkHmyO2yOzdxURWFW1LrFozOGHFeF3gIM2UjS5RCbyr6d3nFiKkn94Wzq8XvHM957kqk6fagfpqb6xJ7c4SbYYkr3FPIWYky7Hw+TEkMm8dCVpA6GjCS5Q/9kavQ3q3odc+nX4S2bHeaY0vKXknwMCS6SVPRMpd+TNN1MTJ0TgN8CCANjRS1Os/ZUY8mkN5DkXU2NX6aSVjdTIUFc+VvACSzFFQLc40JHLHGCl6TEVP7tXiRNU1slYF5o1XHAaTCk8wDKdCpTtRJkY09KvmHIfe1KXrzAkoc08CPITXX117QEZ1bphCnOrZY8U/8qgp3k9kyNn+lKOpwhf1paQhitTkBQmRpWtIHHS0pSLFn0XOlg67LAqaSqASe1lKyeiZ9Da6fCUr2+hfZGcn1bA7POVFo+bF1X3X79TMfijhlhvXxA9pKpvbK7A8FA2lgqK6BcS0UD9z52HKRVBh3PM3RhNfd8B2cs1YaCYgGLlfSKyC2lq8lFGjtEK0NHoLNU8gXnWq6hjbn7rguTgTxLB+DbN1eXLvg37BhL9RY2cg3NbDcaRjhXqYchaUh+kDZw+sKO9l4aw8mztAp9lWJoeaoN9cHRzofuQFVGZKcVDn/EdLmTr7TGjHmhwQPnINfQ+32LpXeCqzSDjZnyojyBL40hlWuoFZlJI+i76hmaMfU0zDkPNHQILmYeweOCdq0iYzvQCDt+HH/OUNOSiZXr06xWCmNpQjmVlWakTKGRxrDWYIGZK9Ss0DKnkb4RTldGhtLdKpkTXbSHWN4CG8Vg2Ye1kjtnVylhNTbyxktHSmGvKieVF2Fi3h6tlw6B1CEaKCac9kzsMrVpT7WHsQYlR3klJo6MJnEfbBP55FONCYv6wefbPmGtos1M7pabvDazwEClO5dSnEprWKqHU2hG9PHr3519yJfU5SS16MiNGCcxn2+nF4y0hJEOUOlI6/Lpo4zOqiFz9SRy9UVXOpNqCbtVl+iTE3Msr+SppI2vCvbasJDmxFoTxs+Q7AM/9pP5MQw1gp02hIk6NEocDhozl0pGimmp4NNkiQLOUp++tCDWECrN6CuBl1JaEh+nvIWk8nJi1bBXj1CaMFMFSx3pf2JQb/3Rr5yFpyddaYuvIUw1+9yg3vKh+8VcavGlxOGqESQKaD45KGiHNAM3JNbu53OYSw3BZwf1wxbS3Qgq+SykiYmgfguOLbbD+sHNUFD//ffv+Q4GaXd8CunkkwAAAABJRU5ErkJggg=="
        alt=""
        class="dotted-line"
      /> -->
    <!-- <div class="without-circle"></div> -->
    <!-- <div class="sum-box">
        <div class="name">总数（{{ unit }}）</div>
        <div class="count">{{ totalCount }}</div>
      </div> -->

    <div class="ya-left">
      <img style="width: 100%" src="./icon_battery.png" alt="" />
    </div>
    <div class="ya-right">
      <div class="item-box" v-for="(item, i) in chartData" :key="i">
        <div class="name">{{ item.name }}</div>
        <div class="count">{{ item.num }}</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.block {
  width: 100%;
  height: 153px;
  display: flex;
  margin-top: 41px;
  margin-bottom: 35px;

  .ya-left {
    width: 101px;
    height: 100%;
    margin-right: 8px;
  }

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

    .item-box {
      font-size: 18px;
      font-family: Source Han Sans CN;
      color: #8cecff;
      display: flex;
      justify-content: space-between;
      background-image: url("../../../assets/image/screen/icon-distributeBg.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      padding-left: 35px;
      padding-right: 20px;

      .count {
        font-size: 20px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #9aefff;
      }
    }
  }
}
</style>
