<template>
  <div>
    <div class="home">
      <div id="dlxt">
        <div class="dlxt-change">
          <span @click="changeBtn(1)" :class="showBtn == 1 ? 'active' : ''">{{ getSubstationName(1) }}</span>
          <span @click="changeBtn(2)" :class="showBtn == 2 ? 'active' : ''">{{ getSubstationName(2) }}</span>
        </div>
        <div class="dlxt-bg dlxt-bg1">
          <div v-for="(status, index) in statusNames" :key="index" class="dlxt-val" :class="`dlxt-val${index + 1}`" :style="{ color: getColor(status) }">
            ●{{ getLabel(status) }}
          </div>
          
          <div v-for="(item, index) in eleName" :key="index" class="dlxt-tit" :class="`dlxt-tit${index + 1}`"><p>{{ item }}</p></div>
          
          <div v-for="(params, index) in formattedParameters" :key="index" class="dlxt-list" :class="`dlxt-list${index + 1}`">
            <p v-for="param in params" :key="param.name">
              <span>{{ param.name }}</span>:<span>{{ param.value }}</span><span>{{ param.unit }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { eleAll } from "@/api/tyler/screen";

export default {
  name: "dlxt",
  dicts: ['power_val'],
  data() {
    return {
      showBtn: 1,
      eleName: [],
      colors: ['#20F09F', '#00FCFF', '#00C6FF'],
      eleAllData: [],
      substations: [],
      formattedParameters: [],
      statusNames: [] // 用于存储 eleboxStatusName
    };
  },
  created() {
    this.eleAllList();
  },
  methods: {
    changeBtn(val) {
      this.showBtn = val;
      const substation = this.substations.find(s => s.index === val);
      if (substation) {
        this.eleName = substation.eleNames;
        this.formattedParameters = substation.parameters;
        this.statusNames = substation.statusNames;
      }
    },
    getSubstationName(val) {
      const substation = this.substations.find(s => s.index === val);
      return substation ? substation.name : 'XX变电站';
    },
    getLabel(value) {
      const item = this.dict.type.power_val.find(item => item.value === value);
      return item ? item.label : '暂无数据';
    },
    getColor(value) {
      const index = this.dict.type.power_val.findIndex(item => item.value === value);
      return index !== -1 && this.colors[index] ? this.colors[index] : '#fff'; 
    },
    eleAllList() {
      eleAll().then(res => {
        this.eleAllData = res.data;
        this.processData(res.data);
      });
    },
    processData(data) {
      this.substations = data.map((item, index) => {
        const eleNames = item.data.eleboxNameList.map(ele => ele.eleboxName);
        const parameters = item.data.eleboxNameList.map(ele => {
          return ele.eleboxParameterList.map(param => ({
            name: param.eleboxParameterName.toLowerCase(),
            value: param.eleboxParameterValue,
            unit: param.eleboxParameterUnits
          }));
        });
        const statusNames = item.data.eleboxNameList.map(ele => ele.eleboxStatusName);
        
        return {
          index: index + 1,
          name: item.name,
          eleNames,
          parameters,
          statusNames
        };
      });
      
      // 默认显示第一个变电站的数据
      if (this.substations.length > 0) {
        this.eleName = this.substations[0].eleNames;
        this.formattedParameters = this.substations[0].parameters;
        this.statusNames = this.substations[0].statusNames;
      }
    }
  }
};
</script>

<style scoped lang="scss">
p{margin: 0;padding: 0;}
.home {
  width: 100%;
  height: 100%;
  background: url("~@/assets/images/screen/psxt/bg.png") no-repeat center;
  background-size: 100%;
  padding-top: 160px;
  overflow: hidden;
  pointer-events: auto;
  #dlxt{
    .dlxt-change{
      width: 100%;
      height: 36px;
      display: flex;
      justify-content: center;
      color:#fff;
      align-items: center;
      margin-bottom: 32px;
      span{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 124px;
        height: 36px;
        font-size: 20px;
        font-weight: bold;
        background-color: rgba(10, 30, 54,.5);
        border: 1px solid #00FCFF;
        cursor: pointer;
        &.active{
          background: linear-gradient(0deg, #1679B6 0%, #00DEE9 100%);
          border: 1px solid #00FCFF;
        }
        
      }
    }
    .dlxt-bg{
      width: 1830px;
      height: 792px;
      margin: 0 auto;
      background: url("~@/assets/images/screen/dlxt/bg2.png") no-repeat center;
      background-size: 100%;
      color:#fff;
      position: relative;
      .dlxt-val{
        position: absolute;
        top:100px;
      }
      .dlxt-tit{
        position: absolute;
        top:270px;
        width: 230px;
        height: 38px;
        background: url("~@/assets/images/screen/dlxt/title.png") no-repeat center;
        background-size: 100%;
        p{
          font-weight: bold;
          font-size: 20px;
          color: #FFFFFF;
          line-height: 38px;
          text-align: center;
          background: linear-gradient(180deg, #FFFFFF 0%, #00CBFF 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
      .dlxt-list{
        width: 180px;
        border: 2px solid #00CCFF;
        padding: 13px 20px;
        box-sizing: border-box;
        position: absolute;
        top:340px;
        display: flex;
        flex-direction: column;
        font-weight: 400;
        font-size: 18px;
        color: #11E0FF;
        line-height: 30px;
      }
    }
    .dlxt-bg1{
      .dlxt-val1{
        left:190px;
      }
      .dlxt-val2{
        left:490px;
      }
      .dlxt-val3{
        left:790px;
      }
      .dlxt-val4{
        left:970px;
      }
      .dlxt-val5{
        left:1270px;
      }
      .dlxt-val6{
        left:1570px;
      }

      .dlxt-tit1{
        left: 6px;
      }
      .dlxt-tit2{
        left: 300px;
      }
      .dlxt-tit3{
        left: 600px;
      }
      .dlxt-tit4{
        left: 1000px;
      }
      .dlxt-tit5{
        left: 1300px;
      }
      .dlxt-tit6{
        left: 1600px;
      }
      .dlxt-list1{
        left: 30px;
      }
      .dlxt-list2{
        left: 330px;
      }
      .dlxt-list3{
        left: 630px;
      }
      .dlxt-list4{
        left: 1030px;
      }
      .dlxt-list5{
        left: 1330px;
      }
      .dlxt-list6{
        left: 1630px;
      }


    }
  }

}

</style>
