<template>
  <div class="right-list-toobar">
    <el-toolbar>
      <el-button @click="refresh"><i class="fa fa-refresh"></i>刷新</el-button>
      <el-col>当前报表：综合报告</el-col>
    </el-toolbar>
    <div v-loading="dataLoading">
      <echarts :options="chartOptions" height="300px"></echarts>
      <div style="margin:5px">
        <h5>
          <span>从
            <font color="red">{{this.startDate}}</font>开始统计，总计
            <font color="red">{{this.totalDays}}</font>天</span>
        </h5>
      </div>
      <el-table :data="summary" tooltip-effect="dark" style="width: 100%">
        <el-table-column prop="type" label="项"></el-table-column>
        <el-table-column prop="PV" label="PV数量"></el-table-column>
        <el-table-column prop="UV" label="UV数量"></el-table-column>
        <el-table-column prop="IP" label="IP数量"></el-table-column>
        <el-table-column prop="returningRate" label="回头率"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import Echarts from '@src/components/Echarts.vue'
export default {
  components: {
    echarts: Echarts
  },
  data() {
    return {
      dataLoading: false,
      summary: [],
      site: [], // 全站点击量数据
      startDate: '', // 开始日期
      totalDays: '',
      chartOptions: {}
    }
  },
  methods: {
    showChart() {
      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['PV', 'UV', 'IP']
        },
        xAxis: {
          boundaryGap: false,
          data: this.site.map(function (obj) { return obj.date })
        },
        yAxis: {

        },
        series: [
          {
            name: 'UV',
            type: 'line',
            symbol: 'none',
            smooth: true,
            data: this.site.map(function (obj) { return obj.UV })
          },
          {
            name: 'PV',
            type: 'line',
            symbol: 'none',
            smooth: true,
            data: this.site.map(function (obj) { return obj.PV })
          },
          {
            name: 'IP',
            type: 'line',
            symbol: 'none',
            smooth: true,
            data: this.site.map(function (obj) { return obj.IP })
          }
        ]
      }
      this.chartOptions = option
    },
    refresh() {
      this.loadSummary()
      this.loadSite()
    },
    async loadSummary() {
      this.dataLoading = true
      let summaryResp
      try {
        summaryResp = await axios.get('/ui/stats/summary')
        this.dataLoading = false
      } catch (e) {
        this.dataLoading = false
        return
      }
      if (summaryResp.data.status !== 1) {
        return summaryResp.data
      }
      this.summary = summaryResp.data.data
      this.startDate = summaryResp.data.startDate
      this.totalDays = summaryResp.data.totalDays
    },
    async loadSite() {
      this.dataLoading = true
      let siteResp
      try {
        siteResp = await axios.get('/ui/stats/site')
        this.dataLoading = false
      } catch (e) {
        this.dataLoading = false
        return
      }
      if (siteResp.data.status !== 1) {
        return siteResp.data
      }
      this.site = siteResp.data.data
      this.showChart()
    }
  },
  created() {
    this.loadSummary()
    this.loadSite()
  }
}

</script>

<style scoped>

  .padding-top-bottom .search-bar {
    padding-bottom: 5px;
  }

</style>
