
<!--首页、地图站点页面顶部信息方块-->
<template>
  <el-row type="flex" >
    <el-card shadow="hover" class="card common-card-container-body-no-padding" v-for="(item,index) in data" :key="index+'zdInfo'" :style="{borderBottomColor:item.color}">
      <div class="info">{{ item.title }}</div>
      <div class="num">{{item.num | formatNumber}}</div>
    </el-card>
  </el-row>
</template>

<script>
import { getSiteTotalInfo } from "@/api/ems/home"
export default {
  data() {
    return {
      data:[{
        title:'站点总数（座）',
        num:'',
        color:'#FFBD00',
        attr:'siteNum'
      },{
        title:'装机功率（MW）',
        num:'',
        color:'#3C81FF',
        attr:'installPower'

      },{
        title:'装机容量（MW）',
        num:'',
        color:'#5AC7C0',
        attr:'installCapacity'

      },{
        title:'总充电量（MWh）',
        num:'',
        color:'#A696FF',
        attr:'totalChargedCap'

      },{
        title:'总放电量（MWh）',
        num:'',
        color:'#A696FF',
        attr:'totalDischargedCap'

      }]
    }
  },
  methods: {
    setData(res = {}){
      this.data.forEach((item)=>{
        item.num =res[item.attr]
      })
    }
  },
  mounted() {
    getSiteTotalInfo().then(response => {
      console.log('单个站点基本信息返回数据',response)
      this.setData(response?.data || {})
    }).catch(()=>{
      this.setData({})
    })
  }
}
</script>
<style scoped lang="scss">
.card{
  min-width: 150px;
  height: 96px;
  margin-right: 27px;
  border-bottom: 4px solid transparent;
  text-align: center;
  box-sizing: border-box;
  padding:0 10px;
  .info{
    color: #666666;
    line-height: 14px;
    padding-top: 18px;
  }
  .num{
    color: rgba(51,51,51,1);
    font-size: 26px;
    line-height: 26px;
    font-weight: 500;
    margin-top: 14px;
  }
}

</style>
