<template>
  <div class="basediv">
    <!--<span>开发者调用统计</span>-->
    <el-form inline size="small">
      <el-form-item label="统计项">
        <el-radio v-model="reportItem" label="1" disabled @change="initOption">调用量</el-radio>
      </el-form-item>
      <el-form-item label="监控项">
        <div v-if="reportItem === '1'">
          <el-checkbox v-model="monitorItem1" disabled label="调用成功" size="medium"/>
          <el-checkbox v-model="monitorItem2" disabled label="调用失败" size="medium"/>
        </div>
        <div v-if="reportItem === '2'">
          <el-checkbox v-model="monitorItem1" label="QPS峰值" size="medium"/>
        </div>
      </el-form-item>
      <el-form-item label="统计时间">
        <el-date-picker
          v-model="logTime"
          :picker-options="pickerOptions"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="btn_search">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-col :span="24">
        <br>
        <div v-show="byReport === '1'" id="report" class="chart">
          <span/>
        </div>
        <el-divider content-position="left">调用日志</el-divider>
        <div>
          <el-table
            ref="multipleTable"
            :data="apiReportData"
            :highlight-current-row="true"
            class="eltable"
            border>
            <el-table-column
              prop="appName"
              label="应用名称"/>
            <el-table-column
              prop="total"
              label="总调用量"/>
            <el-table-column
              prop="failCount"
              label="调用失败"/>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as echarts from 'echarts'
import axios from 'axios'
import moment from 'moment'

export default {
  name: 'Create',
  data() {
    return {
      reportItem: '1',
      monitorItem1: true,
      monitorItem2: true,
      logTime: [new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 30),
        new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate())],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
      },
      myChart: {},
      successCount: 0,
      failCount: 0,
      qpsCount: 0,
      allData: [], // 所有前端分页数据
      tableData: [], // 表格数据 仅展示当前页的数据
      pageNo: 1, // 当前页数
      totalDataNumber: 0, // 总记录数
      pageSize: 10,
      timer: '',
      byReport: '1', // 1=图标 2=报表
      reportDialogVisible: true,
      apiReportData: []
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById('report'))
    this.initOption()
  },
  created() {
  },
  methods: {
    initOption() {
      if (this.reportItem === '1') {
        this.myChart.setOption({
          title: {
            text: '开发者调用统计报表',
            subtext: ''
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['调用量', '失败量']
          },
          toolbox: {
            show: false,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              data: []
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [{
            name: '调用量',
            type: 'bar',
            data: []
          },
          {
            name: '失败量',
            type: 'bar',
            data: []
          }]
        })
      } else if (this.reportItem === '2') {
        this.myChart.setOption({
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['QPS峰值']
          },
          xAxis: {
            data: []
          },
          yAxis: {},
          series: [{
            name: 'QPS峰值',
            type: 'bar',
            data: []
          }]
        })
      }
    },
    btn_search() {
      const vm = this
      var beginDate = ''
      var endDate = ''
      if (this.logTime[0] !== undefined && this.logTime[0] !== '') {
        beginDate = moment(this.logTime[0]).format('YYYY-MM-DD')
      }
      if (this.logTime[1] !== undefined && this.logTime[1] !== '') {
        endDate = moment(this.logTime[1]).format('YYYY-MM-DD')
      }
      if (this.byReport === '2') {
        axios.get(process.env.BASE_API + '/apilog/getdevreport', {
          params: {
            beginDate: beginDate,
            endDate: endDate
          }
        }).then(function(response) {
          var obj = response.data
          if (obj.code !== 10000) {
            vm.$message.error(obj.message)
            vm.apiReportData = []
          } else {
            vm.apiReportData = obj.data
          }
        })
      } else {
        axios.get(process.env.BASE_API + '/apilog/getdevreport', {
          params: {
            beginDate: beginDate,
            endDate: endDate
          }
        }).then(function(response) {
          var obj = response.data
          if (obj.code !== 10000) {
            vm.$message.error(obj.message)
            vm.apis = []
          } else {
            if (vm.reportItem === '1') {
              vm.apiReportData = obj.data
              vm.myChart.setOption({
                tooltip: {
                  trigger: 'axis'
                },
                legend: {
                  data: ['调用量', '失败量']
                },
                xAxis: {
                  data: obj.categories
                },
                yAxis: {},
                series: [{
                  name: '调用量',
                  type: 'bar',
                  data: obj.total
                },
                {
                  name: '失败量',
                  type: 'bar',
                  data: obj.fail
                }]
              })
            } else if (vm.reportItem === '2') {
              vm.qpsCount = obj.data.qps
              vm.myChart.setOption({
                xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  data: obj.data.categories
                },
                yAxis: {
                  type: 'value'
                },
                series: [{
                  data: obj.data.qpsList,
                  type: 'line',
                  areaStyle: {}
                },
                {
                  name: '',
                  type: 'line',
                  data: null
                }]
              })
            }
          }
        }).catch(function(error) {
          alert(error)
        })
      }
    }
  }
}
</script>

<style scoped>
.basediv {
  margin-left: 30px;
  margin-top: 30px;
}

.chart {
  width: 100%;
  height: 500px;
  margin-top: 20px;
}

.reporttable {
  margin-left: 20px;
  margin-top: 30px;
  margin-right: 20px;
  margin-bottom: 50px;
}
</style>
