<script setup name="DataEDBRelationChart">
import {ref,reactive} from 'vue'
import apiDataEDB from '@/api/dataEDB'
import apiChart from '@/api/chart'
import {useRoute, useRouter} from 'vue-router'
import { useWindowSize } from '@vueuse/core'
import AddChartToMyETA from '@/views/chartETA/components/AddChartToMyETA.vue'

const route=useRoute()
const router=useRouter()
const { width } = useWindowSize()


const edbInfoId=route.query.edbInfoId//当前指标的id

const listState=reactive({
    list:[],
    page:1,
    pageSize:20,
    totals:0,
    loading:false,
    finished:false
})
// 获取关联的图列表
async function getEdbRelationChartList(){
    listState.loading=true
    const res=await apiDataEDB.edbRelationChartList({
        PageSize:listState.pageSize,
        CurrentIndex:listState.page,
        EdbInfoId:edbInfoId
    })
    listState.loading=false
    if(res.Ret===200){
        if(!res.Data){
            listState.finished=true
            return
        }
        const arr=res.Data?.List||[]
        listState.list=[...listState.list,...arr]
        listState.finished=res.Data?.Paging.IsEnd
        listState.totals=res.Data?.Paging.Totals
    }
}
getEdbRelationChartList()
function onLoad(){
    listState.page++
    getEdbRelationChartList()
}

// 加入我的图库
const isShowAddToMyETADialog=ref(false)
const chartInfo=ref({})
async function handleShowAddToMyChart(e){
    // 获取一下图详情
    const res=await apiChart.chartInfoByCode({UniqueCode:e.UniqueCode})
    if(res.Ret===200){
        chartInfo.value=res.Data.ChartInfo
        isShowAddToMyETADialog.value=true
    }
}

//跳转图详情
function goChartDetail(item){
    router.push({
        path:'/myETA/chartdetail',
        query:{
            code:item.UniqueCode,
            iscommon:true,
            from:'edbRelationChart',
            edbInfoId:edbInfoId
        }
    })
}


</script>

<template>
    <div class="edb-relation-chart-page">
        <div class="total-box">共{{listState.totals}}张图表</div>
        <div class="chart-list-wrap">
            <van-list
                v-model:loading="listState.loading"
                :finished="listState.finished"
                :finished-text="listState.list.length>0?'没有更多了':'暂无关联图表'"
                :immediate-check="false"
                @load="onLoad"
            >
                <img v-if="listState.list.length==0&&listState.finished" class="list-empty-img" src="https://hzstatic.hzinsights.com/static/ETA_mobile/empty_img.png" alt="">
                <ul class="chart-list">
                    <li class="item" v-for="item in listState.list" :key="item.ChartInfoId" @click="goChartDetail(item)">
                        <div class="van-multi-ellipsis--l2 name">{{item.ChartName}}</div>
                        <van-image
                            class="img"
                            :src="item.ChartImage"
                        />
                        <div class="time">{{item.CreateTime.slice(0,10)}}</div>
                        <svg @click.stop="handleShowAddToMyChart(item)" class="opt-icon" xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none">
                            <path d="M11.7892 19.081H16.9192V24.211C16.9192 24.3595 17.0407 24.481 17.1892 24.481H18.8092C18.9577 24.481 19.0792 24.3595 19.0792 24.211V19.081H24.2092C24.3577 19.081 24.4792 18.9595 24.4792 18.811V17.191C24.4792 17.0425 24.3577 16.921 24.2092 16.921H19.0792V11.791C19.0792 11.6425 18.9577 11.521 18.8092 11.521H17.1892C17.0407 11.521 16.9192 11.6425 16.9192 11.791V16.921H11.7892C11.6407 16.921 11.5192 17.0425 11.5192 17.191V18.811C11.5192 18.9595 11.6407 19.081 11.7892 19.081Z" fill="#0052D9"/>
                            <path d="M30.42 4.5H5.58C4.98262 4.5 4.5 4.98262 4.5 5.58V30.42C4.5 31.0174 4.98262 31.5 5.58 31.5H30.42C31.0174 31.5 31.5 31.0174 31.5 30.42V5.58C31.5 4.98262 31.0174 4.5 30.42 4.5ZM29.07 29.07H6.93V6.93H29.07V29.07Z" fill="#0052D9"/>
                        </svg>
                    </li>
                </ul>
            </van-list>
        </div>
    </div>

    <!-- 加入我的图库 -->
    <AddChartToMyETA 
        :isShowDialog="isShowAddToMyETADialog"
        :dialogPosition="width>650?'center':'bottom'"
        :chartInfo="chartInfo"
        @close="isShowAddToMyETADialog=false"
    />
</template>

<style lang="scss" scoped>
.edb-relation-chart-page{
    padding:$page-padding;
}
.total-box{
    margin-bottom: 20px;
    color: $font-grey_999;
}
.chart-list{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px 0;
    .item{
        width: 326px;
        border-radius: 8px;
        background: #FFF;
        border: 1px solid $border-color;
        padding: 14px;
        position: relative;
        .name{
            min-height: 70px;
        }
        .img{
            width: 100%;
            height: 220px;
            margin: 14px 0;
        }
        .time{
            font-size: 24px;
        }
        .opt-icon{
            position: absolute;
            bottom: 14px;
            right: 14px;
            width: 36px;
            height: 36px;
        }
    }
}

@media screen and (min-width:$media-width){
    .edb-relation-chart-page{
        padding:$page-padding;
    }
    .total-box{
        margin-bottom: 10px;
    }
    .chart-list{
        justify-content: flex-start;
        gap: 10px;
        .item{
            width: 313px;
            border-radius: 8px;
            padding: 10px;
            .name{
                min-height: 36px;
            }
            .img{
                height: 220px;
                margin: 10px 0;
            }
            .time{
                font-size: 12px;
            }
            .opt-icon{
                bottom: 10px;
                right: 10px;
                width: 20px;
                height: 20px;
            }
        }
    }
}
</style>