<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/monitoring/overview/regionalStatistics.vue
 * @Date: 2022-08-27 09:39:10
 * @Description: 
 * @LastEditTime: 2023-08-31 20:26:44
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { ElScrollbar } from "element-plus";
import { dateSwitchOptions } from "../../../settings";
import CommonTabs from "../../../components/CommonTabs/CommonTabs.vue";
import LineChart from "../../../components/chart/LineChart/LineChart.vue";
import { http } from "../../../utils/https";

const tabs = ref([
  {
    title: "区域网站流量趋势",
    value: 1,
  },
  {
    title: "区域网站数趋势",
    value: 2,
  },
  {
    title: "区域网民流量趋势",
    value: 3,
  },
  {
    title: "区域网民数趋势",
    value: 4,
  },
]);

const _APIS = {
  1: "/networkSafeDetect/flowPeview/territory/websiteFlow",
  2: "/networkSafeDetect/flowPeview/territory/websiteSum",
  3: "/networkSafeDetect/flowPeview/territory/onlineuserSum",
  4: "/networkSafeDetect/flowPeview/territory/onlineuserFlow",
};

const currentTabName = ref(1);

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

const dateRef = ref(1);
const dateOptions = ref(dateSwitchOptions);

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

const xAxisData = ref([]);
const chartData = ref([]);

const handleInterFaceData = (list) => {
  return list.map((item) => {
    const _data = item.flowSum.split(",");
    return {
      name: item.city,
      data: _data,
    };
  });
};

const getChartData = async () => {
  const _api = _APIS[unref(currentTabName)];
  const params = {
    type: unref(dateRef),
  };
  const res = (await http.get(_api, params)) as any;
  if (res.code === 200 && res.data) {
    chartData.value = handleInterFaceData(res.data);
    xAxisData.value = res.data[0]?.createTime.split(",");
    console.log("chartData", chartData.value);
    console.log("xAxisData", xAxisData.value);
  }
};

const tooltipFormatter = (params) => {
  let _resHtml = "";
  const axisValue = params[0]?.axisValue;
  const _unit = [1, 3].includes(unref(currentTabName)) ? "GB" : "";
  params.forEach((item) => {
    const { color, seriesName, value } = item;
    _resHtml += `<div class="light-linechart-tooltip-content-item">
					<div class="light-linechart-tooltip-content-item-icon" style="background: ${color}"></div>
					<div class="light-linechart-tooltip-content-item-name">${seriesName}</div>
					<div class="light-linechart-tooltip-content-item-value">${value}${_unit}</div>
				</div>`;
  });

  return `<div class="light-linechart-tooltip">
			<div class="light-linechart-tooltip-subtitle">${axisValue}</div>
			<div class="light-linechart-tooltip-content">
				${_resHtml}
			</div>
		</div>`;
};

const tableData = ref([]) as any;
const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(20);

let tableColumns = ref([]) as any;

let columns = [
  {
    width: "80px",
    label: "区域",
    prop: "city",
  },
  {
    prop: "liveness",
    label: "活跃度",
  },
  {
    prop: "webResFlow",
    label: "网站请求流量（Bytes）",
    minWidth: "200px",
  },
  {
    prop: "webReqFlow",
    label: "网站响应流量（Bytes）",
    minWidth: "200px",
  },
  {
    prop: "webResRate",
    label: "网站请求速率(bps)",
    minWidth: "200px",
  },
  {
    prop: "webReqRate",
    label: "网站响应速率(bps)",
    minWidth: "200px",
  },
];

const otherTableColumns = [
  {
    width: "80px",
    label: "区域",
    prop: "city",
  },
  {
    prop: "visitCount",
    label: "活跃度",
  },
  {
    prop: "linkCount",
    label: "连接数",
  },
  {
    prop: "upFlow",
    label: "主机上行流量(Bytes)",
    minWidth: "200px",
  },
  {
    prop: "downFlow",
    label: "主机下行流量(Bytes)",
    minWidth: "200px",
  },
  {
    prop: "upSpeed",
    label: "主机上行速率(bps)",
    minWidth: "200px",
  },
  {
    prop: "downSpeed",
    label: "主机下行速率(bps)",
    minWidth: "200px",
  },
];

const handleSizeChange = () => {
  currentPage.value = 1;
  getTableData();
};
const handleCurrentChange = (page) => {
  currentPage.value = page;
  getTableData();
};

/**
 * @author changjun
 * @description 获取表格数据，需要关联时间选择、分页选择
 * @date 2022/08/31
 */
const getTableData = async () => {
  const isWebSite = [1, 2].includes(unref(currentTabName));
  tableColumns.value = isWebSite ? columns : otherTableColumns;
  const params = {
    type: unref(dateRef),
    pageNum: unref(currentPage),
    pageSize: unref(pageSize),
    status: [1, 2].includes(unref(currentTabName)) ? 1 : 2,
  };
  const res = (await http.get(
    "/networkSafeDetect/flowPeview/territory/plat",
    params
  )) as any;
  if (res.code === 200 && res.data) {
    tableData.value = res.data.rows || [];
    total.value = res.data.total;
  }
};

const init = () => {
  getChartData();
  getTableData();
};

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

<template>
  <div class="global-statistics-container">
    <CommonTabs :tabs="tabs" v-model:tabValue="currentTabName" v-model:roundValue="dateRef" :roundOptions="dateOptions" />
    <div class="global-statistics-container-content">
      <ElScrollbar>
        <div class="base-card ya-bg-colors ya-border-color">
          <LineChart :tooltipFormatter="tooltipFormatter" :titleLeft="60" :gridLeft="100" :xAxisData="xAxisData"
            title="流量/GB" :chartData="chartData" />
        </div>

        <div class="base-table-card ya-bg-colors mt-16">
          <YaTable :data="tableData" :key="dateRef" :column="tableColumns" class="global-statistics-container-table">
          </YaTable>

          <div class="page-container">
            <YaPagination :currentPage="currentPage" @size-change="handleSizeChange" @current-change="handleCurrentChange"
              v-model:page-size="pageSize" small :total="total">
            </YaPagination>
          </div>
        </div>
      </ElScrollbar>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.global-statistics-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  min-width: 790px;
}

.global-statistics-container-content {
  width: 100%;
  height: calc(100vh - 52px - 118px);
}

.base-card {
  width: 100%;
  // padding: 0 50px;
  height: 222px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #ffffff;
  // margin-top: 12px;
}

.base-table-card {
  width: 100%;
  background: #ffffff;
  border-radius: 4px;
  padding: 24px 24px 0 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  .page-container {
    margin-top: 24px;
    margin-bottom: 16px;
    margin-left: auto;
  }
}

:deep(.global-statistics-container-table) {
  .el-table__body-wrapper {
    height: 100%;
  }

  .el-table__inner-wrapper::before {
    height: 0;
  }
}
</style>
