<script setup>
import { reactive, watch } from "vue"
import apiDataEDB from '@/api/dataEDB'


const props=defineProps({
    show:{
        type:Boolean,
        default:false
    },
    edbInfoId:{
        type:Number,
        default:0,
    }
})
const emits=defineEmits(['update:show'])

function handleClose(){
    emits('update:show',false)
}

const listState=reactive({
    title:'',
    list:[],
    page:1,
    pageSize:20,
    loading:false,
    finished:false
})
async function getEDBDataList(){
    listState.loading=true
    const res=await apiDataEDB.edbDataList({
        PageSize:listState.pageSize,
        CurrentIndex:listState.page,
        EdbInfoId:props.edbInfoId
    })
    listState.loading=false
    if(res.Ret===200){
        listState.title=res.Data?.Item.EdbName
        const arr=res.Data?.Item.DataList||[]
        listState.list=[...listState.list,...arr]
        listState.finished=res.Data.Paging.IsEnd
    }
}
function onLoad(){
    listState.page++
    getEDBDataList()
}

watch(
    ()=>props.show,
    (n)=>{
        if(n){
            listState.title=''
            listState.list=[]
            listState.finished=false
            getEDBDataList()
        }
    }
)

</script>

<template>
    <van-popup 
        :show="props.show"
        round
        closeable
        position="bottom"
        @click-close-icon="handleClose"
        @click-overlay="handleClose"
    >
        <div class="title">{{listState.title}}</div>
        <div class="nodata-box" style="padding-bottom:30px" v-if="listState.list.length==0&&listState.finished">
            <img  class="list-empty-img" src="https://hzstatic.hzinsights.com/static/ETA_mobile/empty_img.png" alt="">
            <p style="text-align:center;color:#999">暂无数据</p>
        </div>
        <div class="data-list" v-else>
            <li class="data-item">
                <div class="label time">时间</div>
                <div class="label">值</div>
            </li>
            <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">
                    <div class="time">{{item.DataTime}}</div>
                    <div class="val">
                        <span>{{item.Value}}</span>
                    </div>
                </li>
            </van-list>
        </div>
    </van-popup>
</template>

<style lang="scss" scoped>
.title{
    font-size: 36px;
    font-weight: 600;
    padding: 34px;
    border-bottom: 1px solid $border-color;
}
.data-list{
    max-height: 60vh;
    overflow-y: auto;
    .data-item{
        display: flex;
        border-bottom: 1px solid $border-color;
        div{
            flex-shrink: 0;
            width: 50%;
            padding: 0 32px;
            height: 112px;
            display: flex;
            align-items: center;
        }
        .lable{
            font-size: 34px;
            font-weight: 500;
        }
        .time{
            border-right: 1px solid $border-color;
        }
        .val{
            span{
                display: inline-block;
                padding: 0 10px;
                line-height: 48px;
                background-color: #F2F3FF;
                color: $theme-color;
                border-radius: 4px;
                min-width: 60px;
                text-align: center;
            }
        }
    }
}
@media screen and (min-width:$media-width){
    .title{
        font-size: 18px;
        padding: 17px;
    }
    .data-list{
        .data-item{
            div{
                padding: 0 16px;
                height: 56px;
            }
            .lable{
                font-size: 17px;
            }
            .val{
                span{
                    padding: 0 5px;
                    line-height: 24px;
                    border-radius: 2px;
                    min-width: 30px;
                }
                
            }
        }
    }
}
</style>