<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/screen/safeComponents/OverallQuantity.VUE
 * @Date: 2022-09-07 09:38:52
 * @Description: 
 * @LastEditTime: 2023-09-01 17:37:56
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { reactive, ref, onMounted, watch, unref } from 'vue'
import BarChart from "../../../components/chart/BarChart/BarChart.vue";
import { useGlobalSafeScreen } from "../logic/useGlobalSafeScreen";
import { useGetChartData } from "../../../components/chart/logic";
import { mapMapping } from "../../../assets/map/provinceData";
import { getThemeColor } from "../../../components/chart/options/theme";
const mapData = mapMapping();
const { currentDate, currentCity } = useGlobalSafeScreen();

const xAxisChartData = ref([]) as any;
const barChartData = ref([]) as any;

const handleInterFaceData = (res) => {
  let xAxisData = [] as any;
  let chartData = [] as any;
  res.map((item) => {
    chartData.push({
      name: item.eventName,
      data: item.data,
    });
  });
  xAxisData = res[0].xaxisData;
  return {
    xAxisData,
    chartData,
  };
};

// 数据初始化
const init = () => {
  getChartData();
};

// 获取echart数据
const getChartData = async () => {
  const params = {
    type: unref(currentDate),
  } as any;
  if (unref(currentCity) !== mapData?.name) {
    params.region = unref(currentCity);
  }
  xAxisChartData.value = [];
  barChartData.value = [];
  const { xAxisData, chartData } = await useGetChartData(
    "largeScreen/comprehensiveSituation/queryOverallQuantity",
    handleInterFaceData,
    params
  );
  xAxisChartData.value = xAxisData || [];
  barChartData.value = chartData || [];
};
const xInterval = ref(0);
watch(
  currentDate,
  () => {
    if (currentDate.value == 3) {
      xInterval.value = 1;
    } else {
      xInterval.value = 0;
    }
    console.log(xInterval.value);
    init();
  },
  {
    immediate: true,
  }
);

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

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

<template>
  <div class="block" :class="mapData?.en == 'anhui' ? 'safe-block-height3' : ''">
    <BarChart :xInterval="xInterval" :xAxisData="xAxisChartData" autotip theme="dark" stack
      :tooltipValueFormatter="(val) => val + '（个）'" :colors="getThemeColor().colorList || [
        '#BC5D53',
        '#DE942C',
        '#70A719',
        '#4894BC',
      ]
        " :chartData="barChartData" :gridBottom="mapData?.en == 'anhui' ? 10 : 0" />
  </div>
</template>

<style lang="scss" scoped>
.block {
  width: 100%;
  height: 220px;
}
</style>
