<script setup>
import {ref,watch} from 'vue'
import _ from 'lodash'


const props=defineProps({
    show:{
        type:Boolean,
        default:false
    },
    data:{
        type:Object,
        default:{}
    },
    tableData:{
        type:Array,
        default:[]
    },
})

const temData=ref(_.cloneDeep(props.data)||{})

watch(
    ()=>props.show,
    (n)=>{
        if(!n){
            temData.value={}
        }else{
            temData.value=_.cloneDeep(props.data)
        }
    }
)

const list=[
    {
        name:"指标名称",
        key:"EdbName"
    },
    {
        name:"指标ID",
        key:"EdbCode"
    },
    {
        name:"更新频度",
        key:"Frequency"
    },
    {
        name:"单位",
        key:"Unit"
    },
    {
        name:"起始时间",
        key:"StartDate"
    },
    {
        name:"最新日期",
        key:"LatestDate"
    },
    {
        name:"最新值",
        key:"LatestValue"
    },
    {
        name:"最近更新",
        key:"LatestDate"
    },
    /* {
        name:"数据来源",
        key:"SourceName"
    } */
]
const emits = defineEmits(['showSourceDetail'])
function showDetail(){
    emits('showSourceDetail')
}



</script>

<template>
    <div class="edb-info-wrap">
        <div class="top-box">
            <span class="title">指标详情</span>
        </div>
        <div class="con-box">
            <ul class="info-list">
                <li class="item" v-for="item in list" :key="item.key">
                    <span class="lable">{{item.name}}</span>
                    <span class="text">{{data[item.key]}}</span>
                </li>
                <li class="item">
                    <span class="label">数据来源</span>
                    <span class="text">{{data['SourceName']}}</span>
                    <van-icon 
                        name="arrow" 
                        color="#999" 
                        v-if="data['EdbType']===2"
                        @click="showDetail"/>
                </li>
            </ul>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.edb-info-wrap{
    .top-box{
        padding: 32px $page-padding;
        border-bottom: 1px solid $border-color;
        .title{
            font-size: 32px;
            font-weight: 600;
        }
    }
    .con-box{
        max-height: 60vh;
        overflow-y: auto;
        &::-webkit-scrollbar{
            display: none;
        }
    }
    .info-list{
        padding: $page-padding;
        padding-bottom: 40px;
        .item{
            display: flex;
            justify-content: space-between;
            padding: 32px 0;
            border-bottom: 1px solid $border-color;
            .lable{
                flex-shrink: 0;
            }
            .text{
                width: 70%;
                text-align: right;
                color: $font-grey_999;
            }
        }
    }

}
@media screen and (min-width:$media-width){
    .edb-info-wrap{
        display: flex;
        flex-direction: column;
        height: 100%;
        .top-box{
            padding: 16px;
            .title{
                font-size: 18px;
            }
        }
        .con-box{
            flex: 1;
            max-height: 100%;
        }
        .info-list{
            padding: 16px;
            padding-bottom: 20px;
            .item{
                padding: 16px 0;
            }
        }
    }
}
</style>