<template>
  <div id="api-count">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item v-for="(item, i) in menuData" :key="i" :to="{ path: item.path }">{{ item.name }}</el-breadcrumb-item>
    </el-breadcrumb>
    <header>
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :clearable="false"
        @change="from == 3 ? getList() : getList1()"
        style="width:400px;">
      </el-date-picker>
      <div class="lasttime" v-if="lastTime">
        <p>最近调用时间</p>
        <p>{{ lastTime }}</p>
      </div>
    </header>
    <div style="padding: 20px">
      <div id="container"></div>
    </div>
  </div>
</template>
<script>
import { getRequest } from '@/api/api';
import G2 from '@antv/g2';
let chart;

export default {
  name: 'api-count',
  data() {
    return {
      menuData: [
        {
          name: '客户资料',
          path: '/business-list?name=平台运维&icon=icon-03&code=platform_operation&tabCode=platform_business_list'
        },
        {
          name: '商户日志',
          path: '/business-log?name=平台运维&icon=icon-03&code=platform_operation&tabCode=platform_business_list&enterpriseId='
        },
        {
          name: '调用次数',
        },
      ],
      enterpriseId: undefined,
      dateRange: [new Date().getTime() - 3600 * 1000 * 24 * 7, new Date()],
      id: undefined,
      chart: undefined,
      from: undefined,
      lastTime: undefined
    }
  },
  mounted() {
    this.enterpriseId = this.$route.query.enterpriseId || '1af58390681811e69d0818c58a146fd2';
    this.id = this.$route.query.id || undefined;
    this.from = this.$route.query.from || 3;
    this.menuData[1].path += this.enterpriseId;
    this.dealData();
    this.from == 3 ? this.getList() : this.getList1();
    this.$emit('showTab', 'platform_business_list');
  },
  methods: {
    getList() {
      let dateRange = this.dateRange && this.dateRange.length ? this.dateRange : ['',''];
      let params = {
        eid: this.enterpriseId,
        interfaceUrl: this.id,
        start: this.formatDate(dateRange[0], 'ymd'),
        end: this.formatDate(dateRange[1], 'ymd'),
      }
      getRequest('/gic-platform-operation/interface/getThirdApiInvokeCountList', params).then(res => {
        this.menuData[0].name = res.data.eName ? `客户资料-${res.data.eName}` : '客户资料';
        this.menuData[2].name = res.data.methodName ? `调用次数-${res.data.methodName}` : '调用次数';
        if(res.data.code == 0) {
          let data = (res.data.result || []).map(item => {
            return {
              ...item,
              monthCount: Number(item.monthCount)
            }
          });
          chart.changeData(data);
        }
      })
    },
    getList1() {
      let dateRange = this.dateRange && this.dateRange.length ? this.dateRange : ['',''];
      let params = {
        eid: this.enterpriseId,
        methodName: this.id,
        begin: this.formatDate(dateRange[0], 'ymd'),
        end: this.formatDate(dateRange[1], 'ymd'),
        type: this.from
      }
      getRequest('/gic-platform-operation/interface/getInterfaveInvokeCount', params).then(res => {
        this.menuData[0].name = res.data.eName ? `客户资料-${res.data.eName}` : '客户资料';
        this.menuData[2].name = res.data.methodName ? `调用次数-${res.data.methodName}` : '调用次数';
        if(res.data.code == 0) {
          this.lastTime = res.data.result.faceInfo.businessDate || undefined;
          let data = (res.data.result.faceInfo.interfaceInfoes || []).map(item => {
            return {
              lastVisitTime: item.businessTime,
              monthCount: Number(item.successCount)
            }
          });
          chart.changeData(data);
        }
      })
    },
    formatDate(val, format) {
      if(!val) return undefined;
      val = new Date(val);
      let y = val.getFullYear();
      let m = (val.getMonth() + 1).toString().padStart(2, '0');
      let d = val.getDate().toString().padStart(2, '0');
      let h = val.getHours().toString().padStart(2, '0');
      let mm = val.getMinutes().toString().padStart(2, '0');
      let s = val.getSeconds().toString().padStart(2, '0');
      if(format == 'ymd') {
        return `${y}-${m}-${d}`;
      } else if(format == 'hms') {
        return `${h}:${mm}:${s}`;
      }
      return `${y}-${m}-${d}\xa0\xa0\xa0${h}:${mm}:${s}`
    },
    dealData() {
      const data = []
      chart = new G2.Chart({
        container: 'container',
        forceFit: true,
        height: 500
      });
      chart.source(data);
      chart.scale('monthCount', {
        min: '0'
      });
      chart.scale('lastVisitTime', {
        range: [ 0, 1 ]
      });
      chart.tooltip({
        crosshairs: {
          type: 'line'
        },
        containerTpl:
          '<div class="g2-tooltip">' +
          '<p class="g2-tooltip-title"></p>' +
          '<div class="g2-tooltip-list"></div>' +
          '</div>',
        itemTpl:
          '<div class="g2-tooltip-list-item"><span style="margin-right:10px">接口调用次数</span><span> {value} 次</span></div>',
          'g2-tooltip-list': {
            'margin-bottom': '10px',
          },
      });
      chart.line().position('lastVisitTime*monthCount');
      chart.point().position('lastVisitTime*monthCount')
        .size(4)
        .shape('circle')
        .style({
          stroke: '#fff',
          lineWidth: 1
        });
      chart.render();
    }
  }
}
</script>
<style lang="scss" scoped>
#api-count {
  background-color: #fff;
  header {
    display: flex;
    justify-content: space-between;
    margin: 20px;
    .lasttime {
      width: 400px;
      text-align: center;
      p {
        color: #606266;
        &:last-of-type {
          margin-top: 10px;
        }
      }
    }
  }
}
.el-breadcrumb {
  padding: 20px;
  // border-bottom: 1px solid #DCDFE6;
}
</style>