<!--
 * @Author: tqh
 * @FilePath: /yuan-qingdao-zld-browser/src/views/monitoring/domain/serviceStatistic.vue
 * @Date: 2022-09-2 09:00:00
-->
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ElScrollbar } from "element-plus";
import {
  getProvinceWebNum,
  getAppTopFive,
  getWebTopTen,
  getWebUpFlowFive,
  getWebDownFlowFive,
  getAppDownNum,
} from "../../../api/monitoring/website/securityAnalysis";
import { getNowFormatDate } from "../../../utils/utils";
import CommonCardVue from "../../../components/CommonCard/CommonCard.vue";
import AccessFeature from "./components/accessFeature.vue";
import AccesstTraffic from "./components/accesstTraffic.vue";
import AccessVisit from "./components/accessVisit.vue";
import AccessNum from "./components/accessNum.vue";
import AccessChart from "./components/accessChart.vue";
import IndicatorMap from "./components/IndicatorMap.vue";
const yaTheme = ref(localStorage.getItem("YA_THEME"));

onMounted(() => {
  init();
});
const getCurrentDate = () => {
  const date = new Date();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  var s1 =
    date.getFullYear() +
    "-" +
    (month > 9 ? month : "0" + month) +
    "-" +
    (day > 9 ? day : "0" + day);
  return s1;
};

const searchFormData = reactive({
  time: [getCurrentDate(), getCurrentDate()],
});
const searchFormColumns = reactive([
  {
    key: "time",
    type: "daterange",
    label: "时间",
    format: "YYYY-MM-DD",
    valueFormat: "YYYY-MM-DD",
    col: 24,
    startPlaceholder: "开始时间",
    endPlaceholder: "结束时间",
  },
]);
const securityAllData = reactive({
  websiteSum: "",
});
const visitList = ref([]);
const trafficList = ref([]);
const featureList = ref([]);
const numList = ref([]);
const downList = ref([]);
const handleSearch = (form) => {
  init();
};

const handleReset = () => {
  init();
};
/**
 * @function 初始化时间
 * @author tqh
 */
const resetData = (time) => {
  let timeObj = {
    startTime: "",
    endTime: "",
  };
  if (time.length > 0) {
    timeObj.startTime = time[0];
    timeObj.endTime = time[1];
  } else {
    timeObj.startTime = getNowFormatDate();
    timeObj.endTime = getNowFormatDate();
  }
  return timeObj;
};
/**
 * @function 获取全省网站数量
 * @author tqh
 */
const getProvinceWebNumData = async (type) => {
  let objData = resetData(searchFormData.time);
  try {
    const params = {
      ...objData,
    };
    const res = await getProvinceWebNum(params);
    if (res.code == 200 && res.data) {
      securityAllData.websiteSum = res.data.websiteSum;
    }
  } catch (error) { }
};
/**
 * @function 获取网站访问量
 * @author tqh
 */
const getWebTopTenData = async () => {
  let objData = resetData(searchFormData.time);
  try {
    const params = {
      ...objData,
    };
    const res = await getWebTopTen(params);
    if (res.code == 200 && res.data) {
      trafficList.value = res.data || [];
    }
  } catch (error) { }
};
/**
 * @function 获取应用下载
 * @author tqh
 */
const getAppTopFiveData = async () => {
  let objData = resetData(searchFormData.time);
  try {
    const params = {
      ...objData,
    };
    const res = await getAppTopFive(params);
    if (res.code == 200 && res.data) {
      visitList.value = res.data;
    }
  } catch (error) { }
};
/**
 * @function 获取网站上行流量排名top5
 * @author tqh
 */
const getWebUpFlowFiveData = async () => {
  let objData = resetData(searchFormData.time);
  try {
    const params = {
      ...objData,
    };
    const res = await getWebUpFlowFive(params);
    if (res.code == 200 && res.data) {
      featureList.value = res.data || [];
    }
  } catch (error) { }
};
/**
 * @function 获取网站下行流量排名top5
 * @author tqh
 */
