<template>
  <el-card>
    <el-descriptions title="基础信息" :column="4" size="large">
      <el-descriptions-item label="设备名称:">{{ detail.name }}</el-descriptions-item>
      <el-descriptions-item label="S/N码:">{{ detail.sn }}</el-descriptions-item>
      <el-descriptions-item label="状态：">
        <el-tag v-if="detail.status == 1" type="success">正常</el-tag>
        <el-tag v-if="detail.status == 2" type="info">离线</el-tag>
        <el-tag v-if="detail.status == 3" type="danger">报警</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="故障代码：" v-if="detail.status!=1">{{ detail.faultCode }}</el-descriptions-item>
      <el-descriptions-item label="额定功率：">{{ inverterReal.realPower }}KW</el-descriptions-item>
      <el-descriptions-item label="投运时间：">{{ formateD(detail.station.mergeTime) }}</el-descriptions-item>
      <el-descriptions-item label="所属电站：">{{ detail.station.ownerName }}{{ detail.station.stationCode }}</el-descriptions-item>
      <el-descriptions-item :span="3" label="安装地址：">{{ detail.station.province }}{{ detail.station.city }}{{
      detail.station.district }}{{ detail.station.address }}</el-descriptions-item>
      <el-descriptions-item label="质保到期时间:" v-if="detail.warrantyExpires">{{ formateD(detail.warrantyExpires) }}</el-descriptions-item>
      <el-descriptions-item label="质保状态：">
        <el-tag v-if="detail.warrantyFlag == 1" type="success">在保</el-tag>
        <el-tag v-if="detail.warrantyFlag == 0" type="info">过保</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="采集器S/N：">{{ inverterReal.collectorSn }}</el-descriptions-item>
    </el-descriptions>
  </el-card>
  <el-card class="mt10">
    <el-descriptions title="实时信息" :column="4" size="large">
      <el-descriptions-item label="实时功率:">{{ inverterReal.pac }}KW</el-descriptions-item>
      <el-descriptions-item label="日等效小时：:">{{ inverterReal.pwHour }}h</el-descriptions-item>
      <!-- <el-descriptions-item label="组串离散率：">{{ inverterReal.status }}</el-descriptions-item> -->
      <el-descriptions-item label="温度：">{{ inverterReal.temperature }}℃</el-descriptions-item>
      <el-descriptions-item label="当日发电:">{{ zoom(inverterReal.etd) }}KWh</el-descriptions-item>
      <el-descriptions-item label="当月发电:">{{ zoom(inverterReal.etm) }}KWh</el-descriptions-item>
      <el-descriptions-item label="当年发电:">{{ zoom(inverterReal.ety) }}KWh</el-descriptions-item>
      <el-descriptions-item label="累计发电:">{{ zoom(inverterReal.eto) }}KWh</el-descriptions-item>
      <!-- <el-descriptions-item label="报警信息：:">{{ inverterReal.sn }}</el-descriptions-item> -->

      <el-descriptions-item label="功率因数:">{{ inverterReal.powerFactor }}</el-descriptions-item>
      <el-descriptions-item label="无功功率:">{{ inverterReal.reactivePower }}{{ inverterReal.reactivePowerStr }}</el-descriptions-item>
      <el-descriptions-item label="视在功率:">{{ inverterReal.apparentPower }}{{ inverterReal.apparentPowerStr }}</el-descriptions-item>
    </el-descriptions>
  </el-card>
  <el-card class="mt10">
    <el-descriptions title="设备数据：" :column="4" size="large"></el-descriptions>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-table :data="pvList" border size="small">
          <el-table-column label="直流" align="center">
            <el-table-column label="" align="center" prop="name" />
            <el-table-column label="电压" align="center" prop="dy">
              <template #default="scope">
                {{ scope.row.dy }} V
              </template>
            </el-table-column>
            <el-table-column label="电流" align="center" prop="dl">

              <template #default="scope">
                {{ scope.row.dl }} A
              </template>
            </el-table-column>
            <el-table-column label="功率" align="center" prop="dl">

              <template #default="scope">
                {{ (scope.row.dl * scope.row.dy).toFixed(3) }} W
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12">
        <el-table v-if="detail.brand==0" :data="uvwList" border size="small">
          <el-table-column label="交流" align="center">
            <el-table-column label="" align="center" prop="name" />
            <el-table-column label="电压" align="center" prop="dy">

              <template #default="scope">
                {{ scope.row.dy }} V

              </template>
            </el-table-column>
            <el-table-column label="电流" align="center" prop="dl">

              <template #default="scope">
                {{ scope.row.dl }} A
              </template>
            </el-table-column>
            <el-table-column label="频率" align="center" prop="dl">
              <template #default="scope">
                {{ (scope.row.hz) }} 
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>

        <el-table v-if="detail.brand!=0" :data="uvwList" border size="small">
          <el-table-column label="交流" align="center">
            <el-table-column label="" align="center" prop="name" />
            <el-table-column label="电压" align="center" prop="dy">

              <template #default="scope">
                {{ scope.row.dy }} V

              </template>
            </el-table-column>
            <el-table-column label="电流" align="center" prop="dl">

              <template #default="scope">
                {{ scope.row.dl }} A
              </template>
            </el-table-column>
            <el-table-column label="功率" align="center" prop="dl">
              <template #default="scope">
                {{ (scope.row.dl * scope.row.dy).toFixed(3) }} W
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { getDetail } from "@/api/nh/device";
import { dateFormat } from '@/utils/date';
import func from '@/utils/func';

