<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>-->

    <div class="header_main">
      有偿退出
      <div class="return_btn" @click="onClickLeft"></div>
      <!--      <div class="add_btn" @click="goAdd"></div>-->
    </div>

    <div class="main_box">
      <!--        <van-field v-model="circulation.sqrxm" label="申请人姓名" placeholder="申请人姓名" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>-->
      <van-field  readonly v-model="circulation.sqrxm" label="申请人姓名" placeholder="申请人姓名" input-align="right" label-width="auto" :rules="[{ required: true }]" required @input="remoteTransfereeMethod" />
      <div id="dropList" v-show="showDropList"  style="width: 92vw; position: absolute; z-index: 99; left: 50%; margin-left: -46vw; border: 1px solid #E2E0E0;" >
        <van-cell id="vanCell"  v-for="(item, index) in getObligeeOptions" :key="index" @click="shyqrdmxmChange(item)" style="position: relative; z-index: 999;">
          {{item.sqrxm}}
        </van-cell>
      </div>
      <!--        <van-field-->
      <!--          readonly-->
      <!--          clickable-->
      <!--          v-model="circulation.zjddm"-->
      <!--          label="宅基地代码"-->
      <!--          placeholder="请选择"-->
      <!--          @click="remoteProposerMethod"-->
      <!--          input-align="right"-->
      <!--          right-icon="arrow-down" :rules="[{ required: true }]" required-->
      <!--        />-->
      <!--        <van-popup v-model="showzjddm" position="bottom">-->
      <!--          <van-picker-->
      <!--            show-toolbar-->
      <!--            :columns="zjdDictionaries"-->
      <!--            value-key="zjddm"-->
      <!--            @confirm="onConfirmZjddm"-->
      <!--            @cancel="showzjddm = false"-->
      <!--          />-->
      <!--        </van-popup>-->
      <van-field
        readonly
        v-model="circulation.zjddm"
        label="宅基地代码"
        input-align="right"
      >
        <template #button>
          <van-icon name="../../../../static/images/22.png"  color="#539FFD" size="20" @click="mapLook"/>
        </template>
      </van-field>
      <field-select
        readonly
        v-model="circulation.xb"
        label="性別"
        value-key="dictLabel"
        data-key="dictValue"
        placeholder="选择现状"
        :rules="[{ required: true }]"
        required
        remote-url="/open/zdzh/list/sys_user_sex"
        :on-remote-response="'data'"
      />

      <van-field readonly v-model="circulation.sqrzjhm" label="证件号码" placeholder="证件号码" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
      <van-field readonly v-model="circulation.lxdh" label="联系电话" placeholder="联系电话" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
      <field-select
        readonly
        v-model="circulation.gyqk"
        label="共有情况"
        value-key="dictLabel"
        data-key="dictValue"
        placeholder="选择共有情况"
        :rules="[{ required: true }]"
        required
        remote-url="/open/zdzh/list/house_yes_no"
        :on-remote-response="'data'"
      />
      <van-field readonly v-model="circulation.hkszd" label="户口所在地" placeholder="户口所在地" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
    </div>
    <div v-if="circulation.jtcyqkList">
      <p class="main_title">家庭成员情况</p>

      <div >
        <van-tabs v-if="circulation.jtcyqkList && circulation.jtcyqkList.length > 0" v-model="familyMembersActive" ref="memberTabs">
          <van-tab :title="(index + 1) + '. ' + item.xm" v-for="(item , index) in circulation.jtcyqkList" :key="index" swipeable>
            <div class="familyList">
              <div class="main_box" style="margin-bottom: 20px">
                <!--                          <van-button icon="minus" size="mini" type="danger" class="deleteFamily" native-type="button" v-if="index!=0" @click="deleteFamily(index)" />-->
                <van-field readonly required v-model="item.xm" label="姓名" placeholder="姓名" input-align="right" :rules="[{ required: true }]"/>
                <van-field readonly required v-model="item.nl" label="年龄" placeholder="年龄" input-align="right" :rules="[{ required: true }]"/>
                <field-select
                  v-model="item.yhzgx"
                  readonly
                  label="与户主关系"
                  value-key="dictLabel"
                  data-key="dictValue"
                  placeholder="选择与户主关系"
                  :rules="[{ required: true }]"
                  required
                  remote-url="/open/zdzh/list/family_status"
                  :on-remote-response="'data'"
                />
                <van-field readonly required v-model="item.sfzh" label="身份证号" placeholder="身份证号" input-align="right" :rules="[{pattern: /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/}]" @input="updateMemberInfo(index)"/>
                <van-field readonly required v-model="item.hkszd" label="户口所在地" placeholder="户口所在地" input-align="right" :rules="[{ required: true }]"/>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <div v-if="circulation.gyrqkList">
      <p class="main_title">共有人情况</p>

      <div >
        <van-tabs v-if="circulation.gyrqkList && circulation.gyrqkList.length > 0" v-model="familyMembersActive" ref="memberTabs">
          <van-tab :title="(index + 1) + '. ' + item.xm" v-for="(item , index) in circulation.gyrqkList" :key="index" swipeable>
            <div class="familyList">
              <div class="main_box" style="margin-bottom: 20px">
                <!--                  <van-button icon="minus" size="mini" type="danger" class="deleteFamily" native-type="button" v-if="index!=0" @click="deleteFamily(index)" />-->
                <van-field readonly required v-model="item.xm" label="姓名" placeholder="姓名" input-align="right" :rules="[{ required: true }]"/>
                <van-field readonly required v-model="item.nl" label="年龄" placeholder="年龄" input-align="right" :rules="[{ required: true }]"/>
                <field-select
                  v-model="item.yhzgx"
                  label="与户主关系"
                  value-key="dictLabel"
                  data-key="dictValue"
                  placeholder="选择与户主关系"
                  :rules="[{ required: true }]"
                  required
                  readonly
                  remote-url="/open/zdzh/list/family_status"
                  :on-remote-response="'data'"
                />
                <van-field readonly required v-model="item.sfzh" label="身份证号" placeholder="身份证号" input-align="right" :rules="[{pattern: /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/}]" @input="updateMemberInfo(index)"/>
                <van-field readonly required v-model="item.hkszd" label="户口所在地" placeholder="户口所在地" input-align="right" :rules="[{ required: true }]"/>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <p class="main_title">拟申请退出宅基地-面积</p>
    <van-field readonly v-model="circulation.tcmj" label="面积(㎡)" placeholder="请输入面积㎡" input-align="right" label-width="auto" :rules="[{ required: true }]" required type="number"/>
    <field-select
      readonly
      v-model="circulation.xz"
      label="现状"
      value-key="dictLabel"
      data-key="dictValue"
      placeholder="选择现状"
      :rules="[{ required: true }]"
      required
      remote-url="/open/zdzh/list/dsxz"
      :on-remote-response="'data'"
    />
    <p class="main_title">拟申请退出宅基地-四至</p>
    <van-field readonly v-model="circulation.zjdszd" label="东至" placeholder="东至" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
    <van-field readonly v-model="circulation.zjdszn" label="南至" placeholder="南至" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
    <van-field  readonly v-model="circulation.zjdszx" label="西至" placeholder="西至" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
    <van-field readonly v-model="circulation.zjdszb" label="北至" placeholder="北至" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
    <p class="main_title">拟申请退出宅基地情况-地类</p>
    <field-select
      readonly
      v-model="circulation.dldm"
      label="地类"
      value-key="dictLabel"
      data-key="dictValue"
      placeholder="选择现状"
      :rules="[{ required: true }]"
      required
      remote-url="/open/zdzh/list/geographic_type"
      :on-remote-response="'data'"
    />
    <p class="main_title">退出宅基地情况</p>
    <van-field readonly v-model="circulation.tcmj" label="退出面积(㎡)" placeholder="请输入退出面积㎡" input-align="right" label-width="auto" :rules="[{ required: true }]" required type="number"/>
    <van-field readonly v-model="circulation.jzmj" label="建筑面积(㎡)" placeholder="请输入建筑面积㎡" input-align="right" label-width="auto" :rules="[{ required: true }]" required type="number"/>
    <div class="main_box">
      <van-field
        readonly
        clickable
        v-model="tcqllx"
        label="退出权利类型"
        placeholder="请选择退出权利类型"
        input-align="right"
        right-icon="arrow-down"
        label-width="auto" :rules="[{ required: true }]" required
      />
      <van-popup v-model="showtcqllx" position="bottom">
        <van-picker
          show-toolbar
          :columns="tcqllxDictionaries"
          @cancel="showtcqllx = false"
        />
      </van-popup>

      <!--<van-field
        readonly
        clickable
        v-model="tclx"
        label="退出类型"
        placeholder="请选择退出类型"
        @click="showtclx = true"
        input-align="right"
        right-icon="arrow-down"
        label-width="auto" :rules="[{ required: true }]" required
      />
      <van-popup v-model="showtclx" position="bottom">
        <van-picker
          show-toolbar
          :columns="tclxDictionaries"
          @confirm="onConfirmTclx"
          @cancel="showtclx = false"
        />
      </van-popup>-->

      <van-field
        readonly
        clickable
        v-model="tcfs"
        label="退出方式"
        placeholder="请选择退出方式"
        input-align="right"
        right-icon="arrow-down"
        label-width="auto" :rules="[{ required: true }]" required
      />
      <van-popup v-model="showtcfs" position="bottom">
        <van-picker
          show-toolbar
          :columns="tcfsDictionaries"
          @cancel="showtcfs = false"
        />
      </van-popup>

      <van-field v-model="circulation.tcqszsh" label="权属证书号" placeholder="请输入权属证书号" input-align="right" label-width="auto" />
    </div>
    <p class="main_title">现居住情况</p>
    <van-field readonly v-model="circulation.xjzmj" label="建筑面积(㎡)" placeholder="请输入建筑面积㎡" input-align="right" label-width="auto" :rules="[{ required: true }]" required type="number"/>
    <van-field readonly v-model="circulation.xqszsh" label="权属证书号" placeholder="请输入权属证书号" input-align="right" label-width="auto" />
    <van-field readonly v-model="circulation.xjzdd" label="居住地点" placeholder="请输入居住地点" input-align="right" label-width="auto" />
    <p class="main_title">补偿信息</p>
    <van-field readonly v-model="circulation.bcje" label="宅基地补偿" placeholder="宅基地补偿" input-align="right" label-width="auto"  type="number"/>
    <van-field readonly v-model="circulation.dmfzwbc" label="地面附着物补偿" placeholder="地面附着物补偿" input-align="right" label-width="auto"  type="number"/>
    <field-select
      readonly
      v-model="circulation.yctcfs"
      label="退出类型"
      value-key="dictLabel"
      data-key="dictValue"
      placeholder="选择退出类型"
      remote-url="/open/zdzh/list/yctcfs"
      :on-remote-response="'data'"
    />
    <field-select
      readonly
      v-model="circulation.bcfs"
      label="补偿方式"
      value-key="dictLabel"
      data-key="dictValue"
      placeholder="选择退出类型"
      remote-url="/open/zdzh/list/bcfs"
      :on-remote-response="'data'"
    />
    <field-date-picker
      readonly
      v-model="circulation.bcsj"
      label="补偿时间"
      placeholder="选择日期"
      formatter="yyyy-MM-dd"
    />
    <p class="main_title">其他</p>

    <van-field readonly v-model="circulation.sqly" label="申请理由" placeholder="请输入申请理由" input-align="right" label-width="auto"/>
    <field-date-picker
      readonly
      v-model="circulation.sqrq"
      label="申请日期"
      placeholder="选择日期"
      :rules="[{ required: true }]"
      formatter="yyyy-MM-dd"
      required
    />
    <van-field readonly v-model="circulation.jbrxm" label="经办人姓名" placeholder="请输入经办人姓名" input-align="right" label-width="auto"/>
    <field-date-picker
      readonly
      v-model="circulation.pzrq"
      label="批准日期"
      placeholder="选择日期"
      :rules="[{ required: true }]"
      formatter="yyyy-MM-dd"
      required
    />
    <field-date-picker
      v-model="circulation.barq"
      label="备案日期"
      placeholder="选择日期"
      :rules="[{ required: true }]"
      formatter="yyyy-MM-dd"
      required
    />

    <van-dialog v-model="mapShow" show-cancel-button>
      <MapGisObtainTc ref="zjdProductResh" :shqrxm="circulation.sqrxm" :landStatus="landStatus" :deptId="circulation.deptId" @closeMoule="closeMoule"></MapGisObtainTc>
    </van-dialog>
    <!-- 3组附件 -->
    <van-popup
      v-model="attachmentVisible"
      closeable
      position="top"
      :style="{ height: '61.8%' }"
      :close-on-click-overlay="proposerStatus == 1"
      :lazy-render="false"
    >
      <van-tabs type="card" style="padding-top: 1.35rem;" color="#1D6FE9" :lazy-render="false" v-model="attachmentActive" ref="attachmentDialog">
        <van-tab title="退出附件" key="0">
          <home-apply-upload-comp
            :business-type="houseApplyUploadComp.businessType"
            :house-apply-status="houseApplyUploadComp.homeApplyStatus"
            :process-key="houseApplyUploadComp.processKey"
            :proposer-id="houseApplyUploadComp.proposerId"
            :table-name="houseApplyUploadComp.tableName"
            :readonly="houseApplyUploadComp.readonly"
            :userName="houseApplyUploadComp.createBy"
            :full="houseApplyUploadComp.full"
          >
          </home-apply-upload-comp>
        </van-tab>
      </van-tabs>
    </van-popup>
    <!-- 审批 -->

    <div class="main_box examine_box" v-if="showCjt">
      <van-row type="flex" justify="space-between" align="center">
        <van-col span="5">村集体<br/>经济组<br/>织或村<br/>民委员<br/>会意见</van-col>
        <van-col span="19">
          <van-field required :readonly="approval.type !== 'todo' || !cjtspOperation" v-model="circulation.cjzzscyj" rows="2" autosize type="textarea" placeholder="审核意见"/>
          <van-cell title="负责人:"  :rules="[{ required: true }]">
            <van-image
              v-if="circulation.cjzzscr !='' && circulation.cjzzscr !=null && circulation.cjzzscr.endsWith('png')"
              width="100"
              height="50"
              :src="$store.getters.baseRoutingUrl+circulation.cjzzscr"
            ></van-image>
            <div  v-if="circulation.cjzzscr !='' && circulation.cjzzscr !=null && !circulation.cjzzscr.endsWith('png')">{{circulation.cjzzscr}}</div>
          </van-cell>
          <field-date-picker
            v-model="circulation.cjzzscsj"
            label="审批日期"
            placeholder="选择日期"
            :readonly="approval.type !== 'todo' || !cjtspOperation"
            :rules="[{ required: true }]"
            formatter="yyyy-MM-dd"
            required
          />
        </van-col>

      </van-row>
    </div>

    <div class="main_box examine_box" v-if="showZjsp">
      <van-row type="flex" justify="space-between" align="center">
        <van-col span="5">镇级人<br/>民镇府<br/>意见</van-col>
        <van-col span="19">
          <van-field required :readonly="approval.type !== 'todo'" v-model="circulation.xzzfshpzyj" rows="2" autosize type="textarea" placeholder="审核意见"/>
          <van-cell title="负责人:"  :rules="[{ required: true }]">
            <van-image
              v-if="circulation.xzzfshpzrxm !='' && circulation.xzzfshpzrxm !=null && circulation.xzzfshpzrxm.endsWith('png')"
              width="100"
              height="50"
              :src="$store.getters.baseRoutingUrl+circulation.xzzfshpzrxm"
            ></van-image>
            <div v-if="circulation.xzzfshpzrxm !='' && circulation.xzzfshpzrxm !=null && !circulation.xzzfshpzrxm.endsWith('png')">{{circulation.xzzfshpzrxm}}</div>
          </van-cell>
          <field-date-picker
            v-model="circulation.xzzfshpzsj"
            label="审批日期"
            placeholder="选择日期"
            :rules="[{ required: true }]"
            :readonly="approval.type !== 'todo'"
            formatter="yyyy-MM-dd"
            required
          />
        </van-col>

      </van-row>
    </div>
    <div class="clear"></div>
    <van-goods-action style="z-index: 999;">
      <van-goods-action-icon icon="label-o" text="附件" @click="openAttachment" color="#1D6FE9" />
      <van-goods-action-button type="info" text="同意" v-if="approval.type == 'todo'"  @click="complete(true)" />
      <van-goods-action-button type="danger" text="驳回" v-if="approval.type == 'todo'"  @click="complete(false)"/>
    </van-goods-action>
  </div>
