<template>
    <div class="app-container">
      <van-nav-bar
        title="用地建房申请"
        left-arrow
        fixed
        placeholder
        @click-left="$router.back(-1)"
      >
        <template #right>
          <van-icon name="../../../static/images/icon/icon_flow.png" size="20" @click="goFlow"/>
        </template>
      </van-nav-bar>
      <van-steps :active="active" active-color="#38f">
        <van-step>申请</van-step>
        <van-step>开工</van-step>
        <van-step>验收</van-step>
      </van-steps>
      <p class="topTit">农村宅基地和建房（规划许可）申请表</p>
      <div class="main">
        <van-form>
          <div v-if="applicationDetail.tHouseApplyProposer">
            <p class="main_title">申请用户信息</p>
            <div class="main_box">
            <van-field readonly v-model="applicationDetail.tHouseApplyProposer.memberName" label="姓名" placeholder="姓名" input-align="right"/>
            <van-field
              readonly
              v-model="sexValue"
              label="性别"
              input-align="right"
            />
            <van-field readonly v-model="applicationDetail.tHouseApplyProposer.age" label="年龄" placeholder="年龄" input-align="right"/>
            <van-field readonly v-model="applicationDetail.tHouseApplyProposer.phone" label="联系电话" placeholder="联系电话" input-align="right"/>
            <van-field readonly v-model="applicationDetail.tHouseApplyProposer.idcard" label="身份证号" placeholder="身份证号" input-align="right"/>
            <van-field readonly v-model="applicationDetail.tHouseApplyProposer.householdRegister" label="户口所在地" placeholder="户口所在地" input-align="right"/>
            <van-field readonly v-model="applicationDetail.tHouseApplyProposer.familyAddress" label="家庭住址" placeholder="家庭住址" input-align="right"/>
            <van-field readonly v-model="applicationDetail.tHouseApplyProposer.members" label="家庭人口数" placeholder="家庭人口数" input-align="right"/>
            <van-cell title="是否已有宅基地">
              <template #right-icon>
                {{applicationDetail.tHouseApplyProposer.existHomestead == 'Y' ? '是' : '否'}}
              </template>
            </van-cell>
          </div>
          </div>

          <div v-if="applicationDetail.tHouseApplyFamilyMembers && applicationDetail.tHouseApplyFamilyMembers!=''">
            <p class="main_title">家庭成员信息</p>
            <van-collapse  v-model="activeNames">
              <van-collapse-item  class="collapse" v-for="(item , index) in applicationDetail.tHouseApplyFamilyMembers" :key="index" :name="index+1">
                <template #title>
                  <van-row>
                    <van-col span="8">{{item.memberName}}</van-col>
                    <van-col span="8">{{item.age}}</van-col>
                    <van-col span="8">{{item.familyStatusName}}</van-col>
                  </van-row>
                </template>
                <van-field readonly v-model="item.memberName" label="姓名" placeholder="姓名" input-align="right"/>
                <van-field readonly v-model="item.age" label="年龄" placeholder="年龄" input-align="right"/>
                <van-field readonly v-model="item.familyStatusName" label="与户主关系" placeholder="与户主关系" input-align="right"/>
                <van-field readonly v-model="item.idcard" label="身份证号" placeholder="身份证号" input-align="right"/>
                <van-field readonly v-model="item.householdRegister" label="户口所在地" placeholder="户口所在地" input-align="right"/>
              </van-collapse-item>
            </van-collapse>
          </div>

          <div v-if="CurrentSituation">
            <p class="main_title">现宅基地及农房状况</p>
            <div class="main_box">
              <van-field readonly v-model="applicationDetail.tHouseApplyCurrentSituation.landArea" label="宅基地面积" placeholder="宅基地面积" input-align="right"/>
              <van-field readonly v-model="applicationDetail.tHouseApplyCurrentSituation.landPerArea" label="人均宅基地面积" placeholder="人均宅基地面积㎡" input-align="right" label-width="auto"/>
              <van-field readonly v-model="applicationDetail.tHouseApplyCurrentSituation.landCertificateNo" label="不动产单元号" placeholder="不动产单元号" input-align="right"/>
              <van-field readonly v-model="applicationDetail.tHouseApplyCurrentSituation.buildingArea" label="建筑面积" placeholder="建筑面积㎡" input-align="right"/>
              <van-field readonly v-model="applicationDetail.tHouseApplyCurrentSituation.buildingPerArea" label="人均建筑面积" placeholder="人均建筑面积㎡" input-align="right"/>
              <van-field readonly v-model="applicationDetail.tHouseApplyCurrentSituation.houseCertificateNo" label="农民房屋幢号" placeholder="户口所在地" input-align="right"/>
              <van-field readonly v-model="landIsposalValue" label="处置情况" input-align="right" />
            </div>
          </div>

          <div v-if="applicationDetail.tHouseApplyProposedSituation">
            <p class="main_title">拟申请宅基地及建房情况</p>
            <div class="main_box">
              <van-field readonly v-model="applicationDetail.tHouseApplyProposedSituation.location" label="拟建位置" placeholder="拟建位置" input-align="right"/>
              <van-field readonly v-model="applicationDetail.tHouseApplyProposedSituation.landArea" label="宅基地面积" placeholder="宅基地面积" input-align="right"/>
              <van-field readonly v-model="applicationDetail.tHouseApplyProposedSituation.east" label="东至" placeholder="东至" input-align="right"/>
              <van-field readonly v-model="applicationDetail.tHouseApplyProposedSituation.west" label="西至" placeholder="西至" input-align="right"/>
              <van-field readonly v-model="applicationDetail.tHouseApplyProposedSituation.south" label="南至" placeholder="南至" input-align="right"/>
              <van-field readonly v-model="applicationDetail.tHouseApplyProposedSituation.north" label="北至" placeholder="北至" input-align="right"/>
              <van-field readonly v-model="applicationDetail.tHouseApplyProposedSituation.buildingArea" label="建筑面积" placeholder="建筑面积" input-align="right"/>
              <van-field readonly v-model="applicationDetail.tHouseApplyProposedSituation.buildingFloors" label="建筑层数" placeholder="建筑层数" input-align="right"/>
              <van-field readonly v-model="applicationDetail.tHouseApplyProposedSituation.buildingHight" label="建筑高度" placeholder="建筑高度" input-align="right"/>
              <van-cell title="是否征求相邻权利人意见">
                <template #right-icon>
                  {{applicationDetail.tHouseApplyProposedSituation.isAdvice == '1' ? '是' : '否'}}
                </template>
              </van-cell>
              <van-field readonly v-model="housingStructureValue" label="房屋构造" input-align="right" />
              <van-field readonly v-model="buildingTypeValue" label="建房类型" input-align="right" />
              <van-cell title="设计图纸">
                <template #right-icon>
                  {{applicationDetail.tHouseApplyProposedSituation.designPaper == '1' ? '委托设计' : '选通用图'}}
                </template>
              </van-cell>
              <van-field readonly v-model="houseTypeValue" input-align="right" v-if="showHouse" />
            </div>
            <div class="mapBox">
              <div id="mapWrap" style="height: 200px;"></div>
            </div>
          </div>

          <div v-if="applicationDetail.tHouseApplyProposer">
            <p class="main_title">申请理由</p>
            <div class="main_box">
            <van-field
              rows="3"
              autosize
              type="textarea"
              input-align="left"
              v-model="applicationDetail.tHouseApplyProposer.applyReasion"
              readonly
            />
            <van-row>
              <van-col span="12"><van-field readonly v-model="applicationDetail.tHouseApplyProposer.memberName" label="申请人" placeholder="申请人" input-align="left" label-width="auto"/></van-col>
              <van-col span="12">
                <van-field readonly clickable v-model="applicationDetail.tHouseApplyProposer.applyTime" label-width="auto">
                  <template #label>
                    <van-icon name="notes-o" size="20"/>
                  </template>
                </van-field>
              </van-col>
            </van-row>
          </div>
          </div>

          <div v-if="item.findList" v-for="(item , index) in fileArray" :key="index">
            <p class="main_title">{{item.fileTypeName}}</p><!-- 未对接 -->
            <div class="main_box file-box">
