<template>
  <div class="">
    <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 class="right-detail-toolbar">
      <el-toolbar>
        <el-col :span="10" class="search-box-r tool-search-box-r">
          <el-input v-model="inputValue" @keyup.enter.native="check" placeholder="请输入标题" class="search-bar-algin-toolbar"></el-input>
          <span class="search-icon"><i class="fa fa-search" @click="check" title="查看"></i></span>
        </el-col>
     </el-toolbar>
    <div class="padding-top-bottom">
      <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="65"></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 v-for="item in columnData" :key="item.code" :prop="item.code" :label="item.name" width="65"></el-table-column>
        <el-table-column prop="sumCount" label="总计" width="65"></el-table-column>
      </el-table>
    </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataLoading: false, // 主页面loading
      contentList: [], // 评论数据
      contentTotal: 0, // 总数
      columnData: [],
      catalogID: 0, // 当前栏目ID
      pageSize: 10,
      currentPage: 1,
      inputValue: '' // 搜索框数据
    }
  },
  props: {
    ID: {
      type: [Number, String],
      required: true
    }
  },
  computed: {
    pageIndex() { //  计算属性获取当前页索引以0开始
      return this.currentPage - 1
    }
  },
  mounted() {
    this.commentList()
  },
  methods: {
    linkto(row) {
      window.open(`preview.html?id=${row.relaID}&type=content`)
    },
    async commentList() {
      this.dataLoading = true
      let res
      try {
        res = await axios.get('/ui/commentreportfaces', {
          params: {
            catalogID: this.ID,
            pageIndex: this.pageIndex,
            pageSize: this.pageSize,
            inputValue: encodeURIComponent(this.inputValue)
          }
        })
        this.dataLoading = false
      } catch (e) {
        this.dataLoading = false
        return
      }
      this.contentList = res.data.data
      this.contentTotal = res.data.total
      this.columnData = res.data.columnData
    },
    check() {
      this.commentList()
    },
    // 每页显示行数设置lxc
    sizeChangeHandler(val) {
      if (val) {
        this.pageSize = val
      }
      this.commentList()
    },
    // 当前页设置lxc
    indexChangeHandler(val) {
      if (val) {
        this.currentPage = val
      }
      this.commentList()
    }
  },
  async created() {
  }
}

</script>

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

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

</style>
