<!--
 * @Description: 应用程序访问情况统计子面板组件
 * @Author: laoliu
 * @Date: 2022-3-8 9:43:52
-->
<template>
  <!-- 用户访问指标 -->
  <div>
    <div class="index-area" style="text-align:right">
      <div class="block" style="width:100%; margin-bottom:30px;">
        <span>当前日期：</span>
        <el-date-picker v-model="selectedDate" align="right" type="date" :clearable="false"
          @change="handleSelect" :default-value="selectedDate" size="small"
          placeholder="选择日期" :picker-options="pickerOptions">
        </el-date-picker>
        <a :href="curServer.druidUrl" target="_blank" style="margin-left:60px;">
          查看Druid连接池情况
        </a>
      </div>
      <div class="access-index">
        <p class="title1">PV</p>
        <p class="text">{{accessData.pv}}</p>
      </div>
      <div class="access-index">
        <p class="title1">UV</p>
        <p class="text">{{accessData.uv}}</p>
      </div>
      <div class="access-index">
        <p class="title1">IP</p>
        <p class="text">{{accessData.ip}}</p>
      </div>
      <div class="access-index">
        <p class="title2">最高并发</p>
        <p class="text">{{accessData.maxConcurrent}}/min</p>
      </div>
      <div class="access-index">
        <p class="title2">最小并发</p>
        <p class="text">{{accessData.minConcurrent}}/min</p>
      </div>
      <div class="access-index">
        <p class="title2">最长响应</p>
        <p class="text">{{accessData.maxRespTime}}ms</p>
      </div>
      <div class="access-index">
        <p class="title2">最短响应</p>
        <p class="text">{{accessData.minRespTime}}ms</p>
      </div>
    </div>
    <div id="concurrents-area"></div>
  </div>
</template>

<script>
import Constant from '../../global/CommonConst.js'
import Util from '../../global/CommonUtil.js'
import DateUtil from '../../global/DateUtil.js'

let AppSubpanel =  {
  name: 'AppSubpanel',
  props: ["curServer"],

  data() {
    return {
      // 访问统计相关变量
      accessData: {}, 
      selectedDate: new Date(),
      lastDate: new Date(),
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: DateUtil.datePickerOptions.shortcuts
      },
      refreshAccessDataTimer: null,
      echartConcurrent: null,

      //标记浏览器窗口大小是否发生变化
      isWindowResizing: 0
    }
  },

  methods:{
    showAccessStatistics() {
      this.showConcurrentChart();
      this.refreshAccessData();
    },

    handleSelect(_selected) {
      this.refreshAccessData();
    },
    
    showConcurrentChart() {
      this.echartConcurrent = this.echarts.init(document.getElementById('concurrents-area'));
      this.echartConcurrent.setOption(this.buildConcurrentOption(['时间轴'], [0]));
    },

    buildConcurrentOption(xAxisData, seriesData) {
      return {
        title: { text: '24小时并发量统计', textStyle: { color: '#c3c3c3' }, padding: [20, 0, 0, 30] },
        xAxis: { axisLabel: {interval: 11}, type: 'category', data: xAxisData },
        yAxis: { type: 'value' },
        grid:{ top: 50, left: 30, right: 0, bottom: 20 },
        series: [{
          data: seriesData,
          type: 'bar',
          showBackground: true,
          backgroundStyle: { color: 'rgba(180, 180, 180, 0.2)' },
          itemStyle: {
            normal: {
              color: '#409EFF'
              // color: function(params) {
              //   const colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
              //   return colorList[params.dataIndex % colorList.length]
              // }
            }
          }
        }]
      };
    },

    refreshAccessData() {
      if (!this.curServer) return;
      
      let url = Util.fillUrlArgments(this.commonUrl.URL_GET_ACCESS_STATISTICS, 
        this.curServer.appId, this.dateUtil.dateFormat(this.selectedDate));
      this.appAxios("GET", url).then(result => {
        if (result != null) {
          this.accessData = result.data;
          this.lastDate = this.selectedDate;

          let map = this.accessData.concurrentMap5;
          this.echartConcurrent.setOption(this.buildConcurrentOption(
            Object.keys(map), Object.values(map)), true);
        } else {
          this.selectedDate = this.lastDate;
        }
      })
    },
  },

  watch: {
    isWindowResizing: {
      handler(_newName, _oldName) {
        this.echartConcurrent.resize();
      },
      immediate: false
    },

    curServer: {
      handler(_newName, _oldName) {
        this.refreshAccessData();
      },
      immediate: false
    }    
  },

  mounted() {
    window.onresize = () => {
      this.isWindowResizing++;
    };
  	this.showAccessStatistics();

    //设置访问统计数据刷新定时器
    this.refreshAccessDataTimer = setInterval(() => {
      let selDate = this.dateUtil.dateFormat(this.selectedDate);
      let curDate = this.dateUtil.dateFormat(new Date());
      if (selDate != curDate) return;

      this.refreshAccessData();
    }, Constant.INTERVAL_SYSTEM_ACCESS_DATA);
  },

  destroyed() {
    clearInterval(this.refreshAccessDataTimer);
  }
}
export default AppSubpanel
</script>

<style scoped>
.index-area {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content : space-between;
  text-align: left;
  border: solid 0px;
}
.access-index {
  width: 13%;
  height: 120px;
  border: solid #c3c3c3 2px;
}
p.title1 {
  margin: 15px 0 15px 20px;
  text-align: left;
  font-weight: bold;
  font-size: 30px;
}
p.title2 {
  margin: 15px 0 24px 20px;
  text-align: left;
  font-weight: bold;
  font-size: 20px;
}
p.text {
  margin-top: 0;
  text-align: center;
  font-size: 23px;
}
#concurrents-area {
  width: 100%;
  height: 150px;
  border: solid 0px;
}
</style>