<!--              <van-uploader v-if="item.findList" v-model="item.findList" multiple />-->
              <van-uploader :after-read="afterRead" :before-delete="deleteFile" v-model="item.findList" multiple />
            </div>
          </div>
<!--          <p class="main_title">宅基地使用承诺书</p>&lt;!&ndash; 未对接 &ndash;&gt;-->
<!--          <div class="main_box file-box">-->
<!--            <van-uploader v-model="fileList2" multiple class="aaa" />-->
<!--          </div>-->

          <div v-if="false" :class="active==1?'':'noModify'" >
            <p class="topTit">宅基地开工</p>
            <div class="main_box action-box">
            <van-cell title="计划开工时间">
              <template #right-icon>
                <van-radio-group v-model="radio" direction="horizontal">
                  <van-field readonly clickable style="padding: 0" v-model="applicationDetail.tHouseApplyStart.startDate" label-width="auto" placeholder="选择日期" @click="showStartDate = true">
                    <template #label>
                      <van-icon name="notes-o" size="20"/>
                    </template>
                  </van-field>
                  <van-calendar v-model="showStartDate" @confirm="onConfirmStartDate" />
                </van-radio-group>
              </template>
            </van-cell>
            <van-cell title="计划竣工时间">
              <template #right-icon>
                <van-radio-group v-model="radio" direction="horizontal">
                  <van-field readonly clickable style="padding: 0" v-model="applicationDetail.tHouseApplyStart.endDate" label-width="auto" placeholder="选择日期" @click="showEndDate = true">
                    <template #label>
                      <van-icon name="notes-o" size="20"/>
                    </template>
                  </van-field>
                  <van-calendar v-model="showEndDate" @confirm="onConfirmEndDate" />
                </van-radio-group>
              </template>
            </van-cell>
          </div>
          </div>
          <!--applicationDetail.tHouseApplyStart-->
          <div v-if="false" style="margin: 16px;">
            <van-row>
              <van-col span="12" align="center">
                <van-button type="info" native-type="submit" class="submitButton">保存</van-button>
              </van-col>
              <van-col span="12" align="center">
                <van-button type="info" native-type="submit" class="submitButton">保存并提交</van-button>
              </van-col>
            </van-row>
            <div class="clear"></div>
          </div>

          <div v-if="false" :class="active==2?'':'noModify'">
            <p class="topTit">宅基地验收申请</p>
            <div class="main_box check-box">
            <van-field v-model="applicationDetail.tHouseApplyEnd.memberName" label="申请户主姓名" placeholder="申请户主姓名" input-align="right" label-width="auto"/>
            <van-field v-model="applicationDetail.tHouseApplyEnd.idcard" label="身份证号" placeholder="身份证号" input-align="right" label-width="auto"/>
            <van-field v-model="applicationDetail.tHouseApplyEnd.location" label="用地建房位置" placeholder="用地建房位置" input-align="right" label-width="auto"/>
            <van-field v-model="applicationDetail.tHouseApplyEnd.licenseKey" label="乡村建设规划许可证号" placeholder="乡村建设规划许可证号" input-align="right" label-width="auto"/>
            <van-field v-model="applicationDetail.tHouseApplyEnd.approvalNumber" label="农村宅基地批准书号" placeholder="农村宅基地批准书号" input-align="right" label-width="auto"/>
            <van-field v-model="applicationDetail.tHouseApplyEnd.startDate" label="开工日期" readonly clickable input-align="right" label-width="auto" placeholder="选择开工日期" @click="showCalendar = true"></van-field>
            <van-calendar />
            <van-field v-model="applicationDetail.tHouseApplyEnd.endDate" label="竣工日期" readonly clickable input-align="right" label-width="auto" placeholder="选择竣工日期" @click="showCalendar = true"></van-field>
            <van-calendar />
            <van-field v-model="applicationDetail.tHouseApplyEnd.houseCertificateNo" label="权属证书号（不动产）" placeholder="权属证书号（不动产）" input-align="right" label-width="auto"/>
            <van-field v-model="applicationDetail.tHouseApplyEnd.landCertificateNo" label="权属证书号（宅基地）" placeholder="权属证书号（宅基地）" input-align="right" label-width="auto"/>
            <van-field v-model="applicationDetail.tHouseApplyEnd.buildingHight" label="批建高度" placeholder="建筑高度" input-align="right" label-width="auto"/>
            <van-field v-model="applicationDetail.tHouseApplyEnd.buildingFloors" label="批建层数" placeholder="批建层数" input-align="right" label-width="auto"/>
            <van-field v-model="applicationDetail.tHouseApplyEnd.actualBuildingHight" label="竣工高度" placeholder="竣工高度" input-align="right" label-width="auto"/>
            <van-field v-model="applicationDetail.tHouseApplyEnd.actualBuildingFloors" label="竣工层数" placeholder="竣工层数" input-align="right" label-width="auto"/>
            <van-field v-model="applicationDetail.tHouseApplyEnd.buildingArea" label="建筑面积" placeholder="建筑面积" input-align="right" label-width="auto"/>
            <van-field v-model="applicationDetail.tHouseApplyEnd.designPaper" label="建筑风貌" placeholder="建筑风貌" input-align="right" label-width="auto"/>
            <van-cell title="旧宅基地退还情况">
              <template #right-icon>
                <van-radio-group v-model="applicationDetail.tHouseApplyEnd.oldHouseStatus" direction="horizontal">
                  <van-radio name="0">是</van-radio>
                  <van-radio name="1">否</van-radio>
                </van-radio-group>
              </template>
            </van-cell>
            <van-field label="备注" placeholder="" input-align="right"/>
          </div>
          </div>
          <!--applicationDetail.tHouseApplyEnd-->
          <div v-if="false" style="margin: 16px;">
            <van-row>
              <van-col span="12" align="center">
                <van-button type="info" native-type="submit" class="submitButton">保存</van-button>
              </van-col>
              <van-col span="12" align="center">
                <van-button type="info" native-type="submit" class="submitButton">保存并提交</van-button>
              </van-col>
            </van-row>
            <div class="clear"></div>
          </div>

        </van-form>

      <!--        审核流程开始-->
