<template>
    <div class="app-container">
      <van-nav-bar
        left-arrow
        fixed
        placeholder
        @click-left="$router.back(-1)"
      >
        <template #title>
          <p style="font-weight: bold;">添加宅基地使用权流转</p>
        </template>
      </van-nav-bar>
      <van-form ref="_Form">
        <p class="main_title">转出方信息</p>
        <div class="main_box">
          <van-field
            readonly
            clickable
            v-model="circulation.zjddm"
            label="宅基地代码"
            placeholder="请选择"
            @click="showZjd = true"
            input-align="right"
            right-icon="arrow-down" :rules="[{ required: true }]" required
          />
          <van-popup v-model="showZjd" position="bottom">
            <van-picker
              show-toolbar
              :columns="zjdDictionaries"
              @confirm="onConfirmZjd"
              @cancel="showZjd = false"
            />
          </van-popup>

          <van-field
            readonly
            clickable
            v-model="lzfs"
            label="流转方式"
            placeholder="请选择"
            @click="showLzfs = true"
            input-align="right"
            right-icon="arrow-down" :rules="[{ required: true }]" required
          />
          <van-popup v-model="showLzfs" position="bottom">
            <van-picker
              show-toolbar
              :columns="lzfsDictionaries"
              @confirm="onConfirmLzfs"
              @cancel="showLzfs = false"
            />
          </van-popup>

          <van-field
            v-model="circulation.shyqrdm"
            label="转出方使用权人代码"
            placeholder="请选择"
            label-width="auto"
            input-align="right" :rules="[{ required: true }]" required
          />
<!--          @click="showShyqrdm = true"-->
<!--          right-icon="arrow-down"-->
<!--          <van-popup v-model="showShyqrdm" position="bottom">-->
<!--            <van-picker-->
<!--              show-toolbar-->
<!--              :columns="shyqrdmDictionaries"-->
<!--              @confirm="onConfirmShyqrdm"-->
<!--              @cancel="showShyqrdm = false"-->
<!--            />-->
<!--          </van-popup>-->
          <van-field
            v-model="circulation.hncysl"
            label="家庭人口"
            placeholder="家庭人口"
            label-width="auto"
            input-align="right"
          />
          <van-field
            v-model="circulation.zjdsyqr"
            label="使用权人"
            label-width="auto"
            placeholder="使用权人"
            input-align="right"
          />
          <van-field
            v-model="circulation.currentResidence"
            label="现居住地"
            label-width="auto"
            placeholder="现居住地"
            input-align="right"
          />
          <van-field
            v-model="circulation.householdRegister"
            label="户口所在地"
            label-width="auto"
            input-align="right"
          />
          <van-cell title="是否本集体经济组织成员">
            <template #right-icon>
              <van-radio-group v-model="circulation.zcfsfbjtjjzzcy" direction="horizontal">
                <van-radio name="Y">是</van-radio>
                <van-radio name="N">否</van-radio>
              </van-radio-group>
            </template>
          </van-cell>
        </div>

        <p class="main_title">流转信息</p>
        <div class="main_box">
          <van-field label="房屋层数" v-model="zjdData.fwcs" placeholder="房屋层数" input-align="right" label-width="auto" type="number"/>
          <van-field label="建筑面积(㎡)" v-model="zjdData.jzmj" placeholder="流转面积(㎡)" input-align="right" label-width="auto" type="number"/>
          <van-field label="宅基地面积(㎡)" v-model="zjdData.zjdmj" placeholder="宅基地面积(㎡)" input-align="right" label-width="auto" type="number"/>
          <van-field label="不动产证书编号" v-model="zjdData.zjdzsh" placeholder="不动产证书编号(㎡)" input-align="right" label-width="auto" type="number"/>
        </div>

        <p class="main_title">转入方信息</p>
        <div class="main_box">
          <van-field
            v-model="circulation.zrfdbmc"
            label="转入方代表名称"
            placeholder="请输入转入方代表名称"
            label-width="auto"
            input-align="right" :rules="[{ required: true }]" required
          />
