<template >
      <view class="project-des" >
            <view v-for="(item,index) in tableData" :key="index" :style="index % 2 != 0 ? 'width:150px;':'width:197px;'">
               <view style="display:flex;align-items:center;margin:15px 0px;">
                 <view class="circle-dot"></view>
                <view class="label-name">
                    <text style="opacity:0.5">{{item.name}}</text>
                    <text>{{item.value||"-"}}</text>
                </view>
               </view>
            </view>
        </view>
</template>
<script>
export default {
      props:{
        skInfo:{
            type:Object,
             default:{}
        }
       
    },
     data() {
        return {
            list:[
                {
                name:"坝址以上流域面积(km²)",
                key:"watShedArea"
               },
                {
                name:"坝顶高程(m)",
                key:"crestElev"
               },
                {
                name:"校核洪水位(m)",
                key:"calFloodLev"
               },
               {
                name:"总库容(万m³)",
                key:"totCap"
               },
               {
                name:"设计洪水位(m)",
                key:"desFloodLev"
               },
               {
                name:"调洪库容(万m³)",
                key:"storFlCap"
               },
               {
                name:"正常蓄水位(m)",
                key:"normWatLev"
               },
                 {
                name:"兴利库容(万m³)",
                key:"benResCap"
               },
                  {
                name:"防洪高水位(m)",
                key:"uppLevFlco"
               },
                 {
                name:"防洪库容(万m³)",
                key:"flcoCap"
               },
                {
                name:"汛限水位(m)",
                key:"flLowLimLev"
               },
               {
                name:"死水位(m)",
                key:"deadLev"
               },
                {
                name:"死库容(万m³)",
                key:"deadCap"
               },
               {
                name:"堰顶高程(m)",
                key:"wcrstel"
               },
            ]
        }
    },
     computed:{
        tableData(){  
            return this.list.map(item=>{
                return {
                    name:item.name,
                    value:this.skInfo[item.key]
                }
            })
        }
    }
}
</script>
<style lang="scss">
        .project-des{
            display: flex;
            flex-wrap: wrap;
            border: 1px solid #f2f2f2;
             background-color: #ffffff;
             padding: 0 10px;
            .circle-dot{
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: #409eff;
                margin-left: 10px;
            }
            .label-name{
                display: flex;
                flex-direction: column;
                align-items: center;
                
                flex:1
            }
        }
</style>