<template>
  <div class="main">
    <div class="formMenu">
      <el-form ref="form" :model="form" label-width="160px">
        <table class="zdjbxxTable" cellspacing="0" cellpadding="0" border="1">
        <tr>
          <th colspan="12">逻辑幢基本信息</th>
        </tr>
        <tr>
          <td colspan="2">逻辑幢号</td>
          <td colspan="4">
            <input type="text" class="formInput" />
          </td>
          <td colspan="2">自然幢号</td>
          <td colspan="4">
            <input type="text" class="formInput" />
          </td>
        </tr>
        <tr>
          <td colspan="2">逻辑幢顺序号</td>
          <td colspan="4">
            <input type="text" class="formInput" />
          </td>
          <td colspan="2">不动产单元号</td>
          <td colspan="4" class="psr">
            <input type="text" class="formInput percent78" />
            <el-button type="primary" class="createBtn">生成</el-button>
          </td>
        </tr>
        <tr>
          <td colspan="2">门牌号</td>
          <td colspan="4">
            <input type="text" class="formInput" />
          </td>
          <td colspan="2"  align="center">竣工日期</td>
          <td colspan="4" >
<!--            <el-date-picker-->
<!--                v-model="jgrq"-->
<!--                type="date"-->
<!--                placeholder="选择日期"-->
<!--            >-->
<!--            </el-date-picker>-->
          </td>
        </tr>
        <tr>
          <td colspan="2">预测建筑面积（㎡）</td>
          <td colspan="4">
            <input type="text" class="formInput" />
          </td>
          <td colspan="2">实测建筑面积（㎡）</td>
          <td colspan="4" class="psr">
            <input type="text" class="formInput" />

          </td>
        </tr>
        <tr>
          <td colspan="2">预测地下面积（㎡）</td>
          <td colspan="4">
            <input type="text" class="formInput" />
          </td>
          <td colspan="2">实测地下面积（㎡）</td>
          <td colspan="4" class="psr">
            <input type="text" class="formInput " />
          </td>
        </tr>
        <tr>
          <td colspan="2">预测其他面积（㎡）</td>
          <td colspan="4">
            <input type="text" class="formInput" />
          </td>
          <td colspan="2">实测其他面积（㎡）</td>
          <td colspan="4" class="psr">
            <input type="text" class="formInput" />
          </td>
        </tr>

        <tr height="30" v-for="(item1,index) in form.ytList" :key="index">
          <td v-if="index===0" colspan="2" :rowspan="ytTitleRowspan" align="center"   id="ytTitle">
            <el-button type="primary" size="mini" style="margin-right: 10px" @click="addYtInfo">添加</el-button>
            <span>用途</span>
          </td>

          <td width="30" colspan="2" align="center"  >
            <el-button type="info" size="mini" style="" @click="deleteYtInfo(index)" circle>删除</el-button>
            规划用途
          </td>
          <td width="30" colspan="4" align="center"  >
            <el-select v-model="item1.fwytzdbsm" placeholder="请选择" >
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </td>
          <td width="30" colspan="2" align="center"  >用途</td>
          <td width="30" colspan="4" align="center"  >
            <el-select v-model="item1.fwsjytbsm" placeholder="请选择" >
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </td>
        </tr>

        <tr height="30" v-for="(item1,index) in form.fwjgList" :key="'jg'+index">
          <td colspan="2" v-if="index===0" :rowspan="fwjgTitleRowspan" align="center"  >
            <el-button type="primary" size="mini" style="margin-right: 10px" @click="addFwjgInfo">添加</el-button>
            <span>房屋结构</span>
          </td>
          <td   colspan="2" align="center"  >
            <span @click="deleteFwjgInfo(index)">删除</span>
          </td>
          <td   colspan="9"  >
            <el-select v-model="item1.fwjgzdbsm" placeholder="请选择" >
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </td>
        </tr>

        <tr>
          <td colspan="2">地下层数</td>
          <td colspan="4">
            <input type="text" class="formInput" />
          </td>
          <td colspan="2">地上层数</td>
          <td colspan="4" class="psr">
            <input type="text" class="formInput" />
          </td>
        </tr>
        <tr>
          <td colspan="2">总层数</td>
          <td colspan="4">
            <input type="text" class="formInput" />
          </td>
          <td colspan="2">建筑物状态</td>
          <td colspan="4" class="psr">
            <input type="text" class="formInput" />
          </td>
        </tr>
        <tr>
          <td colspan="2">备注</td>
          <td colspan="10">
            <input type="text" class="formInput" />
          </td>
        </tr>
        <tr>
          <th colspan="12" class="save">
            <el-button type="primary" >保存</el-button>
          </th>
        </tr>
      </table>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name:"",
  components:{},
  props:{},
  data(){
    return {
      jgrq:'',
      form: {
        ytList: [{
          glbsm: '',     //关联标识码
          fwytzdbsm: '',  //房屋用途字典标识码
          sx: '',         //顺序
          fwsjytbsm: '',  //房屋实际用途字典标识码
        }],
        fwjgList: [{
          fwjgzdbsm: '',  //房屋结构字典标识码
          glbsm: '',     //关联标识码
          sx: '',         //顺序
        }],
      },
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      ytTitleRowspan:1,  //用途的单元格垂直合并数量
      fwjgTitleRowspan:1,  //房屋结构的单元格垂直合并数量
    }
  },
  created(){},
  mounted(){},
  methods:{
    addYtInfo(){
      this.form.ytList.push({
        glbsm:'',
        fwytzdbsm:'',
        fwsjytbsm:'',
        sx:'',
      });
      this.ytTitleRowspan=this.form.ytList.length;
    },
    deleteYtInfo(index){
      if(this.form.ytList.length<=1){
        this.$message({
          message: '不能删除，最少含有一条用途信息',
          type: 'warning'
        });
      }else{
        this.form.ytList.splice(index,1);
        this.ytTitleRowspan=this.form.ytList.length;
      }
    },
    addFwjgInfo(){
      this.form.fwjgList.push({
        fwjgzdbsm:'',  //房屋结构字典标识码
        glbsm:'',     //关联标识码
        sx:'',         //顺序
      });
      this.fwjgTitleRowspan=this.form.fwjgList.length;
    },
    deleteFwjgInfo(index){
      if(this.form.fwjgList.length<=1){
        this.$message({
          message: '不能删除，最少含有一条房屋结构信息',
          type: 'warning'
        });
      }else{
        this.form.fwjgList.splice(index,1);
        this.fwjgTitleRowspan=this.form.fwjgList.length;
      }
    },
  },
  computed: {},
  watch: {},
}
</script>

<style lang="less" scoped>
.main {
  box-sizing: border-box;
  padding: 18px;
  height: auto;
  .formMenu {
    width: 1000px;
  }
  .zdjbxxTable {
    margin-top: 10px;
    background-color: #fff;
    font-size: 14px;
    width: 100%;
    th {
      height: 36px;
      line-height: 36px;
      font-size: 16px;
    }
    td {
      width: 60px;
      text-align: center;
      height: 36px;
    }
    /deep/.el-input__inner {
      margin: 0;
      height: 36px;
      border: none;
      color: #606764;
      overflow: visible;
      text-align: center;
      cursor: text;
    }
    .percent78 {
      width: 78%;
      float: left;
    }
    .percent68 {
      width: 68%;
      float: left;
      position: relative;
      top: 7px;
    }
    .percent30 {
      width: 30%;
      float: left;
    }
    .createBtn {
      position: absolute;
      width: 50px;
      padding: 6px 4px;
      right: 4px;
      top: 4px;
    }
    .el-input__icon {
      line-height: 37px;
    }
    .save{
      height:80px
    }
  }
}
</style>