<script setup name="DataEDBRelationEDB">
import {ref,reactive} from 'vue'
import apiDataEDB from '@/api/dataEDB'
import {useRoute, useRouter} from 'vue-router'
import {useCopyEdbData} from '@/hooks/edb/useCopyEdbData'

const {copyData} =useCopyEdbData()

const route=useRoute()
const router=useRouter()


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

const listState=reactive({
    list:[],
    page:1,
    pageSize:20,
    totals:0,
    loading:false,
    finished:false
})
// 获取关联的图列表
async function getEdbRelationEDBList(){
    listState.loading=true
    const res=await apiDataEDB.edbRelationEdbList({
        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
    }
}
getEdbRelationEDBList()
function onLoad(){
    listState.page++
    getEdbRelationEDBList()
}

//复制数据
function handleCopyEDBData(e){
    copyData(e.DataList||[])
}

// 查看数据
function goDetail(e){
    router.push({
        path:'/dataEDB/detail',
        query:{
            edbInfoId:e.EdbInfoId,
            showType:'data'
        }
    })
}

</script>

<template>
    <div class="edb-relation-edb-page">
        <div class="total-box">共{{listState.totals}}个关联指标</div>
        <div class="edb-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="edb-list">
                    <li class="item" v-for="item in listState.list" :key="item">
                        <h2 class="name">{{item.EdbName}}</h2>
                        <ul class="info-list">
                            <li class="info-item">ID：{{item.EdbCode}}</li>
                            <li class="info-item">起始时间：{{item.StartDate}}</li>
                            <li class="info-item">频度：{{item.Frequency}}</li>
                            <li class="info-item">最新日期：{{item.LatestDate}}</li>
                            <li class="info-item">单位：{{item.Unit}}</li>
                            <li class="info-item">最新值：{{item.LatestValue}}</li>
                            <li class="info-item">最近更新：{{item.ModifyTime}}</li>
                            <li class="info-item">数据来源：{{item.SourceName}}</li>
                        </ul>
                        <div style="text-align:right">
                            <van-button color="#F2F3FF" size="small" style="color:#0052D9;margin-right:10px" @click="handleCopyEDBData(item)">复制数据</van-button>
                            <van-button color="#0052D9" size="small" @click="goDetail(item)">查看数据</van-button>
                        </div>
                    </li>
                </ul>
            </van-list>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.edb-relation-edb-page{
    padding:$page-padding;
}
.total-box{
    margin-bottom: 20px;
    color: $font-grey_999;
}
.edb-list{
    .item{
        margin-bottom: 36px;
        border-radius: 8px;
        border: 1px solid $border-color;
        box-shadow: $box-shadow;
        padding: 20px;
        .name{
            font-size: 32px;
        }
        .info-list{
            color: $font-grey;
            margin-bottom: 10px;
            .info-item{
                margin-bottom: 10px;
            }
        }
    }
}
@media screen and (min-width:$media-width){
    .edb-relation-edb-page{
        padding:$page-padding;
    }
    .total-box{
        margin-bottom: 10px;
    }
    .edb-list{
        .item{
            margin-bottom: 18px;
            border-radius: 4px;
            padding: 10px;
            .name{
                font-size: 16px;
            }
            .info-list{
                margin-bottom: 5px;
                .info-item{
                    margin-bottom: 5px;
                }
            }
        }
    }

}
</style>


