<script setup>
import { reactive, ref, watch } from "vue"

import { dataMainInterface } from '@/api/api.js';

const props = defineProps({
  isCollectDetailShow:{
    type:Boolean,
    default:false
  },
  customItem:{
    type:Object,
    default:()=>{
      return {}
    }
  },
  StartDate:{
    type:String
  },
  EndDate:{
    type:String
  },
  customStatus:{
    type:String
  },
  SellerIds:{
    type:String
  }
})

const emits = defineEmits(['cancel'])

const tableColumns=reactive([
  {
    label:'标题',
    key:'Title'
  },
  {
    label:'类型',
    key:'CollectionType',
  },
  {
    label:'收藏时间',
    key:'ModifyTime',
    minwidthsty:'80'
  }
])
const pageNo=ref(1)
const pageSize=ref(5)
const total=ref(0)
const tableData=ref([])
const collectionType=ref(0)
const collectionTypes=[
  {value:0,label:'全部'},
  {value:1,label:'研报'},
  {value:2,label:'视频社区'},
  {value:3,label:'线上路演'}
]

watch(()=>props.isCollectDetailShow,(val)=>{
  if(val){
    collectionType.value = 0
    getTableData()
  }
})

const cancelHandle=()=>{
  pageNo.value=1
  tableData.value=[]
  emits('cancel')
}
const getTableData=()=>{
  const {/* Status,SellerIds, */OldUserId} = props.customItem
  dataMainInterface.collectDetailList({
    StartDate:props.StartDate,
    EndDate:props.EndDate,
    SellerIds:props.SellerIds,
    CompanyStatus:props.customStatus,
    UserId:OldUserId,
    CurrentIndex:pageNo.value,
    PageSize:pageSize.value,
    CollectionType:collectionType.value?collectionType.value+'':''
  }).then(res=>{
    if(res.Ret!==200) return 
    const {Paging,List} = res.Data
    total.value = Paging.Totals
    tableData.value = List
  })
}
const handleCurrentChange=(page)=>{
  pageNo.value = page
  getTableData()
}
const handleSelectChange=()=>{
  pageNo.value=1
  getTableData()
}
</script>

<template>
  <div class="collect-detail-wrap">
    <el-dialog
    :model-value="props.isCollectDetailShow"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    @close="cancelHandle"
    width="860px"
    v-dialogDrag
    center
    >
      <template #header>
        <div style="display: flex; align-items: center">
          <span style="font-size: 16px"
            >{{props.customItem?props.customItem.OldRealName:''}}研报 / 视频收藏详情</span
          >
        </div>
      </template>
      <div class="dialog-container" >
        <div class="select-wrap">
          <span style="margin-right:12px;">类型</span>
          <el-select v-model="collectionType" @change="handleSelectChange">
            <el-option
              v-for="item in collectionTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="table-wrap">
          <el-table 
            v-if="tableData"
            :data="tableData"
            max-height="600"
            border
            style="width: 100%; margin-bottom: 20px">
            <el-table-column align="center" v-for="item in tableColumns" :key="item.key" :label="item.label" :prop="item.key"
              :min-width="item.minwidthsty">
              <template #default="{row}">
                <span v-if="item.key==='CollectionType'">
                  {{collectionTypes[row['CollectionType']].label||'--'}}
                </span>
                <span v-else>{{row[item.key]||'--'}}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination 
            layout="total,prev,pager,next" 
            background
            :current-page="pageNo"
            @current-change="handleCurrentChange"
            :page-size="pageSize" 
            :total="total"
            style="justify-content:flex-end;padding:20px 0;">
					</el-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.dialog-container{
  padding: 0 25px;
  .select-wrap{
    margin-bottom: 20px;
  }
}

</style>
<style lang="scss">
.el-dialog .el-input{
  width: 100%;
}
</style>