<!--
 * @Author: 曹文丽 caowenli@yuan-info.com
 * @Date: 2023-03-08 09:29:31
 * @LastEditors: 曹文丽 caowenli@yuan-info.com
 * @LastEditTime: 2023-04-18 20:15:08
 * @FilePath: \yuan-huoling-browser\src\views\screen\components\portChange.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup>
import { ref, onMounted, watch, reactive } 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 {
  getPortChangeStatistics,
  getPortChangeTrendList,
} from "../../../api/screen/index";
import { getDictList } from "../../../utils/utils";
import ModuleEmpty from "./ModuleEmpty.vue";
import deptObj from "../../../store/modules/dept";
import { useRouter } from "vue-router";
const router = useRouter();
const dept = deptObj();
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  BarChart,
  CanvasRenderer,
  ToolboxComponent,
]);
//选中的时间范围
const timeInterval = ref("lastSevenDays");
//时间范围
//字典
const screenDateRangeArr = ref([]);
const initDict = async () => {
  screenDateRangeArr.value = (await getDictList("screenDateRange")) as [];
};
//表格数据
const tableData = ref([]);
//表头字段
const column = ref([
  { prop: "ip", label: "IP", slotName: "ip" },
  { prop: "addPort", label: "新增端口数", slotName: "addPort" },
  { prop: "subCount", label: "减少端口数", slotName: "reducePort" },
  { prop: "", label: "操作", slotName: "done", width: "120px" },
]);

//弹框
let dialogProps = reactive({
  showDialog: false,
  title: "",
  size: "",
  noHeader: true,
});
const option = ref({
  grid: {
    x: 30,
    x2: 30,
    y: 47,
    y2: 52,
  },
  tooltip: {
    trigger: "axis",
    backgroundColor: "rgba(9,24,50,0.9)",
    borderColor: "#3D94FF",
    textStyle: {
      align: "left",
      color: "rgba(255, 255, 255, 0.8)",
    },
    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: "circle", // 设置图例的形状
    top: "2%", // 距离容器上边界的距离
    left: "0%", // 距离容器右边界的距离
    itemWidth: 10, // 图例宽度
    itemHeight: 10, // 图例高度
    //方块变园
    itemGap: 24, // 图例间距
    data: [], // 图例数据和图例颜色的对应关系
    // 图例文字的样式
    textStyle: {
      fontSize: 12,
      fontWeight: 400,
      fontFamily: "SourceHanSansCN-Regular, SourceHanSansCN",
      color: "#BBC7E5",
    },
  },
  xAxis: [
    {
      data: [],
      axisLabel: {
        // 坐标轴文本标签
        fontSize: 13,
        fontFamily: "Microsoft YaHei",
        fontWeight: 400,
        color: "#FFFFFF",
        opacity: 0.8,
      },
      axisTick: { show: false }, // 坐标轴刻度线
      axisLine: {
        lineStyle: {
          color: "#FFFFFF",
          opacity: 0.1,
        },
      }, // 坐标轴轴线
      // boundaryGap: false, // 设置为true，表示两边留白，为false表示两边不留白
    },
  ],
  yAxis: [
    {
      name: "单位：个",
      nameTextStyle: {
        padding: [0, 0, 0, 1370],
        fontFamily: "Microsoft YaHei",
        color: "#FFFFFF",
        fontSize: 12,
        opacity: 0.8,
      },
      show: true,
      type: "value",
      min: 0,
      minInterval: 1,
      axisLabel: {
        formatter: function (value) {
          return Number(value) > 10000
            ? (Number(value) / 10000).toFixed(2) + "万"
            : value;
        },
        textStyle: {
          fontSize: 13,
          fontFamily: "Microsoft YaHei",
          fontWeight: 400,
          color: "#FFFFFF",
          opacity: 0.8,
        },
      },
      splitLine: {
        // 坐标轴分割线
        show: true,
        lineStyle: { color: "#FFFFFF", opacity: 0.1, type: "solid" }, // 分割线颜色
      },
    },
  ],
  series: [
    {
      name: "新增端口数",
      type: "line",
      symbolSize: 0,
      data: [],
      itemStyle: { width: 2, color: "#137DFF" },
    },
    {
      name: "减少端口数",
      type: "line",
      symbolSize: 0,
      data: [],
      itemStyle: { width: 2, color: "#FFC65C" }, // 线条颜色
    },
  ],
});
//获取表格数据，页面初始化
const init = () => {
  let params = { deptId: dept.id, screenDateRange: timeInterval.value };
  getPortChangeStatistics(params).then((res) => {
    const { code, data = [] } = res || {};
    if (code == 200) {
      tableData.value = data || [];
    }
  });
};
onMounted(() => {
  initDict();
});
watch(
  dept,
  () => {
    init();
  },
  {
    immediate: true,
  }
);
//跳转到端口详情页面
const gotoPortChange = (val) => {
  router.push({
    path: "/screen/portChange/index",
    query: {
      code: val.code,
    },
  });
};

