<script setup lang="ts">
import { onMounted, ref, reactive, unref, watch } from "vue";
import CommonCardVue from "../../../components/CommonCard/CommonCard.vue";
import RoundTab from "../../../components/RoundTab/RoundTab.vue";
import RoseChart from "../../../components/chart/RoseChart/RoseChart.vue";
import FunnelChart from "../../../components/chart/FunnelChart/FunnelChart.vue";
import BarChart from "../../../components/chart/BarChart/BarChart.vue";
import CrossBarChart from "../../../components/chart/CustomChart/CrossBarNewChart.vue";
import { getThemeColor } from "../../../components/chart/options/theme";
import { ElScrollbar } from "element-plus";
import { bigNumberTransform } from "../../../utils/utils";
import { dateSwitchOptions } from "../../../settings";
import IndicatorMap from "./components/IndicatorMap.vue";
import {
  queryTypeDistribution,
  queryEventtendency,
} from "../../../api/monitoring/InternetStiff/totalSituations";
import { mapMapping } from "../../../assets/map/provinceData";
const mapData = mapMapping();
const currentTab = ref(2);
const options = ref(dateSwitchOptions);
const chartData = ref([]);
const xAxisData = ref([]);
const typeList = ref([]);
const tooltipFormatter = (params) => {
  let _resHtml = "";
  const { color, seriesName, value, name, percentage } = params;
  _resHtml += `<div class="rose-linechart-tooltip-content-item">
            <div class="rose-linechart-tooltip-content-item-value">${params.data.realValue}
              <span style="margin-left:5px">(${params.data.percentage})</span>
            </div>
				</div>`;
  return `<div class="rose-linechart-tooltip">
      <div style="display: flex;">
        <div class="rose-linechart-tooltip-content-item-icon" style="background: ${color}"></div>
        <div >
          <div class="rose-linechart-tooltip-subtitle">${name}</div>
          <div class="rose-linechart-tooltip-content">
            ${_resHtml}
          </div>
        </div>
      </div>
		
		</div>`;
};
/**
 * @description 监听日期切换
 */
watch(currentTab, () => {
  getList();
});
const getList = async () => {
  xAxisData.value = [];
  chartData.value = [];
  let res = await queryEventtendency({ type: unref(currentTab) });
  if (res.code == 200 && res.data) {
    if (res.data.length > 0) {
      xAxisData.value = res.data[0].eventTime.split(",");
      chartData.value = res.data.map((item) => {
        return {
          name: item.eventName,
          data: item.eventNum.split(","),
          type: item.eventName == "总计" ? "line" : "bar",
        };
      });
    }
  }
};
const getTypelist = async () => {
  let res = await queryTypeDistribution();
  if (res.code == 200 && res.data?.length) {
    typeList.value = res.data.map((item) => {
      return {
        name: item.eventName,
        value: item.eventSum,
        percentage: item.percentage,
      };
    });
  }
};
const tooltipFormatter1 = (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">${bigNumberTransform(
      value
    )}</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>`;
};

/**
 * @description 页面初始化请求
 */
const init = () => {
  getList();
  getTypelist();
};
onMounted(() => {
  init();
});
</script>
<template>
  <div style="height: 100%">
    <div style="height: 540px">
      <IndicatorMap class="center-map"></IndicatorMap>
    </div>
    <div style="height: calc(100vh - 670px); min-height: 300px">
      <ElRow :gutter="16" justify="space-between" style="height: 100%">
        <ElCol :md="24" :lg="16" :xl="16" style="height: 100%">
          <div class="content-item">
            <CommonCardVue title="僵木蠕事件趋势分析">
              <template v-slot:headerSlot>
                <RoundTab v-model="currentTab" :options="options"></RoundTab>
              </template>
              <CrossBarChart :tooltipValueFormatter="(val) => val" :gridBottom="0" style="height: calc(100vh - 680px)"
                :interval="currentTab == 3 ? 2 : currentTab == 1 ? 1 : 0" autoXAxis :xname="''" title="单位：次"
                xAxisType="category" :tootbackgroundColor="'#ffffff'" :legendLeft="null" :gridLeft="0" :legendRight="20"
                :xAxisData="xAxisData" stack :chartData="chartData" />
            </CommonCardVue>
          </div>
        </ElCol>
        <ElCol :md="24" :lg="8" :xl="8" style="height: 100%">
          <div class="content-item">
            <CommonCardVue title="近一周僵木蠕类型分布" unit="个">
              <RoseChart v-if="typeList.length" :defaultType="'two'" :borderRadius="0" :pieCenter="['50%', '50%']"
                legendTop="auto" title="近一周僵木蠕类型分布" legendRight="0" :legendShow="true" :labelLineShow="false"
                :labelShow="false" :chartData="typeList" />
              <ya-empty v-else></ya-empty>
            </CommonCardVue>
          </div>
        </ElCol>
      </ElRow>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.center-map {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.content-item {
  margin-top: 16px;
  position: relative;
  height: 100%;
}

::v-deep .custom-rose-legend-item {
  padding-right: 0;
}

::v-deep .legend-value {
  display: flex;
  justify-content: space-between;
}

::v-deep .custom-rose-legend {
  width: 50%;
}
</style>
