<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"></el-input>
        </div>
        <div class='line' v-if="index!=0&&((index+1)%10)==0&&index!=info.length"></div>
    </div>
</div>
</template>
<script>
import VerificationHelper from '@/utils/mapCommon/VerificationHelper'
/**
 * 部件查看---设计
 */
export default {
    name:"UnitDesignInfo",
    data(){
        return {
            infos:[],//设计信息
        }
    },
    methods:{
        /**
         * 展示设计页面
         * @param designInfos 请求的获取的所有数据
         */
        showDesignPage(designInfos) {
            this.infos = designInfos.map(item => {
                return { 
                    ...item,
                    title: VerificationHelper.setNullAndUndefined(item.title), 
                    value: VerificationHelper.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;

        .el-input.value {
          flex: 0.6;
          display: inline-block;
          position: relative;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          color: black;
          background: #f8f8f8;
          border: none;
        }
        ::v-deep.el-input__inner{
          background-color: #f8f8f8;
        }
        span.title {
          flex: 0.4;
          display: block;
          text-align: right;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          color: #888888;
          padding: 6px;
          position: relative;
          float: left;
        }
      }
      .line {
        width: 100%;
        height: 2px;
        // background: rgb(246, 246, 246);
        background: #efefef;
        position: relative;
        float: left;
        margin: 20px 0px 6px 0px;
      }
    }
</style>