</template>

<script>
  import {  getZyyctc,getShyqrs,zyyctcEdit,zyyctcApply,getByLyZjddm,listHomesteadnmfw} from "@/api/sunVillage_info/homestead/paidExit";
  import HomeApplyUploadComp from "@/components/home/HomeApplyUploadCompTc";
  import FieldSelect from "@/components/form/FieldSelect";
  import FieldDatePicker from "@/components/form/FieldDatePicker";
  import {formatDate} from "element-ui/src/utils/date-util.js";
  import { } from "@/api/onlineHome/homestead/paidExit";
  import {Notify} from "vant";
  import MapGisObtainTc from "@/components/Map/MapGisObtainTc";
  import request from '@/utils/request';
  const PROPOSER_VIEW = 1;
  // 工作流名称
  const PROPOSER_STAGE_BASE_APPLY_ACTIVITY = 'home_usetc';
  // 附件表名
  const PROPOSER_STAGE_BASE_APPLY_TABLE = 't_homeuse_zyyctc';
  // 其他
  const PROPOSER_MODULE = 'home';
  export default {
    name: "paidExitDetail",
    components: { MapGisObtainTc,FieldSelect,FieldDatePicker,HomeApplyUploadComp },
    data() {
      return {
        tcqllxDictionaries:[],//退出权利类型
        tclxDictionaries:[],//退出类型
        tcfsDictionaries:[],//退出方式
        xbDictionaries:[],//申请人证件类型
        zjlxDictionaries:[],
        bcfsDictionaries:[],//补偿方式
        zjdDictionaries:[],//宅基地代码
        getObligeeOptions:[],//下拉框列表
        tcqllx:'',
        tclx:'',
        tcfs:'',
        xb:'',
        bcfs:'',
        zjddm:'',
        landStatus:"1",
        nickName:this.$route.query.nickName,
        electronicSignature:this.$route.query.electronicSignature,
        showtcqllx: false,
        showtclx: false,
        showtcfs: false,
        showxb: false,
        showbcfs: false,
        showzjddm: false,
        showZjsp: false,
        showCjt:false,
        cjtspOperation:false,
        showDropList: false,//是否显示下拉框
        mapShow: false,
        attachmentVisible:false,
        // 家庭成员tab
        familyMembersActive: 0,
        active: 0,
        // 表单意图
        proposerStatus: PROPOSER_VIEW,
        circulation:{},
        // 当前附件tab
        attachmentActive: 0,
        // 申请附件树
        houseApplyUploadComp: {
          businessType: PROPOSER_MODULE,
          proposerId: this.$route.query.id,
          homeApplyStatus: "11",
          processKey: PROPOSER_STAGE_BASE_APPLY_ACTIVITY,
          tableName: PROPOSER_STAGE_BASE_APPLY_TABLE,
          attachmentList: [],
          readonly: true,
          full: false,
        },
        approval: {
          taskId: null,
          instanceId: null,
          type: null,
          id: null,
          comment: '',
        },
      };
    },
    created() {
      this.approval.id = this.$route.query.id;
      this.approval.instanceId = this.$route.query.instanceId;
      this.approval.type = this.$route.query.type;
      this.approval.taskId = this.$route.query.taskId;
      this.getDetail();
    },
    methods: {
      // 获取日期, yyyy-MM-dd
      getDate(d) {
        return formatDate(d ? d : new Date(), 'yyyy-MM-dd');
      },
      getDetail(){
        getZyyctc(this.$route.query.id).then(response => {
          this.circulation = response.data;
          if(this.circulation.jtcyqkList != null){
            for(let i = 0; i < this.circulation.jtcyqkList.length; i++)
            {
              this.updateMemberInfo(i);
            }
          }
          if(this.circulation.gyrqkList != null){
            for(let i = 0; i < this.circulation.gyrqkList.length; i++)
            {
              this.updateMemberInfoGy(i);
            }
          }
          if(this.approval.type === "todo"){
            if(response.data.auditStatus === "1" || response.data.auditStatus === "2"){
              if(this.electronicSignature != null){
                this.$set(this.circulation, "cjzzscr", this.electronicSignature);
              }else{
                this.$set(this.circulation, "cjzzscr", this.nickName);
              }
              let handlerTime = this.getDate();
              this.$set(this.circulation, "cjzzscsj", handlerTime);
              this.cjtspOperation = true;
              this.showCjt = true;

            }else if(response.data.auditStatus === "3"){
              this.showZjsp = true;
              this.showCjt = true;
              if(this.electronicSignature != null){
                this.zzfdzqmShow = true;
                this.$set(this.circulation, "xzzfshpzrxm", this.electronicSignature);
              }else{
                this.$set(this.circulation, "xzzfshpzrxm", this.nickName);
              }
              let handlerTime = this.getDate();
              this.$set(this.circulation, "xzzfshpzsj", handlerTime);
            }
          }else{
            if(response.data.auditStatus === "4" ){
              this.showCjt = true;
              this.showZjsp = true;
            }else if(response.data.auditStatus === "0" || response.data.auditStatus === "1"){
              this.showCjt = false;
            }else{
              this.showCjt = true;
            }
          }

          //退出权利类型
          this.houseGetDicts("tcqllx").then((res) => {
            for (var i = 0; i < res.data.length; i++) {
              this.tcqllxDictionaries.push({text: res.data[i].dictLabel, value: res.data[i].dictValue});
            }
            this.tcqllx = this.selectDictLabel(res.data, response.data.tcqllx);
          });
          //退出方式
          this.houseGetDicts("tcfs").then((res) => {
            for (var i = 0; i < res.data.length; i++) {
              this.tcfsDictionaries.push({text: res.data[i].dictLabel, value: res.data[i].dictValue});
            }
            this.tcfs = this.selectDictLabel(res.data, response.data.tcfs);
          });
          //审核状态
          this.houseGetDicts("audit_status").then((res) => {
            this.circulation.auditStatus = this.selectDictLabel(res.data, response.data.auditStatus);
          });
        });
      },
      parseIDCard(idcard) {
        if(!idcard)
          return false;
        if(idcard.length !== 18)
          return false;
        if(!/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(idcard))
          return false;
        let sex = (parseInt(idcard.substr(16, 1)) % 2) ^ 1;
        let now = new Date().getFullYear();
        let y = parseInt(idcard.substr(6, 4));
        let age = Math.max(now - y, 0);
        return [sex, age];
      },
      updateMemberInfo(index) {
        let res = this.parseIDCard(this.circulation.jtcyqkList[index].sfzh);
        if(res)
        {
          this.$set(this.circulation.jtcyqkList[index], 'nl', res[1]);
        }
      },
      updateMemberInfoGy(index) {
        let res = this.parseIDCard(this.circulation.gyrqkList[index].sfzh);
        if(res)
        {
          this.$set(this.circulation.gyrqkList[index], 'nl', res[1]);
        }
      },
      remoteProposerMethod() {
        this.showzjddm = true;
        this.zjdDictionaries = [];
        if (this.circulation.sqrxm) {
          getShyqrs({shyqrdbxm:this.circulation.sqrxm}).then(response => {
            this.zjdDictionaries = response.data.map(item => {
              return {
                zjddm: item.zjddm,
                shyqrdbxm: item.shyqrdbxm,
                shyqrdbzjlx: item.shyqrdbzjlx,
                shyqrdbzjhm: item.shyqrdbzjhm
              }
            });
          });
        } else {
          this.zjdDictionaries = [];
        }
      },
      /** 模糊查询人员信息 */
      remoteTransfereeMethod(query) {
        if (query !== "") {
          getShyqrs({shyqrdbxm:query,status:1}).then((response) => {
            if (response.code == 200) {
              this.getObligeeOptions = response.rows.map(function (item) {
                return {
                  sqrxm:item.shyqrdbxm,
                  sqrxb:item.xb,
                  sqrzjhm:item.shyqrdbzjhm,
                  sqrzjlx:item.shyqrdbzjlx,
                  sqrdh:item.dh,
                  gyfs:item.gyfs,
                  dz:item.dz,
                  deptId:item.deptId,
                  deptName:item.deptName,
                }
              })
              //设置模糊查询的下拉框和滚动条
              if (this.getObligeeOptions.length > 0) {
                this.showDropList = true;   // div显示会阻挡下边的选择框和输入框，showDropList控制下拉框是否显示
                //设置模糊查询的和滚动条
                this.$nextTick(() => {
                  if (this.getObligeeOptions.length > 4) {
                    let height = document.getElementById("vanCell").offsetHeight * 4;
                    document.getElementById("dropList").style.height = height + "px";
                    document.getElementById("dropList").style.overflow = "scroll";
                  } else {
                    document.getElementById("dropList").style.height = "";
                    document.getElementById("dropList").style.overflow = "visible";
                  }
                });
              } else {
                this.showDropList = false;
              }
            }
          });
        } else {
          this.getObligeeOptions = [];
          this.showDropList = false;
        }
      },
      shyqrdmxmChange(val){
        console.info(val);
        this.$set(this.circulation, "sqrxm", val.sqrxm);
        this.$set(this.circulation, "deptId", val.deptId);
        this.$set(this.circulation, "deptName", val.deptId);
        this.$set(this.circulation, "sqrzjhm", val.sqrzjhm);
        this.$set(this.circulation, "sqrzjlx", val.sqrzjlx);
        this.$set(this.circulation, "gyqk", val.gyfs);
        this.$set(this.circulation, "xb", val.sqrxb);
        this.$set(this.circulation, "lxdh", val.sqrdh);
        this.$set(this.circulation, "hkszd", val.dz);
        this.getObligeeOptions=[];
        this.showDropList = false;
      },
      /** 查找地图中宅基地 */
      closeMoule: function (data) {
        this.circulation.zjddm = data;
        let _this = this;
        let handlerTime = this.getDate();
        this.$set(this.circulation, "sqrq", handlerTime);
        this.$set(this.circulation, "pzrq", handlerTime);
        this.$set(this.circulation, "barq", handlerTime);
        getByLyZjddm(data).then((response) => {
          this.$set(this.circulation, "ntcmj", response.data.zdmj);
          this.$set(this.circulation, "tcmj", response.data.zdmj);
          this.$set(this.circulation, "zjdszd", response.data.zdszd);
          this.$set(this.circulation, "zjdszn", response.data.zdszn);
          this.$set(this.circulation, "zjdszx", response.data.zdszx);
          this.$set(this.circulation, "zjdszb", response.data.zdszb);
          this.$set(this.circulation, "theGeomJson", response.data.theGeomJson);
          this.$set(this.circulation, "tcqszsh", response.data.zsh);
          listHomesteadnmfw({zjddm: data}).then((response) => {
            response.rows.map(function(item){
              _this.$set(_this.circulation, "jzmj", Number(_this.circulation.jzmj) + Number(item.jzmj));
              _this.$set(_this.circulation, "xjzmj", Number(_this.circulation.xjzmj) + Number(item.jzmj));
            });
          });
          // const baseImgUrl = this.$store.getters.baseRoutingUrl;
          if(response.rows[0].zdt != null && response.rows[0].zdt !== ""){
            this.$set(this.form, "xzzp", response.rows[0].zdt);
          }
        });
      },
      mapLook(){
        this.mapShow = true;
        setTimeout(() => {
          this.$refs.zjdProductResh.drawingLyPaceCountryDarw();
        },1000);
      },
      // 打开附件树
      openAttachment() {
        this.attachmentVisible = true;
        if(this.attachmentActive == this.active)
          this.$nextTick(() => {
            this.$refs.attachmentDialog.scrollTo(this.active);
          });
      },
      complete(pass) {
        if(this.circulation.auditStatus === "1" || this.circulation.auditStatus === "2"){
          this.approval.comment = this.circulation.cjzzscyj;
        }else{
          this.approval.comment = this.circulation.xzzfshpzyj;
        }
        if(!this.approval.taskId || !this.approval.instanceId || this.approval.type !== 'todo')
        {
          console.error("无效操作");
          return false;
        }
        if(!this.approval.comment)
        {
          this.notify("请填写审批意见", 'danger');
          return false;
        }
        /*let data = {
          taskId: this.approval.taskId,
          instanceId: this.approval.instanceId,
          variables: JSON.stringify({
            pass: pass ? "true" : "false",
            comment: this.approval.comment ? this.approval.comment : (pass ? '同意' : '驳回'),
          }),
        };
        request({
          url: "/activiti/process/complete",
          method: "post",
          params: data,
        }).then((response) => {
          this.notify("操作成功", 'success');
          this.$router.back();
        }).catch(e => {
          this.notify("操作失败!", 'danger');
        });*/
        if (pass) {
          let data = {
            taskId: this.approval.taskId,
            instanceId: this.approval.instanceId,
            variables: JSON.stringify({
              pass: "true",
              comment: this.approval.comment ? this.approval.comment : "同意",
            }),
          };
          zyyctcEdit(this.circulation).then(response => {
            request({
              url: "/activiti/process/complete",
              method: "post",
              params: data,
            }).then((response) => {
              this.notify("操作成功", 'success');
              this.$router.back();
            }).catch(e => {
              this.notify("操作失败!", 'danger');
            });
          });

        } else {
          let _this = this;
          _this.$dialog.confirm({
            message: '是否确认驳回此条申请',
          }).then(() => {
            let data = {
              taskId: _this.approval.taskId,
              instanceId: _this.approval.instanceId,
              variables: JSON.stringify({
                pass: "false",
                comment: _this.approval.comment ? _this.approval.comment : "驳回",
              }),
            };
            zyyctcEdit(this.circulation).then(response => {
              request({
                url: "/activiti/process/complete",
                method: "post",
                params: data,
              }).then((response) => {
                _this.notify("操作成功", 'success');
                _this.$router.back();
              }).catch(e => {
                _this.notify("操作失败!", 'danger');
              });
            });
          });
        }
        return true;
      },
      notify(message, type) {
        Notify.clear();
        Notify({ type: type || 'primary', message: message });
      },
    },
  }