export default {
  name: 'WeatherComponent',
  props: {
    deviceId: String
  },
  watch: {
    'deviceId'() {
      console.log("===deviceId=watch=" + this.deviceId)
      this.initDeviceDetail(this.deviceId);
    }
  },
  data() {
    return {
      detail: { station: {}, inverterData: {} },
      pvList: [],
      uvwList: [],
      inverterReal: { "pac": "0", "pwHour": 0, "realPower": "0", "power": "0", "etd": 0, "etm": 0, "eto": 0, "ety": 0, "dcPac": "0", "collectorSn": "", "fac": 0, "pvModules": "", "mpptModules": "", "uvwModules": "", "temperature": 0 }
    }
  },
  mounted() {
    this.initDeviceDetail(this.deviceId);
  },
  methods: {
    zoom(num){
        return func.zoomNum(num,1,3);
    },
    formateD(ietm) {
      return dateFormat(new Date(ietm), "yyyy年MM月dd日");
    },
    initDeviceDetail(id) {
      getDetail(id).then(res => {
        this.detail = res.data.data;
        this.inverterReal = this.detail.inverterData;
        try {
          if (this.detail.inverterData) {
            this.formatePVData(this.detail.monitorInverter);
          }
        } catch (e) {
          console.log(e)
        }


      });
    },
    formatePVData(data) {
      if (!data || !data.pvModules || !data.acModules) {
        return;
      }
      let pvStr = data.pvModules;
      this.pvList = [];
      if (pvStr != null && pvStr.trim().length > 0) {
        pvStr.split("|").forEach((e, i) => {
          let eArr = e.split(":");
          let pvItem = {};
          pvItem.name = 'PV' + (i + 1);
          pvItem.dy = eArr[0];
          pvItem.dl = eArr[1];
          this.pvList.push(pvItem);
        })
        console.log(this.pvList);
      }

      let uvwStr = data.acModules;
      this.uvwList = [];
      if (uvwStr != null && uvwStr.trim().length > 0) {
        uvwStr.split("|").forEach((e, i) => {
          let eArr = e.split(":");
          let uvwItem = {};
          if(data.sysType=='0'){
            uvwItem.name = i == 0 ? 'U' : (i == 1 ? 'V' : 'W');
            uvwItem.hz = data.fac+"Hz";
          }else{
            uvwItem.name = i == 0 ? 'R' : (i == 1 ? 'S' : 'T');
          }
          
          uvwItem.dy = eArr[0];
          uvwItem.dl = eArr[1];
          this.uvwList.push(uvwItem);
        })
        console.log(this.uvwList);
      }
    }
  }
}
</script>

<style scoped>
.mt10 {
  margin-top: 10px;
}
</style>