<template>
  <div class="right-list-toobar">
    <el-toolbar>
      <div class="layout-data-search layout-data-search-5">
        <el-button @click="refresh">
          <i class="fa fa-refresh"></i>刷新
        </el-button>
        <el-input v-model="memberNameValue" @keyup.enter.native="list" placeholder="会员名称" class="auto-width"></el-input>
        <el-select clearable v-model="memberStatusValue" placeholder="会员状态" class="auto-width">
          <el-option v-for="item in memberStatus" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-date-picker id="memberFavoriteStat-date-picker" v-model="dateRangeValue" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" @change="dateRangeChange" class="auto-width"></el-date-picker>
        <el-button @click="list" class="button" type="primary"><slot name="button">查看</slot></el-button>
      </div>
    </el-toolbar>
    <div>
      <el-table ref="dataTable1" resizable tooltip-effect="dark" style="width: 100%" :data-read-url="getURL" :page-size="20" :default-sort="{prop: 'hitCount', order: 'descending'}">
        <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 label="总收藏">
          <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="75%" :visible.sync="memberFavoriteDetailDialog">
        <el-toolbar>
            <span styel="margin-left:20px">内容类型</span>&nbsp;
            <el-select clearable v-model="contentTypeValue" placeholder="请选择内容类型" style="width:150px;" @change="contentTypeChange">
              <el-option v-for="item in contentType" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>&nbsp;
            <span>栏目名称</span>&nbsp;
             <tree-select :value.sync="catalog" style="width:236px;" :clearable="true" :items="catalogTree" :itemsOptions="treeItemsOptions">
            </tree-select>&nbsp;
            <el-button @click="dlgList">查看</el-button>
          </el-toolbar>
          <div>
            <el-table :data="memberFavoriteDetail" resizable tooltip-effect="dark" style="width: 100%" :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="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="10%" align="center"></el-table-column>
              <el-table-column prop="stickTime" label="停留时间" min-width="10%" align="center"></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'
export default {
  data() {
    return {
      memberFavoriteStat: [], // 会员收藏数据
      memberStatus: [], // 会员状态
      memberNameValue: '', // 搜索框数据
      memberStatusValue: '',
      dateRangeValue: [],
      startDate: '',
      endDate: '',
      // 收藏详情
      memberFavoriteDetailDialog: false,
      contentType: [],
      memberFavoriteDetail: [],
      contentTypeValue: '', // 搜索框数据
      catalog: '',
      catalogTree: [], // 栏目列表
      treeItemsOptions: {
        children: 'children',
        label: 'name',
        key: 'ID'
      },
      pageSizes: [10, 15, 20, 30, 50],
      dlgTotal: 0,
      dlgCurrentPage: 1,
      dlgPageSize: 15,
      currentMemberID: ''
    }
  },
  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) {
      if (val && val.length > 1) {
        this.startDate = val[0]
        this.endDate = val[1]
      } else {
        this.startDate = ''
        this.endDate = ''
      }
    },
    dlgSizeChangeHandler(val) {
      this.dlgPageSize = val
      this.loadDetail()
    },
    dlgCurrentChangeHandler(val) {
      this.dlgCurrentPage = val
      this.loadDetail()
    },
    refresh() {
      this.memberNameValue = ''
      this.memberStatusValue = ''
      this.dateRangeValue = []
      this.startDate = ''
      this.endDate = ''
      this.$refs.dataTable1.getData()
    },
    list() {
      this.$refs.dataTable1.getData()
    },
    getURL() {
      return [
        '/ui/stats/memberfavoritestat',
        {
          params: {
            memberName: encodeURI(this.memberNameValue),
            memberStatus: this.memberStatusValue,
            startDate: this.startDate,
            endDate: this.endDate
          }
        }
      ]
    },
    showDetail(memberID) {
      this.currentMemberID = memberID
      this.loadDetail()
      this.memberFavoriteDetailDialog = true
    },
    dlgList() {
      this.loadDetail()
    },
    async loadDetail() {
      let memberID = this.currentMemberID
      let resp = await axios.get(`/ui/stats/memberfavoritestat/${memberID}`, {
        params: {
          contentType: this.contentTypeValue,
          catalogID: this.catalog,
          pageIndex: this.dlgCurrentPage - 1,
          pageSize: this.dlgPageSize
        }
      })
      this.memberFavoriteDetail = resp.data.data
      this.dlgTotal = resp.data.total
    },
    linkto(row) {
      window.open(`preview.html?id=${row.ID}&type=content`)
    }
  },
  async created() {
    let resp = await axios.get('/ui/platform/codes/Enable')
    this.memberStatus = resp.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;
}

.auto-width {
  width: auto;
}
</style>