//打开弹窗的事件
const handleOpenDialog = (val) => {
  dialogProps.showDialog = true;
  let params = { deptId: dept.id };
  params.code = val.code;
  params.screenDateRange = timeInterval.value;
  getPortChangeTrendList(params).then((res) => {
    const { code, data = [] } = res;
    if (code == 200) {
      option.value.xAxis[0].data = data && data.map((item) => item.date);
      option.value.series[0].data = data && data.map((item) => item.addCount);
      option.value.series[1].data = data && data.map((item) => item.subCount);
    }
  });
};
//时间范围选择
const handleChangeTime = (val) => {
  timeInterval.value = val;
  init();
};
</script>
<template>
  <div class="yaBox">
    <div class="ya-host">
      端口变化情况统计TOP10
      <div class="ya-select">
        <el-select
          v-model="timeInterval"
          @change="handleChangeTime"
          theme="dark"
        >
          <el-option
            v-for="(item, index) in screenDateRangeArr"
            :key="index"
            :label="item.dictName"
            :value="item.dictValue"
          >
          </el-option>
        </el-select>
      </div>
    </div>

    <YaTable
      class="ya-table-port"
      :data="tableData"
      :column="column"
      v-if="tableData && tableData.length > 0"
    >
      <template v-slot:ip="{ item }">
        <div class="ya-white">{{ item.ip }}</div>
      </template>
      <template v-slot:addPort="{ item }">
        <div
          class="ya-port"
          @click="gotoPortChange(item)"
          v-if="item.addCount || item.addCount == 0"
        >
          {{ item.addCount }}
        </div>
        <div v-else class="ya-white">-</div>
      </template>
      <template v-slot:reducePort="{ item }">
        <div
          class="ya-port"
          @click="gotoPortChange(item)"
          v-if="item.subCount || item.subCount == 0"
        >
          {{ item.subCount }}
        </div>
        <div v-else class="ya-white">-</div>
      </template>
      <template v-slot:done="{ item }">
        <div class="ya-done">
          <img
            src="../../../assets/image/screen/icon-trend.png"
            alt=""
            @click="handleOpenDialog(item)"
          />
          <span @click="handleOpenDialog(item)">查看趋势</span>
        </div>
      </template>
    </YaTable>
    <ModuleEmpty v-else></ModuleEmpty>
    <ya-dialog :dialogProps="dialogProps">
      <template #content>
        <div class="ya-title">
          <span>端口变化趋势</span>
          <img
            src="../../../assets/image/screen/icon-close.png"
            alt=""
            @click="dialogProps.showDialog = false"
          />
        </div>
        <v-chart
          v-if="dialogProps.showDialog"
          class="ya-chart"
          :option="option"
        />
      </template>
    </ya-dialog>
  </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;
    font-size: 18px;
    font-family: yixinchangyouti;
    font-weight: 400;
    color: #ffffff;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    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;
      }
    }
  }

  .ya-table-port {
    height: 250px;
    overflow: auto;
    padding: 15px 29px 0px 29px;
    box-sizing: border-box;
    ::v-deep .el-table__empty-block {
      min-height: 90px;
    }
    .ya-white {
      color: #d2daf6;
    }
    .ya-port {
      color: #35b0ff;
      cursor: pointer;
      text-decoration: underline;
    }
    .ya-done {
      display: flex;
      align-items: center;
      cursor: pointer;
      color: #4196ff;
      img {
        width: 18px;
        height: 19px;
        margin-right: 8px;
      }
    }
    ::v-deep .el-table {
      --el-table-border-color: #91b4e815;
    }
    ::v-deep
      .el-table--enable-row-hover
      .el-table__body
      tr:hover
      > td.el-table__cell {
      background: #91b4e807;
    }
    ::v-deep .el-table th.el-table__cell {
      background-color: transparent;
    }

    ::v-deep .el-table td.el-table__cell,
    .el-table th.el-table__cell.is-leaf {
      border-bottom: 1px solid #91b4e815;
    }
  }
  ::v-deep .el-dialog {
    width: 908px;
    height: 455px;
    background: url("../../../assets/image/screen/icon-dialog.png");
    .el-dialog__body {
      padding: 0px;
      max-height: none;
      height: 100%;
    }
    .ya-noheader-content {
      padding: 0px;
      height: 92%;
    }
    .ya-title {
      width: 100%;
      margin-top: 32px;
      font-size: 21px;
      font-family: yixinchangyouti;
      font-weight: 400;
      color: #ffffff;
      position: relative;
      img {
        width: 30px;
        height: 27px;
        position: absolute;
        top: 0px;
        right: 36px;
      }
    }
  }
  .ya-chart {
    margin: 0px auto;
    width: 798px;
    height: 380px;
    margin-bottom: 0px;
  }
}

::v-deep .ya-table-port .ya-table .ya-table-header-cell .cell {
  background: #91b4e807;
  color: #ffffff;
  opacity: 0.8;
}
::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 {
  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 {
  ::-webkit-scrollbar-thumb {
    background-color: rgba(225, 225, 225, 0.1);
  }
  .el-select__popper.is-light .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.selected {
    color: #1f86ff;
  }
}
</style>
