<template>
  <div class="app-container">
    <van-sticky style="position:relative;">
      <div class="bannerBg">
        <van-nav-bar
          style="background:transparent;border-bottom-width:0;height:2rem;margin-bottom:.5rem;"
          @click-left="goBack()"
        >
          <template #left>
            <van-icon name="arrow-left" size="18" color="#fff" />
          </template>
          <template #title>
            <p style="color:#fff">入户调查</p>
          </template>
        </van-nav-bar>
      </div>
      <div style="width:95%;left:2.5%;position:absolute;background:#fff;border-radius:15px;box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16);padding: .3rem;top:1.2rem">
        <van-row>
          <van-col span="4" :offset="1" style="text-align:center;" @click="$router.push({path:'/homesteadSurvey/add'})">
              <van-icon :name="require('../../assets/images/housesteadSurvey/zjd'+(active==1?'A':'D')+'.png')" size="1rem" style="margin-top:0px;"/>
              <p :style="{color:(active==1?'rgb(34, 183, 242)':'#000')}">宅基地</p>
          </van-col>
          <van-col span="2">
            <div style="border-top: 2px dashed #b5b4b4;margin-top: 20px;"></div>
          </van-col>
          <van-col span="4"  style="text-align:center;" @click="$router.push({path:'/homesteadSurvey/add2'})" >
            <van-icon :name="require('../../assets/images/housesteadSurvey/nhxx'+(active==2?'A':'D')+'.png')" size="1rem" style="margin-top:0px;"/>
            <p :style="{color:(active==2?'rgb(34, 183, 242)':'#000')}">农户</p>
          </van-col>
          <van-col span="2">
            <div style="border-top: 2px dashed #b5b4b4;margin-top: 20px;"></div>
          </van-col>
          <van-col span="4" style="text-align:center;" @click="$router.push({path:'/homesteadSurvey/add3'})" >
            <van-icon :name="require('../../assets/images/housesteadSurvey/fwxx'+(active==3?'A':'D')+'.png')" size="1rem" style="margin-top:0px;"/>
            <p  :style="{color:(active==3?'rgb(34, 183, 242)':'#000')}">房屋</p>
          </van-col>
          <van-col span="2">
            <div style="border-top: 2px dashed #b5b4b4;margin-top: 20px;"></div>
          </van-col>
          <van-col span="4" style="text-align:center;" @click="$router.push({path:'/homesteadSurvey/add4'})">
            <van-icon :name="require('../../assets/images/housesteadSurvey/fsss'+(active==4?'A':'D')+'.png')" size="1rem" style="margin-top:0px;"/>
            <p :style="{color:(active==4?'rgb(34, 183, 242)':'#000')}">附属物</p>
          </van-col>
        </van-row>
      </div>
    </van-sticky>
    <van-form  ref="form">
      <div style="margin:30px auto;background: #ffffff;width: 95%;box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16);border-radius:15px;padding-top: 20px;">
        <p class="title" style="position:relative;padding-left:10px;line-height:20px;font-size: 16px;margin-left: 3%;margin-bottom: 5px;">农户信息</p>
        <!--<van-field
          v-model="form.deptId"
          name="行政区划名称"
          label="行政区划名称"
          placeholder="行政区划名称"
          :rules="[{ required: true, message: '' }]"
        />-->
        <van-field
          input-align="right"
          v-model="form.xm"
          name="姓名"
          label="姓名"
          placeholder="请输入姓名"
          maxlength="50"
          autocomplete="off"
          :rules="[{ required: true }]"
          required
        />
        <field-select
          v-model="form.zjlx"
          label="证件类型"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="请输入使用权人证件类型"
          remote-url="/open/zdzh/list/zjlx"
          :on-remote-response="'data'"
          :rules="[{ required: true }]"
          required
        />
        <van-field
          input-align="right"
          v-model="form.zjhm"
          name="证件号码"
          label="证件号码"
          placeholder="请输入使用权人证件号码"
          maxlength="50"
          autocomplete="off"
          :rules="[{ required: true }]"
          required
        />
        <field-select
          v-model="form.yhzgx"
          label="与户主关系"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="选择与户主关系"
          remote-url="/open/zdzh/list/family_status"
          :on-remote-response="'data'"
          :rules="[{ required: true }]"
          required
        />
        <field-select
          v-model="form.xb"
          label="性别"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="选择性别"
          remote-url="/open/zdzh/list/sys_user_sex"
          :on-remote-response="'data'"
          :rules="[{ required: true }]"
          required
        />
        <field-select
          v-model="form.hklx"
          label="户口类型"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="选择户口类型"
          remote-url="/open/zdzh/list/account_type"
          :on-remote-response="'data'"
          :rules="[{ required: true }]"
          required
        />
        <van-field
          input-align="right"
          v-model="form.lxdh"
          name="联系电话"
          label="联系电话"
          placeholder="请输入联系电话"
          maxlength="50"
          autocomplete="off"
        />
        <field-select
          v-model="form.hyzk"
          label="婚姻状况"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="选择性别"
          remote-url="/open/zdzh/list/hyzk"
          :on-remote-response="'data'"
        />
        <van-field
          input-align="right"
          v-model="form.hkszd"
          name="户口所在地"
          label="户口所在地"
          placeholder="请输入户口所在地"
          maxlength="50"
          autocomplete="off"
        />

        <field-select
          v-model="form.cybz"
          label="成员备注"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="选择成员备注"
          remote-url="/open/zdzh/list/cybz"
          :on-remote-response="'data'"
        />
        <van-field
          input-align="right"
          v-model="form.cybzsm"
          name="备注说明"
          label="备注说明"
          placeholder="请输入备注说明"
          maxlength="50"
          autocomplete="off"
        />
        <field-select
          v-model="form.sjly"
          label="数据来源"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="选择数据来源"
          remote-url="/open/zdzh/list/sjly"
          :on-remote-response="'data'"
        />
        <FieldRadio
          v-model="form.sfbjtjjzzcy"
          label="是否本集体经济组织成员"
          value-key="dictLabel"
          data-key="dictValue"
          remote-url="/open/zdzh/list/house_yes_no"
          :on-remote-response="'data'"
        />
        <FieldRadio
          v-model="form.sfjbzgq"
          label="具备资格权"
          value-key="dictLabel"
          data-key="dictValue"
          remote-url="/open/zdzh/list/house_yes_no"
          :on-remote-response="'data'"
        />
        <p class="title" style="position:relative;padding-left:10px;line-height:20px;font-size: 16px;margin-left: 3%;margin-bottom: 5px;">户主专用信息</p>

        <FieldRadio
          v-model="form.sfwbh"
          label="是否五保户"
          value-key="dictLabel"
          data-key="dictValue"
          remote-url="/open/zdzh/list/house_yes_no"
          :on-remote-response="'data'"
        />
        <FieldRadio
          v-model="form.sfpkh"
          label="是否贫困户"
          value-key="dictLabel"
          data-key="dictValue"
          remote-url="/open/zdzh/list/house_yes_no"
          :on-remote-response="'data'"
        />
        <FieldRadio
          v-model="form.zqtczsfyzf"
          label="在其他村庄有住房"
          value-key="dictLabel"
          data-key="dictValue"
          remote-url="/open/zdzh/list/house_yes_no"
          :on-remote-response="'data'"
        />
        <FieldRadio
          v-model="form.jzhcssfyzf"
          label="在集镇或城市有住房"
          value-key="dictLabel"
          data-key="dictValue"
          remote-url="/open/zdzh/list/house_yes_no"
          :on-remote-response="'data'"
        />
        <FieldRadio
          v-model="form.sfbccm"
          label="本村村民"
          value-key="dictLabel"
          data-key="dictValue"
          remote-url="/open/zdzh/list/house_yes_no"
          :on-remote-response="'data'"
        />
        <field-select
          v-model="form.occupation"
          label="职业"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="选择职业"
          remote-url="/open/zdzh/list/occupation"
          :on-remote-response="'data'"
        />
        <field-select
          v-model="form.jzqk"
          label="居住情况"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="选择居住情况"
          remote-url="/open/zdzh/list/living_condition"
          :on-remote-response="'data'"
        />
        <van-field
          input-align="right"
          v-model="form.txdz"
          name="通讯地址"
          label="通讯地址"
          placeholder="请输入通讯地址"
          maxlength="50"
          autocomplete="off"
        />
      </div>
      <div style="margin: 16px;display: flex;justify-content: space-around;">
        <van-button  v-if="permission == 'true'" round color="#22B7F2" style="width:45%" @click="submitzjd">保存</van-button>
        <van-button plain color="#22B7F2" style="width:45%" round type="info" @click="cancel">取消</van-button>
      </div>
      <div style="height: 50px;"></div>
    </van-form>
  </div>
