<template>
  <div class="total-station">
    <div class="content-my">
      <div v-for="item in myItems" :key="item.key" :class="`item ${item.class}`" >
        <span style="color:#d0d0d0; margin: 0 0 0 0">{{ item.label }}</span>
        <div style="margin-left: 20%;">
          <span :style="{ 'color': item.color, 'font-size':'16px', 'font-weight':600}">{{ item.value ? item.value : (item.d ? 0 : '--') }}</span>
          <span style="font-size:16px; margin-left: 8px;">{{ item.d }}</span>
        </div>
      </div>
    </div>

    <!-- <div class="content-left">
      <div v-for="item in leftList" :key="item.key" :class="`item ${item.class}`">
        <span>{{ item.label }}</span>
        <div>
          <span>{{ item.value ? item.value : 0 }}</span
          ><span class="d">{{ item.d }}</span>
        </div>
      </div>
    </div> -->
    <!-- <div class="online-icon"></div> -->
    <!-- <div class="content-right">
      <div v-for="item in rightList" :key="item.key" :class="`item ${item.class}`">
        <span>{{ item.label }}</span>
        <div>
          <span>{{ item.value ? item.value : 0 }}</span
          ><span class="d">{{ item.d }}</span>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    propKey: {
      type: String,
      default: ''
    },
    propData: {
      type: Object,
      default: () => {}
    },
    deviceInfo: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      myItems: [ 
        { color:'#a0f0a0', key: 'runDays', value: 0, label:'场站运行天数', d:'天'},
        // { color:'#a0f0a0', key: 'storage_device_num', value: 0, label:'储能设备数量', d:'个'},
        // { color:'#a0f0a0', key: 'charge_device_num', value: 0, label:'充电设备数量', d:'个'},
        // { color:'#a0f0a0', key: 'solar_device_num', value: 0, label:'光伏设备数量', d:'个'},
        // { color:'#a0f0a0', key: 'solar_elect_grid', value: 0, label:'上网总电量', d:'kWh'},
        { color:'#a0f0a0', key: 'storage_elect_in', value: 0, label:'累计储能总电量', d:'kWh'},
        // { color:'#a0f0a0', key: 'charge_elect_out', value: 0, label:'充电桩充电总电量', d:'kWh'},
        // { color:'#a0f0a0', key: 'solar_elect_gen', value: 0, label:'光伏发电总电量', d:'kWh'},
        { color:'#a0f0a0', key: 'income_elect', value: 0, label:'累计收益总金额', d:'元'},
        // { color:'#a0f0a0', key: 'storage_elect_out', value: 0, label:'储能放电总电量', d:'kWh'},
        { color:'#a0f0a0', key: 'storage_status', value: '空闲', label:'储能状态'},
        { color:'#a0f0a0', key: 'charge_status', value: '空闲', label:'充电状态'},
        { color:'#a0f0a0', key: 'pv_status', value: '离线', label:'光伏状态'},
      ],
    }
  },
  computed: {
  },

  watch: {
    propKey: {
      handler(newVal, oldVal) {
        // if (this.propKey === 'totalStation') this.myItems[0].label = '场站运行天数'
      },
      immediate: true,
    },
    propData: {
      handler(newVal, oldVal) {
        if (newVal && newVal !== oldVal) {
          this.myItems.forEach((item) => {
            item.value = newVal[item.key] || (item.d ? 0 : '')
            if (item.value === '离线' || item.value === '故障') item.color = '#f08080'
            else if (item.value === '空闲') item.color = '#f0f0a0'
            else if (item.value === '充电' || item.value === '放电' || item.value === '发电') item.color = '#f0f0a0'
          })
        }
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.total-station {
  height: calc(100% - 45px);
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 0px;
}

.item {
  height: calc(50% - 10px);
  background: url('../../assets//home/onLineBg.png');
  background-size: contain;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 8px 3px;
  min-width: 115px;
  display: flex;
  flex-direction: column;
  background-color: #072d42;
  & > span:nth-child(1) {
    font-size: 12px;
    margin-bottom: 10px;
  }
  .d {
    margin-left: 1px;
    font-size: 12px;
  }
}
.content-my {
  // background-color: chocolate;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  // align-items: center;
  justify-content: flex-start;
  height: 100%;
  .item {
    width: calc(33% - 6px);
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 8px;
  }
}

.content-left,
.content-right {
  width: 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  height: 100%;
  .item {
    align-items: flex-start;
    justify-content: center;
  }
}

.online-icon {
  width: 20%;
  height: 130px;
  background-image: url('@/assets/home/onLineIcon.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.item-3 {
  margin-right: auto;
}

.item-4 {
  margin-left: auto;
}
</style>
