<template>
<div>
  <el-toolbar>
    <el-col><el-button @click="refresh"><i class="fa fa-refresh"></i>刷新</el-button></el-col>
    <el-col align="right"><el-date-picker id="comprehensive-content-count-date-picker" class="auto-width" v-model="dateRangeValue" type="daterange"  format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请选择日期范围" @change="dateRangeChange"></el-date-picker>
    <el-button @click="list" class="button" type="primary"><slot name="button">查看</slot></el-button></el-col>
  </el-toolbar>
  <div>
    <echarts :options="chartOptions" height="300px"></echarts>
    <div style="margin:10px"></div>
    <el-table :data-read-url="getContentCount" ref="contentCountTable" :auto-get-data="false"  tooltip-effect="dark" style="width: 100%">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="addTime" label="统计日期" width="110"></el-table-column>
      <el-table-column prop="readsCount" label="阅读量" align="center"></el-table-column>
      <el-table-column prop="commentsCount" label="评论量" align="center"></el-table-column>
      <el-table-column prop="collectionCount" label="收藏量" align="center"></el-table-column>
      <el-table-column prop="repostsCount" label="转发量" align="center"></el-table-column>
      <el-table-column prop="attitudesCount" label="点赞量" align="center"></el-table-column>
      <el-table-column prop="readsIncrement" label="阅读增量" align="center"></el-table-column>
      <el-table-column prop="commentsIncrement" label="评论增量" align="center"></el-table-column>
      <el-table-column prop="collectionIncrement" label="收藏增量" align="center"></el-table-column>
      <el-table-column prop="repostsIncrement" label="转发增量" align="center"></el-table-column>
      <el-table-column prop="attitudesIncrement" label="点赞增量" align="center"></el-table-column>
    </el-table>
  </div>
</div>
</template>
<script>
import Echarts from '@src/components/Echarts.vue'
export default {
  components: {
    echarts: Echarts
  },
  props: {
    activeName: {
      type: String,
      required: true,
      default: 'contentCount'
    }
  },
  data() {
    return {
      dateRangeValue: [],
      startDate: '',
      endDate: '',
      chartOptions: {},
      contentCountDatas: []// 列表数据
    }
  },
  mounted() {
    this.initDate()
  },
  methods: {
    getContentCount() {
      return [
        `/mediastat/charts`,
        {
          params: {
            code: 'type_cs',
            type: 'contentCount',
            startDate: this.startDate,
            endDate: this.endDate
          }
        }
      ]
    },
    async loadContentCountData() {
      let params = {
        code: 'type_cs',
        type: 'contentCount',
        startDate: this.startDate,
        endDate: this.endDate
      }
      let res = await axios.get(`/ui/mediastat/data4chats`, {params: params})
      this.contentCountDatas = res.data.data
      await this.showContentCountChart()
    },
    async showContentCountChart() {
      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: this.contentCountDatas.nameset
        },
        xAxis: {
          axisLabel: {textStyle: '#999'},
          axisLine: {lineStyle: {width: 1}, show: false},
          boundaryGap: false,
          data: this.contentCountDatas.categories,
          splitLine: {show: false},
          type: 'category'
        },
        yAxis: {
          axisLabel: {textStyle: '#999'},
          axisLine: {lineStyle: {width: 1}, show: true}
        },
        series: this.contentCountDatas.series
      }
      if (!this.contentCountDatas.series[0].data.length) {
        option.title = {
          text: 'No data to display.',
          x: 'center',
          y: 'center',
          textStyle: {
            fontSize: 11,
            fontWeight: 'normal',
            color: '#999'
          }
        }
        option.yAxis.data = [0, 0.2, 0.4, 0.6, 0.8, 1]
        option.yAxis.boundaryGap = false
        option.xAxis.axisLine.show = true
      }
      this.chartOptions = option
    },
    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)
      }
      this.$refs.contentCountTable.getData()
      this.loadContentCountData()
    },
    dateRangeChange(val) {
      if (val && val.length > 1) {
        this.startDate = val[0]
        this.endDate = val[1]
      } else {
        this.startDate = ''
        this.endDate = ''
      }
    },
    list() {
      this.$refs.contentCountTable.getData()
      this.loadContentCountData()
    },
    refresh() {
      this.startDate = ''
      this.endDate = ''
      this.initDate()
    }
  }
}
</script>