</script>

<style scoped lang="scss">
  .app-container {
  .header_main{
    height: 116px;
    background: url('../../../../assets/images/sunVillage_info/list_head.png') no-repeat;
    background-size: 100% 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    font-size: 36px;
    line-height: 116px;
    text-align: center;
    color: #fff;
    position: relative;
  .return_btn{
    width: 24px;
    height: 43.2px;
    background: url('../../../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
    background-size: 20px 36px;
    position: absolute;
    left: 38px;
    top: 36px;
  }
  .add_btn{
    width: 56.4px;
    height: 40.8px;
    background: url('../../../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
    background-size: 47px 34px;
    position: absolute;
    right: 38px;
    top: 36px;
  }
  }
  }
  .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;

  }
  .clear{
    height: 80px;
  }
  .examine_box{
    background-color: #1D6FE9!important;
    padding: 0.18rem!important;
    padding-left: 0!important;
    border-radius: 0.15rem!important;
    margin-top: 0.3rem!important;
  .van-col:first-child{
    color: #FFF!important;
    font-size: 0.45rem!important;
    text-align: center!important;
  }
  .van-col:last-child{
    background-color: #FFF!important;
    border-radius: 0.15rem!important;
    overflow: hidden!important;
  .van-radio-group--horizontal{
    padding: 0.2rem 0;
    border-bottom: 1px solid #eee;
  }
  }
  }
</style>
