<template>
  <div class="baseInfo">
    <div class="wrap" v-for="(info, index) in infos" :key="info.title">
      <div class="item">
        <span class="title" :title="info.title">{{ info.title }}:</span>
        <el-input class="value" :value="info.value" size="small"></el-input>
      </div>
      <div class="line" v-if="index != 0 && (index + 1) % 10 == 0 && index != info.length"></div>
    </div>
  </div>
</template>
<script>
import { setNullAndUndefined } from '@/views/groupPage/util'
/**
 * 部件查看---设计
 */
export default {
  name: 'UnitDesignInfo',
  data() {
    return {
      infos: [] //设计信息
    }
  },
  methods: {
    /**
     * 展示设计页面
     * @param designInfos 请求的获取的所有数据
     */
    showDesignPage(designInfos) {
      this.infos = designInfos.map((item) => {
        return {
          ...item,
          title: setNullAndUndefined(item.title),
          value: setNullAndUndefined(item.value)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.baseInfo {
  width: 100%;
  height: 430px;
  overflow: auto;
  position: relative;
  float: left;
  .wrap {
    width: 100%;
  }
  .item {
    position: relative;
    float: left;
    width: 48%;
    //padding: 14px 0px 0px 10px;
    display: flex;
    align-items: center;
    padding: 5px;
  }
  .line {
    width: 100%;
    height: 2px;
    background: rgba(14, 167, 255, 0.2);
    position: relative;
    float: left;
    margin: 20px 0px 6px 0px;
  }
}
</style>