<template>
  <div class="right-list-toobar">
    <el-toolbar>
      <div class="toolbar-body-flex">
         <div class="toolbat-body-flex-item">
            <el-button @click="refresh">
              <i class="fa fa-refresh"></i>刷新
            </el-button>
            <span v-if="false">当前报表：内容点击量排行</span>
         </div>
         <div class="toolbat-body-flex-item search-bar">
            <el-input style="width:auto" v-model="contentTitle"  placeholder="请输入内容标题"></el-input>
            <el-date-picker class="date-top" v-model="dateRangeValue" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" start-placeholder="录稿时间" end-placeholder="录稿时间" @change="refresh"></el-date-picker>
            <tree-select style="width:auto;" :value.sync="catalog" :clearable="true" :items="catalogTree" :itemsOptions="treeItemsOptions" placeholder="请选择栏目" @click-change="refresh">
            </tree-select>
            <el-button @click="check" class="button" type="primary"><slot name="button">查看</slot></el-button>
         </div>
      </div>
    </el-toolbar>
    <div>
      <el-table resizable tooltip-effect="dark" style="width: 100%" ref="dataTable1" :data-read-url="getContentHitURL"  :page-size="20" :default-sort="{prop: 'hitCount', order: 'descending'}">
        <el-table-column prop="catalogName" label="所在栏目" min-width="10%" align="center"></el-table-column>
        <el-table-column label="标题" min-width="45%">
          <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="hitCount" label="点击量" min-width="9%" align="center"></el-table-column>
        <el-table-column prop="stickTime" label="页均停留时间" min-width="15%" align="center"></el-table-column>
        <el-table-column prop="addUser" label="添加人" min-width="9%" align="center"></el-table-column>
        <el-table-column prop="addTime" label="录稿时间" min-width="18%" align="center">
          <template slot-scope="scope">
            {{scope.row.addTime | fixDateTime}}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import util from '@src/common/util.js'
import TreeSelect from '@src/components/TreeSelect.vue'
export default {
  filters: {
    fixDateTime: function(val) {
      return util.formatDate(val, 'yyyy-MM-dd HH:mm')
    }
  },
  data() {
    return {
      contentType: [], // 内容类型
      contentTypeValue: '', // 搜索框数据
      catalog: '',
      catalogTree: [], // 栏目列表
      treeItemsOptions: {
        children: 'children',
        label: 'name',
        key: 'ID'
      },
      contentTitle: '',
      dateRangeValue: ''
    }
  },
  methods: {
    async contentTypeChange() {
      this.refresh()
      let data = await axios.get(`/ui/catalog?contentType=${this.contentTypeValue}`)
      this.catalogTree = data.data.data
      this.$nextTick(function() {
        let el = Array.from(document.querySelectorAll('.tree-wrap .el-tree-node .el-tree-node__content .span-label'))
        el.forEach(item => {
          if (item.getAttribute('contenttype') && this.contentTypeValue) {
            if (item.getAttribute('contenttype') !== this.contentTypeValue) {
              item.style = 'color: red'
            } else {
              item.style = 'color: #606266'
            }
          } else {
            if (item.innerText === this.catalogTree[0].name && this.contentTypeValue) {
              item.style = 'color: red'
            } else {
              item.style = 'color: #606266'
            }
          }
        })
      })
    },
    refresh() {
      this.$refs.dataTable1 && this.$refs.dataTable1.getData()
    },
    linkto(row) {
      window.open(`preview.html?id=${row.ID}&type=content`)
    },
    check() {
      this.$refs.dataTable1 && this.$refs.dataTable1.getData()
    },
    getContentHitURL() {
      return ['/ui/stats/contenthit', {
        params: {
          startTime: this.dateRangeValue && this.dateRangeValue.length ? this.dateRangeValue[0] : '',
          endTime: this.dateRangeValue && this.dateRangeValue.length ? this.dateRangeValue[1] : '',
          contentType: this.contentTypeValue,
          catalogID: this.catalog,
          contentTitle: encodeURIComponent((this.contentTitle || '').trim())
        }
      }]
    }
  },
  async created() {
    let contentTypeResp = await axios.get('/ui/contentcore/contenttypes')
    this.contentType = contentTypeResp.data.data
    let catalogTreeResp = await axios.get('/ui/catalog')
    this.catalogTree = catalogTreeResp.data.data
  },
  components: {
    'tree-select': TreeSelect
  }
}

</script>

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

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

  .toolbar-body-flex{
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .date-top {
    top: 1px;
  }

</style>