const getWebDownFlowFiveData = async () => {
  let objData = resetData(searchFormData.time);
  try {
    const params = {
      ...objData,
    };
    const res = await getWebDownFlowFive(params);
    if (res.code == 200 && res.data) {
      downList.value = res.data || [];
    }
  } catch (error) { }
};
/**
 * @function 获取应用下载注册数量
 * @author tqh
 */
const getAppDownNumData = async () => {
  let objData = resetData(searchFormData.time);
  try {
    const params = {
      ...objData,
    };
    const res = await getAppDownNum(params);
    if (res.code == 200 && res.data) {
      numList.value = res.data || [];
    }
  } catch (error) { }
};

const init = () => {
  // getProvinceWebNumData()
  getWebTopTenData();
  getAppTopFiveData();
  getWebUpFlowFiveData();
  getWebDownFlowFiveData();
  getAppDownNumData();
};
</script>
<template>
  <div class="service-statistic-container" style="min-width: 1200px">
    <YaSearch :formData="searchFormData" :formColumns="searchFormColumns" @search="handleSearch" @reset="handleReset"
      style="height: 6%" :showButtonIcon="true"></YaSearch>
    <ElRow :gutter="16" justify="space-between" style="height: 500px">
      <ElCol :md="16" :lg="16" :xl="16" style="height: 100%">
        <div class="ya-border-color1">
          <IndicatorMap :LIST="visitList" class="center-map"></IndicatorMap>
        </div>
      </ElCol>
      <ElCol :md="8" :lg="8" :xl="8" style="height: 100%">
        <div class="ya-border-color1">
          <div class="custom-row-item">
            <AccesstTraffic :LIST="trafficList" />
          </div>
        </div>
      </ElCol>
    </ElRow>
    <ElRow :gutter="16" justify="space-between" class="padding-top16"
      style="height: calc(100vh - 666px); min-height: 300px">
      <ElCol :md="8" :lg="8" :xl="8" style="height: 100%">
        <div class="to-bottom">
          <AccessNum :LIST="numList" />
        </div>
      </ElCol>
      <ElCol :md="8" :lg="8" :xl="8" style="height: 100%">
        <div class="to-bottom">
          <AccessFeature :LIST="featureList" />
        </div>
      </ElCol>
      <ElCol :md="8" :lg="8" :xl="8" style="height: 100%">
        <div class="to-bottom">
          <AccessChart :LIST="downList" />
        </div>
      </ElCol>
    </ElRow>
    <!-- <div class="top-module">
      <div class="top-content">
        <div class="top-content-top" :class="{'is-Dark': !yaTheme}">
          <div>
            <img class="top-content-tio-img" src="../../../assets/image/security-top-bg.png" />
          </div>
          <div>
            <div class="top-content-top-title ya-regular-text">全省网站数量</div>
            <div class="top-content-top-num ya-primary-text">{{securityAllData.websiteSum?securityAllData.websiteSum:0}}</div>
          </div>
        </div>
        <AccessVisit :LIST='visitList'/>
      </div>
      <div class="top-content">
        <AccesstTraffic :LIST="trafficList"/>
      </div>
      <div class="top-content acess-margin-right">
        <AccessFeature :LIST="featureList"/>
        <div class="top-content-acc-top">
          <AccessChart :LIST="downList"/>
        </div>
      </div>
    </div>
    <div>
      <AccessNum :LIST="numList"/>
    </div> -->
  </div>
</template>
<style lang="scss" scoped>
::v-deep .ya-table-search-left {
  flex: 1;
}

.custom-row-item {
  height: 100%;
}

.center-map {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.service-statistic-container {
  overflow-x: hidden;
  height: 100%;
}

.ya-border-color1 {
  // border: 1px solid #fff;
  height: 100%;
  // border-radius: 4px;
}

.to-bottom {
  height: 100%;
}

.padding-top16 {
  padding-top: 16px;
}

.padding-right0 {
  width: 50%;
}

::v-deep .chart-flex {
  top: 15px;
}
</style>
