<template>
  <div class="collect-detail-wrap">
    <el-dialog
    :visible.sync="isCollectDetailShow"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    @close="cancelHandle"
    width="860px"
    v-dialogDrag
    center
    >
      <div slot="title" style="display: flex; alignitems: center">
        <span style="fontsize: 16px"
          >{{customItem?customItem.OldRealName:''}}研报 / 视频收藏详情</span
        >
      </div>
      <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 slot-scope="{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="text-align:right;padding:20px 0;">
					</el-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { dataMainInterface } from '@/api/api.js';
export default {
  props:{
    isCollectDetailShow:{
      type:Boolean,
      default:false
    },
    customItem:{
      type:Object,
      default:()=>{
        return {}
      }
    },
    StartDate:{
      type:String
    },
    EndDate:{
      type:String
    },
    customStatus:{
      type:String
    },
    SellerIds:{
      type:String
    }
  },
  data() {
    return {
      tableColumns:[
        {
          label:'标题',
          key:'Title'
        },
        {
          label:'类型',
          key:'CollectionType',
        },
        {
          label:'收藏时间',
          key:'ModifyTime',
          minwidthsty:'80'
        }
      ],
      pageNo:1,
      pageSize:5,
      total:0,
      tableData:[],
      collectionType:0,
      collectionTypes:[
        {value:0,label:'全部'},
        {value:1,label:'研报'},
        {value:2,label:'视频社区'},
        {value:3,label:'线上路演'}
      ]
    };
  },
  watch:{
    isCollectDetailShow(val){
      if(val){
        this.collectionType = 0
        this.getTableData()
      }
    }
  },
  methods: {
    cancelHandle(){
      this.pageNo=1
      this.tableData=[]
      this.$emit('cancel')
    },
    getTableData(){
      const {/* Status,SellerIds, */OldUserId} = this.customItem
      dataMainInterface.collectDetailList({
        StartDate:this.StartDate,
        EndDate:this.EndDate,
        SellerIds:this.SellerIds,
        CompanyStatus:this.customStatus,
        UserId:OldUserId,
        CurrentIndex:this.pageNo,
        PageSize:this.pageSize,
        CollectionType:this.collectionType?this.collectionType+'':''
      }).then(res=>{
        if(res.Ret!==200) return 
        const {Paging,List} = res.Data
        this.total = Paging.Totals
        this.tableData = List
      })
    },
    handleCurrentChange(page){
      this.pageNo = page
      this.getTableData()
    },
    handleSelectChange(){
      this.pageNo=1
      this.getTableData()
    }
  },
};
</script>

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

</style>
