<script setup>
import { ref, watch } from 'vue'
import {customInterence} from '@/api/api.js'


const props = defineProps({
    productReadInfoShow:{//弹窗显示
      type:Boolean
    },
    productReadId:{//联系人ID
      type:Number
    },
    productReadTitle:{//弹窗标题
      type:String
    },
    subProductId: { //分产品类型+id
      type: String
    },
    subProductName: {
      type: String
    },
    clickToal: {
      type: Number
    }
})
const emit = defineEmits(['close'])

//表格的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
}



const tableName = ref('total')//当前显示表格的名称
const tableColumn = ref([])//当前显示表格的column
const tableData = ref([])//表格数据
const total = ref(0)//表格数据总数
const pageNo = ref(1)//当前页
const pageSize = ref(10)//一页显示多少条数据
const typeName = ref('')//分产品小标题
const isClickSort = ref(false)//
const choosedItem = ref({})//当前点击的数据
//初始化表格数据
function initTable(tableName){
  tableName.value = tableName
  tableColumn.value = columnMap[tableName]
  pageNo.value= 1
  getReadInfoDetail()
}

//关闭弹窗
function cancelHandle(){
  emit('close')
}

//切换表格数据
function changeTable(item){
  choosedItem.value = item
  //在分列表点击数据,不做任何操作
  if(!item.ProductType&&!item.type) return
  //在总列表点击数据
  if(item.ProductType){
    const typeMap = {
      1:'VoicePlay',
      2:'Video',
      3:'Question'
    }
    initTable(typeMap[item.ProductType])
  }
  //点击返回
  if(item.type){
    initTable(item.type)
  }
}

//点击页码
function handleCurrentChange(pageNo){
  pageNo.value = pageNo
  getReadInfoDetail()
}

//获取总的阅读统计
async function getTotalReadInfo(orderType){
  typeName.value = ''
  let order = {}
  if(orderType){
    order.ClickSort = orderType
  }
  const res = await customInterence.getYbProductReadInfo({
    UserId:props.productReadId,
    PageSize:pageSize.value,
    CurrentIndex:pageNo.value,
    ...order
  })
  if(res.Ret===200){
    const {List,Paging} = res.Data
    tableData.value = List
    total.value = Paging.Totals
  }
}

//获取某产品的阅读详情
async function getReadInfoDetail(orderType){
  const {ProductType,ProductId,ProductName} = choosedItem.value
  let params = {
    UserId:props.productReadId,
    ProductType,
    PageSize:pageSize.value,
    CurrentIndex:pageNo.value,
  }
  typeName.value = 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
    tableData.value = List
    total.value = Paging.Totals
  }
}

//点击量排序
function sortChangeHandle({ prop,order }){
  const orderType = order==='ascending'?1:order==='descending'?2:0
  pageNo.value = 1
  getReadInfoDetail(orderType)
}



watch(
  () => props.productReadInfoShow,
  (newVal) => {
    if(newVal){
        let subProductArr = props.subProductId.split('-');
        const typeMap = {
          1:'VoicePlay',
          2:'Video',
          3:'Question',
          99:'Total',
        }
        choosedItem.value = {
          ProductType: Number(subProductArr[0]),
          ProductId: Number(subProductArr[1]),
          ProductName: props.subProductName
        }
        initTable(typeMap[Number(subProductArr[0])])
      }
  }
)

</script>
<template>
  <el-dialog
    :model-value="productReadInfoShow" 
    :close-on-click-modal="false" 
    :modal-append-to-body="false"
    @close="cancelHandle" width="689px" draggable center
  >
    <template #header>
      <div style="display: flex; align-items: center">
        <span style="fontsize: 16px">{{productReadTitle}}</span>
      </div>
    </template>
    <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 #default="{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>
<style scoped lang="scss">
.dialog-container{
  margin-top: -10px;
  :deep(.el-icon-arrow-right:before){
    color: inherit;
  }
  .table-info-wrap{
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
}
</style>