<template>
  <div class="powerdist">
    <div class="powerdist-header">
      <div>室内环境</div>
      <div class="powerdist-env">
        <div>
          <img src="@/assets/images/mgr/temperature.svg" alt="">
          <div>
            <span>温度</span>
            <span>62.5°C</span>
          </div>
        </div>
        <div>
          <img src="@/assets/images/mgr/humidity.svg" alt="">
          <div>
            <span>湿度</span>
            <span>77.88RH</span>
          </div>
        </div>
        <div>
          <img src="@/assets/images/mgr/smoke.svg" alt="">
          <div>
            <span>烟感</span>
            <span>正常</span>
          </div>
        </div>
        <div>
          <img src="@/assets/images/mgr/water.svg" alt="">
          <div>
            <span>水侵</span>
            <span>正常</span>
          </div>
        </div>
      </div>
    </div>
    <div class="powerdist-body">
      <Panel title="变压器">
        <div class="transformer">
          <el-select v-model="transformer" size="mini" @change="getTransformerInfo">
            <el-option v-for="item in transformerOptions" :key="item.deviceCode" :label="item.deviceName"
              :value="item.deviceCode"></el-option>
          </el-select>
          <div class="transformer-info">
            <!-- <div class="info-header">
              <span>A相</span>
              <span>B相</span>
              <span>C相</span>
            </div> -->
            <img src="@/assets/images/mgr/line.svg" class="lineImg" alt="">
            <div class="arrowImg">
              <span>{{ transformerInfo.ratedVoltage }}</span>
              <img src="@/assets/images/mgr/arrow.svg" alt="">
            </div>
            <img class="transformerImg" src="@/assets/images/mgr/transformer.png" alt="">
          </div>
          <el-descriptions class="custom-desc" title="设备参数" :column="2" size="mini" border>
            <el-descriptions-item label="产品型号">{{ transformerInfo.deviceSpec }}</el-descriptions-item>
            <el-descriptions-item label="额定容量">{{ transformerInfo.ratedCapacity }}</el-descriptions-item>
            <el-descriptions-item label="额定电压">{{ transformerInfo.ratedVoltage }}</el-descriptions-item>
            <el-descriptions-item label="额定频率">{{ transformerInfo.ratedFrequency }}</el-descriptions-item>
            <el-descriptions-item label="相数">{{ transformerInfo.phaseNumber }}</el-descriptions-item>
            <el-descriptions-item label="生产厂家">{{ transformerInfo.deviceBrand }}</el-descriptions-item>
          </el-descriptions>
          <alarm :alarmData="transformerAlarmData" />
        </div>
      </Panel>
      <Panel title="配电柜" background="linear-gradient( 180deg, #F1FEFF 0%, #FFFFFF 100%)">
        <div class="power">
          <el-select v-model="powerCode" size="mini" @change="powerChange">
            <el-option v-for="item in powerList" :key="item.deviceCode" :label="item.deviceName"
              :value="item.deviceCode"></el-option>
          </el-select>
          <div class="power-info">
            <div>
              <span>{{ powerInfo.la || '--' }}A</span>
              <span>A相</span>
            </div>
            <div>
              <span>{{ powerInfo.lb || '--' }}A</span>
              <span>B相</span>
            </div>
            <div>
              <span>{{ powerInfo.lc || '--' }}A</span>
              <span>C相</span>
            </div>
          </div>
          <div class="power-data">
            <div class="power-data-title">实时数据</div>
            <div class="power-data-body">
              <div>
                <div class="data-name">功率因素</div>
                <div class="data-num">{{ powerInfo.pf || '--' }}</div>
              </div>
              <div>
                <div class="power-data-row">
                  <div>
                    <span class="data-name">A相电压</span>
                    <span class="data-num">{{ powerInfo.ua || '--' }}V</span>
                  </div>
                  <div>
                    <span class="data-name">B相电压</span>
                    <span class="data-num">{{ powerInfo.ub || '--' }}V</span>
                  </div>
                  <div>
                    <span class="data-name">C相电压</span>
                    <span class="data-num">{{ powerInfo.uc || '--' }}V</span>
                  </div>
                </div>
                <div class="power-data-row">
                  <div>
                    <span class="data-name">A相有功功率</span>
                    <span class="data-num">{{ powerInfo.pa || '--' }}W</span>
                  </div>
                  <div>
                    <span class="data-name">B相有功功率</span>
                    <span class="data-num">{{ powerInfo.pb || '--' }}W</span>
                  </div>
                  <div>
                    <span class="data-name">C相有功功率</span>
                    <span class="data-num">{{ powerInfo.pc || '--' }}W</span>
                  </div>
                </div>
                <div class="power-data-row">
                  <div>
                    <span class="data-name">A相无功功率</span>
                    <span class="data-num">{{ powerInfo.ua || '--' }}W</span>
                  </div>
                  <div>
                    <span class="data-name">B相无功功率</span>
                    <span class="data-num">{{ powerInfo.ub || '--' }}W</span>
                  </div>
                  <div>
                    <span class="data-name">C相无功功率</span>
                    <span class="data-num">{{ powerInfo.uc || '--' }}W</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <alarm :alarmData="powerAlarmData" @handlerAlarm="handlerPowerAlarm" />
        </div>

      </Panel>
      <Panel title="器件" background="linear-gradient( 180deg, #FFFBF1 0%, #FFFFFF 100%)">
        <div class="switch">
          <img class="rightArrow" src="@/assets/images/mgr/line2.svg" alt="">
          <el-table :data="eqptList" style="width: 100%">
            <el-table-column prop="psName" show-overflow-tooltip label="支路">
              <template slot-scope="scope">
                <span>{{ scope.row.psName + "-" + scope.row.compoTag }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="ratedCurrent" align="center" width="100" label="额定电流">
            </el-table-column>
            <el-table-column prop="ratedVoltage" align="center" width="100" label="额定电压">
            </el-table-column>
            <el-table-column align="center" label="开关" width="60">
              <template slot-scope="scope">
                <el-switch :value="scope.row.onOffState != 'off'" size="mini">
                </el-switch>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </Panel>
    </div>
  </div>
</template>
<script>
import {listAlarmInfo, updateAlarmInfo} from '@/api/alarm/alarm-info.js'
import {getByCondition, getDeviceDetail, getObjAttr, getByFlowRel, getNewIndex, listByDevice} from '@/api/device/device.js'
export default {
  name: 'Powerdist',
  data () {
    return {
      transformer: 1,
      transformerOptions: [],
      transformerInfo: {},
      transformerAlarmData: [
        {
          name: '变压器油温值：90.3℃',
          type: '过温预警',
          createTime: '08-25 17:51:35'
        },
        {
          name: '变压器油温值：90.3℃',
          type: '过温预警',
          createTime: '08-25 17:51:35'
        },
        {
          name: '变压器油温值：90.3℃',
          type: '过温预警',
          createTime: '08-25 17:51:35'
        },
        {
          name: '变压器油温值：90.3℃',
          type: '过温预警',
          createTime: '08-25 17:51:35'
        },
        {
          name: '变压器油温值：90.3℃',
          type: '过温预警',
          createTime: '08-25 17:51:35'
        },
        {
          name: '变压器油温值：90.3℃',
          type: '过温预警',
          createTime: '08-25 17:51:35'
        }
      ],
      powerAlarmData: [],
      powerCode: '',
      powerList: [],
      powerInfo: {},
      eqptList: []
    }
  },
  components: {
    Panel: () => import('./components/panel'),
    alarm: () => import('./components/alarm.vue')
  },
  mounted () {
    this.getTransformerList()
  },
  methods: {
    getPowerAlarmList () {
      listAlarmInfo({
        objType: 4,
        objCode: this.powerCode,
        alarmStateList: [0, 1]
      }).then(({rows}) => {
        this.powerAlarmData = rows.map(item => ({
          ...item,
          name: item.objName,
          type: item.alarmMsg,
          createTime: item.alarmTime
        }))
      })
    },
    getPowerList () {
      getByFlowRel({
        upstreamObjType: 2,
        upstreamObjCode: this.transformer,
        deviceSubCategory: 'W2',
        psCode: 'AP'
      }).then(({data}) => {
        this.powerList = data || []
        if (data.length) {
          this.powerCode = data[0].deviceCode
        }
        this.powerChange()
      })
    },
    getTransformerList () {
      getByCondition({
        deviceSubCategory: 'W2',
        psCode: 'T'
      }).then(({code, data}) => {
        if (code === 200) {
          this.transformerOptions = data
          if (data && data.length) {
            this.transformer = data[0].deviceCode
          }
          this.getTransformerInfo()
        }
      })
    },
    getTransformerInfo () {
      getDeviceDetail({deviceCode: this.transformer}).then(({code, data}) => {
        if (code === 200) {
          this.transformerInfo = data
          this.getTransformerAttr()
          this.getPowerList()
        }
      })
    },
    getTransformerAttr () {
      getObjAttr({
        objType: 2,
        objCode: this.transformer
      }).then(({code, data}) => {
        if (code === 200) {
          if (data.attrs && data.attrs.length) {
            const attrValuesObj = {};
            (data.attrValues || []).forEach(item => {
              attrValuesObj[item.attrKey] = item.attrValue
            })
            data.attrs.forEach((item, index) => {
              this.$set(this.transformerInfo, item.attrKey, (attrValuesObj[item.attrKey] || '--') + item.attrUnit)
            })
          }
        }
      })
    },

    getPowerInfo () {
      const [{deviceCode, refArea}] = this.powerList.filter(item => item.deviceCode === this.powerCode)
      getNewIndex({
        areaCode: refArea,
        objType: '2',
        objCode: deviceCode
      }).then(({code, data}) => {
        if (code === 200) {
          this.powerInfo = data || {}
        }
      })
    },
    getEqptList () {
      this.eqptList = []
      listByDevice({deviceCode: this.powerCode}).then(({data}) => {
        const tmpData = (data || []).map(item => ({
          ...item,
          onOffState: 'off',
          ratedCurrent: '',
          ratedVoltage: '',
        }))
        tmpData.forEach(async item => {
          const {code, data: subData} = await getObjAttr({
            objType: 3,
            objCode: item.compoCode
          })
          if (code === 200) {
            if (subData.attrs && subData.attrs.length) {
              let valueObj = {};
              (subData.attrValues || []).forEach(el => {
                valueObj[el.attrKey] = el.attrValue
              })
              subData.attrs.forEach(el => {
                this.$set(item, el.attrKey, (valueObj[el.attrKey] || '--') + el.attrUnit)
              })
            }
          }
        })
        this.eqptList = tmpData
      })

    },
    powerChange () {
      this.getPowerInfo()
      this.getPowerAlarmList()
      this.getEqptList()
    },
    handlerPowerAlarm (row) {
      updateAlarmInfo({
        id: row.id,
        alarmState: '2'
      }).then(({code}) => {
        if (code === 200) {
          this.$modal.msgSuccess('处理成功')
          this.getPowerAlarmList()
        } else {
          this.$modal.msgError('处理失败')
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.powerdist {
  background: #f6f7f9;
  padding: 10px;
  min-height: inherit;
  display: flex;
  flex-direction: column;

  .powerdist-header {
    background: linear-gradient(180deg, #f1f5ff 0%, #ffffff 100%);
    border-radius: 8px;
    border: 3px solid #ffffff;
    padding: 20px;

    >div:first-child {
      font-weight: 500;
      font-size: 20px;
      color: #212121;
    }

    .powerdist-env {
      display: flex;
      color: #515a6e;
      font-size: 14px;
      justify-content: space-evenly;

      >div {
        display: flex;
        align-items: flex-end;

        img {
          margin-right: 5px;
          height: 30px;
        }

        >div {
          display: flex;
          flex-direction: column;
          font-weight: 500;
          font-size: 18px;
          color: #405383;

          span:first-child {
            font-weight: 400;
            font-size: 14px;
            color: #848ea6;
            margin-bottom: 5px;
          }
        }
      }
    }
  }

  .powerdist-body {
    flex: 1;
    margin-top: 10px;
    display: flex;

    >div {
      flex: 1;

      &:not(:first-child) {
        margin-left: 10px;
      }
    }

    .transformer {
      padding: 10px;

      .transformer-info {
        text-align: center;
        margin-top: 50px;
        position: relative;
      }

      .transformerImg {
        height: 150px;
      }

      .lineImg {
        position: absolute;
        width: 275px;
        right: -38px;
        top: -20px;
      }

      .arrowImg {
        position: absolute;
        left: 5%;
        top: 25%;

        img {
          width: 80px;
        }

        span {
          position: absolute;
          top: 10px;
          left: 10px;
        }
      }

      .info-header {
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 14px;

        span {
          margin-left: 5px;
          font-weight: bold;
        }
      }

      .info-right {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: 14px;

        >div {
          display: flex;
          align-items: center;
          margin-top: 5px;
        }
      }
    }

    .custom-desc {
      ::v-deep .el-descriptions__header {
        margin-bottom: 5px;
        font-weight: 600;
        font-size: 14px;
        color: #212121;
      }

      ::v-deep .el-descriptions-item__label {
        background: #f4f5fa;
        font-weight: 400;
        font-size: 12px;
        color: #212121;
      }
    }

    .power {
      padding: 10px;

      .power-info {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        padding: 0 10px;

        >div {
          flex: 1;
          background: url('~@/assets/images/mgr/backA.svg') no-repeat;
          background-position: center;
          display: flex;
          flex-direction: column;
          justify-content: center;
          height: 100px;
          text-align: center;
          font-weight: 400;
          font-size: 12px;
          color: #6a6a6a;

          &:nth-child(2) {
            background: url('~@/assets/images/mgr/backB.svg') no-repeat;
            background-position: center;
            background-size: 70%;
          }

          &:nth-child(3) {
            background: url('~@/assets/images/mgr/backC.svg') no-repeat;
            background-position: center;
            background-size: 70%;
          }

          span:last-of-type {
            margin-top: 5px;
            font-size: 13px;
            color: #212121;
          }
        }
      }

      .power-data {
        margin-top: 20px;

        .power-data-title {
          background: #f4f5fa;
          padding: 8px 10px;
          font-weight: 600;
          font-size: 14px;
          color: #212121;
        }

        .power-data-body {
          border: 1px solid #f0f1f2;
          display: flex;
          align-items: center;
          padding: 10px 20px;
          text-align: center;

          >div:last-of-type {
            flex: 1;
            margin-left: 30px;
          }

          .power-data-row {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;

            >div {
              display: flex;
              flex-direction: column;
            }
          }

          .data-name {
            font-weight: 400;
            font-size: 13px;
            color: #212121;
          }

          .data-num {
            margin-top: 4px;
            font-weight: 400;
            font-size: 13px;
            color: #6a6a6a;
          }
        }
      }
    }

    .switch {
      padding: 10px;
      position: relative;

      .rightArrow {
        position: absolute;
        top: 65px;
        left: -20px;
        z-index: 999;
      }
    }
  }
}
</style>
