<script lang="ts" setup>
import {
  ref,
  watch,
  reactive,
  onMounted,
  computed,
  defineProps,
  toRefs,
} from "vue";
import * as echarts from "echarts/core";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  ToolboxComponent,
} from "echarts/components";
import { BarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import { handleLargeNumber } from "../utils";
import { getDictList } from "../../../utils/utils";
import { getHostStatusChangeTrendList } from "../../../api/screen/index";
import deptObj from "../../../store/modules/dept";
import ModuleEmpty from "./ModuleEmpty.vue";
const dept = deptObj();
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  BarChart,
  CanvasRenderer,
  ToolboxComponent,
]);
//字典
const screenDateRangeArr = ref([]);
const initDict = async () => {
  screenDateRangeArr.value = (await getDictList("screenDateRange")) as [];
};

const timeInterval = ref("lastSevenDays");
const option = ref({
  grid: {
    x: 43,
    x2: 32,
    y: 52,
    y2: 38,
  },
  tooltip: {
    trigger: "axis",
    backgroundColor: "rgba(9,24,50,0.9)",
    borderColor: "#3D94FF",
    textStyle: {
      align: "left",
    },
    formatter: function (val) {
      let html = "";
      let time = "";
      val.map((item) => {
        const handleNum = handleLargeNumber(item.value);
        time = item.axisValue;
        html += `
                <div class="trend-data-item">
                <div style="background:${item.color};width: 6px;height: 6px;"></div>
                <span class="trend-data-font">${item.seriesName}</span>
                <span class="trend-data-num">${handleNum}</span>
                </div>
              `;
      });
      return `<div>
                   <div class="trend-data-box">
                   <div class="trend-data-time">${time}</div>
                  ${html}
                 </div>
             </div>`;
    },
  },

  legend: {
    icon: "square", // 设置图例的形状
    top: "10%", // 距离容器上边界的距离
    right: "3%", // 距离容器右边界的距离
    itemWidth: 6, // 图例宽度
    itemHeight: 6, // 图例
    itemGap: 17,
    textStyle: {
      fontSize: 14,
      fontWeight: "normal",
      fontFamily: "MicrosoftYaHei",
      color: "rgba(255, 255, 255, 0.8)",
    },
  },
  xAxis: {
    type: "category",
    data: [], //x坐标的数据
    axisTick: {
      show: false, // 不显示坐标轴刻度线
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: "#FFFFFF",
      },
    },
    axisLine: {
      lineStyle: {
        color: "#FFFFFF",
        opacity: 0.1,
      },
    },
  },
  yAxis: {
    type: "value",
    name: "单位：个",
    nameTextStyle: {
      fontFamily: "Microsoft YaHei",
      color: "#FFFFFF",
      fontSize: 12,
      opacity: 0.8,
      padding: [0, 0, 0, 20],
    },
    min: 0,
    minInterval: 1,
    axisLabel: {
      formatter: function (value) {
        return Number(value) > 10000
          ? (Number(value) / 10000).toFixed(2) + "万"
          : value;
      },
      textStyle: {
        fontFamily: "Microsoft YaHei",
        fontSize: 12,
        color: "#FFFFFF",
        opacity: 0.8,
      },
    },
    splitLine: {
      // 坐标轴分割线
      show: true,
      lineStyle: { color: "#FFFFFF", opacity: 0.1, type: "solid" }, // 分割线颜色
    },
  },
  series: [
    {
      name: "主机资产",
      type: "line",
      symbolSize: 0,
      tooltip: {
        valueFormatter: function (value) {
          return value;
        },
      },
      lineStyle: { width: 2, color: "#2B8CFF" },
      data: [], //主机资产的数据
    },
    {
      name: "存活数",
      type: "bar",
      tooltip: {
        valueFormatter: function (value) {
          return value;
        },
      },
      itemStyle: {
        color: "#027E8A",
      },
      barWidth: 10,
      data: [],
    },
    {
      name: "离线数",
      type: "bar",
      barWidth: 10,
      tooltip: {
        valueFormatter: function (value) {
          return value;
        },
      },
      itemStyle: {
        color: "#9A8965",
      },
      data: [],
    },
  ],
});
//数据初始化
const init = () => {
  let params = { deptId: dept.id, screenDateRange: timeInterval.value };
  getHostStatusChangeTrendList(params).then((res) => {
    const { code, data = [] } = res || {};
    if (code == 200) {
      option.value.xAxis.data = data && data.map((item) => item.date);
      option.value.series[0].data =
        data && data.map((item) => item.hostAssetCount);
      option.value.series[1].data =
        data && data.map((item) => item.surviveCount);
      option.value.series[2].data =
        data && data.map((item) => item.offLineCount);
    }
  });
};
onMounted(() => {
  initDict();
});
watch(
  dept,
  () => {
    init();
  },
  {
    immediate: true,
  }
);
//时间范围选择
const handleChangeTime = (val) => {
  timeInterval.value = val;
  init();
};
</script>
<template>
  <div class="yaBox">
    <div class="ya-host">
      主机资产变化趋势
      <div class="ya-select">
        <el-select v-model="timeInterval" @change="handleChangeTime">
          <el-option
            v-for="(item, index) in screenDateRangeArr"
            :key="index"
            :label="item.dictName"
            :value="item.dictValue"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <v-chart
      class="chart"
      :option="option"
      v-if="option.xAxis.data && option.xAxis.data.length > 0"
    ></v-chart>
    <ModuleEmpty v-else></ModuleEmpty>
  </div>