<!--        <div class="main_box examine_box" v-if="">-->
<!--          <van-row type="flex" justify="space-between" align="center">-->
<!--            <van-col span="5">审核<br/>意见</van-col>-->
<!--            <van-col span="19">-->
<!--              <van-radio-group v-model="radio" direction="horizontal">-->
<!--                <van-radio name="1">同意</van-radio>-->
<!--                <van-radio name="2">驳回</van-radio>-->
<!--              </van-radio-group>-->
<!--              <van-field rows="2" autosize readonly type="textarea" placeholder="同意申请宅基地"/>-->
<!--            </van-col>-->
<!--          </van-row>-->
<!--        </div>-->
        <div class="main_box examine_box" v-if="applicationDetail.needVillageShow&&this.$route.query.type != 'done'">
          <van-row type="flex" justify="space-between" align="center">
            <van-col span="5">村级<br/>审核<br/>意见</van-col>
            <van-col span="19">
              <van-field :readonly="!applicationDetail.needVillageAudit" v-model="applicationDetail.tHouseApproveVillageOptions.villageOption" rows="2" autosize readonly type="textarea" placeholder="同意申请宅基地"/>
            </van-col>
          </van-row>
        </div>

        <div class="main_box examine_box" v-if="applicationDetail.needAgricultureShow&&this.$route.query.type != 'done'">
          <van-row type="flex" justify="space-between" align="center">
            <van-col span="5">农业<br/>农村<br/>部门<br/>审查<br/>意见</van-col>
            <van-col span="19">
              <van-cell-group>
                <van-cell title="成员资格审查">
                  <template #right-icon>
                    <van-radio-group :disabled="!applicationDetail.needAgricultureAudit" v-model="applicationDetail.tHouseApproveAgricultureOptions.isMembership" direction="horizontal" style="padding: 0; border: 0;">
                      <van-radio name="1">通过</van-radio>
                      <van-radio name="2">不通过</van-radio>
                    </van-radio-group>
                  </template>
                </van-cell>
                <van-cell title="一户一宅情况">
                  <template #right-icon>
                    <van-radio-group :disabled="!applicationDetail.needAgricultureAudit" v-model="applicationDetail.tHouseApproveAgricultureOptions.isOnehouse" direction="horizontal" style="padding: 0; border: 0;">
                      <van-radio name="1">符合</van-radio>
                      <van-radio name="2">不符合</van-radio>
                    </van-radio-group>
                  </template>
                </van-cell>
                <van-cell title="村委会审查资料">
                  <template #right-icon>
                    <van-radio-group :disabled="!applicationDetail.needAgricultureAudit" v-model="applicationDetail.tHouseApproveAgricultureOptions.isReviewmaterials" direction="horizontal" style="padding: 0; border: 0;">
                      <van-radio name="1">齐全</van-radio>
                      <van-radio name="2">不齐全</van-radio>
                    </van-radio-group>
                  </template>
                </van-cell>
              </van-cell-group>
              <van-field :readonly="!applicationDetail.needAgricultureAudit" rows="2" v-model="applicationDetail.tHouseApproveAgricultureOptions.approveOption" autosize readonly type="textarea" placeholder="审查意见"/>
            </van-col>
          </van-row>
        </div>

        <div class="main_box examine_box" v-if="applicationDetail.needNatureShow&&this.$route.query.type != 'done'">
          <van-row type="flex" justify="space-between" align="center">
            <van-col span="5">自然<br/>资源<br/>部门<br/>意见</van-col>
            <van-col span="19">
              <van-field :readonly="!applicationDetail.needNatureAudit" v-model="applicationDetail.tHouseApproveNatureOptions.landArea" label="用地面积" placeholder="请输入" input-align="right"><template #right-icon>㎡</template></van-field>
              <van-field
                v-model="rightsTypeValue"
                label="土地权属"
                placeholder="请选择"
                input-align="right"
                is-link
                readonly
                arrow-direction="down"
                @click="showRightsType = true"
              />
              <van-popup v-model="showRightsType" position="bottom">
                <van-picker
                  show-toolbar
                  :columns="rightsTypeDesignPaper"
                  @confirm="onConfirmRightsType"
                  @cancel="showRightsType = false"
                  :readonly="!applicationDetail.needNatureAudit"
                />
              </van-popup>
              <van-field :readonly="!applicationDetail.needNatureAudit" v-model="applicationDetail.tHouseApproveNatureOptions.east" label="东至" placeholder="请输入" input-align="right"/>
              <van-field :readonly="!applicationDetail.needNatureAudit" v-model="applicationDetail.tHouseApproveNatureOptions.south" label="南至" placeholder="请输入" input-align="right"/>
              <van-field :readonly="!applicationDetail.needNatureAudit" v-model="applicationDetail.tHouseApproveNatureOptions.west" label="西至" placeholder="请输入" input-align="right"/>
              <van-field :readonly="!applicationDetail.needNatureAudit" v-model="applicationDetail.tHouseApproveNatureOptions.north" label="北至" placeholder="请输入" input-align="right"/>
              <div class="mapBox">
                <div id="mapWrap1" style="height: 150px;"></div>
                <div class="mapBox_button" v-if="applicationDetail.needNatureAudit">
                  <van-button id="drawPolygon1" native-type="button" icon="../../../static/images/icon/icon_ht.png" type="default" block round size="small"></van-button>
                  <van-button id="drawRemove1" native-type="button" icon="cross" type="default" block round size="small" style="margin-top: 0.2rem"></van-button>
                </div>
              </div>
              <van-field :readonly="!applicationDetail.needNatureAudit" v-model="applicationDetail.tHouseApproveNatureOptions.approveOption" rows="2" autosize type="textarea" placeholder="审查意见"/>
            </van-col>
          </van-row>
        </div>

        <div class="main_box examine_box" v-if="applicationDetail.needBuildingShow&&this.$route.query.type != 'done'">
          <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
                v-model="tHouseBuildingTypeValue"
                label="建筑类型"
                placeholder="请选择"
                input-align="right"
                is-link
                readonly
                arrow-direction="down"
                @click="applicationDetail.needBuildingAudit == false ? '' : showBuildingType = true"
              />
              <van-popup v-model="showBuildingType" position="bottom">
                <van-picker
                  show-toolbar
                  :columns="buildingTypeDesignPaper"
                  @confirm="onConfirmBuildingType"
                  @cancel="showBuildingType = false"
                />
              </van-popup>
              <van-field
                v-model="tHouseDesignPaper"
                label="图纸类型"
                placeholder="请选择"
                input-align="right"
                is-link
                readonly
                arrow-direction="down"
                @click="applicationDetail.needBuildingAudit == false ? '' : showDesignPaper = true"
              />
              <van-popup v-model="showDesignPaper" position="bottom">
                <van-picker
                  show-toolbar
                  :columns="designPaperOption"
                  @confirm="onConfirmDesignPaper"
                  @cancel="showDesignPaper = false"
                />
              </van-popup>

              <van-field :readonly="!applicationDetail.needBuildingAudit" v-model="applicationDetail.tHouseApproveOtherOptions.buildingLandArea" label="建筑占地面积" placeholder="请输入" input-align="right"><template #right-icon>㎡</template></van-field>
              <van-field :readonly="!applicationDetail.needBuildingAudit" v-model="applicationDetail.tHouseApproveOtherOptions.buildingArea" label="建筑面积" placeholder="请输入" input-align="right"><template #right-icon>㎡</template></van-field>
              <van-field :readonly="!applicationDetail.needBuildingAudit" v-model="applicationDetail.tHouseApproveOtherOptions.buildingFloors" label="建筑层数" placeholder="请输入" input-align="right"><template #right-icon>层</template></van-field>
              <van-field :readonly="!applicationDetail.needBuildingAudit" v-model="applicationDetail.tHouseApproveOtherOptions.buildingHight" label="建筑高度" placeholder="请输入" input-align="right"><template #right-icon>m</template></van-field>
              <van-field :readonly="!applicationDetail.needBuildingAudit" v-model="applicationDetail.tHouseApproveOtherOptions.east" label="东至" placeholder="请输入" input-align="right"/>
              <van-field :readonly="!applicationDetail.needBuildingAudit" v-model="applicationDetail.tHouseApproveOtherOptions.south" label="南至" placeholder="请输入" input-align="right"/>
              <van-field :readonly="!applicationDetail.needBuildingAudit" v-model="applicationDetail.tHouseApproveOtherOptions.west" label="西至" placeholder="请输入" input-align="right"/>
              <van-field :readonly="!applicationDetail.needBuildingAudit" v-model="applicationDetail.tHouseApproveOtherOptions.north" label="北至" placeholder="请输入" input-align="right"/>
              <van-field :readonly="!applicationDetail.needBuildingAudit" v-model="applicationDetail.tHouseApproveOtherOptions.approveOption" rows="2" autosize  type="textarea" placeholder="审批意见"/>
            </van-col>
          </van-row>
        </div>

        <div class="main_box examine_box" v-if="applicationDetail.needTownShow&&this.$route.query.type != 'done'">
          <van-row type="flex" justify="space-between" align="center">
            <van-col span="5">镇级<br/>审核<br/>意见</van-col>
            <van-col span="19">
              <van-field :readonly="!applicationDetail.needTownAudit" v-model="applicationDetail.tHouseApproveTownOptions.approveOption" rows="2" autosize type="textarea" placeholder="同意申请宅基地"/>
            </van-col>
          </van-row>
        </div>

        <div class="main_box examine_box" v-if="item.findList&&this.$route.query.type != 'done'" v-for="(item , index) in fileArray" :key="index">
          <van-row type="flex" justify="space-between" align="center">
            <van-col span="5">{{item.fileTypeName}}</van-col>
            <van-col span="19">
              <van-uploader v-model="item.findList" multiple style="margin-bottom: 0;" />
            </van-col>
          </van-row>
        </div>

        <div style="margin: 16px;" v-if="this.$route.query.type != 'done'">
          <van-row>
            <van-col span="12" align="center">
              <van-button type="info" native-type="submit" class="submitButton" @click="onSubmit('agree')">同意</van-button>
            </van-col>
            <van-col span="12" align="center">
              <van-button type="danger" native-type="submit" class="submitButton" @click="onSubmit('reject')">驳回</van-button>
            </van-col>
          </van-row>
          <div class="clear"></div>
        </div>
      <!--        审核流程结束-->
      </div>
    </div>
