<template>
  <div class="right-list-toobar">
    <el-toolbar>
      <el-button @click="refresh"><i class="fa fa-refresh"></i>刷新</el-button>
      <el-col align="right">
        <el-input v-model="searchContentTitle" style="width:auto" placeholder="请输入标题"></el-input>&nbsp;
        <el-select clearable v-model="contentTypeValue" style="width:auto;" placeholder="请选择内容类型" @change="contentTypeChange">
        <el-option v-for="item in contentType" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>&nbsp;
      <tree-select :value.sync="catalog" :clearable="true" :items="catalogTree" :itemsOptions="treeItemsOptions" style="width:auto;" placeholder="请选择栏目">
      </tree-select>&nbsp;
        <el-button @click="list" class="button" type="primary"><slot name="button">查看</slot></el-button>
      </el-col>
    </el-toolbar>
    <div>
      <el-table ref="dataTable1" resizable tooltip-effect="dark" style="width: 100%" :data-read-url="getURL" :page-size="20">
        <el-table-column prop="catalogName" label="所在栏目" min-width="15%" align="center"></el-table-column>
        <el-table-column label="标题" min-width="50%">
          <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="addUser" label="录入用户" min-width="10%" align="center"></el-table-column>
        <el-table-column prop="hitCount" label="点击量" min-width="8%" align="center"></el-table-column>
        <el-table-column prop="stickTime" label="页均停留时间" min-width="12%" align="center"></el-table-column>
        <el-table-column label="总收藏" min-width="8%" align="center">
          <template slot-scope="scope">
            <a href="javascript:void(0);" @click="showDetail(scope.row.ID)">{{scope.row.favCount}}</a>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 内容收藏详情 -->
    <el-dialog title="内容收藏详情" width="80%" :visible.sync="contentFavoriteDetailDialog">
    <el-toolbar>
      <span style="margin-left:20px">会员名称：</span>&nbsp;
      <el-input v-model="memberNameValue" style="width:100px"></el-input>&nbsp;
      <span>会员状态：</span>&nbsp;
      <el-select style="width:100px" clearable v-model="memberStatusValue">
        <el-option v-for="item in memberStatus" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>&nbsp;
      <span>日期范围：</span>
      <el-date-picker id="contentFavoriteStat-date-picker" v-model="dateRangeValue" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请选择日期范围" @change="dateRangeChange"></el-date-picker>&nbsp;
      <el-button @click="dlgList">查看</el-button>
    </el-toolbar>
    <div>
      <el-table :data="contentFavoriteDetail" resizable tooltip-effect="dark" style="width: 100%">
        <el-table-column type="index" label="序号" width="65"></el-table-column>
        <el-table-column label="会员名称">
          <template slot-scope="scope">
            {{scope.row.userName}}({{scope.row.realName}})
          </template>
        </el-table-column>
        <el-table-column label="会员状态">
          <template slot-scope="scope">
            <i class="fa fa-check icon-success" v-if="scope.row.status === 'Y'"></i>
            <i class="fa fa-times icon-danger" v-else></i>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="操作时间">
        </el-table-column>
      </el-table>
      <div class="page-wrap">
        <el-pagination class="page" @size-change="dlgSizeChangeHandler" :page-sizes="pageSizes" @current-change="dlgCurrentChangeHandler" :current-page.sync="dlgCurrentPage"
          :page-size="dlgPageSize" layout="total, sizes, prev, pager, next, jumper" :total="dlgTotal">
        </el-pagination>
      </div>
    </div>
  </el-dialog>
  </div>
</template>

<script>
import TreeSelect from '@src/components/TreeSelect.vue'
import util from '@src/common/util.js'
export default {
  data() {
    return {
      contentHit: [], // 内容收藏数据
      contentType: [], // 内容类型
      catalogTree: [], // 栏目列表
      treeItemsOptions: { key: 'ID', label: 'name', children: 'children' }, // 关联栏目树属性
      contentTypeValue: '', // 搜索框数据
      catalog: '',
      // 内容收藏详情
      contentFavoriteDetailDialog: false,
      contentFavoriteDetail: [],
      memberStatus: [],
      memberNameValue: '', // 搜索框数据
      memberStatusValue: '',
      dateRangeValue: [],
      startDate: '',
      endDate: '',
      pageSizes: [10, 15, 20, 30, 50],
      dlgTotal: 0,
      dlgCurrentPage: 1,
      dlgPageSize: 15,
      currentContentID: '',
      searchContentTitle: ''
    }
  },
  methods: {
    async contentTypeChange() {
      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'
            }
          }
        })
      })
    },
    dateRangeChange(val) {
      this.startDate = val[0]
      this.endDate = val[1]
    },
    refresh() {
      this.$refs.dataTable1.getData()
    },
    list() {
      this.$refs.dataTable1.getData()
    },
    linkto(row) {
      window.open(`preview.html?id=${row.ID}&type=content`)
    },
    getURL() {
      return ['/ui/stats/contentfavoritestat', {
        params: {
          catalogID: this.catalog,
          contentType: this.contentTypeValue,
          contentTitle: encodeURIComponent(this.searchContentTitle.trim())
        }
      }]
    },
    async loadDetail() {
      let contentID = this.currentContentID
      let resp = await axios.get(`/ui/stats/contentfavoritestat/${contentID}`, {
        params: {
          pageIndex: this.dlgCurrentPage - 1,
          pageSize: this.dlgPageSize,
          memberName: encodeURI(this.memberNameValue),
          status: this.memberStatusValue,
          startDate: this.startDate,
          endDate: this.endDate
        }
      })
      if (resp.data.status === 1) {
        this.contentFavoriteDetail = resp.data.data
        this.dlgTotal = resp.data.total
      } else {
        util.showResponseMessage(resp.data)
      }
    },
    dlgSizeChangeHandler(val) {
      this.dlgPageSize = val
      this.loadDetail()
    },
    dlgCurrentChangeHandler(val) {
      this.dlgCurrentPage = val
      this.loadDetail()
    },
    showDetail(contentID) {
      this.currentContentID = contentID
      this.contentFavoriteDetailDialog = true
      this.loadDetail()
    },
    dlgList() {
      this.loadDetail()
    }
  },
  async created() {
    let memberStatusResp = await axios.get('/ui/platform/codes/Enable')
    this.memberStatus = memberStatusResp.data.data
    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;
  }
</style>
