<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">
          <tr v-for="(pItem, pIndex) in sourceMapAI" :key="pIndex">
            <template v-for="(cItem, cIndex) in pItem" :key="cIndex">
              <td class="text gray">{{ cItem.name }}</td>
              <td class="value green">{{ cItem.value }}</td>
              <td class="unit gray">{{ cItem.unit }}</td>
            </template>
          </tr>
        </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">
          <tr class="location-tr" v-for="(pItem, pIndex) in sourceMapDI" :key="pIndex">
            <template v-for="(cItem, cIndex) in pItem" :key="cIndex">
              <td class="dot location-td" :class="cItem.value>0?'red':''">{{ cItem.name }}</td>
            </template>
          </tr>
        </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: {
    /**
     * 清洗数据，将原数据处理成符合布局渲染的格式，其中：
     * @param { Array } array 传入的原数据
     * @param { Int } length 每行显示的数量
    **/
    rinseData (array = [], length) {
      let index = 0;
      let newArray = [];

      while (index < array.length) {
        newArray.push(array.slice(index, index += length));
      }

      return newArray;
    }
  },
  // 生命周期钩子
  beforeCreate() {
    // 创建前
  },
  created() {
    // 创建后
  },
  beforeMount() {
    // 渲染前
  },
  mounted() {
    // 渲染后
  },
  beforeUpdate() {
    // 数据更新前
  },
  updated() {
    // 数据更新后
  },
  watch: {
    index(value) {
      this.activeIndex = value;
      if(this.activeIndex != 0){
        this.sourceMapAI = this.rinseData(this.datamap[this.widgetIndex[this.activeIndex - 1]].ai, 4);
        this.sourceMapDI = this.rinseData(this.datamap[this.widgetIndex[this.activeIndex - 1]].di, 4);
      }
    },
    data(value) {
       this.datamap = value;
       if(this.activeIndex != 0){
        this.sourceMapAI = this.rinseData(this.datamap[this.widgetIndex[this.activeIndex - 1]].ai, 4);
        this.sourceMapDI = this.rinseData(this.datamap[this.widgetIndex[this.activeIndex - 1]].di, 4);
      }
    },
  },
};
</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%;
        }
      }
      .location-tr{
        width: 100%;
      }
      .location-td{
        width: 20%;
        padding-left: 7%;
        text-align: left;
      }
    }
  }
}
</style>