</template>

<script>
  import { allInformation , treeSingleProcessView , attachmentFind , saveHouseBaseInfo , houseList , attach , removeFile , saveHouseBaseInfoThenSubmit , agreeApply , rejectApply} from "@/api/onlineHome/homestead/application";
  import $ from "jquery";
  export default {
  name: "applicationForm",
  data() {
    return {
      active: 0,
      nowTime: '',//当前日期
      fileList: [],
      fileList2: [],
      radio:'1',
      value: '',
      columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
      showPicker: false,
      showRightsType: false,
      showBuildingType: false,
      showLandIsposal: false,
      showHousingStructure: false,
      showStartDate: false,
      showEndDate: false,
      showApplyTime:false,
      showHouseType:false,
      showHouse:false,
      showSex:false,
      showDesignPaper:false,
      id:'',
      applicationDetail:[],
      //建房类型字典
      buildingType:[],
      //性别字典
      userSex:[],
      //处置情况字典
      landIsposal:[],
      //房屋构造字典
      housingStructure:[],
      rightsTypeDesignPaper:[],
      buildingTypeDesignPaper:[],
      designPaperOption:[],
      designPaper:[],
      //户型
      houseType:[],
      //请求参数
      parameter:{
        businessType: "house",
        houseApplyStatus: '',
        processKey: "baseApply",
        tableName: "t_house_apply_proposer"
      },
      //文件配置
      fileArray:[],
      //获取上传附件
      params:{
        tableId: '',
        tableName: "t_house_apply_proposer",
        fileType: ''
      },
      auditStatus:false,
      activeNames:['1'],
      housingStructureValue:'',//当前显示房屋构造
      buildingTypeValue:'',//当前显示建房类型
      landIsposalValue:'',//当前显示处置情况
      houseTypeValue:'',//当前显示户型
      rightsTypeValue:'',
      tHouseBuildingTypeValue:'',
      tHouseDesignPaper:'',
      sexValue:'',//当前显示性别
      CurrentSituation:false,
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.type = this.$route.query.type;
    this.getDetail();
  },
  methods: {
    goFlow(){
      window.location='flowChart?id='+this.id;
    },
    //获取数据集合
    getDetail(){
      allInformation(this.id).then(response => {
        //性别字典查询
        this.houseGetDicts("sys_user_sex").then((res) => {
          res.data.map(item => {
            this.userSex.push({ value:item.dictValue, text: item.dictLabel});
          });
          this.sexValue = this.selectDictLabel(res.data, response.data.tHouseApplyProposer.sex);
        });
        //建房类型字典查询
        this.houseGetDicts("building_type").then((res) => {
          res.data.map(item => {
            this.buildingType.push({ value:item.dictValue, text: item.dictLabel});
            this.buildingTypeDesignPaper.push({ value:item.dictValue, text: item.dictLabel});
          });
          this.buildingTypeValue = this.selectDictLabel(res.data, response.data.tHouseApplyProposedSituation.buildingType);
          this.tHouseBuildingTypeValue = this.selectDictLabel(res.data, response.data.tHouseApplyProposedSituation.buildingType);
        });
        //房屋构造字典查询
        this.houseGetDicts("housing_structure").then((res) => {
          res.data.map(item => {
            this.housingStructure.push({ value:item.dictValue, text: item.dictLabel});
          });
          this.housingStructureValue = this.selectDictLabel(res.data, response.data.tHouseApplyProposedSituation.housingStructure);
        });
        //房屋构造字典查询
        this.houseGetDicts("rights_type").then((res) => {
          res.data.map(item => {
            this.rightsTypeDesignPaper.push({ value:item.dictValue, text: item.dictLabel});
          });
          this.rightsTypeValue = this.selectDictLabel(res.data, response.data.tHouseApproveNatureOptions.rightsType);
        });
        //图纸类型字典查询
        this.houseGetDicts("design_paper").then((res) => {
          res.data.map(item => {
            this.designPaperOption.push({ value:item.dictValue, text: item.dictLabel});
          });
          this.tHouseDesignPaper = this.selectDictLabel(res.data, response.data.tHouseApproveOtherOptions.designPaper);
        });
        //处置情况字典查询
        if(response.data.tHouseApplyProposer.existHomestead == 'Y'){
          this.CurrentSituation = true ;
          this.houseGetDicts("land_isposal").then((res) => {
            res.data.map(item => {
              this.landIsposal.push({ value:item.dictValue, text: item.dictLabel});
            });
            this.landIsposalValue= this.selectDictLabel(res.data, response.data.tHouseApplyCurrentSituation.landIsposal);
          });
        }
        //户型图查询
        houseList().then(res => {
          res.rows.map(item => {
            this.houseType.push({ value:item.id, text: item.name});
          });
          if(response.data.tHouseApplyProposedSituation.houseTypeId != null){
            for (let i = 0 ; i < res.rows.length ; i++){
              if (res.rows[i].id = response.data.tHouseApplyProposedSituation.houseTypeId){
                this.houseTypeValue = res.rows[i].name
              }
            }
            this.showHouse = true;
          }
        });
        //村级意见需要显示
        if (response.data.tHouseApproveVillageOptions == null){
          //村级审批意见
          response.data.tHouseApproveVillageOptions = {
            applyProposerId: this.id,
            groupLeader: null,
            groupOption: null,
            groupTime: null,
            villageLeader: "",
            //审批意见
            villageOption: "",
            villageTime: ""
          }
        }
        //自然资源部门意见需要显示
        if (response.data.tHouseApproveNatureOptions== null){
          //自然资源部门审批
          response.data.tHouseApproveNatureOptions = {
            applyProposerId: this.id,
            //用地面积
            landArea: '',
            //土地权属 字典 rights_type
            rightsType: "",
            //东至
            east: "",
            //西至
            west: "",
            //南至
            south: "",
            //北至
            north: "",
            //审批意见
            approveOption: "",
            approveTime: "",
            theGeom: "",
            theGeomRaw: "",
            valid: true
          }
        }
        //住建部门意见需要显示
        if (response.data.tHouseApproveOtherOptions == null){
          //其他部门审批意见
          response.data.tHouseApproveOtherOptions = {
            applyProposerId: this.id,
            //建筑类型 字典 building_type
            buildingType: "",
            //建筑面积
            buildingArea: '',
            //建筑层数
            buildingFloors: '',
            //建筑高度
            buildingHight: '',
            //建筑占地面积
            buildingLandArea: '',
            //图纸类型 字典  design_paper
            designPaper: "",
            //东至
            east: "",
            //西至
            west: "",
            //南至
            south: "",
            //北至
            north: "",
            //审批意见
            approveOption: "",
            approveTime: "",
            valid: true
          }
        }
        //农业农村部门意见需要显示
        if (response.data.tHouseApproveAgricultureOptions == null){
          //农业部门审批
          response.data.tHouseApproveAgricultureOptions = {
            id: null,
            applyProposerId: this.id,
            //成员资格审查 1 通过 2 不通过
            isMembership: "",
            //一户一宅情况 1 符合 2 不符合
            isOnehouse: "",
            //村委会审查资料 1 齐全 2 不齐全
            isReviewmaterials: "",
            approveLeader: "",
            //农业部门审批意见
            approveOption: ""
          }
        }
        //乡镇部门意见需要显示
        if (response.data.tHouseApproveTownOptions == null){
          //县级审批意见
          response.data.tHouseApproveTownOptions = {
            applyProposerId: this.id,
            approveLeader: "",
            //审批意见
            approveOption: "",
            approveTime: ""
          }
        }
        this.applicationDetail = response.data;
        this.parameter.houseApplyStatus = response.data.tHouseApplyProposer.houseApplyStatus;
        let currentProcessKey = response.data.currentProcessKey;
        this.auditStatus =  response.data.tHouseApplyProposer.auditStatus != 0;
        //判断当前审核进行到哪一步
        if (currentProcessKey == 'baseApply'){
          this.active = 0;
        }
        if (currentProcessKey == 'landscope'){
          this.active = 1;
        }
        if (currentProcessKey == 'accepting'){
          this.active = 2;
        }
        //获取上传文件列表
        treeSingleProcessView(this.parameter).then(res => {
          console.log(res.rows)
          this.fileArray = res.rows
          this.params.tableId = this.id;
          for (let i = 0 ; i < res.rows.length ; i++){
            this.params.fileType = res.rows[i].fileType;
            this.fileArray[i].findList = [];
            //获取文件集合
            attachmentFind(this.params).then(res2 => {
              for (let j = 0 ; j < res2.data.length ; j++){
                this.fileArray[i].findList[j] = {url: process.env.VUE_APP_BASE_ROUTING_URL + res2.data[j].fileUrl, isImage: true , id:res2.data[j].id} ;
                this.$forceUpdate();
              }
            });
          }
        });
        var that = this ;
        setTimeout(function(){
          that.pointDarw();
          that.pointDarw1();
        },2000)
      });
    },
    onConfirmRightsType(data){
      this.rightsTypeValue = data.text;
      this.applicationDetail.tHouseApproveNatureOptions.rightsType = data.value;
      this.showRightsType = false;
    },
    onConfirmBuildingType(data){
      this.tHouseBuildingTypeValue = data.text;
      this.applicationDetail.tHouseApproveNatureOptions.buildingType = data.value;
      this.showBuildingType = false;
    },
    onConfirmDesignPaper(data){
      this.tHouseDesignPaper = data.text;
      this.applicationDetail.tHouseApproveNatureOptions.designPaper = data.value;
      this.showDesignPaper = false;
    },
    base64toFile(dataurl, filename = "file") {
      let arr = dataurl.split(",");
      let mime = arr[0].match(/:(.*?);/)[1];
      let suffix = mime.split("/")[1];
      let bstr = atob(arr[1]);
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], `${filename}.${suffix}`, {
        type: mime,
      });
    },
    //申请提交
    onSubmit(type){
      var that = this;
      let form = {};
      form.fileList=[];
      this.fileList.tableId = this.id;
      if (this.drawInsert != null) {
        this.applicationDetail.tHouseApplyProposedSituation.theGeom = JSON.stringify(this.drawInsert);
      }
      for (let i = 0 ; i < this.fileArray.length ; i++){
        if (this.fileArray[i].findList == null || this.fileArray[i].findList == undefined || this.fileArray[i].findList == ''){
          continue
        }
        for (let j = 0 ; j < this.fileArray[i].findList.length ; j++){
          const params = new FormData()
          params.append('tableId', this.id)
          params.append('tableName', 't_house_apply_proposer')
          params.append('bizPath', 't_house_apply_proposer')
          params.append('fileType', this.fileArray[i].fileType)
          if (this.fileArray[i].findList[j].url){
            continue;
          }
          params.append('file', this.base64toFile(this.fileArray[i].findList[j].content))
          attach(params).then(res => {
            form.fileList.push(res.id);
          });
        }
      }
      setTimeout(function(){
        if (type == 'agree'){
          agreeApply(that.applicationDetail).then(res => {
            if(res.code = 200){
              that.$toast.success('同意申请');
            }
          });
        }
        if (type == 'reject'){
          rejectApply(that.applicationDetail).then(res => {
            if(res.code = 200){
              that.$toast.success('驳回申请');
            }
          });
        }
      },1000)
    },
    pointDarw() {
      //地图只加载一次
      this.landOpen = false;
      //加载地图编辑
      var that = this;
      var map;
      //var hc_land;
      var draw; // global so we can remove it later
      var vector_drawing;
      var minMapZoom;
      var maxMapZoom;
      var zoomLook;
      if (this.formEditor) {
        zoomLook = 18
        minMapZoom = 18
        maxMapZoom = 18
      } else {
        zoomLook = 16.9
        minMapZoom = 16
        maxMapZoom = 18.9
      }
      if (this.applicationDetail.tHouseApplyProposedSituation.theGeom != null && this.applicationDetail.tHouseApplyProposedSituation.theGeom != ""
        && this.applicationDetail.tHouseApplyProposedSituation.theGeom != undefined) {
        this.startDarw = true;
        this.openDarw = false;
      } else {
        this.startDarw = false;
        this.openDarw = true;
      }
      if (this.startDarw) {
        document.getElementById("mapWrap").innerHTML = '';
        var hc_land;
        var draw; // global so we can remove it later
        var vector_drawing;
        var projection = new ol.proj.Projection({
          //地图投影类型
          code: "EPSG:3857",
          units: "degrees",
          //extent:extent
        });

        var aerial = new ol.layer.Tile({
          source: new ol.source.XYZ({
            url: "http://t0.tianditu.gov.cn/img_w/wmts?" +
              "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
              "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",
          }),
          isGroup: true,
          name: "卫星影像图",
        });

        var yingxzi = new ol.layer.Tile({
          source: new ol.source.XYZ({
            url: "https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
          }),
          isGroup: true,
          name: "天地图文字标注--卫星影像图",
        });
        //加载地图
        map = new ol.Map({
          // interactions: ol.interaction.DragPan({
          //   onFocusOnly: false
          // }),
          controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮
          layers: [aerial, yingxzi],
          projection: projection,
          target: "mapWrap",
          view: new ol.View({
            //center: ol.proj.fromLonLat([115.452752, 31.789033]),
            zoom: zoomLook,
            minZoom: minMapZoom, //地图缩小限制
            maxZoom: maxMapZoom, //地图放大限制
          }),
        });
        if (this.formEditor) {
          let pan = getPan();
          //false：当前地图不可拖动。true：可拖动
          pan.setActive(false);

          function getPan() {
            let pan = '';
            map.getInteractions().forEach(function (element, index, array) {
              if (element instanceof ol.interaction.DragPan) {
                pan = element;
              }
            })
            return pan;
          }
        }
        //图层查询定位开始 ---------start
        hc_land = new ol.layer.Vector({
          title: "add Layer",
          source: new ol.source.Vector({
            projection: projection,
            features: new ol.format.GeoJSON().readFeatures("{\n" +
              "    \"type\": \"Feature\",\n" +
              "    \"geometry\":" + this.applicationDetail.tHouseApplyProposedSituation.theGeom + "}"),
          }),
          style: new ol.style.Style({
            fill: new ol.style.Fill({
              //矢量图层填充颜色，以及透明度
              color: "rgba(204, 255, 204,0.3)",
            }),
            stroke: new ol.style.Stroke({
              //边界样式
              color: "#47c68f",
              width: 3,
            }),
          }),
        });
        map.addLayer(hc_land);
        var maxXMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxX;
        var maxYMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxY;
        var minXMap = hc_land.values_.source.featuresRtree_.rbush_.data.minX;
        var minYMap = hc_land.values_.source.featuresRtree_.rbush_.data.minY;
        //定位查询位置
        var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置
        map.getView().animate({
          // 只设置需要的属性即可
          center: center, // 中心点
          zoom: 17.9, // 缩放级别
          rotation: undefined, // 缩放完成view视图旋转弧度
          duration: 1000, // 缩放持续时间，默认不需要设置
        });
        //图层查询定位结束 ---------end
        //开始绘制地图
        $("#drawPolygon").click(function () {
          map.removeLayer(hc_land);
          map.removeLayer(vector_drawing);
          that.drawInsert = null;
          map.removeInteraction(draw);
          var source = new ol.source.Vector({wrapX: false});
          vector_drawing = new ol.layer.Vector({
            source: source,
          });
          map.addLayer(vector_drawing);
          var typeSelect = "Polygon";

          function addInteraction() {
            var value = typeSelect;
            draw = new ol.interaction.Draw({
              source: source,
              type: typeSelect
            });
            draw.on('drawend', function (evt) {
              console.log(that.drawInsert);
              if(that.drawInsert != null){
                $("#drawRemove").trigger('click');
              }
              var feature = evt.feature;
              var geometry = feature.getGeometry();
              var coordinate = geometry.getCoordinates();
              that.drawInsert = coordinate;
              map.removeInteraction(draw);
            });
            map.addInteraction(draw);
          }
          addInteraction();
        });
        //清除画图鼠标点击事件
        $("#drawRemove").click(function () {
          that.drawInsert = null;
          map.addLayer(hc_land);
          map.removeInteraction(draw);
          map.removeLayer(vector_drawing);
        });
      }
      if (this.openDarw) {
        document.getElementById("mapWrap").innerHTML = '';
        var projection = new ol.proj.Projection({
          //地图投影类型
          code: "EPSG:3857",
          units: "degrees",
          //extent:extent
        });

        var aerial = new ol.layer.Tile({
          source: new ol.source.XYZ({
            url: "http://t0.tianditu.gov.cn/img_w/wmts?" +
              "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
              "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",
          }),
          isGroup: true,
          name: "卫星影像图",
        });

        var yingxzi = new ol.layer.Tile({
          source: new ol.source.XYZ({
            url: "https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
          }),
          isGroup: true,
          name: "天地图文字标注--卫星影像图",
        });
        //获取坐标是否存在
        var Zb;
        if (this.tGeoOrganizationLng != null && this.tGeoOrganizationLat != null) {
          Zb = [this.tGeoOrganizationLng, this.tGeoOrganizationLat]
        } else {
          Zb = [115.452752, 31.789033];
        }
        //加载地图
        map = new ol.Map({
          controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮
          layers: [aerial, yingxzi],
          projection: projection,
          logo: 'false',
          target: "mapWrap",
          view: new ol.View({
            center: ol.proj.fromLonLat(Zb),
            //center: ol.proj.fromLonLat([115.452752, 31.789033]),
            zoom: 16.9,
            minZoom: minMapZoom, //地图缩小限制
            maxZoom: maxMapZoom, //地图放大限制
          }),
        });

        //图层查询定位结束 ---------end
        //开始绘制地图
        $("#drawPolygon").click(function () {
          //map.removeLayer(hc_land);
          map.removeLayer(vector_drawing);
          that.drawInsert = null;
          map.removeInteraction(draw);
          var source = new ol.source.Vector({wrapX: false});
          vector_drawing = new ol.layer.Vector({
            source: source,
          });
          map.addLayer(vector_drawing);
          var typeSelect = "Polygon";

          function addInteraction() {
            var value = typeSelect;
            draw = new ol.interaction.Draw({
              source: source,
              type: typeSelect
            });
            draw.on('drawend', function (evt) {
              console.log(that.drawInsert);
              if(that.drawInsert != null){
                $("#drawRemove").trigger('click');
              }
              var feature = evt.feature;
              var geometry = feature.getGeometry();
              var coordinate = geometry.getCoordinates();
              that.drawInsert = coordinate;
              map.removeInteraction(draw);
            });
            map.addInteraction(draw);
          }
          addInteraction();
        });
        //清除画图鼠标点击事件
        $("#drawRemove").click(function () {
          that.drawInsert = null;
          map.removeInteraction(draw);
          map.removeLayer(vector_drawing);
        });
      }
    },
    pointDarw1() {
      //地图只加载一次
      this.landOpen = false;
      //加载地图编辑
      var that = this;
      var map;
      //var hc_land;
      var draw; // global so we can remove it later
      var vector_drawing;
      var minMapZoom;
      var maxMapZoom;
      var zoomLook;
      if (this.formEditor) {
        zoomLook = 18
        minMapZoom = 18
        maxMapZoom = 18
      } else {
        zoomLook = 16.9
        minMapZoom = 16
        maxMapZoom = 18.9
      }
      if (this.applicationDetail.tHouseApproveNatureOptions.theGeom != null && this.applicationDetail.tHouseApproveNatureOptions.theGeom != ""
        && this.applicationDetail.tHouseApproveNatureOptions.theGeom != undefined) {
        this.startDarw = true;
        this.openDarw = false;
      } else {
        this.startDarw = false;
        this.openDarw = true;
      }
      if (this.startDarw) {
        document.getElementById("mapWrap1").innerHTML = '';
        var hc_land;
        var draw; // global so we can remove it later
        var vector_drawing;
        var projection = new ol.proj.Projection({
          //地图投影类型
          code: "EPSG:3857",
          units: "degrees",
          //extent:extent
        });

        var aerial = new ol.layer.Tile({
          source: new ol.source.XYZ({
            url: "http://t0.tianditu.gov.cn/img_w/wmts?" +
              "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
              "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",
          }),
          isGroup: true,
          name: "卫星影像图",
        });

        var yingxzi = new ol.layer.Tile({
          source: new ol.source.XYZ({
            url: "https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
          }),
          isGroup: true,
          name: "天地图文字标注--卫星影像图",
        });
        //加载地图
        map = new ol.Map({
          // interactions: ol.interaction.DragPan({
          //   onFocusOnly: false
          // }),
          controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮
          layers: [aerial, yingxzi],
          projection: projection,
          target: "mapWrap1",
          view: new ol.View({
            //center: ol.proj.fromLonLat([115.452752, 31.789033]),
            zoom: zoomLook,
            minZoom: minMapZoom, //地图缩小限制
            maxZoom: maxMapZoom, //地图放大限制
          }),
        });
        if (this.formEditor) {
          let pan = getPan();
          //false：当前地图不可拖动。true：可拖动
          pan.setActive(false);

          function getPan() {
            let pan = '';
            map.getInteractions().forEach(function (element, index, array) {
              if (element instanceof ol.interaction.DragPan) {
                pan = element;
              }
            })
            return pan;
          }
        }
        //图层查询定位开始 ---------start
        hc_land = new ol.layer.Vector({
          title: "add Layer",
          source: new ol.source.Vector({
            projection: projection,
            features: new ol.format.GeoJSON().readFeatures("{\n" +
              "    \"type\": \"Feature\",\n" +
              "    \"geometry\":" + this.applicationDetail.tHouseApproveNatureOptions.theGeom + "}"),
          }),
          style: new ol.style.Style({
            fill: new ol.style.Fill({
              //矢量图层填充颜色，以及透明度
              color: "rgba(204, 255, 204,0.3)",
            }),
            stroke: new ol.style.Stroke({
              //边界样式
              color: "#47c68f",
              width: 3,
            }),
          }),
        });
        map.addLayer(hc_land);
        var maxXMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxX;
        var maxYMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxY;
        var minXMap = hc_land.values_.source.featuresRtree_.rbush_.data.minX;
        var minYMap = hc_land.values_.source.featuresRtree_.rbush_.data.minY;
        //定位查询位置
        var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置
        map.getView().animate({
          // 只设置需要的属性即可
          center: center, // 中心点
          zoom: 17.9, // 缩放级别
          rotation: undefined, // 缩放完成view视图旋转弧度
          duration: 1000, // 缩放持续时间，默认不需要设置
        });
        //图层查询定位结束 ---------end
        //开始绘制地图
        $("#drawPolygon1").click(function () {
          map.removeLayer(hc_land);
          map.removeLayer(vector_drawing);
          that.drawInsert = null;
          map.removeInteraction(draw);
          var source = new ol.source.Vector({wrapX: false});
          vector_drawing = new ol.layer.Vector({
            source: source,
          });
          map.addLayer(vector_drawing);
          var typeSelect = "Polygon";

          function addInteraction() {
            var value = typeSelect;
            draw = new ol.interaction.Draw({
              source: source,
              type: typeSelect
            });
            draw.on('drawend', function (evt) {
              console.log(that.drawInsert);
              if(that.drawInsert != null){
                $("#drawRemove1").trigger('click');
              }
              var feature = evt.feature;
              var geometry = feature.getGeometry();
              var coordinate = geometry.getCoordinates();
              that.drawInsert = coordinate;
              map.removeInteraction(draw);
            });
            map.addInteraction(draw);
          }
          addInteraction();
        });
        //清除画图鼠标点击事件
        $("#drawRemove1").click(function () {
          that.drawInsert = null;
          map.addLayer(hc_land);
          map.removeInteraction(draw);
          map.removeLayer(vector_drawing);
        });
      }
      if (this.openDarw) {
        document.getElementById("mapWrap1").innerHTML = '';
        var projection = new ol.proj.Projection({
          //地图投影类型
          code: "EPSG:3857",
          units: "degrees",
          //extent:extent
        });

        var aerial = new ol.layer.Tile({
          source: new ol.source.XYZ({
            url: "http://t0.tianditu.gov.cn/img_w/wmts?" +
              "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
              "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",
          }),
          isGroup: true,
          name: "卫星影像图",
        });

        var yingxzi = new ol.layer.Tile({
          source: new ol.source.XYZ({
            url: "https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
          }),
          isGroup: true,
          name: "天地图文字标注--卫星影像图",
        });
        //获取坐标是否存在
        var Zb;
        if (this.tGeoOrganizationLng != null && this.tGeoOrganizationLat != null) {
          Zb = [this.tGeoOrganizationLng, this.tGeoOrganizationLat]
        } else {
          Zb = [115.452752, 31.789033];
        }
        //加载地图
        map = new ol.Map({
          controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮
          layers: [aerial, yingxzi],
          projection: projection,
          logo: 'false',
          target: "mapWrap1",
          view: new ol.View({
            center: ol.proj.fromLonLat(Zb),
            //center: ol.proj.fromLonLat([115.452752, 31.789033]),
            zoom: 16.9,
            minZoom: minMapZoom, //地图缩小限制
            maxZoom: maxMapZoom, //地图放大限制
          }),
        });

        //图层查询定位结束 ---------end
        //开始绘制地图
        $("#drawPolygon1").click(function () {
          //map.removeLayer(hc_land);
          map.removeLayer(vector_drawing);
          that.drawInsert = null;
          map.removeInteraction(draw);
          var source = new ol.source.Vector({wrapX: false});
          vector_drawing = new ol.layer.Vector({
            source: source,
          });
          map.addLayer(vector_drawing);
          var typeSelect = "Polygon";

          function addInteraction() {
            var value = typeSelect;
            draw = new ol.interaction.Draw({
              source: source,
              type: typeSelect
            });
            draw.on('drawend', function (evt) {
              console.log(that.drawInsert);
              if(that.drawInsert != null){
                $("#drawRemove1").trigger('click');
              }
              var feature = evt.feature;
              var geometry = feature.getGeometry();
              var coordinate = geometry.getCoordinates();
              that.drawInsert = coordinate;
              map.removeInteraction(draw);
            });
            map.addInteraction(draw);
          }
          addInteraction();
        });
        //清除画图鼠标点击事件
        $("#drawRemove1").click(function () {
          that.drawInsert = null;
          map.removeInteraction(draw);
          map.removeLayer(vector_drawing);
        });
      }
    },
  },
}
</script>

