<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-col align="right">
        <el-date-picker id="returningRate-date-picker" v-model="dateRangeValue" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请选择日期范围" @change="dateRangeChange"></el-date-picker>&nbsp;
        <el-button @click="check" class="button" type="primary"><slot name="button">查看</slot></el-button>
      </el-col>
    </el-toolbar>
    <div v-loading="dataLoading">
      <echarts :options="chartOptions" height="300px"></echarts>
      <div style="margin:10px"></div>
      <el-table :data="returningRate"  tooltip-effect="dark" style="width: 100%">
        <el-table-column prop="date" label="日期"></el-table-column>
        <el-table-column prop="newVisitor" label="新访客"></el-table-column>
        <el-table-column prop="returnVisitor" label="回头客"></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,
      returningRate: [], // 回头率数据
      echart: [], // 图表配置数据
      dateRangeValue: [],
      startDate: '', // 搜索框日期范围
      endDate: '',
      chartOptions: {}
    }
  },
  methods: {
    async showChart() {
      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['新访客', '回头客', '回头率']
        },
        xAxis: {
          data: this.echart.map(function (obj) { return obj.date })
        },
        yAxis: [{
          type: 'value',
          name: '数量',
          axisLabel: {
            formatter: '{value}'
          }
        }, {
          type: 'value',
          name: '百分比',
          min: 0,
          max: 100,
          axisLabel: {
            formatter: '{value}%'
          }
        }],
        series: [
          {
            name: '新访客',
            type: 'bar',
            yAxisIndex: 0,
            data: this.echart.map(function (obj) { return obj.newVisitor })
          },
          {
            name: '回头客',
            type: 'bar',
            yAxisIndex: 0,
            data: this.echart.map(function (obj) { return obj.returnVisitor })
          },
          {
            name: '回头率',
            type: 'line',
            yAxisIndex: 1,
            symbol: 'none',
            smooth: true,
            data: this.echart.map(function (obj) { return obj.returningRate })
          }
        ]
      }
      this.chartOptions = option
    },
    dateRangeChange(val) {
      if (val && val instanceof Array) {
        this.startDate = val[0]
        this.endDate = val[1]
      } else {
        this.dateRangeValue = []
        this.startDate = ''
        this.endDate = ''
      }
    },
    refresh() {
      this.loadReturningRate()
    },
    check() {
      this.loadReturningRate()
    },
    async loadReturningRate() {
      this.dataLoading = true
      let startdate = this.startDate
      let enddate = this.endDate
      let resp
      try {
        resp = await axios.get('/ui/stats/returningrate', {
          params: {
            startdate,
            enddate
          }
        })
        this.dataLoading = false
      } catch (e) {
        this.dataLoading = false
        return
      }
      if (resp.data.status !== 1) {
        return resp.data
      }
      this.returningRate = resp.data.data
      this.echart = resp.data.echart
      this.showChart()
    },
    async initDate() {
      let res = await axios.get('/ui/stats/summary/initdate')
      if (res.data.status === 1) {
        this.startDate = res.data.data.startDate
        this.endDate = res.data.data.endDate
        this.dateRangeValue = []
        this.dateRangeValue.push(this.startDate)
        this.dateRangeValue.push(this.endDate)
      }
    }
  },
  async created() {
    await this.initDate()
    this.loadReturningRate()
  }
}

</script>

<style scoped>
  .padding-top-bottom .search-bar {
    padding-bottom: 5px;
  }

</style>
