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

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

const props = defineProps({
  isCollectListShow:{
    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 pageNo=ref(1)
const pageSize=ref(8)
const total=ref(0)
const ListData=ref([])
const allCharts=ref([])
const listLoading=ref(false)

watch(()=>props.isCollectListShow,(val)=>{
  if(val){
    getCollectList()
  }
})

const cancelHandle=()=>{
  ListData.value=[]
  pageNo.value=1
  emits('cancel')
}
const getCollectList=async()=>{
  listLoading.value = true
  const {OldUserId,CompanyId} = props.customItem
  const res = await dataMainInterface.chartDetailList({
    StartDate:props.StartDate,
    EndDate:props.EndDate,
    SellerIds:props.SellerIds,
    CompanyId:CompanyId,
    CompanyStatus:props.customStatus,
    UserId:OldUserId,
    CurrentIndex:pageNo.value,
    PageSize:pageSize.value,
  })
  if(res.Ret!==200) return 
  const {Paging,List} = res.Data
  ListData.value = List.map(item=>{
    const ChartInfo = item.ChartInfo||{}
    const {UniqueCode,ChartName,ChartImage,ChartInfoId} = ChartInfo
    const temp = {
      Id:item.Id||'',
      UniqueCode:UniqueCode||'',
      ChartName:ChartName||'',
      ChartImage:ChartImage||'',
      CreateTime:item.CreateTime||'',
      ChartInfoId:ChartInfoId||''
    }
    return temp
  })
  total.value = Paging.Totals
  allCharts.value = ListData.value.map(item=>{return item.UniqueCode})
  //剔除UniqueCode为空的
  allCharts.value = allCharts.value.filter(item=>{return item})
  listLoading.value = false
}
const handleCurrentChange=(page)=>{
  pageNo.value = page
  getCollectList()
}
const showChartDetail=async(item)=>{
  if(!item.UniqueCode) return
  // 跳转去ETA
  const redirect_uri=encodeURIComponent(`/chartsetting?code=${item.UniqueCode}&id=${item.ChartInfoId}`)
  let href = import.meta.env.VITE_ETA_SYSTEM
  // console.log(href);
  // console.log(redirect_uri);
  // 获取临时code
  const res=await departInterence.getToETASysCode()
  if(res.Ret===200){
    href=`${href}?code=${res.Data}&redirect_uri=${redirect_uri}`
    window.open(href,'_blank');
  }
}

</script>

<template>
  <div class="collect-list-wrap">
    <el-dialog
    :model-value="props.isCollectListShow"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    @close="cancelHandle"
    width="70%"
    top="4vh"
    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" >
        <p>共{{total||0}}张图表</p>
        <div class="list-wrap" v-loading="listLoading">
          <div class="list-item" v-for="item in ListData" :key="item.Id" @click="showChartDetail(item)">
            <span class="item-title">{{item.ChartName||'该图表已被删除'}}</span>
            <div class="item-image-wrap">
              <div class="image" :style="{backgroundImage:`url(${item.ChartImage})`}">
              </div>
            </div>
            <span class="item-time">收藏时间：{{item.CreateTime||' '}}</span>
          </div>
        </div>
        <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>
    </el-dialog>
  </div>
</template>

<style lang="scss">
.collect-list-wrap{
  .el-dialog__wrapper{
    overflow: hidden;
  }
}
</style>
<style scoped lang="scss">
.dialog-container{
  padding: 0 25px;
  .list-wrap{
    min-height: 686px;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    .list-item{
      margin: 0 25px 20px 0;
      border: 1px solid #ECECEC;
      box-sizing: border-box;
      width:22%;
      height:323px;
      color:#333333;
      display: flex;
      flex-direction: column;
      padding:10px;
      cursor: pointer;
      span{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .item-title{
        font-weight: 700;
        font-size: 16px;
      }
      .item-time{
        margin-top: -10px;
        font-size: 14px;
      }
      .item-image-wrap{
        flex:1;
        border-top:1px solid #ECECEC;
        margin:10px -10px;
        padding:10px;
        .image{
          width:100%;
          height:100%;
          background-color:#D9D9D9;
          background-position: 0 0;
          background-size: 100% 100%;
        }
      }
    }
  }
  
}

</style>
