<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/monitoring/overview/statisticsOperating.vue
 * @Date: 2022-08-27 09:41:47
 * @Description: 
 * @LastEditTime: 2023-08-31 20:27:02
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { dateSwitchOptions } from "../../../settings";
import CommonCard from "../../../components/CommonCard/CommonCard.vue";
import LineChart from "../../../components/chart/LineChart/LineChart.vue";
import CrossBarChart from "../../../components/chart/CustomChart/CrossBarNewChart.vue";

import RoundTab from "../../../components/RoundTab/RoundTab.vue";
import { http } from "../../../utils/https/index";
import { lstat } from "fs";

const title = ref("运营商协议流量统计");
const currentTab = ref(1);
const options = ref(dateSwitchOptions);

const AGREEMENT_API = "/networkSafeDetect/flowPeview/operators/deal";
const FLOW_API = "/networkSafeDetect/flowPeview/operators/into";

const handleInterFaceData = (list) => {
  console.log(list);
  return list.map((item) => {
    const _data = item.flowsum.split(",").map((item) => Number(item));
    return {
      name: item.operators,
      data: _data,
      unit: item.unit || "",
    };
  });
};
const handleLineInterFaceData = (list) => {
  let operators = list;
  return operators.map((item) => {
    return {
      name: item.operator,
      type: "bar",
      stack: "jd",
      data: item.flowSums,
      unit: item.unit,
    };
  });
};
const chartTitle = ref("流量/GB");
const barYAxisData = ref([]);
const chartData = ref([]);
const unitRef = ref("");

const tooltipValueFormatter = (val) => {
  return val + unref(unitRef);
};
const initAgrement = async () => {
  const params = {
    type: unref(currentTab),
  };
  const res = (await http.get(AGREEMENT_API, params)) as any;
  if (res.code === 200 && res.data) {
    console.log(res.data, "res.data===");
    if (res.data.length > 0) {
      chartData.value = handleLineInterFaceData(res.data);
      barYAxisData.value = res.data[0].deals;
    } else {
      chartData.value = [];
      barYAxisData.value = [];
    }
    console.log(barYAxisData.value, "==", chartData.value);
  }
};

const title2 = ref("运营商流入流量变化");
const currentTab2 = ref(1);
const options2 = ref(dateSwitchOptions);
const xAxisData2 = ref([]);
const chartData2 = ref([]);
const unitRef2 = ref("");

const tooltipValueFormatter2 = (val) => {
  return val + unref(unitRef2);
};

const initFlow = async () => {
  const params = {
    type: unref(currentTab2),
  };
  const res = (await http.get(FLOW_API, params)) as any;
  if (res.code === 200 && res.data) {
    chartData2.value = handleInterFaceData(res.data);
    xAxisData2.value = res.data[0]?.createTime.split(",");
    unitRef2.value = res.data[0]?.unit || "";
  }
};

watch(currentTab, () => {
  initAgrement();
});

watch(currentTab2, () => {
  initFlow();
});

onMounted(() => {
  initAgrement();
  initFlow();
});
</script>

<template>
  <div class="statistics-operating-container">
    <CommonCard :key="title" :title="title" class="common-switch-date-card">
      <RoundTab class="custom-round-tab mt-16" v-model="currentTab" :options="options"></RoundTab>
      <CrossBarChart autoXAxis :xname="''" xAxisType="category" :tooltipValueFormatter="tooltipValueFormatter"
        :yname="'流量/GB'" :tootbackgroundColor="'#ffffff'" :legendLeft="null" :legendRight="0" :xAxisData="barYAxisData"
        stack :chartData="chartData" />
    </CommonCard>

    <CommonCard :key="title2" :title="title2" class="common-switch-date-card mt-16">
      <RoundTab class="custom-round-tab mt-16" v-model="currentTab2" :options="options2"></RoundTab>
      <LineChart smooth :key="chartTitle" :tooltipValueFormatter="tooltipValueFormatter2" :title="chartTitle"
        :chartData="chartData2" :xAxisData="xAxisData2"></LineChart>
    </CommonCard>
  </div>
</template>

<style lang="scss" scoped>
.statistics-operating-container {
  width: 100%;

  .common-switch-date-card {
    position: relative;
    height: calc((100vh - 56px - 40px - 12px - 12px - 16px) / 2);
  }
}

.custom-round-tab {
  position: absolute;
  top: 12px;
  right: 24px;
  margin: 0;
}
</style>
