<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-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>
  <el-table :data-read-url="getData" ref="table" :auto-get-data="false" :pageSize="15" tooltip-effect="dark" style="width: 100%">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column label="统计日期" width="110" show-overflow-tooltip>
      <template slot-scope="scope">
        <span :title="scope.row.addTime">{{scope.row.addTime}}</span>
      </template>
    </el-table-column>
    <el-table-column label="标题" show-overflow-tooltip>
      <template slot-scope="scope">
        <a class="list-card-title" href="javascript:void(0)" :title="scope.row.title">
          <img :src="`assets/images/socialmedia/${scope.row.PCode.toLowerCase()}-logo-18x18.png`" onerror="this.src='assets/images/picture404-'+((row.ID||row.$index) % 4)+'.png';" :title="scope.row.PName" /> {{scope.row.title}}
        </a>
      </template>
    </el-table-column>
    <el-table-column label="账号名称" width="110" show-overflow-tooltip>
      <template slot-scope="scope">
        <span :title="scope.row.MName">{{scope.row.MName}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="readsIncrement" label="阅读增量" width="80"></el-table-column>
    <el-table-column prop="commentsIncrement" label="评论增量" width="80"></el-table-column>
    <el-table-column prop="collectionIncrement" label="收藏增量" width="80"></el-table-column>
    <el-table-column prop="repostsIncrement" label="转发增量" width="80"></el-table-column>
    <el-table-column prop="attitudesIncrement" label="点赞增量" width="80"></el-table-column>
  </el-table>
</div>
</template>
<script>
export default {

  data() {
    return {
      dateRangeValue: [],
      startDate: '',
      endDate: ''
    }
  },
  mounted() {
    this.initDate()
  },
  methods: {
    getData() {
      return [
        `/mediastat/charts`,
        {
          params: {
            code: 'type_cis',
            type: '',
            startDate: this.startDate,
            endDate: this.endDate
          }
        }
      ]
    },
    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.table.getData()
    },
    handleClick(tab, event) {
      this.activeName = tab.name
    },
    dateRangeChange(val) {
      if (val && val.length > 1) {
        this.startDate = val[0]
        this.endDate = val[1]
      } else {
        this.startDate = ''
        this.endDate = ''
      }
    },
    list() {
      this.$refs.table.getData()
    },
    refresh() {
      this.initDate()
    }
  }
}
</script>
