<template>
    <view class="project-cotent">
      
        <!-- <view class="project-basic">
            <view class="project-loc">
            <text style="opacity:0.5">工程位置：{{skInfo.resLoc}}</text>
           </view>
        </view> -->
        <!-- <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> -->
        <view class="total-des">
            <view style="opacity:0.5">工程概况：</view>
            <view>{{skInfo.projOverview}}</view>
        </view>
          <view class="project-basic">
            <view class="project-loc">
            <text style="opacity:0.5">水库水位定位信息</text>
            <view class="sk-location">
                <image src='../../../static/images/loc.png' style="width:20px;height:20px"></image>
                <text style="margin-left:10px">{{skInfo.resLoc}}</text>
                
            </view>
           </view>
        </view>
        <view class="sk-map"></view>
    </view>
</template>
<script>
import moment from 'moment'
const gmObj = {
    "1":"大 (1)型",
    "2":"大 (2)型",
    "3":"中型",
    "4":"小 (1)型",
    "5":"小 (2)型",
    "9":"其他",
}
const bxObj = {
    1:"是",
    0:"否",
}
export default {
    props:{
        skInfo:{
            type:Object,
             default:{}
        }
       
    },
    data() {
        return {
            list:[
                {
                name:"注册登记号",
                key:"regSn"
               },
                {
                name:"所在河流(水系)名称",
                key:"rvName"
               },
                {
                name:"水库模型",
                key:"engScal"
               },
               {
                name:"设计灌溉面积(亩)",
                key:'designIrrArea'
               },
               {
                name:"受益人口(人)",
                key:"feedPop"
               },
               {
                name:"是否病险",
                key:"isDanger"
               },
               {
                name:"开工日期",
                key:"startDate"
               },
               {
                name:"竣工日期",
                key:"compDate"
               },
            ]
        }
    },
    computed:{
        tableData(){  
            return this.list.map(item=>{
                if(item.key == "engScal"){
                    this.skInfo[item.key] = gmObj[this.skInfo[item.key]]
                }
                if(item.key == "isDanger"){
                    this.skInfo[item.key] = bxObj[this.skInfo[item.key]]
                }
                if(item.key == "startDate"){
                    this.skInfo[item.key] = moment(this.skInfo[item.key]).format("YYYY-MM-DD")
                }
                 if(item.key == "compDate"){
                    this.skInfo[item.key] = moment(this.skInfo[item.key]).format("YYYY-MM-DD")
                }
                return {
                    name:item.name,
                    value:this.skInfo[item.key]
                }
            })
        }
    }
}
</script>
<style lang="scss">
    .project-cotent{
        padding: 0px 3px;
        background-color: #f7f7f7;
        max-height: calc(100vh - 40px);
        overflow-y: auto;
        .project-basic{
            background-color: #ffffff;
            padding: 5px;
            margin-top: 5px;
        }
        .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
            }
        }
    }
    .total-des{
        margin-top: 10px;
         background-color: #ffffff;
         padding: 10px;
    }

    .sk-location{
        display: flex;
        align-items: center;
       
    }
     .sk-map{
            width: 100%;
            height: 400px;
            background-color: #ffffff;
        }
</style>