<template>
  <div class="generator">
    <div class="info-panel base-info">
      <div class="panel-title gary-l">
        <div class="title">遥测值</div>
      </div>
      <div class="panel-body">
        <table class="table-form">
          <template v-for="(item,index) in sourceMapAI" :key="index" :v-if="index%2==0">
            <tr>
              <td class="text gray">{{ item.name }}</td>
              <td class="value green">{{ item.value }}</td>
              <td class="unit gray">{{ item.unit }}</td>
              <td class="text gray" v-if="index+1<sourceMapAI.length">{{sourceMapAI[index+1].name}}</td>
              <td class="value green" v-if="index+1<sourceMapAI.length">{{sourceMapAI[index+1].value}}</td>
              <td class="unit gray" v-if="index+1<sourceMapAI.length">{{sourceMapAI[index+1].unit}}</td>
            </tr>
          </template>
        </table>
      </div>
    </div>
    <div class="info-panel base-info">
      <div class="panel-title gary-l">
        <div class="title">遥测值</div>
      </div>
      <div class="panel-body">
        <table class="table-form">
          <template v-for="index in sourceMapDI" :key="index" :v-if="index%4==0">
            <tr v-if="index < sourceMapDI.length">
              <td class="dot" :class="sourceMapDI[index].value>0?'red':''">{{ sourceMapDI[index].name }}</td>
              <td class="dot" :class="sourceMapDI[index+1].value>0?'red':''" v-if="index+1<sourceMapDI.length">{{sourceMapDI[index+1].name}}</td>
              <td class="dot" :class="sourceMapDI[index+2].value>0?'red':''" v-if="index+2<sourceMapDI.length">{{sourceMapDI[index+2].name}}</td>
              <td class="dot" :class="sourceMapDI[index+3].value>0?'red':''" v-if="index+3<sourceMapDI.length">{{sourceMapDI[index+3].name}}</td>
            </tr>
          </template>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 名称
  name: "generator",
  props: {
    index: {
      type: Number,
      default: 1,
    },
    data: {
      type: Object,
      default: () => {},
    },
  },
  // 使用组件
  components: {},
  // 数据
  data() {
    return {
      activeIndex: 1,
      sourceMapAI: {},
      sourceMapDI: {},
      datamap: {},
      widgetIndex: ["fdjmap", "clxmap", "bjmap", "phmap", "yymap", "jcmap", "zzmap"],
    };
  },
  // 函数
  methods: {},
  // 生命周期钩子
  beforeCreate() {
    // 创建前
  },
  created() {
    // 创建后
  },
  beforeMount() {
    // 渲染前
  },
  mounted() {
    // 渲染后
  },
  beforeUpdate() {
    // 数据更新前
  },
  updated() {
    // 数据更新后
  },
  watch: {
    index(value) {
      this.activeIndex = value;
      this.sourceMapAI = this.datamap[this.widgetIndex[this.activeIndex - 1]].ai;
      this.sourceMapDI = this.datamap[this.widgetIndex[this.activeIndex - 1]].di;
    },
    data(value) {
       this.datamap = value;
       this.sourceMapAI = this.datamap[this.widgetIndex[this.activeIndex - 1]].ai;
       this.sourceMapDI = this.datamap[this.widgetIndex[this.activeIndex - 1]].di;
    },
  },
};
</script>

<style lang="less" scoped>
.generator {
  .info-panel {
    flex: 1 0 auto;
    width: 100%;
    .panel-title {
      display: flex;
      width: 100%;
      background: fade(@darkgray, 40);
      padding: 8px;
      padding-left: 2.222vh;
      align-items: center;
      font-size: @fontsize-s;
      color: #b2bdc0;

      svg {
        .svg-use path {
          fill: @gray;
        }

        width: 2.222vh;
        height: 2.222vh;
      }
    }

    .panel-body {
      border: 1px solid fade(@darkgray, 40);
      border-top: 0px;
    }

    & + .info-panel {
      margin-top: 1.481vh;
    }

    .table-form {
      .dot {
        color: @gray;

        &.red {
          color: @red;

          &::before {
            background: @red;
          }
        }

        &::before {
          content: " ";
          display: inline-block;
          width: 8px;
          height: 8px;
          background: @green;
          margin-right: 8px;
          border-radius: 50%;
        }
      }
    }
  }
}
</style>
