<template>
  <div class="layout-no-cols">
    <el-toolbar>
      <el-button @click="$router.back()" type="primary" size="medium" round class="shadow-primary"><i class="fa fa-chevron-left"></i> 返回上页</el-button>
    </el-toolbar>
    <div>
      <el-toolbar>
        <el-col :span="15" :offset="9">
          <div class="layout-data-search layout-data-search-3">
            <el-input v-model="inputValue" @keyup.enter.native="check" placeholder="请输入标题"></el-input>
            <el-date-picker id="commentScoreReport-date-picker" v-model="dateRangeValue" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" @change="dateRangeChange"></el-date-picker>
            <el-button @click="check" class="button" type="primary"><slot name="button">查看</slot></el-button>
          </div>
        </el-col>
      </el-toolbar>
      <el-table :data="contentList" :page-size="10" resizable tooltip-effect="dark" style="width: 100%" v-loading="dataLoading" :default-sort="{prop: 'hitCount', order: 'descending'}">
        <el-table-column type="index" label="序号" width="62"></el-table-column>
        <el-table-column prop="catalogName" label="所在栏目" width="100"></el-table-column>
        <el-table-column prop="contentTypeIDName" label="类型" width="65"></el-table-column>
        <el-table-column label="标题">
          <template slot-scope="scope">
            <a href="javascript:void(0);" @click="linkto(scope.row)">{{scope.row.title}}</a>
          </template>
        </el-table-column>
        <el-table-column prop="score" label="评分等级" width="100"></el-table-column>
        <el-table-column prop="addUser" label="用户名" width="100"></el-table-column>
        <el-table-column prop="addTime" label="评论时间" width="170"></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import util from '@src/common/util.js'
export default {
  data() {
    return {
      dateRangeValue: [],
      dataLoading: false, // 主页面loading
      contentList: [], // 数据列表
      contentTotal: 0, // 总数
      catalogID: 0,
      pageSize: 10,
      currentPage: 1,
      inputValue: '', // 搜索框数据
      startTime: '',
      endTime: ''
    }
  },
  props: {
    ID: {
      type: [Number, String],
      required: true
    }
  },
  computed: {
    pageIndex() { //  计算属性获取当前页索引以0开始
      return this.currentPage - 1
    }
  },
  mounted() {
    this.commentScoreList()
  },
  methods: {
    linkto(row) {
      window.open(`preview.html?id=${row.relaID}&type=content`)
    },
    dateRangeChange(val) {
      if (val && val.length > 1) {
        this.startTime = val[0]
        this.endTime = val[1]
      } else {
        this.startTime = ''
        this.endTime = ''
      }
    },
    async commentScoreList() {
      this.dataLoading = true
      let dateTimeRangeValue = ''

      if (this.startTime && this.endTime && this.startTime !== '' && this.endTime !== '') {
        if (new Date(this.startTime).getTime() > new Date(this.endTime).getTime()) {
          util.showErrorMessageBox('开始时间不能超过结束时间')
        } else {
          dateTimeRangeValue = new Date(this.startTime + ' 00:00:00').getTime() + ',' + new Date(this.endTime + ' 23:59:59').getTime()
        }
      }
      let res
      try {
        res = await axios.get('/ui/commentreportscores', {
          params: {
            catalogID: this.ID,
            pageIndex: this.pageIndex,
            pageSize: this.pageSize,
            inputValue: encodeURIComponent(this.inputValue),
            dateTimeRangeValue: dateTimeRangeValue
          }
        })
        this.dataLoading = false
      } catch (e) {
        this.dataLoading = false
        return
      }
      this.contentList = res.data.data
      this.contentTotal = res.data.total
    },
    check() {
      this.commentScoreList()
    },
    // 每页显示行数设置lxc
    sizeChangeHandler(val) {
      if (val) {
        this.pageSize = val
      }
      this.commentScoreList()
    },
    // 当前页设置lxc
    indexChangeHandler(val) {
      if (val && this.currentPage !== val) {
        this.currentPage = val
        this.commentScoreList()
      }
    }
  },
  async created() {
  }
}
</script>

<style scoped>
.page-wrap {
  margin-top: 20px;
  margin-right: 20px;
}

.page-wrap .page {
  float: right;
}

.el-input {
    width: 60%;
}

</style>
