<script setup>
import moment from 'moment'
import {reactive, ref} from 'vue'
import apiDataEDB from '@/api/dataEDB'
import { useRoute } from 'vue-router'

const route=useRoute()

const props=defineProps({
    edbInfo:{
        type:Object,
        default:null,
        require:true
    },
    langType:{//当前显示的语言
        type:String,
        default:'zh'
    }
})

defineExpose({refreshList})

const activeBaseInfo=ref([])

// 获取指标数据
const listState=reactive({
    list:[],
    page:1,
    pageSize:20,
    finished:false,
    loading:false,
    LatestDate:'',
    insertDate:'',//插入的日期
    classifyVal:''
})
async function getEDBDataList(){
    listState.loading=true
    const res=await apiDataEDB.edbDataList({
        PageSize: listState.pageSize,
        CurrentIndex: listState.page,
        EdbInfoId:route.query.edbInfoId
    })
    listState.loading=false
    if(res.Ret===200){
        const arr=res.Data?.Item.DataList||[]
        listState.list=[...listState.list,...arr]
        listState.LatestDate=res.Data?.Item.LatestDate
        listState.finished=res.Data.Paging.IsEnd
        const classifyNameArr=[]
        res.Data.ClassifyList.forEach(e=>{
            classifyNameArr.unshift(e.ClassifyName)
        })
        listState.classifyVal=classifyNameArr.join('/')
    }
}
getEDBDataList()
// 触底加载
function onLoad(){
    listState.page++
    getEDBDataList()
}
// 刷新列表
function refreshList(){
    listState.page=1
    listState.list=[]
    listState.finished=false
    getEDBDataList()
}

</script>

<template>
    <div class="edb-data-wrap">
        <van-collapse  v-model="activeBaseInfo" :border="false">
            <van-collapse-item title="指标信息" name="baseInfo" :border="false">
                <template #right-icon>
                    <van-icon :name="activeBaseInfo.includes('baseInfo')?'arrow-down':'arrow'" size="18"></van-icon>
                </template>
                <ul class="info-list">
                    <li class="info-item">
                        <span>指标ID</span>
                        <span class="con">{{props.edbInfo.EdbCode}}</span>
                    </li>
                    <li class="info-item">
                        <span>频度</span>
                        <span class="con">{{props.langType==='zh'?props.edbInfo.Frequency:props.edbInfo.FrequencyEn||props.edbInfo.Frequency}}</span>
                    </li>
                    <li class="info-item">
                        <span>单位</span>
                        <span class="con">{{props.langType==='zh'?props.edbInfo.Unit:props.edbInfo.UnitEn||props.edbInfo.Unit}}</span>
                    </li>
                    <li class="info-item">
                        <span>数据来源</span>
                        <span class="con">{{props.edbInfo.SourceName}}</span>
                    </li>
                    <li class="info-item">
                        <span>指标目录</span>
                        <span class="con">{{listState.classifyVal}}</span>
                    </li>
                    <li class="info-item">
                        <span>起始时间</span>
                        <span class="con">{{props.edbInfo.StartDate}}</span>
                    </li>
                    <li class="info-item">
                        <span>更新时间</span>
                        <span class="con">{{props.edbInfo.ModifyTime}}</span>
                    </li>
                    <li class="info-item">
                        <span>添加人</span>
                        <span class="con">{{props.edbInfo.SysUserRealName}}</span>
                    </li>
                </ul>
            </van-collapse-item>
        </van-collapse>
        <ul class="data-list-box">
            <div class="label">数据信息</div>
            <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="">
            <van-list
                v-model:loading="listState.loading"
                :finished="listState.finished"
                :finished-text="listState.list.length>0?'没有更多了':'暂无数据'"
                :immediate-check="false"
                @load="onLoad"
            >
                <li class="data-item" v-for="item in listState.list" :key="item">
                    <span :class="['time',listState.LatestDate===item.DataTime?'new-data':'']">{{item.DataTime}}</span>
                    <span class="val">{{item.Value}}</span>
                </li>
            </van-list>
        </ul>
    </div>
</template>

<style lang="scss" scoped>
.edb-data-wrap{
    :deep(.van-collapse-item__content){
        padding: 0;
    }
}
.info-list{
    .info-item{
        padding: 32px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid $border-color;
        color: #333;
        font-size: 32px;
        span{
            flex-shrink: 0;
        }
        .con{
            width: 60%;
            text-align: right;
            word-break: break-all;
            word-wrap: break-word;
        }
    }
}
.data-list-box{
    border-top: 10px solid #F2F6FA;
    .label{
        font-size: 36px;
        font-weight: 500;
        padding-top: 48px;
        padding-left: 34px;
        margin-bottom: 28px;
    }
    .data-item{
        padding: 0 34px;
        display: flex;
        height: 86px;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid $border-color;
        span{
            flex-shrink: 0;
        }
        .new-data{
            position: relative;
            &::after{
                content: '';
                display: block;
                width: 8PX;
                height: 8PX;
                border-radius: 50%;
                background-color: #D54941;
                position: absolute;
                left: 103%;
                top: 50%;
                transform: translateY(-50%);
            }
        }
        .val{
            display: inline-block;
            padding: 0 10px;
            line-height: 48px;
            background-color: #FFF5ED;
            color: $theme-color;
            border-radius: 4px;
            min-width: 60px;
            text-align: center;
        }
    }
}
@media screen and (min-width:$media-width){
    .edb-data-wrap{
        :deep(.van-cell){
            padding-left: $page-padding;
        }
    }
    .info-list{
        .info-item{
            padding: 16px 16px 16px $page-padding ;
            font-size: 16px;
        }
    }
    .data-list-box{
        border-top-width: 8px;
        .label{
            font-size: 18px;
            padding-top: 24px;
            padding-left: $page-padding;
            margin-bottom: 14px;
        }
        .data-item{
            padding: 0 $page-padding;
            height: 43px;
            .val{
                padding: 0 10px;
                line-height: 28px;
                border-radius: 4px;
                min-width: 40px;
            }
        }
    }
}
</style>