<template>
 <el-dialog
    v-if="productReadInfoShow"  
    :visible.sync="productReadInfoShow" 
    :close-on-click-modal="false" 
    :modal-append-to-body="false"
    @close="cancelHandle" width="689px" v-dialogDrag center>
    <div slot="title" style="display: flex; alignitems: center">
      <span style="fontsize: 16px">{{productReadTitle}}</span>
    </div>
    <div class="dialog-container">
      <div class="table-info-wrap">
        <div class="table-info">
          <p>{{typeName}}</p>
          <p>共{{clickToal}}个点击量</p>
        </div>
      </div>
      <el-table
        :data="tableData"
        border
        @sort-change="sortChangeHandle"
        max-height="400"
        style="width: 100%; margin-bottom: 20px">
        <el-table-column align="center"
            v-for="item in tableColumn" :key="item.propName"
            :label="item.label"
            :prop="item.propName"
            :width="item.widthsty" 
            :min-width="item.minwidthsty"
            :sortable="item.propName==='VisitCount'"
        >
        <template slot-scope="{row}">
          <span v-if="item.propName==='VisitCount'" class="editsty">{{row[item.propName]||'0'}}</span>
          <span v-else-if="item.propName==='Source'">{{row[item.propName]===1?'小程序':'PC端'}}</span>
          <span v-else>{{row[item.propName]||'--'}}</span>
        </template>
        </el-table-column>
      </el-table>
      <el-pagination
          layout="total,prev,pager,next"
          small
          :current-page="pageNo"
          @current-change="handleCurrentChange"
          :page-size="pageSize"
          :total="total"
          style="text-align: end; margin: 20px 0"
        >
      </el-pagination>
    </div>
  </el-dialog>
</template>

<script>
//表格的column
//分产品阅读统计
const totalColumn = [
  {
    label:'产品名称',
    propName:'ProductName',
  },{
    label:'标题',
    propName:'Title',
  },{
    label:'点击量',
    propName:'VisitCount',
    widthsty:100
  },{
    label:'来源',
    propName:'Source',
    widthsty:100
  },{
    label:'最近一次点击时间',
    propName:'RecentTime'
  }
]
//视频社区
const videoColumn = [
  {
    label:'视频列表',
    propName:'Title',
  },{
    label:'点击量',
    propName:'VisitCount',
    widthsty:100
  },{
    label:'来源',
    propName:'Source',
    widthsty:100
  },{
    label:'最近一次点击时间',
    propName:'RecentTime'
  }
]
//语音播报
const voicePlayColumn=[
  {
    label:'语音播报列表',
    propName:'Title',
  },{
    label:'点击量',
    propName:'VisitCount',
    widthsty:100
  },{
    label:'来源',
    propName:'Source',
    widthsty:100
  },
  {
    label:'最近一次点击时间',
    propName:'RecentTime'
  }
]
//问答社区
const questionColumn = [
  {
    label:'问答列表',
    propName:'Title',
  },{
    label:'点击量',
    propName:'VisitCount',
    widthsty:100
  },{
    label:'来源',
    propName:'Source',
    widthsty:100
  },
  {
    label:'最近一次点击时间',
    propName:'RecentTime'
  }
]
const columnMap = {
  'Total':totalColumn,
  'Video':videoColumn,
  'VoicePlay':voicePlayColumn,
  'Question':questionColumn
}
import {customInterence} from '@/api/api.js'
export default {
  props:{
    productReadInfoShow:{//弹窗显示
      type:Boolean
    },
    productReadId:{//联系人ID
      type:Number
    },
    productReadTitle:{//弹窗标题
      type:String
    },
    subProductId: { //分产品类型+id
      type: String
    },
    subProductName: {
      type: String
    },
    clickToal: {
      type: Number
    }
  },
  data() {
    return {
      tableName:'total',//当前显示表格的名称
      tableColumn:[],//当前显示表格的column
      tableData:[],//表格数据
      total:0,//表格数据总数
      pageNo:1,//当前页
      pageSize:10,//一页显示多少条数据
      typeName:'',//分产品小标题
      isClickSort:false,//
      choosedItem:{},//当前点击的数据
    };
  },
  watch:{
    productReadInfoShow(newVal){
      if(newVal){
        let subProductArr = this.subProductId.split('-');
        const typeMap = {
          1:'VoicePlay',
          2:'Video',
          3:'Question',
          99:'Total',
        }
        this.choosedItem = {
          ProductType: Number(subProductArr[0]),
          ProductId: Number(subProductArr[1]),
          ProductName: this.subProductName
        }
        this.initTable(typeMap[Number(subProductArr[0])])
      }
    }
  },
  methods: {
    //初始化表格数据
    initTable(tableName){
      this.tableName = tableName
      this.tableColumn = columnMap[tableName]
      this.pageNo = 1
      this.getReadInfoDetail()
    },
    //关闭弹窗
    cancelHandle(){
      this.$emit('close')
    },
    //切换表格数据
    changeTable(item){
      this.choosedItem = item
      //在分列表点击数据,不做任何操作
      if(!item.ProductType&&!item.type) return
      //在总列表点击数据
      if(item.ProductType){
        const typeMap = {
          1:'VoicePlay',
          2:'Video',
          3:'Question'
        }
        this.initTable(typeMap[item.ProductType])
      }
      //点击返回
      if(item.type){
        this.initTable(item.type)
      }
    },
    //点击页码
    handleCurrentChange(pageNo){
      this.pageNo = pageNo
      this.getReadInfoDetail()
    },
    //获取总的阅读统计
    async getTotalReadInfo(orderType){
      this.typeName = ''
      let order = {}
      if(orderType){
        order.ClickSort = orderType
      }
      const res = await customInterence.getYbProductReadInfo({
        UserId:this.productReadId,
        PageSize:this.pageSize,
        CurrentIndex:this.pageNo,
        ...order
      })
      if(res.Ret===200){
        const {List,Paging} = res.Data
        this.tableData = List
        this.total = Paging.Totals
      }
    },
    //获取某产品的阅读详情
    async getReadInfoDetail(orderType){
      const {ProductType,ProductId,ProductName} = this.choosedItem
      let params = {
        UserId:this.productReadId,
        ProductType,
        PageSize:this.pageSize,
        CurrentIndex:this.pageNo,
      }
      this.typeName = ProductName
      // if(ProductType===1){
        params.ProductId = ProductId
      // }
      if(orderType){
        params.ClickSort = orderType
      }
      const res = await customInterence.getYbProductReadDetail(params)
      if(res.Ret===200){
        const {List,Paging} = res.Data
        this.tableData = List
        this.total = Paging.Totals
      }
    },
    //点击量排序
    sortChangeHandle({ prop,order }){
      const orderType = order==='ascending'?1:order==='descending'?2:0
      this.pageNo = 1
      this.getReadInfoDetail(orderType)
    }
  },
  mounted(){}
};
</script>
<style lang="scss">
.dialog-container{
  .el-icon-arrow-right:before{
    color: inherit;
}
}
</style>
<style scoped lang="scss">
.dialog-container{
  margin-top: -10px;
  .table-info-wrap{
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
}
</style>
