<template>
<div class="layout-no-cols right-list-toolbar">
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="内容统计" name="contentCount">
    </el-tab-pane>
    <el-tab-pane label="推送统计" name="pushCount">
    <div v-if="hasRender">
      <el-toolbar>
          <el-col :span="4"><el-button @click="refresh"><i class="fa fa-refresh"></i>刷新</el-button></el-col>
          <el-col :span="20" align="right"><el-select clearable placeholder="选择帐号" style="200px;" v-model="account" @change="list"><el-option v-for="item in accounts" :key="item.ID" :label="item.MName" :value="item.ID"></el-option></el-select>
            <el-date-picker id="comprehensive-content-count-date-picker2" 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" width="100%" height="300px"></echarts>
        <div style="margin:10px"></div>
        <el-table ref="pushCountTable" :data-read-url="getPushCount" :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="统计日期"></el-table-column>
          <el-table-column label="推送总量" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.successCount+scope.row.failCount}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="successCount" label="推送成功量" align="center"></el-table-column>
          <el-table-column prop="failCount" label="推送失败量" align="center"></el-table-column>
        </el-table>
      </div>
    </div>
    </el-tab-pane>
    <el-tab-pane label="综合增量统计" name="comprehensive">
    </el-tab-pane>
    <el-tab-pane label="综合统计" name="contentData">
    </el-tab-pane>
  </el-tabs>
</div>
</template>
<script>
import Echarts from '@src/components/Echarts.vue'
export default {
  components: {
    echarts: Echarts
  },
  data() {
    return {
      account: '',
      accounts: [],
      dateRangeValue: [],
      startDate: '',
      endDate: '',
      pushCountDatas: [],
      activeName: 'pushCount',
      chartOptions: {},
      hasRender: true
    }
  },
  mounted() {
    this.initDate()
  },
  methods: {
    getPushCount() {
      return [
        `/mediastat/charts`,
        {
          params: {
            code: 'type_cs',
            type: 'pushCount',
            account: this.account,
            startDate: this.startDate,
            endDate: this.endDate
          }
        }
      ]
    },
    async loadPushCountData() {
      let resp = await axios.get('/ui/mediaaccounts/owneraccounts')
      if (resp.data.status === 1) {
        this.accounts = resp.data.data
      }
      let params = {
        code: 'type_cs',
        type: 'pushCount',
        account: this.account,
        startDate: this.startDate,
        endDate: this.endDate
      }
      let res = await axios.get(`/ui/mediastat/data4chats`, {params: params})
      this.pushCountDatas = res.data.data
      await this.showPushCountChart()
    },
    async showPushCountChart() {
      var option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: this.pushCountDatas.nameset
        },
        xAxis: {
          axisLabel: {textStyle: '#999'},
          axisLine: {lineStyle: {width: 1}, show: true},
          boundaryGap: false,
          data: this.pushCountDatas.categories,
          splitLine: {show: false},
          type: 'category'
        },
        yAxis: {
          axisLabel: {textStyle: '#999'},
          axisLine: {lineStyle: {width: 1}, show: true}
        },
        series: this.pushCountDatas.series
      }
      if (!this.pushCountDatas.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.pushCountTable.getData()
      this.loadPushCountData()
    },
    dateRangeChange(val) {
      if (val && val.length > 1) {
        this.startDate = val[0]
        this.endDate = val[1]
      } else {
        this.startDate = ''
        this.endDate = ''
      }
    },
    list() {
      this.$refs.pushCountTable.getData()
      this.loadPushCountData()
    },
    refresh() {
      this.startDate = ''
      this.endDate = ''
      this.initDate()
    },
    handleClick(tab) {
      this.activeName = tab.name
      this.$router.replace(`/socialmedia/mediaStat/${tab.name}`)
    }
  }
}
</script>