</template>

<script>
import FieldSelect from "@/components/form/FieldSelect";
import FieldRadio from "@/components/form/FieldRadio";
import {listNhhncy,addNhhncy,updateNhhncy,delNhhncy} from "@/api/homesteadSurvey/nhhncy";

import { Notify, Dialog, Toast } from 'vant';
import axios from "axios";
export default {
  components: {FieldSelect, FieldRadio},
  name: "nhAdd",
  data() {
    return {
      active:2,
      permission:false,
      // 使用权人列表
      syqrlist:[
        {
          shyqrdbxm :'测试测试',
          shyqrdbzjhm :'12324648564',
          nhdm :'777888999',
        }
      ],
      minDate: new Date(),
      maxDate: new Date(2025, 10, 1),
      showZgqrzrq:false,
      form:{}
    };
  },
  created(){
    let data = this.$route.query;
    this.permission = localStorage.getItem("executePermission");
    this.form = data;
    if(this.form.nhdm == null){
      this.$set(this.form, 'zjlx', "01");
      this.$set(this.form, 'xb', "1");
      this.$set(this.form, 'yhzgx', "22");
      this.$set(this.form, 'hklx', "01");
      this.$set(this.form, 'hyzk', "01");
      this.$set(this.form, 'cybz', "9");
      this.$set(this.form, 'sjly', "01");
      this.$set(this.form, 'sfbjtjjzzcy', "1");
      this.$set(this.form, 'sfjbzgq', "1");
      this.$set(this.form, 'sfwbh', "0");
      this.$set(this.form, 'sfpkh', "0");
      this.$set(this.form, 'zqtczsfyzf', "0");
      this.$set(this.form, 'jzhcssfyzf', "0");
      this.$set(this.form, 'sfbccm', "1");
      this.$set(this.form, 'occupation', "1");
      this.$set(this.form, 'jzqk', "1");
    }else{
      this.getList();
    }

  },
  mounted(){

  },
  methods: {
    getList(){
      listNhhncy({yhzgx:"02",nhdm:this.form.nhdm}).then(response => {
        this.form = response.rows[0];
      });
    },
    submitzjd(){
      this.$refs.form.validate().then(() => {
        updateNhhncy(this.form).then(response => {
        let _this =this
        this.$toast({
          icon: 'success', // 找到自己需要的图标
          message: '保存成功',
          duration:"1000",
          onClose:function(){
            _this.$router.push({path:'/homesteadSurvey/add2',query: {zjddm: _this.form.zjddm}});
          }
        })
      });
      }).catch((e) => {
        Dialog({ type: 'danger', message: '请填写完整的表单项' });
      });
    },
    cancel(){
      this.$router.push({path:'/homesteadSurvey/add2',query: {zjddm: this.form.zjddm}});
    },
    guidProduct(){
      return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = Math.random() * 16 | 0,
          v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
      });
    },
    /** 查找地图中定位点 */
    MapTag: function (data) {
      this.$refs[this.zjdProductResh].drawingPaceCountryDarw();
    },
    onConfirmZgqrzrq(data){
      this.form.zgqrzrq = this.getNowFormatDate(data).substr(0,10);
      this.showZgqrzrq = false;
    },
    goBack(){
      if(this.ztMap && this.enterMap ==1){
        if(this.form.id == null){
          this.backMap.backMapZjdAData.theGeom= "";
        }else{
          this.backMap.backMapZjdAData = this.form;
        }
        this.$cookies.set("search",this.backMap);
      } else {
        this.$cookies.set("search","");
      }
      this.$router.push({name: this.$router.back(-1)});
      // }
    },
  }
}
</script>

<style scoped>
>>> .bannerBg{
  width: 100%;
  color:#fff;
  padding:10px;
  background: linear-gradient(134deg,#7ac943 1%, #22b7f2);
}
>>> .van-hairline--bottom::after {
  border-bottom-width: 0;
}
>>> .title:before
{
  content:"";
  width: 6px;
  height: 20PX;
  background: #7ac943;
  border-radius: 3px;
  position:absolute;
  left:0;
  bottom:0;
}

>>> .delete-button {
  height: 100%;
}
>>> .van-swipe-cell__wrapper{
  margin-right:-3px;
}
>>> .label-class .van-collapse-item__title--expanded{
  font-weight: bold;
}
</style>
