nsgk_mobile/src/views/homesteadSurvey/add.vue

<template>
  <div class="app-container">
    <van-sticky style="position:relative;">
      <div class="bannerBg">
        <van-nav-bar
          style="background:transparent;border-bottom-width:0;margin-bottom:.5rem;"
          @click-left="goBack()"
          right-text ="首页"
          @click-right="goRightBack()"
        >
          <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="checkTz('/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="checkTz('/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="checkTz('/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" style="margin-top: 1.4rem;">
      <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
          autocomplete="off"
          input-align="right"
          v-model="form.suyqrdm"
          name="所有权人代码"
          label="所有权人代码"
          placeholder="所有权人代码"
          readonly
        />
        <van-field
          autocomplete="off"
          v-model="form.zldwdm"
          name="坐落单位代码"
          label="坐落单位代码"
          placeholder="坐落单位代码"
          input-align="right"
          required
          :rules="[{ required: true}]"
        />
        <van-field
          autocomplete="off"
          input-align="right"
          v-model="form.zddm"
          name="宗地代码"
          label="宗地代码"
          placeholder="宗地代码"
        />
        <van-field
          autocomplete="off"
          input-align="right"
          v-model="form.bdcdyh"
          name="不动产单元号"
          label="不动产单元号"
          placeholder="不动产单元号"
        />
        <van-field
          autocomplete="off"
          input-align="right"
          v-model="form.zl"
          name="坐落"
          label="坐落"
          placeholder="坐落"
          required
          :rules="[{ required: true }]"
        />
        <van-field
          autocomplete="off"
          input-align="right"
          v-model="form.zdmj"
          type="number"
          name="宗地面积(㎡)"
          label="宗地面积(㎡)"
          placeholder="宗地面积(㎡)"
          maxlength="15"
          required
          :rules="[{ required: true }]"
        />
        <field-select
          v-model="form.yt"
          label="用途"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="选择用途"
          remote-url="/open/zdzh/list/land_use"
          :on-remote-response="'data'"
          required
          :rules="[{ required: true }]"
        />
        <field-select
          v-model="form.dj"
          label="等级"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="选择等级"
          remote-url="/open/zdzh/list/tddj"
          :on-remote-response="'data'"
        />
        <van-field
          autocomplete="off"
          input-align="right"
          v-model="form.jg"
          name="价格(万元)"
          label="价格(万元)"
          placeholder="价格(万元)"
          type="number"
          maxlength="15"
        />
        <field-select
          v-model="form.qllx"
          label="权利类型"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="选择权利类型"
          remote-url="/open/zdzh/list/rights_type"
          :on-remote-response="'data'"
        />
        <field-select
          v-model="form.qlxz"
          label="权利性质"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="选择权利性质"
          remote-url="/open/zdzh/list/rights_nature"
          :on-remote-response="'data'"
        />
        <field-select
          v-model="form.qlsdfs"
          label="权利设定方式"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="选择权利设定方式"
          remote-url="/open/zdzh/list/right_setting_mode"
          :on-remote-response="'data'"
        />
        <van-field
          autocomplete="off"
          input-align="right"
          v-model="form.rjl"
          name="容积率"
          label="容积率"
          placeholder="容积率"
        />
        <van-field
          autocomplete="off"
          input-align="right"
          v-model="form.jzmd"
          name="建筑密度"
          label="建筑密度"
          placeholder="填写0~1小数"
          :rules="[{ validator, message: '请填写0~1小数，保留两位小数' }]"
          type="number"
        />
        <van-field
          autocomplete="off"
          input-align="right"
          v-model="form.jzxg"
          name="建筑限高"
          label="建筑限高(米)"
          placeholder="建筑限高"
          type="number"
          maxlength="15"
        />

        <van-field
          autocomplete="off"
          input-align="right"
          v-model="form.zdszd"
          name="宗地四至-东"
          label="宗地四至-东"
          placeholder="宗地四至-东"
          maxlength="150"
          required
          :rules="[{ required: true, message: '' }]"
        />
        <van-field
          autocomplete="off"
          input-align="right"
          v-model="form.zdszn"
          name="宗地四至-南"
          label="宗地四至-南"
          placeholder="宗地四至-南"
          maxlength="150"
          required
          :rules="[{ required: true, message: '' }]"
        />
        <van-field
          input-align="right"
          v-model="form.zdszx"
          name="宗地四至-西"
          label="宗地四至-西"
          placeholder="宗地四至-西"
          maxlength="150"
          required
          :rules="[{ required: true, message: '' }]"
        />
        <van-field
          autocomplete="off"
          input-align="right"
          v-model="form.zdszb"
          name="宗地四至-北"
          label="宗地四至-北"
          placeholder="宗地四至-北"
          maxlength="150"
          required
          :rules="[{ required: true}]"
        />
        <van-field
          autocomplete="off"
          input-align="right"
          v-model="form.tfh"
          name="图幅号"
          label="图幅号"
          placeholder="图幅号"
        />
        <van-field
          autocomplete="off"
          input-align="right"
          v-model="form.djh"
          name="地籍号"
          label="地籍号"
          placeholder="地籍号"
        />
        <van-field
          autocomplete="off"
          input-align="right"
          v-model="form.bz"
          name="备注"
          label="备注"
          placeholder="备注"
        />
        <field-select
          v-model="form.sjly"
          label="数据来源"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="选择数据来源"
          remote-url="/open/zdzh/list/sjly"
          :on-remote-response="'data'"
          required
          :rules="[{ required: true}]"
        />
        <p class="title" style="position:relative;padding-left:10px;line-height:20px;font-size: 16px;margin-left: 3%;margin-bottom: 5px;">属性信息</p>
        <field-select
          v-model="form.zjdqdfs"
          label="取得方式"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="选择取得方式"
          remote-url="/open/zdzh/list/acquisition_method"
          :on-remote-response="'data'"
        />
        <van-field
                        autocomplete="off"
                        input-align="right"
                        v-model="form.zjdqdsj"
                        name="取得时间"
                        label="取得时间"
                        placeholder="取得时间"
                        readonly
                        @click="showZjdqdsj = true"
                      />
        <van-popup v-model:show="showZjdqdsj" position="bottom">
                        <van-datetime-picker
                          :value="new Date"
                          type="date"
                          :min-date="minDate"
                          :max-date="maxDate"
                          @confirm="onConfirmzjdqdsj"
                          @cancel="showZjdqdsj = false"
                        />
        </van-popup>
        <van-field
          autocomplete="off"
          input-align="right"
          v-model="form.zjdpzmj"
          type="number"
          name="批准面积(㎡)"
          label="批准面积(㎡)"
          placeholder="批准面积(㎡)"
          maxlength="15"
        />
        <FieldRadio
          v-model="form.sfcz"
          label="是否超占"
          value-key="dictLabel"
          data-key="dictValue"
          remote-url="/open/zdzh/list/house_yes_no"
          :on-remote-response="'data'"
          @change="onSfczChanged"
        />
        <van-field
          v-if="showCzmj"
          autocomplete="off"
          input-align="right"
          v-model="form.czmj"
          type="number"
          name="超占面积(㎡)"
          label="超占面积(㎡)"
          placeholder="超占面积(㎡)"
          maxlength="15"
          required
          :rules="[{ required: true, message: '' }]"
        />
        <FieldRadio
          v-model="form.sffz"
          label="是否发证"
          value-key="dictLabel"
          data-key="dictValue"
          remote-url="/open/zdzh/list/house_yes_no"
          :on-remote-response="'data'"
          @change="onSffzChanged"
        />
        <van-field
          v-if="showFzxx"
          input-align="right"
          v-model="form.zsh"
          name="证书号"
          label="证书号"
          placeholder="证书号"
          maxlength="150"
          required
          :rules="[{ required: true, message: '' }]"
        />
        <van-field
          v-if="showFzxx"
          autocomplete="off"
          input-align="right"
          v-model="form.zsmj"
          type="number"
          name="证书面积(㎡)"
          label="证书面积(㎡)"
          placeholder="证书面积(㎡)"
          maxlength="15"
          required
          :rules="[{ required: true, message: '' }]"
        />
        <van-field
          v-if="showFzxx"
          input-align="right"
          v-model="form.fzdw"
          name="发证单位"
          label="发证单位"
          placeholder="发证单位"
          maxlength="150"
          required
          :rules="[{ required: true, message: '' }]"
        />
        <van-field
          v-if="showWbzyy"
          input-align="right"
          v-model="form.wbzyy"
          name="未办证原因"
          label="未办证原因"
          placeholder="未办证原因"
          maxlength="150"
          required
          :rules="[{ required: true, message: '' }]"
        />
        <field-select
          v-model="form.houseOwnership"
          label="权利归属"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="选择权利归属"
          remote-url="/open/zdzh/list/house_ownership"
          :on-remote-response="'data'"
        />
        <field-select
        v-model="form.landStatus"
        label="使用状态"
        value-key="dictLabel"
        data-key="dictValue"
        placeholder="选择使用状态"
        remote-url="/open/zdzh/list/land_status"
        :on-remote-response="'data'"
        required
        :rules="[{ required: true}]"
      />
        <field-select
          v-model="form.zjdlyzk"
          label="利用状况"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="选择利用状况"
          remote-url="/open/zdzh/list/zjdlyzk"
          :on-remote-response="'data'"
          @change="onZjdlyzkChanged"
          required
          :rules="[{ required: true}]"
        />
        <van-field
          v-if="showXzyy"
          input-align="right"
          v-model="form.zjdxzyy"
          name="闲置原因"
          label="闲置原因"
          placeholder="闲置原因"
          maxlength="150"
          required
          :rules="[{ required: true, message: '' }]"
        />
        <van-field
          v-if="showXzyy"
          autocomplete="off"
          input-align="right"
          v-model="form.zjdxzqssj"
          name="闲置起始时间"
          label="闲置起始时间"
          placeholder="闲置起始时间"
          required
          :rules="[{ required: true, message: '' }]"
          readonly
          @click="showXzqssj = true"
        />
        <van-popup v-model:show="showXzqssj" position="bottom">
          <van-datetime-picker
            :value="new Date"
            type="date"
            @confirm="onConfirmxzqssj"
            @cancel="showXzqssj = false"
            :min-date="minDate"
            :max-date="maxDate"
          />
        </van-popup>
        <field-select
          v-model="form.landPhms"
          label="盘活利用模式"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="选择盘活利用模式"
          remote-url="/open/zdzh/list/phlyms"
          :on-remote-response="'data'"
        />
        <van-field
          autocomplete="off"
          input-align="right"
          v-model="form.nsy"
          type="number"
          name="年收益(元)"
          label="年收益(元)"
          placeholder="年收益(元)"
          maxlength="15"
        />
        <van-row type="flex" justify="space-between" align="center">
          <van-col span="6"><div style="color: #646566;font-size: 0.373333rem;text-indent:17%;">宗地图</div></van-col>
          <van-col span="6">
            <MultiImageUploadComp :value="form.zdt" :uploadDisabled="showUpload" @fileUpdate="fileUpdateZdt"/>
          </van-col>
        </van-row>
<!--        <van-collapse v-model="activeZjd">-->
<!--          <van-collapse-item title="利用状况" name="1" class="label-class">-->
<!--            <van-field-->
<!--              autocomplete="off"-->
<!--              input-align="right"-->
<!--              v-model="form.lyzkName"-->
<!--              name="当前利用状况"-->
<!--              label="当前利用状况"-->
<!--              placeholder="当前利用状况"-->
<!--              readonly-->
<!--              @click="showlyzk = true"-->
<!--            />-->
<!--            <van-field-->
<!--              v-model="form.lyzk"-->
<!--              style="display:none"-->
<!--            />-->
<!--            <van-field-->
<!--              autocomplete="off"-->
<!--              input-align="right"-->
<!--              v-model="form.zjdxzyy"-->
<!--              name="闲置原因"-->
<!--              label="闲置原因"-->
<!--              placeholder="宅基地闲置原因"-->
<!--              maxlength="200"-->
<!--            />-->
<!--            <van-field-->
<!--              autocomplete="off"-->
<!--              input-align="right"-->
<!--              v-model="form.xzkssj"-->
<!--              name="闲置开始时间"-->
<!--              label="闲置开始时间"-->
<!--              placeholder="闲置开始时间"-->
<!--              readonly-->
<!--              @click="showPickerxzkssj = true"-->
<!--            />-->
<!--            <van-popup v-model:show="showPickerxzkssj" position="bottom">-->
<!--              <van-datetime-picker-->
<!--                type="date"-->
<!--                @confirm="onConfirmxzkssj"-->
<!--                @cancel="showPickerxzkssj = false"-->
<!--                :min-date="minDate"-->
<!--                :max-date="maxDate"-->
<!--              />-->
<!--            </van-popup>-->
<!--            <van-field name="radio" label="流转意向" input-align="right" autocomplete="off">-->
<!--              <template #input>-->
<!--                <van-radio-group v-model="form.lzyx" direction="horizontal">-->
<!--                  <van-radio name="1">有</van-radio>-->
<!--                  <van-radio name="0">无</van-radio>-->
<!--                </van-radio-group>-->
<!--              </template>-->
<!--            </van-field>-->
<!--            <van-field name="radio" label="有偿退出意向" input-align="right" autocomplete="off">-->
<!--              <template #input>-->
<!--                <van-radio-group v-model="form.yctcyx" direction="horizontal">-->
<!--                  <van-radio name="1">有</van-radio>-->
<!--                  <van-radio name="0">无</van-radio>-->
<!--                </van-radio-group>-->
<!--              </template>-->
<!--            </van-field>-->
<!--          </van-collapse-item>-->
<!--          <van-collapse-item title="其他信息" name="2" class="label-class">-->
<!--            <van-field-->
<!--              autocomplete="off"-->
<!--              input-align="right"-->
<!--              v-model="form.djName"-->
<!--              name="等级"-->
<!--              label="等级"-->
<!--              placeholder="等级"-->
<!--              @click="showdj = true"-->
<!--            />-->
<!--            <van-field-->
<!--              autocomplete="off"-->
<!--              v-model="form.dj"-->
<!--              style="display:none"-->
<!--            />-->
<!--            <van-field-->
<!--              autocomplete="off"-->
<!--              input-align="right"-->
<!--              v-model="form.jg"-->
<!--              name="价格（万元）"-->
<!--              label="价格（万元）"-->
<!--              placeholder="价格（万元）"-->
<!--              maxlength="15"-->
<!--              type="number"-->
<!--            />-->
<!--            <van-field-->
<!--              autocomplete="off"-->
<!--              input-align="right"-->
<!--              v-model="form.ytmc"-->
<!--              name="用途"-->
<!--              label="用途"-->
<!--              placeholder="用途"-->
<!--              readonly-->
<!--              @click="showyt = true"-->
<!--              required-->
<!--              :rules="[{ required: true, message: '用途不能为空' }]"-->
<!--            />-->
<!--            <van-field-->
<!--              v-model="form.yt"-->
<!--              style="display:none"-->
<!--              autocomplete="off"-->
<!--            />-->
<!--            <van-field-->
<!--              autocomplete="off"-->
<!--              input-align="right"-->
<!--              v-model="form.qllxName"-->
<!--              name="权利类型"-->
<!--              label="权利类型"-->
<!--              placeholder="权利类型"-->
<!--              readonly-->
<!--              @click="showqllx = true"-->
<!--            />-->
<!--            <van-field-->
<!--              autocomplete="off"-->
<!--              v-model="form.qllx"-->
<!--              style="display:none"-->
<!--            />-->
<!--            <van-field-->
<!--              autocomplete="off"-->
<!--              input-align="right"-->
<!--              v-model="form.qlxzName"-->
<!--              name="权利性质"-->
<!--              label="权利性质"-->
<!--              placeholder="权利性质"-->
<!--              readonly-->
<!--              @click="showqlxz = true"-->
<!--            />-->
<!--            <van-field-->
<!--              autocomplete="off"-->
<!--              v-model="form.qlxz"-->
<!--              style="display:none"-->
<!--            />-->
<!--            <van-field-->
<!--              autocomplete="off"-->
<!--              input-align="right"-->
<!--              v-model="form.qlsdfsName"-->
<!--              name="权利设定方式"-->
<!--              label="权利设定方式"-->
<!--              placeholder="权利设定方式"-->
<!--              readonly-->
<!--              @click="showqlsdfs = true"-->
<!--            />-->
<!--            <van-field-->
<!--              autocomplete="off"-->
<!--              v-model="form.qlsdfs"-->
<!--              style="display:none"-->
<!--            />-->
<!--            <van-field-->
<!--              autocomplete="off"-->
<!--              input-align="right"-->
<!--              v-model="form.rjl"-->
<!--              name="容积率"-->
<!--              label="容积率"-->
<!--              placeholder="容积率"-->
<!--            />-->
<!--            <van-field-->
<!--              input-align="right"-->
<!--              v-model="form.jzmd"-->
<!--              name="validator"-->
<!--              label="建筑密度"-->
<!--              placeholder="填写0~1小数"-->
<!--              :rules="[{ validator, message: '请填写0~1小数，保留两位小数' }]"-->
<!--              type="number"-->
<!--            />-->
<!--            <van-field-->
<!--              autocomplete="off"-->
<!--              input-align="right"-->
<!--              v-model="form.jzxg"-->
<!--              name="建筑限高(m)"-->
<!--              label="建筑限高(m)"-->
<!--              placeholder="填写000.00~999.99小数"-->
<!--              :rules="[{ validator:validator1, message: '请填写000.00~999.99小数，保留两位小数' }]"-->
<!--              type="number"-->
<!--            />-->
<!--            <van-field-->
<!--              autocomplete="off"-->
<!--              input-align="right"-->
<!--              v-model="form.zdt"-->
<!--              name="宗地图"-->
<!--              label="宗地图"-->
<!--              placeholder="宗地图"-->
<!--              maxlength="200"-->
<!--            />-->
<!--            <van-field-->
<!--              autocomplete="off"-->
<!--              input-align="right"-->
<!--              v-model="form.tfh"-->
<!--              name="图幅号"-->
<!--              label="图幅号"-->
<!--              placeholder="图幅号"-->
<!--              maxlength="50"-->
<!--            />-->
<!--            <van-field-->
<!--              autocomplete="off"-->
<!--              input-align="right"-->
<!--              v-model="form.djh"-->
<!--              name="地籍号"-->
<!--              label="地籍号"-->
<!--              placeholder="自动生成"-->
<!--              disabled-->
<!--              v-show="false"-->
<!--            />-->
<!--            <van-field name="radio" label="被惩处经历" input-align="right" autocomplete="off">-->
<!--              <template #input>-->
<!--                <van-radio-group v-model="form.bccjl" direction="horizontal">-->
<!--                  <van-radio name="1">有</van-radio>-->
<!--                  <van-radio name="0">无</van-radio>-->
<!--                </van-radio-group>-->
<!--              </template>-->
<!--            </van-field>-->
<!--            <van-field-->
<!--              autocomplete="off"-->
<!--              v-if="form.bccjl==1"-->
<!--              input-align="right"-->
<!--              v-model="form.bccbz"-->
<!--              name="被惩处备注"-->
<!--              label="被惩处备注"-->
<!--              placeholder="被惩处备注"-->
<!--              maxlength="200"-->
<!--            />-->
<!--            <van-field name="radio" label="宅基地取得方式" input-align="right" autocomplete="off">-->
<!--              <template #input>-->
<!--                <van-radio-group v-model="form.zjdqdfs" direction="horizontal">-->
<!--                  <van-radio v-for="dict in zjdqdfsOptions" :key="dict.dictValue" :name="dict.dictValue">{{dict.dictLabel}}</van-radio>-->
<!--                </van-radio-group>-->
<!--              </template>-->
<!--            </van-field>-->
<!--          </van-collapse-item>-->
<!--        </van-collapse>-->
<!--        <van-field-->
<!--          autocomplete="off"-->
<!--          v-model="form.sjlyName"-->
<!--          name="数据来源"-->
<!--          label="数据来源"-->
<!--          placeholder="数据来源"-->
<!--          input-align="right"-->
<!--          readonly-->
<!--          @click="showsjly = true"-->
<!--        />-->
<!--        <van-field-->
<!--          autocomplete="off"-->
<!--          v-model="form.sjly"-->
<!--          style="display:none"-->
<!--        />-->

<!--        <van-field-->
<!--          autocomplete="off"-->
<!--          input-align="right"-->
<!--          v-model="form.bz"-->
<!--          name="备注"-->
<!--          label="备注"-->
<!--          placeholder="备注"-->
<!--          maxlength="200"-->
<!--        />-->
<!--        <van-field name="uploader" label="现场照片" autocomplete="off">-->
<!--          <template #input>-->
<!--            <van-uploader v-model="fileListzjd" :after-read="beforeReadzjd" multiple @delete="deleteFilezjd" :max-count="20" accept="image/*"></van-uploader>-->
<!--          </template>-->
<!--        </van-field>-->
        <common-map ref="pointDarwMap" style="height:200px;"
                    :allowDraw="true"
                    @drawReseted="onMapDrawReseted"
                    @drawFinished="onMapDrawFinished"
        >
        </common-map>
      </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>
      </div>
      <div style="height: 50px;"></div>
    </van-form>
  </div>
</template>

<script>
import {getZjdzd,updateZjdzd,addZjdzd,getQueryLand} from "@/api/homesteadSurvey/zjdzd";
import {attach} from "@/api/sunVillage_info/homestead/application";
import FieldSelect from "@/components/form/FieldSelect";
import FieldRadio from "@/components/form/FieldRadio";
import CommonMap from "@/components/house/CommonMap";
import {listSuyqr} from "@/api/homesteadSurvey/suyqr";
import MultiImageUploadComp from "@/components/house/MultiImageUploadComp"
import { Notify, Dialog, Toast } from 'vant';
import axios from "axios";
export default {
  name: "homesteadAdd",
  components: { CommonMap,FieldSelect, FieldRadio,MultiImageUploadComp},
  data() {
    return {
      active:1,
      // 使用权人列表
      suyqrList:[],
      // 地图绘制
      drawInsert: null,
      permission:false,

      // 当前位置信息
      tGeoOrganizationLat: null,
      tGeoOrganizationLng: null,
      showZjdqdsj:false,
      showCzmj:false,
      showFzxx:false,
      showWbzyy:false,
      showXzyy:false,
      showXzqssj:false,
      showUpload:false,
      minDate: new Date(1950,1,1),
      maxDate: new Date(2030, 10, 1),
      form:{}
    };
  },
  created(){
    this.form = JSON.parse(localStorage.getItem("zjdzdxxItem"));
    this.permission = localStorage.getItem("executePermission");
    if(this.form.sfcz === "1"){
      this.showCzmj = true;
    }
    if(this.form.sffz === "1"){
      this.showFzxx = true;
    }else{
      this.showWbzyy = true;
    }
    if(this.form.zjdlyzk !== "1"){
      this.showXzyy = true;
    }
    listSuyqr({}).then((response) => {
      this.suyqrList = response.rows;
    });
    this.$nextTick(() => {
      this.pointDarw(null);
      // this.pointDarwNature(null);
      this.$refs.pointDarwMap && this.$refs.pointDarwMap.update();
    })
  },
  mounted(){

  },
  watch:{
    "form.zjdpzmj":function (newVal,oldVal){
        if(newVal < 0){
          this.form.zjdpzmj = "";
          return false;
        }
        if(newVal === "" && oldVal && oldVal.toString().indexOf(".") > 0){
          this.form.zjdpzmj = oldVal;
          return false;
        }
        if(newVal){
          newVal = newVal.toString();
          let pointIndex = newVal.indexOf(".");
          if(pointIndex > 0 && newVal.length - pointIndex > 3){
            this.form.zjdpzmj = oldVal;
            return true;
          }
        }
    }
  },
  methods: {
    submitzjd(){
      this.$refs.form.validate().then(() => {
        if(this.form.theGeomJson == null){
          Dialog({ type: 'danger', message: '请在地图上标注宅基地所在位置！' });
          return;
        }
        this.permission = "false";
        if(this.form.id == null){

          let surveyItem = JSON.parse(localStorage.getItem("surveyItem"));
          if(this.form.theGeomJson instanceof Array){
            this.$set(this.form, 'theGeomJson', JSON.stringify( this.form.theGeomJson));
          }else if(typeof this.form.theGeomJson === 'string'){
            let theGeometry  = JSON.parse( this.form.theGeomJson);
            if(theGeometry.hasOwnProperty('coordinates')) // 从后台获取的
              this.$set(this.form, 'theGeomJson', JSON.stringify(theGeometry.coordinates));
          }
          this.$set(this.form, 'surveyId', surveyItem.id)
          addZjdzd(this.form).then(response => {
            let _this =this;
            getZjdzd(response.data).then((res) => {
              console.info(res.data);
              localStorage.setItem("zjdzdxxItem",JSON.stringify(res.data));
              this.$toast({
                icon: 'success', // 找到自己需要的图标
                message: '保存成功',
                duration:"1000",
                onClose:function(){
                  _this.$router.push({path:'/homesteadSurvey/add2'});
                }
              })
            })
          });
        }else{
          updateZjdzd(this.form).then(response => {
            let _this =this;
            getZjdzd(this.form.id).then((res) => {
              localStorage.setItem("zjdzdxxItem",JSON.stringify(res.data));
              this.$toast({
                icon: 'success', // 找到自己需要的图标
                message: '保存成功',
                duration:"1000",
                onClose:function(){
                  _this.$router.push({path:'/homesteadSurvey/add2'});
                }
              })
            })
          });
        }

      }).catch((e) => {
        Dialog({ type: 'danger', message: '请填写完整的表单项' });
      });

    },
    validator(val){
      if(val>1||val<0||val.length>4){
        return false
      }else{
        return true
      }
    },
    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();
    },
    onConfirmzjdqdsj(data){
      this.form.zjdqdsj = this.getNowFormatDate(data).substr(0,10);
      this.showZjdqdsj = false;
    },
    onConfirmxzqssj(data){
      this.form.zjdxzqssj = this.getNowFormatDate(data).substr(0,10);
      this.showXzqssj = false;
    },
    /**是否超占处理*/
    onSfczChanged(val){
      if(val === '1'){
        this.showCzmj = true;
      }else{
        this.showCzmj = false;
      }
    },
    /**是否发证*/
    onSffzChanged(val){
      if(val === '1'){
        this.showFzxx = true;
        this.showWbzyy = false;
      }else{
        this.showFzxx = false;
        this.showWbzyy = true;
      }
    },
    checkTz(val){
      console.info(val)
      if(this.form.zjddm == null){
        Dialog({ type: 'danger', message: '请生成宅基地信息！' });
      }else if(this.form.theGeomJson == null){
        Dialog({ type: 'danger', message: '请在地图上标注宅基地所在位置！' });
      }else{
        this.$router.push({path:val});
      }
    },
    fileUpdateZdt(val){
      const params = new FormData();
      params.append("tableId", this.form.id);
      params.append("tableName", "t_homestead_zjdzdxx");
      params.append("bizPath", "upload");
      params.append("fileType", "10");
      params.append('file', val.file);
   console.info( val);
      this.$set(this.form, 'zdt',val);
    },
    /**宅基地利用状态处理*/
    onZjdlyzkChanged(val){
      console.info(val);
      if(val.dictValue === '1'){
        this.showXzyy = false;
      }else{
        this.showXzyy = true;
      }
    },
    // 绘制申请地图
    pointDarw(data) {
      this.$nextTick(() => {
        let map = this.$refs.pointDarwMap;
        console.info(this.form.theGeomJson);
        if(data == null)
          data = this.form.theGeomJson;
        this.setMapData(map, data);

      });
    },
    // 通用设置地图数据函数
    setMapData(map, data) {
      //console.log(map, data ? true : false);
      if(!map) return;
      if(data)
      {
        map.addLayerNew('pointDarwLayer',data,"zjdzdxx",this.form.surveyStatus);
      }
      else {
        this.getLandCoord((lng, lat) => {
          map.setCoord(this.tGeoOrganizationLng, this.tGeoOrganizationLat);
        });
      }
    },
    // 当地图绘制完成时
    onMapDrawFinished(data) {
      console.info(JSON.stringify(data));
      this.drawInsert = data;
      this.form.theGeomJson = JSON.stringify(this.drawInsert);
    },
    // 获取登录人位置坐标
    getLandCoord(func) {
      if (func
        && this.tGeoOrganizationLng !== null && this.tGeoOrganizationLng !== ''
        && this.tGeoOrganizationLat !== null && this.tGeoOrganizationLat !== '') {
        this.$nextTick(() => {
          func(this.tGeoOrganizationLng, this.tGeoOrganizationLat);
        })
      }
      else {
        getQueryLand(this.deptId).then((response) => {
          if (response.code == 200) {
            let InsertCode = response.data;
            this.form.orgCode = InsertCode.orgCode;
            this.tGeoOrganizationLat = InsertCode.lat;
            this.tGeoOrganizationLng = InsertCode.lng;
            if(func)
            {
              func(this.tGeoOrganizationLng, this.tGeoOrganizationLat);
            }
          }
        });
      }
    },
    // 当申请地图被重置时
    onMapDrawReseted() {
      this.drawInsert = null;
      if(this.form.theGeomJson)
      {
        let lastData = JSON.parse(this.form.theGeomJson);
        if(lastData.hasOwnProperty('coordinates')) // 从后台获取的
          this.drawInsert = lastData.coordinates;
      }
    },
    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)});
      // }
    },
    goRightBack(){
      this.$router.push({path:'/homesteadSurvey/list'});
    }
  }
}
</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;
}

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