<template>
  <div class="main">
    <table cellspacing="0" cellpadding="0" border="1">
      <thead>
        <tr rowspan="2">
          <td colspan="8">
            <!-- <div class="tit">土地承包经营权、农用地其他使用权调查表</div> -->
            <div class="dw">
              单位 :
              <el-radio-group v-model="formData.mjdw">
                <el-radio :label="'1'">平方米</el-radio>
                <el-radio :label="'2'">公顷</el-radio>
                <el-radio :label="'3'">亩</el-radio>
              </el-radio-group>
            </div>
          </td>
        </tr>
      </thead>
      <tbody>
        <tr>
            <td colspan="2" class="tdright">宗地代码</td>
            <td colspan="6">
                <input class="formInput" v-model="formData.zddm" disabled/>
            </td>
        </tr>
        <tr>
            <td colspan="2" class="tdright">不动产单元号</td>
            <td colspan="6">
                <input class="formInput" v-model="formData.bdcdyh" disabled/>
            </td>
        </tr>
        <tr >
            <td rowspan="4" colspan="2" class="tdright">
                发包方
            </td>
            <td colspan="1" class="tdright">名称</td>
            <td colspan="5">
                <input class="formInput" v-model="formData.fbfmc"/>
            </td>
        </tr>
        <tr>
          <td colspan="1" class="tdright">负责人姓名</td>
          <td colspan="2">
              <input class="formInput" v-model="formData.fzrxm"/>
          </td>
          <td colspan="1" class="tdright">联系电话</td>
          <td colspan="2">
              <input class="formInput" v-model="formData.lxdh"/>
          </td>
        </tr>
        <tr>
          <td colspan="1" class="tdright">负责人地址</td>
          <td colspan="2">
              <input class="formInput" v-model="formData.fzrdz"/>
          </td>
          <td colspan="1" class="tdright">邮政编码</td>
          <td colspan="2">
              <input class="formInput" v-model="formData.yzbm"/>
          </td>
        </tr>
        <tr>
          <td colspan="1" class="tdright">证件种类</td>
          <td colspan="2">
              <el-select class="formSelect" v-model="formData.zjzl" ref="zjzlbsm">
                  <el-option
                          v-for="item in $store.state.zjzlList"
                          :key="item.dm"
                          :label="item.mc"
                          :value="item.dm"
                  >
                  </el-option>
              </el-select>
          </td>
          <td colspan="1" class="tdright">证件号</td>
          <td colspan="2">
              <input class="formInput" v-model="formData.zjh"/>
          </td>
        </tr>
        <tr >
            <td :rowspan="chengbaoNum" colspan="2" class="tdright">
                承包方
            </td>
            <td colspan="1" class="tdright">承包方(代表)</td>
            <td colspan="5">
                <input class="formInput" v-model="formData.cbfdb"/>
            </td>
        </tr>
        <tr>
          <td colspan="1" class="tdright">有无承包合同</td>
          <td colspan="2">
              <el-radio-group v-model="formData.ywcbht" class="has-choose">
                <el-radio :label="1">有</el-radio>
                <el-radio :label="0">无</el-radio>
              </el-radio-group>
          </td>
          <td colspan="1" class="tdright"><i class="requisite" v-if="formData.ywcbht=='1'">*</i>承包合同编号</td>
          <td colspan="2">
              <input class="formInput" v-model="formData.cbhtbh"/>
          </td>
        </tr>
        <tr>
          <td colspan="1" class="tdright">有无经营权证</td>
          <td colspan="2">
              <el-radio-group v-model="formData.ywjyqz" class="has-choose">
                <el-radio :label="1">有</el-radio>
                <el-radio :label="0">无</el-radio>
              </el-radio-group>
          </td>
          <td colspan="1" class="tdright">经营权证编号</td>
          <td colspan="2">
              <input class="formInput" v-model="formData.jyqzbh"/>
          </td>
        </tr>
        <tr >
            <td colspan="1" class="tdright">取得(承包)方式</td>
            <td colspan="5">
                <el-radio-group v-model="formData.qdzbfs" class="has-choose">
                <el-radio :label="'1'">家庭承包</el-radio>
                <el-radio :label="'2'">招标</el-radio>
                <el-radio :label="'3'">公开协商</el-radio>
                <el-radio :label="'4'">拍卖</el-radio>
                <el-radio :label="'5'">转让</el-radio>
                <el-radio :label="'6'">互换</el-radio>
                <el-radio :label="'7'">其他</el-radio>
              </el-radio-group>
            </td>
        </tr>
        <tr >
            <td colspan="2"></td>
            <td colspan="3" class="tdcenter">家庭成员总数</td>
            <td colspan="1">共 <input type="number" class="total-number" v-model="formData.jtcyzs"/>人</td>
        </tr>
        <tr >
            <td colspan="2">
              <div class="add-to" @click="addFamily">+</div>
              <div class="name-num">成员姓名</div>
            </td>
            <td colspan="3" style="width:550px">
              <div class="householder">与户主关系</div><div class="id-no">身份证号码</div>
            </td>
            <td colspan="1">成员备注</td>
        </tr>
        <tr v-for="(item,index) in formData.jtcyList" :key="index+'1'">
            <td colspan="2">
              <div class="add-to" @click="delFamily(index)">-</div><div class="name-num"><input class="name-input" v-model="item.cyxm"/></div>
            </td>
            <td colspan="3">
              <div class="householder">
                <el-select class="formSelect" filterable v-model="item.yhzgx" ref="zjzlbsm">
                  <el-option
                          v-for="item in $store.state.familyList"
                          :key="item.dm"
                          :label="item.mc"
                          :value="item.dm"
                  >
                  </el-option>
              </el-select>
              </div><div class="id-no"><input class="name-input" v-model="item.zjhm"/></div>
            </td>
            <td colspan="1"><input class="name-input" style="margin-top:0;" v-model="item.cybz"/></td>
        </tr>
        <tr >
            <td colspan="2" class="tdright">
                土地用途
            </td>
            <td colspan="6">
                <el-radio-group v-model="formData.tdyt" class="has-choose">
                  <el-radio :label="'1'">种植业</el-radio>
                  <el-radio :label="'2'">林业</el-radio>
                  <el-radio :label="'3'">畜牧业</el-radio>
                  <el-radio :label="'4'">渔业</el-radio>
                  <el-radio :label="'5'">其他</el-radio>
                </el-radio-group>
            </td>
        </tr>
        <tr >
            <td colspan="2" class="tdright">
                地力等级
            </td>
            <td colspan="2">
                <input class="formInput" v-model="formData.dldj"/>
            </td>
            <td colspan="1" class="tdright">
                是否是基本农田
            </td>
            <td colspan="3">
                <el-radio-group v-model="formData.isjbnt" class="has-choose">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </td>
        </tr>
        <tr >
            <td colspan="2" class="tdright">
                水域滩涂类型
            </td>
            <td colspan="2">
                <el-select class="formSelect" v-model="formData.syttlx" ref="syttlx">
                  <el-option
                          v-for="item in $store.state.syttlx"
                          :key="item.dm"
                          :label="item.mc"
                          :value="item.dm"
                  >
                  </el-option>
              </el-select>
            </td>
            <td colspan="1" class="tdright">
                养殖业方式
            </td>
            <td colspan="3">
                <el-select class="formSelect" v-model="formData.yzyfs" ref="yzyfs">
                  <el-option
                          v-for="item in $store.state.yzyfs"
                          :key="item.dm"
                          :label="item.mc"
                          :value="item.dm"
                  >
                  </el-option>
              </el-select>
            </td>
        </tr>
        <tr >
            <td colspan="2" class="tdright">
                适宜载畜量
            </td>
            <td colspan="2">
                <input type="number" v-model="formData.syzcl" class="formInput"/>
            </td>
            <td colspan="1" class="tdright">
                承包（使用权）面积{{formData.mjdw=='1'?'（㎡）':''}}{{formData.mjdw=='2'?'（公顷）':''}}{{formData.mjdw=='3'?'（亩）':''}}
            </td>
            <td colspan="3">
                <input class="formInput" v-model="formData.cbmj"/>
            </td>
        </tr>
        <tr >
            <td colspan="1" class="tdright">
                承包（使用）起始时间
            </td>
            <td colspan="2">
                <el-date-picker
                  v-model="formData.cbsyqssj"
                  type="date"
                  value-format='yyyy-MM-dd'
                  placeholder="选择日期">
                </el-date-picker>
            </td>
            <td colspan="1" class="tdright">
                期限（年）
            </td>
            <td colspan="1">
                <input type="number" v-model="formData.cbqx" class="formInput"/>
            </td>
            <td colspan="1" class="tdright">
                承包（使用）结束时间
            </td>
            <td colspan="2">
              <el-date-picker
                v-model="formData.cbsyjssj"
                type="date"
                value-format='yyyy-MM-dd'
                placeholder="选择日期">
              </el-date-picker>
            </td>
        </tr>
        <tr >
            <td rowspan="4" colspan="2" class="tdright">
                草原质量
            </td>
            <td colspan="1" class="tdright">草层高度(cm)</td>
            <td colspan="5">
                <input type="number" v-model="formData.cygd" class="formInput"/>
            </td>
        </tr>
        <tr>
          <td colspan="1" class="tdright">草地覆盖度(%)</td>
          <td colspan="5">
              <input type="number" v-model="formData.cyfgd" class="formInput"/>
          </td>
        </tr>
        <tr>
          <td colspan="1" class="tdright">建群</td>
          <td colspan="5">
              <input class="formInput" v-model="formData.jq"/>
          </td>
        </tr>
        <tr>
          <td colspan="1" class="tdright">优势种</td>
          <td colspan="5">
              <input class="formInput" v-model="formData.ysz"/>
          </td>
        </tr>
        <tr >
            <td rowspan="2" colspan="2" class="tdright">
                调查记事
            </td>
            <td colspan="6">
                <input class="formInput" v-model="formData.dcjs"/>
            </td>
        </tr>
        <tr >
            <td colspan="6">
                <div class="jishi-time">
                  <span>调查员：</span>
                  <input class="investigator" v-model="formData.dcy" type="text"/>
                  <span>日期：</span>
                  <div class="time-pick">
                    <el-date-picker
                      v-model="formData.dcrq"
                      type="date"
                      value-format='yyyy-MM-dd'
                      placeholder="选择日期">
                    </el-date-picker>
                  </div>
                  
                </div>
            </td>
        </tr>
        <tr >
            <td rowspan="2" colspan="2" class="tdright">
                审核意见
            </td>
            <td colspan="6">
                <input class="formInput" v-model="formData.shyj"/>
            </td>
        </tr>
        <tr >
            <td colspan="6">
                <div class="jishi-time">
                  <span>审核员：</span>
                  <input class="investigator" v-model="formData.shr" type="text"/>
                  <span>日期：</span>
                  <div class="time-pick">
                    <el-date-picker
                      v-model="formData.shrq"
                      type="date"
                      value-format='yyyy-MM-dd'
                      placeholder="选择日期">
                    </el-date-picker>
                  </div>
                </div>
            </td>
        </tr>
        <tr>
          <td colspan="8" style="text-align: center">
              <el-button type="primary" @click="save">保存</el-button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import {getQjTdcbjyqNydqtsyqdcDetailByZdbsm,saveOrUpdateQjTdcbjyqNydqtsyqdc} from '@api/tdcb'