</template>
<style lang="scss" scoped>
.yaBox {
  width: 839px;
  height: 332px;
  background: url("../../../assets/image/screen/icon-center.png");
  box-sizing: 100% 100%;
  text-align: center;
  display: flex;
  flex-direction: column;

  .ya-host {
    width: 100%;
    height: 75px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-size: 18px;
    font-family: yixinchangyouti;
    font-weight: 400;
    color: #ffffff;
    position: relative;
    letter-spacing: 2px;
    .ya-select {
      position: absolute;
      right: 28px;
      ::v-deep .el-select {
        --el-select-input-focus-border-color: none;
      }
      ::v-deep .el-input__wrapper {
        width: 70px;
        height: 22px;
        box-shadow: none;
        padding-left: 6px;
        padding-right: 0px;
        box-sizing: border-box;
        background: url("../../../assets/image/screen/icon-day.png") no-repeat;
      }
      ::v-deep .el-input__suffix-inner > :first-child {
        margin-left: 1px;
      }
      ::v-deep .el-input__inner {
        padding-left: 2px;
        box-sizing: border-box;
        font-size: 14px;
        opacity: 0.8;
        font-weight: normal;
        color: #ffffff;
        font-family: MicrosoftYaHei;
      }
      ::v-deep .el-icon {
        color: #137dff;
      }
      ::v-deep .el-input__suffix {
        margin-right: 4px;
      }
    }
  }
  .chart {
    flex: 1;
  }
}
::v-deep .trend-data-box {
  padding: 0px 14px;
  display: flex;
  flex-direction: column;
  align-content: flex-start;
}
::v-deep .trend-data-item {
  display: flex;
  align-items: center;
}
::v-deep .trend-data-font {
  width: 44px;
  font-size: 12px;
  transform: scale(0.9167);
  font-family: Microsoft YaHei;
  color: rgba(255, 255, 255, 0.8);
  margin-left: 9px;
}
::v-deep .trend-data-num {
  font-size: 13px;
  font-family: PangMenZhengDao;
  color: #ffffff;
  margin-left: 23px;
}
::v-deep .trend-data-time {
  font-size: 13px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.8);
}
</style>
<style lang="scss">
.situationScreen {
  // .el-popper .el-popper__arrow::before {
  //   display: none;
  // }
  .el-select__popper {
    background-color: rgba(9, 24, 50, 0.9);
    border: 1px solid rgba(38, 74, 140, 0.4);
    border-radius: 2px;
  }
  .el-select-dropdown__item {
    color: #ffffff;
  }
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background: linear-gradient(165deg, #00badb 0%, #006aeb 100%);
  }

  .el-select-dropdown__item span {
    font-size: 14px;
    font-family: Microsoft YaHei;
    color: #ffffff80;
  }
  .el-select-dropdown__item.selected span {
    color: #1f86ff;
  }
}
</style>
