<!--
 * @Description: 综合查询分析
 * @Author: xuch
 * @FilePath: /yuan-qingdao-zld-browser/src/views/monitoring/overview/integratedQuery.vue
 * @Date: 2022-08-24 16:24:38
 * @LastEditTime: 2023-08-31 20:25:45
 * @LastEditors: 曹文丽
-->
<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { http } from "../../../utils/https";
import { downLoadFile } from "../../../utils/utils";

const PREFIX_API = "/networkSafeDetect/flowPeview/comprehensiveData";
const QUERY_API = `${PREFIX_API}/query`; // 查询接口
const EXPORT_API = `${PREFIX_API}/export`; // 导出接口
const LIST_API = `/sys/dict/list`; // 获取 运营商/应用类型 列表接口

// 分页参数
const page = ref(1);
const total = ref(0);
const size = ref(20);
const operatorList = ref([]); // 运营商列表
const useTypeList = ref([]); // 应用类型列表

onMounted(() => {
  init();
});

/**
 * @description: 初始化方法
 * @param {*}
 * @return {*}
 * @author: xuch
 */
const init = () => {
  getTableData("init");
  getLeftButtons();
  getOptionList();
};

const getOptionList = async () => {
  operatorList.value = await getOptions(LIST_API, "operator");
  useTypeList.value = await getOptions(LIST_API, "useType");
};

/**
 * @description: 获取导出按钮
 * @param {*}
 * @return {*}
 * @author: xuch
 */
const buttons = ref([]) as any;
const getLeftButtons = () => {
  buttons.value = [
    {
      plain: true,
      text: "批量导出",
    },
  ];
};

// 查询参数
const queryColumns = reactive([
  {
    key: "time",
    type: "daterange",
    label: "时间",
    col: 6,
    valueFormat: "YYYY-MM-DD",
    startPlaceholder: "开始时间",
    endPlaceholder: "结束时间",
  },
  {
    key: "ip",
    type: "input",
    label: "IP",
    placeholder: "请输入IP",
    col: 6,
  },
  {
    key: "cityPosition",
    type: "input",
    label: "地理位置",
    placeholder: "请输入地理位置",
    col: 6,
  },
  {
    key: "operator",
    type: "select",
    label: "运营商",
    options: operatorList,
    col: 6,
  },
  {
    key: "useType",
    type: "select",
    label: "应用类型",
    options: useTypeList,
    col: 6,
  },
]) as any;
const queryFormData = reactive({
  ip: "",
  cityPosition: "",
  time: [],
  operator: "",
  useType: "",
});

// 表格数据
const tableData = ref([]) as any;
const tableColumn: any[] = [
  {
    type: "selection",
    width: "70px",
  },
  {
    prop: "startTime",
    label: "开始时间",
    width: "200px",
    fixed: "left",
  },
  {
    prop: "endTime",
    label: "结束时间",
    width: "200px",
  },
  {
    prop: "ip",
    label: "IP",
  },
  {
    prop: "upFlow",
    label: "上行流量",
    width: "150px",
  },
  {
    prop: "downFlow",
    label: "下行流量",
    width: "150px",
  },
  {
    prop: "flowSum",
    label: "总流量",
    width: "150px",
  },
  {
    prop: "cityPosition",
    label: "地理位置",
  },
  {
    prop: "operator",
    label: "运营商",
    width: "200px",
  },
  {
    prop: "useType",
    label: "应用类型",
    width: "200px",
    fixed: "right",
  },
];

/**
 * @description: 表格多选操作
 * @param {*}
 * @return {*}
 * @author: xuch
 */
const selectData = ref([]) as any;
const handleSelect = (data) => {
  selectData.value = data;
};

/**
 * @description: 查询操作
 * @param {*}
 * @return {*}
 * @author: xuch
 */
const handleSearch = () => {
  getTableData("init");
};

/**
 * @description: 重置操作
 * @param {*}
 * @return {*}
 * @author: xuch
 */
const handleReset = () => {
  getTableData("reset");
};

/**
 * @description: 获取表格数据
 * @param {*} type 查询类型
 * @return {*}
 * @author: xuch
 */
const getTableData = async (type) => {
  if (type === "init" || type === "reset") {
    page.value = 1;
  }

  const { ip, cityPosition, operator, useType, time } = queryFormData;
  const params = {
    pageNum: page.value,
    pageSize: size.value,
    IP: ip,
    cityPosition,
    operator,
    useType,
  } as any;

  if (time && time.length > 0) {
    params.startTime = `${time[0]} 00:00:00`;
    params.endTime = `${time[1]} 23:59:59`;
  }

  try {
    const res = await http.get(QUERY_API, params);
    if (res.code !== 200) return;
    const { rows = [], total: count = 0 } = res.data || {};
    tableData.value = rows || [];
    total.value = count;
  } catch (error) {
    console.log(error);
  }
};

/**
 * @description: 页面容量切换
 * @param {*}
 * @return {*}
 * @author: xuch
 */
const sizeChange = function (val: number) {
  size.value = val;
  page.value = 1;
  getTableData("page");
};

/**
 * @description: 分页切换
 * @param {*}
 * @return {*}
 * @author: xuch
 */
const currentChange = function (val: number) {
  page.value = val;
  getTableData("page");
};

/**
 * @description: 批量 / 全部 导出
 * @param {*} type
 * @return {*}
 * @author: xuch
 */
const handleExport = async (type) => {
  if (selectData.value.length === 0) {
    ElMessage.warning("请选择要批量导出的数据");
    return;
  }
  const list = selectData.value.map((item) => item.id);
  handleExportRequest(list);
};

/**
 * @description: 导出请求
 * @param {*} type
 * @return {*}
 * @author: xuch
 */
const handleExportRequest = async (data) => {
  try {
    const params = { ids: data };
    const name = "综合查询导出"; // 暂时命名为综合查询导出
    const res = await http.post(EXPORT_API, params, {
      responseType: "blob",
    });
    downLoadFile(res, name);
    ElMessage.success("导出成功");
    getTableData("");
  } catch (error) {
    console.log(error);
  }
};

/**
 * @description:获取运营商/应用下拉列表
 * @param {*}
 * @return {*}
 * @author: xuch
 */
const getOptions = async (API, type) => {
  let list = [];
  const params = {
    dictType: { operator: "运营商类型", useType: "应用类型" }[type],
  };
  try {
    const res = (await http.get(API, params)) as any;
    if (!res) return;
    return (list = res.map((item) => {
      return {
        label: item.dictValue,
        value: item.dictValue,
      };
    }));
  } catch (error) {
    console.error(error);
  }
};
</script>

<template>
  <div>
    <YaPageContent :formData="queryFormData" :formColumns="queryColumns" :tableData="tableData"
      :tableColumns="tableColumn" searchLabelWidth="70px" @search="handleSearch" @reset="handleReset" :currentPage="page"
      :pageSize="size" :total="total" @sizeChange="sizeChange" @selectionChange="handleSelect"
      @currentChange="currentChange" :leftButtons="buttons" @tableBtnClick="handleExport">
    </YaPageContent>
  </div>
</template>

<style scoped lang="scss"></style>