<!--          <van-popup v-model="showZrfdbmc" position="bottom">-->
<!--            <van-picker-->
<!--              show-toolbar-->
<!--              :columns="zrfdbmcDictionaries"-->
<!--              @confirm="onConfirmZrfdbmc"-->
<!--              @cancel="showZrfdbmc = false"-->
<!--            />-->
<!--          </van-popup>-->

          <van-field
            readonly
            clickable
            v-model="zrfdbzjlx"
            label="转入方代表证件类型"
            placeholder="请选择"
            @click="showZrfdbzjlx = true"
            label-width="auto"
            input-align="right"
            right-icon="arrow-down" :rules="[{ required: true }]" required
          />
          <van-popup v-model="showZrfdbzjlx" position="bottom">
            <van-picker
              show-toolbar
              :columns="zrfdbzjlxDictionaries"
              @confirm="onConfirmZrfdbzjlx"
              @cancel="showZrfdbzjlx = false"
            />
          </van-popup>

          <van-field label="转入方代表证件号码" v-model="circulation.zrfdbzjhm" placeholder="请输入证件号码" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
          <van-cell title="是否本集体经济组织成员">
            <template #right-icon>
              <van-radio-group  v-model="circulation.zrfsfbjtjjzzcy" direction="horizontal">
                <van-radio name="Y">是</van-radio>
                <van-radio name="N">否</van-radio>
              </van-radio-group>
            </template>
          </van-cell>
          <van-field
            readonly
            clickable
            v-model="lzhfwyt"
            label="流转后房屋用途"
            placeholder="流转后房屋用途"
            @click="showLzhfwyt = true"
            input-align="right"
            right-icon="arrow-down"
            label-width="auto"
          />
          <van-popup v-model="showLzhfwyt" position="bottom">
            <van-picker
              show-toolbar
              :columns="lzhfwytDictionaries"
              @confirm="onConfirmLzhfwyt"
              @cancel="showLzhfwyt = false"
            />
          </van-popup>
          <van-field label="流转金额" v-model="circulation.lzfy" placeholder="流转金额" input-align="right" label-width="auto" type="number"/>
          <van-field label="集体收益金额" v-model="circulation.jtsyje" placeholder="集体收益金额" input-align="right" label-width="auto" type="number"/>
        </div>

        <p class="main_title">其他</p>
        <div class="main_box">
          <van-field label="所有权人代表姓名" v-model="circulation.suyqrdbxm" placeholder="请输入姓名" input-align="right" label-width="auto"/>
          <van-field label="所有权人意见" v-model="circulation.suyqryj" placeholder="请输入内容" input-align="right" label-width="auto"/>
          <van-field label="备注" v-model="circulation.bz" placeholder="请输入备注" input-align="right" label-width="auto"/>
        </div>
        <p class="main_title">转入方意见</p>
        <div class="main_box">
          <van-field label="意见" v-model="lzspyjData.zrryj" placeholder="转入方意见" input-align="right" label-width="auto"/>
          <van-field label="签字" v-model="lzspyjData.zrrqz" placeholder="转入方签字" input-align="right" label-width="auto"/>
          <van-field
            readonly
            clickable
            v-model="lzspyjData.zrryjrq"
            label="签字日期"
            placeholder="签字日期"
            @click="showlzqsrq = true"
            input-align="right"
            right-icon="arrow-down"
          />
          <van-popup v-model="showlzqsrq" position="bottom">
            <van-datetime-picker
              :value="new Date"
              type="date"
              title="选择年月日"
              @confirm="onConfirmLzqsrq"
              @cancel="showlzqsrq = false"
            />
          </van-popup>
        </div>
        <p class="main_title">转出方意见</p>
        <div class="main_box">
          <van-field label="意见" v-model="lzspyjData.zcryj" placeholder="转出方意见" input-align="right" label-width="auto"/>
          <van-field label="签字" v-model="lzspyjData.zcrqz" placeholder="转出方签字" input-align="right" label-width="auto"/>
          <van-field
            readonly
            clickable
            v-model="lzspyjData.zcryjrq"
            label="签字日期"
            placeholder="签字日期"
            @click="showzcfqzrq = true"
            input-align="right"
            right-icon="arrow-down"
          />
          <van-popup v-model="showzcfqzrq" position="bottom">
            <van-datetime-picker
              :value="new Date"
              type="date"
              title="选择年月日"
              @confirm="onConfirmzcfqzrq"
              @cancel="showzcfqzrq = false"
            />
          </van-popup>
        </div>
        <p class="main_title">村集体经济组织意见</p>
        <div class="main_box">
          <van-field label="意见" v-model="lzspyjData.cjtjjzzyj" placeholder="村集体经济组织意见" input-align="right" label-width="auto"/>
          <van-field label="签字" v-model="lzspyjData.cjtjjzzqz" placeholder="村集体经济组织签字" input-align="right" label-width="auto"/>
          <van-field
            readonly
            clickable
            v-model="lzspyjData.cjtjjzzyjrq"
            label="签字日期"
            placeholder="签字日期"
            @click="showcjtqzrq = true"
            input-align="right"
            right-icon="arrow-down"
          />
          <van-popup v-model="showcjtqzrq" position="bottom">
            <van-datetime-picker
              :value="new Date"
              type="date"
              title="选择年月日"
              @confirm="onConfirmcjtqzrq"
              @cancel="showcjtqzrq = false"
            />
          </van-popup>
        </div>
        <p class="main_title">宅基地审批管理办公室意见</p>
        <div class="main_box">
          <van-field label="意见" v-model="lzspyjData.zzjdspyj" placeholder="审批管理办公室意见" input-align="right" label-width="auto"/>
          <van-field label="签字" v-model="lzspyjData.zzjdspqz" placeholder="审批管理办公室签字" input-align="right" label-width="auto"/>
          <van-field
            readonly
            clickable
            v-model="lzspyjData.zzjdspyjrq"
            label="签字日期"
            placeholder="签字日期"
            @click="showzzjdqzrq = true"
            input-align="right"
            right-icon="arrow-down"
          />
          <van-popup v-model="showzzjdqzrq" position="bottom">
            <van-datetime-picker
              :value="new Date"
              type="date"
              title="选择年月日"
              @confirm="onConfirmzzjdqzrq"
              @cancel="showzzjdqzrq = false"
            />
          </van-popup>
        </div>
        <p class="main_title">镇级人民政府意见</p>
        <div class="main_box">
          <van-field label="意见" v-model="lzspyjData.zjrmzfyj" placeholder="镇级人民政府意见" input-align="right" label-width="auto"/>
          <van-field label="签字" v-model="lzspyjData.zjrmzfqz" placeholder="镇级人民政府签字" input-align="right" label-width="auto"/>
          <van-field
            readonly
            clickable
            v-model="lzspyjData.zjrmzfyjrq"
            label="签字日期"
            placeholder="签字日期"
            @click="showzjrmzfdqzrq = true"
            input-align="right"
            right-icon="arrow-down"
          />
          <van-popup v-model="showzjrmzfdqzrq" position="bottom">
            <van-datetime-picker
              :value="new Date"
              type="date"
              title="选择年月日"
              @confirm="onConfirmzjrmzfqzrq"
              @cancel="showzjrmzfdqzrq = false"
            />
          </van-popup>
        </div>
      </van-form>

        <div style="padding: 16px 0;">
          <van-row>
            <van-col span="24" align="center">
              <van-button type="info" native-type="submit" class="submitButton" @click="goEdit">保<i style="margin-right: 1em;"></i>存</van-button>
            </van-col>
          </van-row>
          <div class="clear"></div>
        </div>
    </div>
