<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/screen/AttackComponents/realTimeAttackAccessSituation.vue
 * @Date: 2022-09-05 11:28:56
 * @Description: 
 * @LastEditTime: 2023-09-01 15:16:03
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { ref, reactive, watch, nextTick, onMounted, unref } from 'vue'
import { useGetChartData } from "../../../components/chart/logic";
import { useGlobalAttackMap } from "../logic/useGlobalAttackMap";
import LineChart from "../../../components/chart/LineChart/LineChart.vue";
import { mapMapping } from "../../../assets/map/provinceData";
import lineCircle1 from "../../../assets/image/screen/threat-event/line-2.png";
const mapData = reactive(mapMapping());
const { currentCity } = useGlobalAttackMap();
const lineXAxisData = ref([]) as any;
const lineChartData = ref([]) as any;
const handleChartRes = (res = []) => {
  let xAxisData = [];
  let chartData = [] as any;
  res.forEach((item) => {
    chartData.push(item);
  });
  xAxisData = res.length && res[0].xaxisData;
  return {
    xAxisData,
    chartData,
  };
};

const getChartData = async () => {
  const params = {} as any;
  if (unref(currentCity) !== mapData?.name) {
    params.attackDestRegion = unref(currentCity);
  }

  const { xAxisData, chartData } = await useGetChartData(
    "bigScreen/netAttack/wholeDayAttackStat",
    handleChartRes,
    params
  );
  lineXAxisData.value = xAxisData;
  lineChartData.value = chartData;
};
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>`;
};
const init = () => {
  getChartData();
};

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

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

<template>
  <div class="block-con">
    <LineChart title="次数/次" v-if="lineXAxisData.length" :xAxisData="lineXAxisData" :xInterval="2"
      :areaGradientColor="['rgba(0, 172, 236, 1)', 'rgba(0, 172, 236, .1)']" :colors="['rgba(0, 172, 236, 1)']" autoXAxis
      smooth theme="dark" :chartData="lineChartData" :gridBottom="mapData?.en == 'anhui' ? 10 : 15"
      :titleColor="'#8CECFF'" :labelColor="'#8CECFF'" :yAxisColor="'#8CECFF'" :xAxisColor="'#8CECFF'"
      :showSymbol="true" />
    <ya-empty v-else></ya-empty>
  </div>
</template>

<style lang="scss" scoped>
.block-con {
  width: 100%;
  height: 245px;
}

.block-con-height7 {
  height: 235px !important;
}
</style>
