<!--
 * ../../..Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/screen/threatComponents/WormSecurityIncidentTrends.vue
 * @Date: 2022-09-09 10:12:49
 * @Description: 
 * @LastEditTime: 2023-09-01 17:26:30
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { Ref, computed, unref, ref, watch, onMounted } from "vue";
import LineBarChart from "../../../components/chart/CustomChart/LineBarChart.vue";
import LineChart from "../../../components/chart/LineChart/LineChart.vue";
import { useGlobalThreatEvent } from "../logic/useGlobalThreatEvent";
import { useGetChartData } from "../../../components/chart/logic";
import { mapMapping } from "../../../assets/map/provinceData";
import lineCircle3 from "../../../assets/image/screen/threat-event/line-3.png";
const mapData = mapMapping();
const { currentCity, currentDate } = useGlobalThreatEvent();

const lineChartData = ref([]) as any;
const lineXAxisData = ref([]) as any;
const handleResData = (res = []) => {
  let xAxisData = [] as any;
  let chartData = [] as any;
  if (res.length === 0) return { xAxisData, chartData };
  res.forEach((item) => {
    chartData.push({
      name: item.eventName,
      data: item.data,
    });
  });
  xAxisData = res.length && res[0].xaxisData;
  return { xAxisData, chartData };
};

const getChartData = async () => {
  const params = {
    type: unref(currentDate),
  } as any;
  if (unref(currentCity) !== mapData?.name) {
    params.region = unref(currentCity);
  }
  const { xAxisData, chartData } = await useGetChartData(
    "/threatIncidentScreen/queryWoodIncident",
    handleResData,
    params
  );

  lineXAxisData.value = xAxisData;
  lineChartData.value = chartData;
};

const init = () => {
  getChartData();
};
const otherOptions = {
  title: {
    show: true,
    top: 14,
    left: 0,
  },
};
const tooltipFormatter = (params) => {
  let _resHtml = "";
  const axisValue = params[0]?.axisValue;
  const _unit = "";
  params.forEach((item) => {
    const { color, seriesName, value } = item;
    _resHtml += `<div class="line-chart-tool-item">
            <div class="line-chart-tool-info">
              <div class="line-chart-tool-item-icon" style="background: ${color}"></div>
              <div class="line-chart-tool-item-name">${seriesName}</div>
            </div>
            <div class="line-chart-tool-item-value">${value}${_unit}</div>
				</div>`;
  });
  return `<div class="line-chart-tool-bg">
			<div class="line-chart-tool-bg-subtitle">${axisValue}</div>
			<div class="line-chart-tool-bg-content">
				${_resHtml}
			</div>
		</div>`;
};
onMounted(() => {
  init();
});

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

watch(currentDate, () => {
  init();
});
</script>

<template>
  <div class="module-block" :class="mapData?.en == 'anhui' ? 'safe-block-height10' : ''">
    <LineChart autoAxis theme="dark" :legendRight="0" title="单位：个" :titleLeft="0" :gridTop="50"
      :splitLineColor="'rgba(0,172,236,0.4)'" :titleColor="'#8CECFF'" :labelColor="'#8CECFF'" :yAxisColor="'#8CECFF'"
      :xAxisColor="'#8CECFF'" :showSymbol="true" :yAxisAxisLineShow="true" :xAxisSplitLineShow="false"
      :yAxisSplitLineShow="false" :xAxisData="lineXAxisData" :chartData="lineChartData" :xFontSize="12"
      :gridBottom="10" />

    <!-- <LineBarChart
      theme="dark"
      :legendRight="-5"
      :gridRight="-5"
      :titleLeft="0"
      autoXAxis
      title="单位：个"
      :xAxisData="lineXAxisData"
      :chartData="lineChartData"
      :gridBottom="mapData.en == 'anhui' ? 10 : 30"
      :splitLineColor="'rgba(0,172,236,0.2)'"
      :xFontSize="12"
      :titleColor="'#8CECFF'"
      :labelColor="'#8CECFF'"
      :yAxisColor="'#8CECFF'"
      :xAxisColor="'#8CECFF'"
    /> -->
  </div>
</template>

<style lang="scss" scoped>
.module-block {
  width: 100%;
  flex: 1;
  padding-left: 20px;
  box-sizing: border-box;
  // margin-left: 5%;
  // margin-right: 3%;
}
</style>