</template>

<script>
import { getLz , zjdzd ,queryGeoZjdzd,queryHouserBaseNh, getByZjddm , edit , goApply } from "@/api/onlineHome/homestead/circulation";
import { listLzspyj,updateLzspyj } from "@/api/onlineHome/homestead/lzspyj";
import {Notify} from "vant";
export default {
    name: "circulationModify",
  data() {
    return {
      lzfsDictionaries: [],//流转方式
      shyqrdmDictionaries: [],//转出方使用权人代码
      lzqfwytDictionaries: [],//流转前房屋类型
      lzhfwytDictionaries: [],//流转后房屋类型
      zrfdbmcDictionaries: [],//转入方代表名称
      zrfdbzjlxDictionaries: [],//转入方证件类型
      zjdDictionaries: [],//宅基地列表
      lzfs: '',//流转方式
      shyqrdm: '',//转出方使用权人代码
      lzqfwyt: '',//流转前房屋类型
      lzhfwyt: '',//流转后房屋类型
      zrfdbmc: '',//转入方代表名称
      zrfdbzjlx: '',//转入方证件类型
      zjd: [],//宅基地列表
      zjdData:{
        jzmj:null,
        fwcs:null,
        zjdmj:null
      },
      //流转审批意见
      lzspyjData:{},
      showLzfs: false,
      showShyqrdm: false,
      showLzqfwyt: false,
      showLzhfwyt: false,
      showZrfdbmc: false,
      showZrfdbzjlx: false,
      showZjd:false,
      showlzqsrq:false,
      showlzjsrq:false,
      showzcfqzrq:false,
      showcjtqzrq:false,
      showzzjdqzrq:false,
      showzjrmzfdqzrq:false,
      zrryjrq:null,
      zcryjrq:null,
      cjtjjzzyjrq:null,
      zzjdspyjrq:null,
      zjrmzfyjrq:null,
      circulation:[]
    };
  },
  created() {
    this.getDetail();
  },
  methods: {
    getDetail(){
      getLz(this.$route.query.id).then(response => {
        console.log(response)
        //流转方式
        this.houseGetDicts("lzfs").then((res) => {
          for( let i = 0 ; i < res.data.length ; i++){
            this.lzfsDictionaries.push({text:res.data[i].dictLabel,value:res.data[i].dictValue})
          }
          this.lzfs = this.selectDictLabel(res.data, response.data.lzfs);
        });
        //转入方证件类型
        this.houseGetDicts("zjlx").then((res) => {
          for( let i = 0 ; i < res.data.length ; i++){
            this.zrfdbzjlxDictionaries.push({text:res.data[i].dictLabel,value:res.data[i].dictValue})
          }
          this.zrfdbzjlx = this.selectDictLabel(res.data, response.data.zrfdbzjlx);
        });
        //宅基地代码
        zjdzd().then(zjdRes => {
          for( let i = 0 ; i < zjdRes.rows.length ; i++){
            this.zjdDictionaries.push(zjdRes.rows[i].zjddm);
          }
          var form = {};
          form.zjddm = zjdRes.rows[0].zjddm;
          // getByZjddm(form).then(qlrRes => {
          //   this.circulation.shyqrdm = qlrRes.data.shyqrdm;
          // });
        });
        //流转前房屋用途
        this.houseGetDicts("fwyt").then((res) => {//流转前房屋用途
          console.log(res)
          for( let i = 0 ; i < res.data.length ; i++){
            this.lzqfwytDictionaries.push({text:res.data[i].dictLabel,value:res.data[i].dictValue})
          }
          this.lzqfwyt = this.selectDictLabel(res.data, response.data.lzqfwyt);
        });
        //流转后房屋用途
        this.houseGetDicts("fwyt").then((res) => {//流转后房屋用途
          for( let i = 0 ; i < res.data.length ; i++){
            this.lzhfwytDictionaries.push({text:res.data[i].dictLabel,value:res.data[i].dictValue})
          }
          this.lzhfwyt = this.selectDictLabel(res.data, response.data.lzhfwyt);
        });

        this.circulation = response.data;
        this.onConfirmZjd(response.data.zjddm);
        listLzspyj({lzId:response.data.id}).then((response) => {
          if(response.rows.length > 0){
            this.lzspyjData = response.rows[0];
          }
        });
      });
    },
    zjddmChange(value){
      let _this = this;
      queryGeoZjdzd({zjddm:value}).then(zjdRes => {
        if(zjdRes.data != null){
          _this.$set(this.zjdData, "zjdzsh", zjdRes.data.zjdzsh);
          if(zjdRes.data.thouseBaseStandardNmfw.length > 0){
            zjdRes.data.thouseBaseStandardNmfw.forEach(function (item) {
              if(_this.zjdData.jzmj != null &&  _this.zjdData.jzmj !== ""){
                _this.$set(_this.zjdData, "jzmj", parseInt(_this.zjdData.jzmj) + parseInt(item.jzmj));
              }else{
                _this.$set(_this.zjdData, "jzmj", item.jzmj);
              }
            })

            this.$set(this.zjdData, "fwcs", zjdRes.data.thouseBaseStandardNmfw[0].sjcs);
          }
          if(zjdRes.data.thouseBaseStandardZjdzdxx.length > 0){
            this.$set(this.zjdData, "zjdmj", zjdRes.data.thouseBaseStandardZjdzdxx[0].zjdpzmj);
          }
        }
      });
    },
    onConfirmZjd(value) {
      this.zjddmChange(value);
      this.circulation.zjddm = value;
      let form = {};
      form.zjddm = value;
      getByZjddm(form).then(qlrRes => {
        let data = qlrRes.data;
        this.circulation.shyqrdm = data.shyqrdm;
        let queryMember = {
          hzxm :  data.shyqrdbxm,
        };
        queryHouserBaseNh(queryMember).then((response) => {
          this.$set(this.circulation, 'hncysl', response.rows[0].hncysl);
        });
        this.$set(this.circulation, 'suyqrdbxm', data.shyqrdbxm);
        this.$set(this.circulation, 'zjdsyqr', data.shyqrdbxm);
        this.$set(this.circulation, 'zcfsfbjtjjzzcy', data.sfbncjtjjzzcy == '1' || data.sfbncjtjjzzcy == 'Y' ? 'Y' : 'N');
        this.$forceUpdate();
      });
      this.showZjd = false;

    },
    onConfirmLzfs(value) {
      this.lzfs = value.text;
      this.circulation.lzfs = value.value;
      this.showLzfs = false;
    }, //流转方式
    onConfirmShyqrdm(value) {
      this.showShyqrdm = false;
    }, //转出方使用权人代码
    onConfirmLzqfwyt(value) {
      this.lzqfwyt = value.text;
      this.circulation.lzqfwyt = value.value;
      this.showLzqfwyt = false;
    }, //流转前房屋用途
    onConfirmLzhfwyt(value) {
      this.lzhfwyt = value.text;
      this.circulation.lzhfwyt = value.value;
      this.showLzhfwyt = false;
    }, //流转后房屋用途
    onConfirmZrfdbmc(value) {
      this.value = value;
      this.showZrfdbmc = false;
    }, //转入方代表名称
    onConfirmZrfdbzjlx(value) {
      this.zrfdbzjlx = value.text;
      this.circulation.zrfdbzjlx = value.value;
      this.showZrfdbzjlx = false;
    }, //转入方代表证件类型
    onConfirmLzqsrq(value) {
      this.lzspyjData.zrryjrq = this.getNowFormatDate(value).substr(0,10);
      this.showlzqsrq = false;
    }, //转出方时间
    onConfirmzcfqzrq(value) {
      this.lzspyjData.zcryjrq = this.getNowFormatDate(value).substr(0,10);
      this.showzcfqzrq = false;
    },
    onConfirmcjtqzrq(value) {
      this.lzspyjData.cjtjjzzyjrq = this.getNowFormatDate(value).substr(0,10);
      this.showcjtqzrq = false;
    }, //村集体签字日期
    onConfirmzzjdqzrq(value) {
      this.lzspyjData.zzjdspyjrq = this.getNowFormatDate(value).substr(0,10);
      this.showzzjdqzrq = false;
    },//宅基地审批管理办公室签字日期
    onConfirmzjrmzfqzrq(value) {
      this.lzspyjData.zjrmzfyjrq = this.getNowFormatDate(value).substr(0,10);
      this.showzjrmzfdqzrq = false;
    },//镇级人民政府签字日期

    goEdit(){
      this.$refs._Form.validate().then(() => {
      edit(this.circulation).then(response => {
        if(response.code = 200){
          if(this.lzspyjData != null){
            updateLzspyj(this.lzspyjData).then((res) => {
              this.$toast.success('保存成功');
              window.location.replace("circulationList")
            });
          }
          this.$toast.success('保存成功');
          window.location.replace("circulationList");
        }
      })
        }).catch((e) => {
          Notify({ type: 'danger', message: '请填写完整的表单项' });
        });
    },
    goSubmit(){
      this.$refs._Form.validate().then(() => {
      goApply(this.$route.query.id).then(response => {
        if(response.code = 200){
          this.$toast.success('提交成功');
          setTimeout(function(){
            window.location.replace("circulationList")
          },1000)
        }
      })
      }).catch((e) => {
        Notify({ type: 'danger', message: '请填写完整的表单项' });
      });
    },
  },
}
</script>

<style scoped lang="scss">
  .app-container {
  }
  .main_title{
    font-size: 0.4rem;
    color: #1D6FE9;
    margin: 0.2rem 6%;
    position: relative;
  }
  .main_box{
    width: 96%;
    margin: 0 auto;
    border-radius: 6px;
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
    overflow: hidden;
    background-color: #FFF;
  }
  .submitButton{
    width: 80%;
    margin: 0 auto;
    background-color: #1D6FE9;

  }
</style>
