<template>
  <div>
    <el-card
        v-for="(item,index) in list"
        :key="index+'ylLise'"
        class="sbjk-card-container running-card-container"
        :class="{
        'warning-card-container':item.emsCommunicationStatus && item.emsCommunicationStatus !== '0',
        'running-card-container':item.emsCommunicationStatus === '0'
      }"
        shadow="always">
      <div slot="header">
        <span class="large-title">{{ item.deviceName }}</span>
        <div class="info">
          <div>
            {{
              $store.state.ems.communicationStatusOptions[
                  item.emsCommunicationStatus
                  ]
            }}
          </div>
          <div>数据更新时间：{{ item.dataUpdateTime || '-' }}</div>
        </div>
        <div class="alarm">
          <el-button type="primary" round size="small" style="margin-right:20px;" @click="pointDetail(item,'point')">
            详细
          </el-button>
          <el-badge :hidden="!item.alarmNum" :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 tempData" :key="tempDataIndex+'hdTempData'" :span="12"
                class="device-info-col">
            <span class="pointer" @click="showChart(tempDataItem.title,item.deviceId)">
              <span class="left">{{ tempDataItem.title }}</span>
              <span class="right">
                <i v-if="isPointLoading(item[tempDataItem.attr])" class="el-icon-loading point-loading-icon"></i>
                <span v-else>{{ displayValue(item[tempDataItem.attr]) }}<span v-html="tempDataItem.unit"></span></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 getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import {getXfDataList} from '@/api/ems/dzjk'
import intervalUpdate from "@/mixins/ems/intervalUpdate";
import pointChart from "./../PointChart.vue";
import PointTable from "@/views/ems/site/sblb/PointTable.vue";

export default {
  name: 'DzjkSbjkXf',
  mixins: [getQuerySiteId, intervalUpdate],
  components: {pointChart, PointTable},
  data() {
    return {
      loading: false,
      list: [],
      tempData: [
        {title: '主电源备用电池状态', attr: 'dczt', unit: ''},
        {title: '手自动状态延时状态', attr: 'yszt', unit: ''},
        {title: '启动喷洒气体喷洒状态', attr: 'pszt', unit: ''},
        {title: '压力开关状态电磁阀状态', attr: 'dcfzt', unit: ''},
      ]
    }
  },
  methods: {
    displayValue(value) {
      return value === undefined || value === null || value === "" ? "-" : value;
    },
    isPointLoading(value) {
      return this.loading && (value === undefined || value === null || value === "" || value === "-");
    },
    // 查看设备电位表格
    pointDetail(row, dataType) {
      const {deviceId} = row
      this.$refs.pointTable.showTable({siteId: this.siteId, deviceId, deviceCategory: 'XF'}, dataType)
    },
    showChart(pointName, deviceId) {
      pointName && this.$refs.pointChart.showChart({pointName, deviceCategory: 'XF', deviceId})
    },
    updateData() {
      this.loading = true
      getXfDataList(this.siteId).then(response => {
        this.list = JSON.parse(JSON.stringify(response?.data || []));
      }).finally(() => {
        this.loading = false
      })
    },
    init() {
      this.updateData()
      this.updateInterval(this.updateData)
    }
  },
  mounted() {

  }
}
</script>

<style scoped lang="scss">
.sbjk-card-container {
  &:not(:last-child) {
    margin-bottom: 25px;
  }

  .el-row {
    background-color: #ffffff;
    border: 1px solid #eeeeee;
    font-size: 14px;
    line-height: 16px;
    color: #333333;

    .el-col {
      padding: 12px 0;
      text-align: center;
      position: relative;
    }

    .el-col {
      border-bottom: 1px solid #eeeeee;
    }

    .el-col:not(:nth-child(3n)) {
      border-right: 1px solid #eeeeee;
    }
  }
}

.point-loading-icon {
  color: #409eff;
  display: inline-block;
  transform-origin: center;
  animation: pointLoadingSpinPulse 1.1s linear infinite;
}
@keyframes pointLoadingSpinPulse {
  0% { opacity: 0.45; transform: rotate(0deg) scale(0.9); }
  50% { opacity: 1; transform: rotate(180deg) scale(1.08); }
  100% { opacity: 0.45; transform: rotate(360deg) scale(0.9); }
}
</style>
