<template>
  <div class="onLine">
    <div class="content-my">
      <div v-for="item in myItems" :key="item.key" :class="`item ${item.class}`" >
        <span style="height: 50%; color:#d0d0d0; margin:0 0 0 0">{{ item.label }}</span>
        <div style="height: 50%; margin-left: 20%;">
          <span style="color:#a0f0a0; font-size:16px; font-weight:600;">{{ item.value ? item.value : 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: [ 
        { key: 'runDays', value: 0, label:'系统运行天数', d:'天'},
        { key: 'storage_device_num', value: 0, label:'储能设备数量', d:'个'},
        { key: 'charge_device_num', value: 0, label:'充电设备数量', d:'个'},
        { key: 'solar_device_num', value: 0, label:'光伏设备数量', d:'个'},
        { key: 'solar_elect_grid', value: 0, label:'上网总电量', d:'kWh'},
        { key: 'storage_elect_in', value: 0, label:'储能充电总电量', d:'kWh'},
        { key: 'charge_elect_out', value: 0, label:'充电桩充电总电量', d:'kWh'},
        { key: 'solar_elect_gen', value: 0, label:'光伏发电总电量', d:'kWh'},
        { key: 'income_elect', value: 0, label:'累计收益总金额', d:'元'},
        { key: 'storage_elect_out', value: 0, label:'储能放电总电量', d:'kWh'},
      ],

      curList: [
        {
          key: 'runDays', //根据launch_date字段计算得出
          value: 20,
          d: '天',
          label: '系统运行天数',
          class: 'item-2'
        },
        {
          key: 'income_total',
          value: 10,
          d: '元',
          label: '累计收益',
          class: 'item-2'
        },
        {
          key: 'solar_device_num',
          value: 20,
          d: '',
          label: '光伏设备数量',
          class: 'item-3'
        },
        {
          key: 'storage_device_num',
          value: 20,
          d: '',
          label: '储能预制舱数量',
          class: 'item-4'
        },
        {
          key: 'solar_elect_gen',
          value: 20,
          d: '',
          label: '光伏设备累计发电量',
          class: 'item-5'
        },
        {
          key: 'capacity_total',
          value: 20,
          d: '',
          label: '储能总容量',
          class: 'item-6'
        }
      ]
    }
  },
  computed: {
    leftList() {
      return this.curList.filter((_, index) => index % 2 === 0).slice(0, 3) // 左列取前3个偶数索引
    },
    rightList() {
      return this.curList.filter((_, index) => index % 2 !== 0).slice(0, 3) // 右列取前3个奇数索引
    }
  },

  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] || 0
          })
        }
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {},
  methods: {}
}
</script>

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

.item {
  height: 28%;
  background: url('../../assets//home/onLineBg.png');
  background-size: contain;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 3px 3px;
  // min-width: 100px;
  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(25% - 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;
  }
}
// .content-left{
//  align-items: self-end;
// }
// .content-right{
//   align-items:flex-start;

// }
.content-middle {
  width: 120px;
}

.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>