export default {
  name: "",
  components: {},
  props: {
    zddm:{
        type:String
    },
    bdcdyh:{
        type:String
    }
  },
  data() {
    return {
      chengbaoNum:'7',
      formData:{
        jtcyList: [ //家庭成员集合
          {
            cybz: '',//成员备注 ,
            cyxm: '',//成员姓名 ,
            yhzgx: '',//与户主关系 ,
            zjhm: ''//证件号码
          }
        ],
        bsm: '', //土地承包经营权、农用地其他使用权调查标识码：32位GUID
        cbfdb: '', // 承包方代表
        cbhtbh: '',// 承包合同编号
        cbmj: 0,//承包（使用权）面积
        cbqx:0,//承包期限
        cbsyjssj: '',//承包（使用）结束时间
        cbsyqssj: '',//承包（使用）起始时间
        cyfgd: '',//草地覆盖度 
        cygd: '',//草原高度
        dcjs: '',//调查记事
        dcrq: '',//调查日期
        dcy: '',//调查人
        dldj: '',//地力等级
        fbfmc: '',//发包方名称
        fzrdz: '',//负责人地址
        fzrxm: '',// 负责人姓名 ,
        isdel: 0,//是否删除：[0] 未删除（缺省值）；[1] 删除 ,
        isjbnt: 0,//是否是基本农田 ,
        jq: '',//建群 ,
        jtcyzs: 0,//家庭成员总数 ,
        jyqzbh: '',//经营权证编号 ,
        lxdh: '',//联系电话 ,
        mjdw: '',//面积单位 0:平方米 1:公顷 2:亩 ,
        qdzbfs: '',//取得承包方式：家庭承包|招标|公开协商|拍卖|转让|互换|其他 ,
        shr: '',//审核人 ,
        shrq: '',//审核日期 ,
        shyj: '',//审核意见 ,
        syttlx: '',//水域滩涂类型 ,
        syzcl: '',//适宜载畜量 ,
        tdyt: '',//土地用途：种植业|林业|畜牧业|渔业|其他 ,
        ysz: '',//优势种 ,
        ywcbht: 0,//有无承包合同，0：无；1：有 ,
        ywjyqz: 0,//有无经营权证，0：无；1：有 ,
        yzbm: '',//邮政编码 ,
        yzyfs: '',//养殖业方式
        zdbsm: '',//宗地标识码，
        zjh: '',//证件号 ,
        zjzl: ''//证件种类
      }
    };
  },
  created() {},
  mounted() {
    this.formData.zdbsm=this.$route.query.bsm;
    this.getQjTdcbjyqNydqtsyqdcDetailByZdbsm(this.formData.zdbsm);
    // this.getQjTdcbjyqNydqtsyqdcDetailByZdbsm('85a47e4ce38fcc300101aa42d3ca667b');
  },
  methods: {
    getQjTdcbjyqNydqtsyqdcDetailByZdbsm(zdbsm){
      getQjTdcbjyqNydqtsyqdcDetailByZdbsm(zdbsm).then(res=>{
        if(res.success){
          console.log('获取明细',res)
          this.formData= res.result || this.formData;
          if(this.formData.jtcyList){
            this.chengbaoNum=this.formData.jtcyList.length+6+''
          }else{
            this.chengbaoNum='6'
          }
        }
      })
    },
    addFamily(){
      let itemObj={cybz:'',cyxm:'',yhzgx:'',zjhm:''};
      if(this.formData.jtcyList){
        this.formData.jtcyList.push(itemObj);
        this.chengbaoNum=this.chengbaoNum-0+1+'';
      }else{
        this.formData.jtcyList=[itemObj]
        this.chengbaoNum=this.chengbaoNum-0+1+'';
      }
    },
    delFamily(index){
      if(this.formData.jtcyList.length==1){
        return
      }
      this.formData.jtcyList.splice(index, 1);
      this.chengbaoNum=this.chengbaoNum-1+'';
    },
    save(){
      if(this.formData.ywcbht==1 && !this.formData.cbhtbh){
        this.$message.warning("承包合同编号不能为空");
        return
      }
      saveOrUpdateQjTdcbjyqNydqtsyqdc(this.formData).then(res=>{
        if (res.success) {
          console.log(res,"保存成功")
          this.$message.success("保存成功")
        }
      })
    }
  },
  computed: {},
  watch: {},
};
</script>
<style scoped  lang="less">
table {
  margin-top: 20px;
  background-color: #fff;
  font-size: 14px;
  width: 100%;
  cursor: pointer;
  .el-radio-group {
    margin-left: 10px;
  }
  .el-radio {
    margin-right: 20px !important;
  }
  th {
    height: 36px;
    line-height: 36px;
    font-size: 16px;
    
  }
  td {
    text-align: center;
    height: 36px;
    border-color: #e6e6e6;
  }
  /deep/.el-input__inner {
      margin: 0;
      height: 36px;
      outline: none;
      border: none;
      color: #606764;
      overflow: visible;
      text-align: center;
  }
  .formSelect{
    width: 100%;
  }
  .tdcenter{
    text-align: center;
  }
  .total-number{
    width: 60px;
    background:none;  
    outline:none;  
    border:1px solid #e6e6e6;
    box-sizing: border-box;
    display: inline-block;
    height: 20px;
    margin-right: 3px;
  }
  .total-number:focus{
    border: 1px solid #A0C5F6;
  }
  .add-to{
    position: relative;
    width: 37px;
    height: 38px;
    text-align: center;
    line-height: 37px;
    display: inline-block;
    border-right:1px solid #e6e6e6;
  }
  .name-num{
    display: inline-block;
    width: calc(100% - 38px);
    text-align: center;
    line-height: 37px;
  }
  .name-input{
    width: calc(100% - 6px);
    height: 32px;
    outline:none;  
    border:1px solid #e6e6e6;
    box-sizing: border-box;
    margin-top: -2px;
  }
  .name-input:focus{
    border: 1px solid #A0C5F6;
  }
  .householder{
    display: inline-block;
    width: 40%;
    text-align: center;
    border-right:1px solid #e6e6e6;
    box-sizing: border-box;
    line-height: 38px;
    
  }
  .id-no{
    display: inline-block;
    width: 60%;
    text-align: center;
    line-height: 37px;
  }
}

.tit{
  width: 100%;
  font-size: 18px;
  text-align: center;
  line-height: 28px;
  padding-top: 12px;
}
.dw{
    width: 100%;
    padding-right: 10px;
    text-align: right;
    box-sizing: border-box;
    line-height: 28px;
}
.has-choose{
  float: left;
}
.jishi-time{
  height: 100%;
  float: right;
  margin-right: 10px;
  line-height: 36px;
  span{
    line-height: 36px;
  }
  .investigator{
    width: 120px;
    background:none;  
    outline:none;  
    border:1px solid #e6e6e6;
    box-sizing: border-box;
    display: inline-block;
    height: 26px;
    margin-right: 10px;
    line-height: 26px;
    margin-top: -2px;
  }
  .investigator:focus{
    border: 1px solid #A0C5F6;
  }
  .time-pick{
    display: inline-block;
    height: 36px;
    /deep/.el-input__inner{
      margin-top:-2px;
    }
  }
}
</style>