<template>
  <div class="collect-list-wrap">
    <el-dialog
    :visible.sync="isCollectListShow"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    @close="cancelHandle"
    width="70%"
    top="4vh"
    v-dialogDrag
    center
    >
      <div slot="title" style="display: flex; alignitems: center">
        <span style="fontsize: 16px"
          >{{customItem?customItem.OldRealName:''}}图收藏详情</span
        >
      </div>
      <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="text-align:right;padding:20px 0;">
        </el-pagination>
      </div>
    </el-dialog>
    <!-- 图表详情弹窗 -->
    <chart-detail
      :isOpenDetail="isOpenDetail"
      :select_classify="0"
      :chart_code="chartId"
      :allChart="allCharts"
      :classifyUserId="0"
      @close="handleClose"
      @remove="handleRemove"
    />
  </div>
</template>

<script>
import { dataMainInterface,departInterence } from '@/api/api.js';
import chartDetail from '@/views/mychart_manage/components/chartDetailDia.vue';
export default {
  props:{
    isCollectListShow:{
      type:Boolean,
      default:false
    },
    customItem:{
      type:Object,
      default:()=>{
        return {}
      }
    },
    StartDate:{
      type:String
    },
    EndDate:{
      type:String
    },
    customStatus:{
      type:String
    },
    SellerIds:{
      type:String
    }
  },
  components:{
    chartDetail
  },
  data() {
    return {
      pageNo:1,
      pageSize:8,
      total:0,
      ListData:[],
      chartId:'',
      allCharts:[],
      isOpenDetail:false,
      listLoading:false,
    };
  },
  watch:{
    isCollectListShow(val){
      if(val){
        this.getCollectList()
      }
    }
  },
  methods: {
    cancelHandle(){
      this.ListData=[]
      this.pageNo=1
      this.$emit('cancel')
    },
    async getCollectList(){
      this.listLoading = true
      const {OldUserId,CompanyId} = this.customItem
      const res = await dataMainInterface.chartDetailList({
        StartDate:this.StartDate,
        EndDate:this.EndDate,
        SellerIds:this.SellerIds,
        CompanyId:CompanyId,
        CompanyStatus:this.customStatus,
        UserId:OldUserId,
        CurrentIndex:this.pageNo,
        PageSize:this.pageSize,
      })
      if(res.Ret!==200) return 
      const {Paging,List} = res.Data
      this.ListData = 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
      })
     // this.ListData = this.ListData.filter(item=>{return item.UniqueCode})
      this.total = Paging.Totals
      this.allCharts = this.ListData.map(item=>{return item.UniqueCode})
      //剔除UniqueCode为空的
      this.allCharts = this.allCharts.filter(item=>{return item})
      this.listLoading = false
    },
    handleCurrentChange(page){
      this.pageNo = page
      this.getCollectList()
    },
    async showChartDetail(item){
      if(!item.UniqueCode) return
      // 跳转去ETA
      const redirect_uri=encodeURIComponent(`/chartsetting?code=${item.UniqueCode}&id=${item.ChartInfoId}`)
      let href = process.env.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');
      }
      
      // this.chartId=id
      // this.isOpenDetail = true
    },
    handleRemove(UniqueCode){
      this.allCharts.splice(this.allCharts.findIndex(item=>item===UniqueCode),1)
    },
    handleClose(){
      this.getCollectList()
      this.isOpenDetail = false
    }
  },
};
</script>

<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>