<style scoped lang="scss">
  .app-container {
    padding-bottom: 5%;
  }
  .examine_box{
    background-color: #1D6FE9!important;
    padding: 0.18rem!important;
    padding-left: 0!important;
    border-radius: 0.15rem!important;
    margin-top: 0.3rem!important;
  }
  .examine_box .van-col:first-child{
    color: #FFF!important;
    font-size: 0.45rem!important;
    text-align: center!important;
  }
  .examine_box .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;
    }
  }
  #mapWrap{
    width: 96%;
    margin: 0 auto;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    overflow: hidden;
  }
  .mapBox{
    position: relative;
    .mapBox_button{
      position: absolute;
      top: 0.2rem;
      right: 2%;
    }
  }
  .van-steps{
    padding: 2% 6% 0;
  }
  .topTit{
    margin-top: 0.4rem;
    font-size: 0.45rem;
    background-color: #1D6FE9;
    color: #FFFFFF;
    line-height: 58px;
    text-align: center;
    padding: 15px 0;
    box-shadow: 0px 3px 6px 0px rgba(15,67,145,0.40);
  }
  .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;
  }
  .collapse{
    width: 96%;
    margin: 0 auto;
    border-radius: 6px;
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
    overflow: hidden;
    margin-bottom: 15px;
  }
  /deep/.van-radio--horizontal{
    margin-left: 20px;
    margin-right: 0;
  }
  .file-box{
    padding: 2% 5% 0;
  }
  .submitButton{
    width: 80%;
    margin: 0 auto;
    border-radius: 14px;
  }
  .timeTit{
    text-align: center;
    font-size: 16px;
    line-height: 27px;
  }
  .action-box{
    padding: 15px 0!important;
    margin-top: 0.4rem;
  }
  .check-box{
    margin-top: 0.4rem;
  }
  .addFamily{
    position: absolute;
    top: -2px;
    right: 0;
    border-radius: 50%;
  }
  .deleteFamily{
    position: absolute;
    top: -0.3rem;
    right: 6%;
    z-index: 9;
    border-radius: 50%;
  }
  .familyList{
    margin-top: 0.4rem;
    position: relative;
  }
  .noModify{
    .topTit{
      background-color:#ABABAB ;
      box-shadow: 0px 3px 6px 0px rgba(171,171,171,0.40);
    }
    .van-cell__title{
      color: #B4B0B0;
    }
  }
</style>
