<template>
  <div v-loading="loading" class="ems">
    <!--    <div-->
    <!--        v-for="(item, index) in list"-->
    <!--        :key="index + 'PcsHome'"-->
    <!--        style="margin-bottom: 25px"-->
    <!--    >-->
    <!--      <el-card-->
    <!--          :class="{-->
    <!--          'warning-card-container': item.workStatus === '1',-->
    <!--          'timing-card-container': item.workStatus === '2',-->
    <!--          'running-card-container': !['1', '2'].includes(item.workStatus),-->
    <!--        }"-->
    <!--          class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"-->
    <!--          shadow="always"-->
    <!--      >-->
    <!--        &lt;!&ndash;        标题&ndash;&gt;-->
    <!--        <div slot="header">-->
    <!--          <span class="large-title"-->
    <!--          >{{ item.deviceName }}</span-->
    <!--          >-->
    <!--          <div class="info">-->
    <!--            <div>-->
    <!--              {{-->
    <!--                $store.state.ems.workStatusOptions[item.workStatus]-->
    <!--              }}-->
    <!--            </div>-->
    <!--            <div>数据更新时间：{{ item.dataUpdateTime }}</div>-->
    <!--          </div>-->
    <!--          <div class="alarm">-->
    <!--            <el-button type="primary" size="small" style="margin-right:20px;" @click="pointDetail(item,'point')">-->
    <!--              详细-->
    <!--            </el-button>-->
    <!--            <el-badge :value="item.alarmNum || 0" class="item">-->
    <!--              <i-->
    <!--                  class="el-icon-message-solid alarm-icon"-->
    <!--                  @click="pointDetail(item,'alarmPoint')"-->
    <!--              ></i>-->
    <!--            </el-badge>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--        &lt;!&ndash;        工作状态&ndash;&gt;-->
    <!--        <div class="descriptions-main">-->
    <!--          <el-descriptions :colon="false" :column="5" direction="vertical">-->
    <!--            <el-descriptions-item-->
    <!--                :contentClassName="`descriptions-direction ${-->
    <!--                            item.workStatus === '0' ? 'save' : 'danger'-->
    <!--                          }`"-->
    <!--                :span="1"-->
    <!--                label="工作状态"-->
    <!--                labelClassName="descriptions-label"-->
    <!--            >{{-->
    <!--                $store.state.ems.workStatusOptions[item.workStatus]-->
    <!--              }}-->
    <!--            </el-descriptions-item-->
    <!--            >-->
    <!--            <el-descriptions-item-->
    <!--                :span="1"-->
    <!--                contentClassName="descriptions-direction"-->
    <!--                label="工作模式"-->
    <!--                labelClassName="descriptions-label"-->
    <!--            >-->
    <!--              todo 手动/自动-->
    <!--              {{-->
    <!--                $store.state.ems.gridStatusOptions[item.gridStatus]-->
    <!--              }}-->

    <!--            </el-descriptions-item-->
    <!--            >-->
    <!--            <el-descriptions-item-->
    <!--                :span="1"-->
    <!--                contentClassName="descriptions-direction"-->
    <!--                label="并网状态"-->
    <!--                labelClassName="descriptions-label"-->
    <!--            >{{-->
    <!--                $store.state.ems.gridStatusOptions[item.gridStatus]-->
    <!--              }}-->
    <!--            </el-descriptions-item-->
    <!--            >-->
    <!--            <el-descriptions-item-->
    <!--                :span="1"-->
    <!--                contentClassName="descriptions-direction"-->
    <!--                label="告警状态"-->
    <!--                labelClassName="descriptions-label"-->
    <!--            >-->
    <!--              todo-->
    <!--              &lt;!&ndash;-->
    <!--              {{-->
    <!--                              $store.state.ems.warnOptions[item.warnMode]-->
    <!--                            }}&ndash;&gt;-->
    <!--            </el-descriptions-item-->
    <!--            >-->
    <!--            <el-descriptions-item-->
    <!--                :contentClassName="`descriptions-direction ${-->
    <!--                item.deviceStatus === '2' ? 'save' : 'danger'-->
    <!--              }`"-->
    <!--                :span="1"-->
    <!--                label="设备状态"-->
    <!--                labelClassName="descriptions-label"-->
    <!--            >{{-->
    <!--                $store.state.ems.deviceStatusOptions[item.deviceStatus]-->
    <!--              }}-->
    <!--            </el-descriptions-item-->
    <!--            >-->
    <!--          </el-descriptions>-->
    <!--        </div>-->
    <!--        &lt;!&ndash;        用电量&ndash;&gt;-->
    <!--        <div class="descriptions-main descriptions-main-bg-color">-->
    <!--          <el-descriptions :colon="false" :column="5" direction="vertical">-->
    <!--            <el-descriptions-item-->
    <!--                :span="5"-->
    <!--                contentClassName="descriptions-direction"-->
    <!--                label="当日用电量："-->
    <!--                labelClassName="descriptions-label"-->
    <!--            >-->
    <!--            </el-descriptions-item-->
    <!--            >-->
    <!--            <el-descriptions-item-->
    <!--                :span="1"-->
    <!--                contentClassName="descriptions-direction"-->
    <!--                label="电网用电量"-->
    <!--                labelClassName="descriptions-label"-->
    <!--            >-->
    <!--            </el-descriptions-item-->
    <!--            >-->
    <!--            <el-descriptions-item-->
    <!--                :span="1"-->
    <!--                contentClassName="descriptions-direction"-->
    <!--                label="储能放电量"-->
    <!--                labelClassName="descriptions-label"-->
    <!--            >-->
    <!--            </el-descriptions-item-->
    <!--            >-->
    <!--            <el-descriptions-item-->
    <!--                :span="1"-->
    <!--                contentClassName="descriptions-direction"-->
    <!--                label="储能充电量"-->
    <!--                labelClassName="descriptions-label"-->
    <!--            >-->
    <!--            </el-descriptions-item-->
    <!--            >-->

    <!--            <el-descriptions-item-->
    <!--                :span="1"-->
    <!--                contentClassName="descriptions-direction"-->
    <!--                label="负荷用电量"-->
    <!--                labelClassName="descriptions-label"-->
    <!--            >-->
    <!--            </el-descriptions-item-->
    <!--            >-->
    <!--            <el-descriptions-item-->
    <!--                :span="1"-->
    <!--                contentClassName="descriptions-direction"-->
    <!--                label="光伏发电量"-->
    <!--                labelClassName="descriptions-label"-->
    <!--            >-->
    <!--            </el-descriptions-item-->
    <!--            >-->
    <!--          </el-descriptions>-->
    <!--        </div>-->
    <!--        &lt;!&ndash;        表格&ndash;&gt;-->
    <!--        <el-table-->
    <!--            class="common-table"-->
    <!--            stripe-->
    <!--            style="width: 100%;margin-top:25px;">-->
    <!--          <el-table-column-->
    <!--              label="功率"-->
    <!--              prop="type">-->
    <!--          </el-table-column>-->
    <!--          <el-table-column-->
    <!--              label="电网"-->
    <!--          >-->
    <!--            <template slot-scope="scope">-->
    <!--              <span class="pointer"-->
    <!--                    @click="showChart('簇电压',scope.row.clusterId)">{{ scope.row.clusterVoltage }} V</span>-->
    <!--            </template>-->
    <!--          </el-table-column>-->
    <!--          <el-table-column-->
    <!--              label="储能">-->
    <!--            <template slot-scope="scope">-->
    <!--              <span class="pointer"-->
    <!--                    @click="showChart('簇电流',scope.row.clusterId)">{{ scope.row.clusterCurrent }} A</span>-->
    <!--            </template>-->
    <!--          </el-table-column>-->
    <!--          <el-table-column-->
    <!--              label="负荷">-->
    <!--            <template slot-scope="scope">-->
    <!--              <span class="pointer"-->
    <!--                    @click="showChart('簇电流',scope.row.clusterId)">{{ scope.row.clusterCurrent }} A</span>-->
    <!--            </template>-->
    <!--          </el-table-column>-->
    <!--          <el-table-column-->
    <!--              label="光伏">-->
    <!--            <template slot-scope="scope">-->
    <!--              <span class="pointer"-->
    <!--                    @click="showChart('当前SOC',scope.row.clusterId)">{{ scope.row.currentSoc }} %</span>-->
    <!--            </template>-->
    <!--          </el-table-column>-->
    <!--        </el-table>-->
    <!--        &lt;!&ndash;        图表&ndash;&gt;-->
    <!--        <div id="emsChart" style="height: 350px"></div>-->
    <!--      </el-card>-->
    <!--    </div>-->
    <el-card
        v-for="(item,index) in list"
        :key="index+'emsList'"
        class="sbjk-card-container list running-card-container"
        shadow="always"
    >
      <div slot="header">
        <span class="large-title">{{ item.deviceName }}</span>
        <div class="info">
          <div>
            EMS控制模式: {{
              item.emsStatus === 0 ? '自动' : '手动'
            }}
          </div>
          <div>数据更新时间：{{ item.dataUpdateTime }}</div>
        </div>
        <div class="alarm">
          <el-button size="small" round style="margin-right:20px;" type="primary" @click="pointDetail(item,'point')">详细
          </el-button>
          <el-badge :value="item.alarmNum || 0" class="item">
            <i
                class="el-icon-message-solid alarm-icon"
                @click="pointDetail(item,'alarmPoint')"
            ></i>
          </el-badge>
        </div>
      </div>
      <el-row class="device-info-row">
        <el-col v-for="(tempDataItem,tempDataIndex) in bmsDataList" :key="tempDataIndex+'bmsTempData'"
                :span="6" class="device-info-col">
            <span class="pointer" @click="showChart(tempDataItem.name,item.deviceId)">
              <span class="left">{{ tempDataItem.name }}</span> <span class="right">{{ item[tempDataItem.attr] }}<span
                v-html="tempDataItem.unit"></span></span>
            </span>
        </el-col>
        <el-col v-for="(tempDataItem,tempDataIndex) in pcsDataList" :key="tempDataIndex+'pcsTempData'"
                :span="6" class="device-info-col">
            <span class="pointer" @click="showChart(tempDataItem.name,item.deviceId)">
              <span class="left">{{ tempDataItem.name }}</span> <span class="right">{{ item[tempDataItem.attr] }}<span
                v-html="tempDataItem.unit"></span></span>
            </span>
        </el-col>
      </el-row>
    </el-card>

    <el-empty v-show="list.length <= 0" :image-size="200"></el-empty>
    <point-chart ref="pointChart" :site-id="siteId"/>
    <point-table ref="pointTable"/>
  </div>
</template>

<script>
import pointChart from "./../PointChart.vue";
import PointTable from "@/views/ems/site/sblb/PointTable.vue";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import {getEmsDataList} from "@/api/ems/dzjk";
import intervalUpdate from "@/mixins/ems/intervalUpdate";

export default {
  name: "DzjkSbjkEms",
  components: {pointChart, PointTable},
  mixins: [getQuerySiteId, intervalUpdate],
  data() {
    return {
      loading: false,
      list: [],
      bmsDataList: [{
        name: 'BMS1SOC',
        attr: 'bms1Soc'
      },
        {
          name: 'BMS2SOC',
          attr: 'bms2Soc'
        },
        {
          name: 'BMS3SOC',
          attr: 'bms3Soc'
        },
        {
          name: 'BMS4SOC',
          attr: 'bms4Soc'
        }],
      pcsDataList: [{
        name: 'PCS-1有功功率',
        attr: 'pcs1Yggl'
      },
        {
          name: 'PCS-2有功功率',
          attr: 'pcs2Yggl'
        },
        {
          name: 'PCS-3有功功率',
          attr: 'pcs3Yggl'
        },
        {
          name: 'PCS-4有功功率',
          attr: 'pcs4Yggl'
        }]
    };
  },
  methods: {
    // 查看设备电位表格
    pointDetail(row, dataType) {
      const {deviceId} = row
      this.$refs.pointTable.showTable({siteId: this.siteId, deviceId, deviceCategory: 'EMS'}, dataType)
    },
    showChart(pointName, deviceId) {
      pointName &&
      this.$refs.pointChart.showChart({pointName, deviceCategory: 'EMS', deviceId});
    },
    getData() {
      this.loading = true;
      getEmsDataList(this.siteId)
          .then((response) => {
            const data = response?.data || {};
            this.list = JSON.parse(JSON.stringify(data));
          })
          .finally(() => (this.loading = false));
    },
    updateData() {
      this.getData();
    },
    init() {
      this.updateData();
      this.updateInterval(this.updateData);
    },
  },
};
</script>

<style lang="scss" scoped></style>
