<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/screen/SafeComponents/OverallTrend.vue
 * @Date: 2022-09-07 09:38:52
 * @Description: 
 * @LastEditTime: 2023-09-01 17:38:10
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { reactive, ref, onMounted, watch, unref, computed } from 'vue'
import LineChart from "../../../components/chart/LineChart/LineChart.vue";
import { useGetChartData } from "../../../components/chart/logic";
import { useGlobalSafeScreen } from "../logic/useGlobalSafeScreen";
import { bigNumberTransform } from "../../../utils/utils";
import { mapMapping } from "../../../assets/map/provinceData";
const mapData = mapMapping();
const { currentCity, currentDate } = useGlobalSafeScreen();
const lineXAxisData = ref([]) as any;
const lineChartData = ref([]) as any;

const handleInterFaceData = (res = []) => {
  let xAxisData = [] as any;
  let chartData = [] as any;
  if (res) {
    res.forEach((item) => {
      chartData.push({
        name: item.eventName,
        data: item.data,
        unit: item.unit,
      });
    });
    xAxisData = res.length > 0 ? res[0].xaxisData : [];
  }

  return {
    xAxisData,
    chartData,
  };
};

const xInterval = computed(() => {
  const _obj = {
    1: 1,
    2: "auto",
    3: 3,
    4: "auto",
  };
  return _obj[unref(currentDate)];
});

const getData = async () => {
  const params = {
    type: unref(currentDate),
  } as any;
  if (unref(currentCity) !== mapData?.name) {
    params.region = unref(currentCity);
  }
  lineXAxisData.value = [];
  lineChartData.value = [];
  const { xAxisData, chartData } = await useGetChartData(
    "largeScreen/comprehensiveSituation/queryGeneralTrend",
    handleInterFaceData,
    params
  );
  lineXAxisData.value = xAxisData || [];
  lineChartData.value = chartData || [];
};
const init = () => {
  getData();
};

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

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

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

<template>
  <div class="block" :class="mapData?.en == 'anhui' ? 'safe-block-height5' : ''">
    <LineChart :gridBottom="mapData?.en == 'anhui' ? 10 : 15" theme="dark" autotip title="单位：个" :xAxisData="lineXAxisData"
      :xInterval="xInterval" :chartData="lineChartData" />
  </div>
</template>

<style lang="scss" scoped>
.block {
  width: 100%;
  flex: 1;
  // height: 250px;
  // padding: 0 0px 24px 0px;
  box-sizing: border-box;
}
</style>
