<template>
<div class="right-list-toobar">
  <el-toolbar>
    <el-col><el-button @click="refresh"><i class="fa fa-refresh"></i>刷新</el-button></el-col>
    <el-col align="right">时间范围：<el-select placeholder="时间范围" style="200px;" v-model="type" @change="changeClickHandler"><el-option v-for="type in types" :key="type.value" :label="type.label" :value="type.value"></el-option></el-select></el-col>
  </el-toolbar>
  <div>
    <echarts :options="chartOptions" height="300px"></echarts>
    <div style="margin:10px" ></div>
    <el-list-view :data-read-url="getData" ref="table" :auto-get-data="false" :pageSize="15">
      <template slot-scope="row">
        <div class="panel-card">
          <el-row :gutter="20" class="card-body">
            <el-col :span="24">
              <el-row>
                <a class="list-card-title" href="javascript:void(0)">{{row.title}}</a>
                <span class="gray">ID：{{row.contentID}}</span>
              </el-row>
              <el-row>
                <el-col :span="5">
                  <span>阅读量：</span>
                  <em>{{row.readsCount || 0}}</em>
                </el-col>
                <el-col :span="5">
                  <span>评论量：</span>
                  <em>{{row.commentsCount || 0}}</em>
                </el-col>
                <el-col :span="5">
                  <span>收藏量：</span>
                  <em>{{row.collectionCount || 0}}</em>
                </el-col>
                <el-col :span="5">
                  <span>转发量：</span>
                  <em>{{row.repostsCount || 0}}</em>
                </el-col>
                <el-col :span="4">
                  <span>点赞量：</span>
                  <em>{{row.attitudesCount || 0}}</em>
                </el-col>
              </el-row>
              <el-row class="middle-row">
                <el-col :span="5">
                  <span>阅读增量：</span>
                  <em>{{row.readsIncrement || 0}}</em>
                </el-col>
                <el-col :span="5">
                  <span>评论增量：</span>
                  <em>{{row.commentsIncrement || 0}}</em>
                </el-col>
                <el-col :span="5">
                  <span>收藏增量：</span>
                  <em>{{row.collectionIncrement || 0}}</em>
                </el-col>
                <el-col :span="5">
                  <span>转发增量：</span>
                  <em>{{row.repostsIncrement || 0}}</em>
                </el-col>
                <el-col :span="4">
                  <span>点赞增量：</span>
                  <em>{{row.attitudesIncrement || 0}}</em>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <span>统计日期：</span>
                  <em>{{row.addTime | fixDateTime }}</em>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </template>
    </el-list-view>
  </div>
</div>
</template>
<script>
import util from '@src/common/util.js'
import Echarts from '@src/components/Echarts.vue'
export default {
  components: {
    echarts: Echarts
  },
  data() {
    return {
      type: 'today',
      types: [
        {value: 'today', label: '今天'},
        {value: 'yesterday', label: '昨天'},
        {value: 'thisWeek', label: '本周'},
        {value: 'lastWeek', label: '上周'},
        {value: 'thisMonth', label: '本月'},
        {value: 'lastMonth', label: '上月'}
      ],
      chartOptions: {},
      dataList: [],
      fixDateTime: function(val) {
        return util.formatDate(val, 'yyyy-MM-dd')
      }
    }
  },
  mounted() {
    this.loadListData()
  },
  methods: {
    changeClickHandler(val) {
      this.type = val
      this.loadListData()
    },
    getData() {
      return [
        `/mediastat/charts`,
        {
          params: {
            code: 'type_cds',
            type: this.type
          }
        }
      ]
    },
    async loadListData() {
      let params = {
        code: 'type_cds',
        type: this.type
      }
      let res = await axios.get(`/ui/mediastat/data4chats`, {params: params})
      this.dataList = res.data.data
      await this.$refs.table.getData()
      await this.showChart()
    },
    async showChart() {
      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: this.dataList.nameset
        },
        xAxis: {
          axisLabel: {textStyle: '#999'},
          axisLine: {lineStyle: {width: 1}, show: false},
          boundaryGap: false,
          data: this.dataList.categories,
          splitLine: {show: false},
          type: 'category'
        },
        yAxis: {
          axisLabel: {textStyle: '#999'},
          axisLine: {lineStyle: {width: 1}, show: true}
        },
        series: this.dataList.series
      }
      if (!this.dataList.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
    },
    refresh() {
      this.loadListData()
    }
  }
}
</script>
