<template>
  <van-form class="nav-forms">
    <van-row class="form-item">
      <van-col span="6">
        <van-field label-width="70px" v-model="essentialInformationFormData.propertyOwner" label="产权人："
                   placeholder="请输入"/>
      </van-col>
      <van-col span="6">
        <van-field label-width="80px"
                   type="number"
                   v-model="essentialInformationFormData.propertyOwnerPhoneNumber"
                   label="联系电话："
                   placeholder="请输入"/>
      </van-col>
      <van-col span="6">
        <van-field label-width="70px" v-model="essentialInformationFormData.user" label="使用人：" placeholder="请输入"/>
      </van-col>
      <van-col span="6">
        <van-field label-width="80px" type="number"
                   v-model="essentialInformationFormData.userPhoneNumber" label="联系电话："
                   placeholder="请输入"/>
      </van-col>
    </van-row>
    <van-row class="form-item">
      <van-col span="24" class="form-item-label-opt">
        <span>房屋地址：</span>
      </van-col>
      <van-col span="6">
        <van-field label-width="90px" v-model="essentialInformationFormData.county" label="区县：" placeholder="请输入"/>
      </van-col>
      <van-col span="6">
        <van-field label-width="90px" v-model="essentialInformationFormData.street" label="街道：" placeholder="请输入"/>
      </van-col>
      <van-col span="6">
        <van-field label-width="90px" v-model="essentialInformationFormData.neighborhoodCommittee" label="居委："
                   placeholder="请输入"/>
      </van-col>
      <van-col span="6">
        <van-field label-width="90px" v-model="essentialInformationFormData.road" label="路（街巷）：" placeholder="请输入"/>
      </van-col>
      <van-col span="6">
        <van-field label-width="90px" v-model="essentialInformationFormData.roadNumber" label="号：" placeholder="请输入"/>
      </van-col>
      <van-col span="6">
        <van-field @click.stop="showMap=true" label-width="90px" disabled
                   v-model="essentialInformationFormData.position"
                   label="经纬度：" placeholder="请选择"/>
      </van-col>
      <van-col span="6">
        <van-field label-width="90px" v-model="essentialInformationFormData.buildingName" label="建筑名称："
                   placeholder="请输入"/>
      </van-col>
      <van-col span="6">
        <van-field label-width="90px" v-model="essentialInformationFormData.buildNo" label="楼号：" placeholder="请输入"/>
      </van-col>
    </van-row>
    <van-row class="form-item">
      <van-col span="6">
        <van-field name="stepper" label="地上层数">
          <template #input>
            <van-stepper v-model="essentialInformationFormData.pliesNumber"/>
          </template>
        </van-field>
      </van-col>
      <van-col span="6">
        <van-field name="stepper" label="地下层数">
          <template #input>
            <van-stepper v-model="essentialInformationFormData.underGroundPliesNumber"/>
          </template>
        </van-field>
      </van-col>
      <van-col span="6">
        <van-col span="22">
          <van-field label-width="120px" v-model="essentialInformationFormData.coveredArea" label="建筑面积（平）"
                     placeholder="请输入"/>
        </van-col>
        <van-col span="2" style="line-height: 44px">
          <span style="font-size: 14px">m<sup>2</sup></span>
        </van-col>
      </van-col>
      <van-col span="6">
        <van-col span="22">
          <van-field label-width="120px" v-model="essentialInformationFormData.height" label="建筑高度（米）"
                     placeholder="请输入"/>
        </van-col>
        <van-col span="2" style="line-height: 44px">
          <span style="font-size: 14px">m</span>
        </van-col>
      </van-col>
    </van-row>
    <van-row class="form-item">
      <van-col span="6">
        <van-row style="display:flex;align-items: center">
          <span style="padding-left: 10px;width: 100px">建成年代：</span>
          <el-date-picker
              v-model="essentialInformationFormData.completeTime"
              type="month"
              format="yyyy年MM月"
              placeholder="选择日期">
          </el-date-picker>
        </van-row>
      </van-col>
      <van-col span="9" v-if="houseFrontImagesList.length">
        <van-col span="4">
          <span style="padding-left: 10px;width: 100px">房屋正面照片：</span>
        </van-col>
        <van-col span="20">
          <!--          TODO  照片-->
          <div class="demo-image__preview">
            <el-image
                style="width: 70px; height: 70px"
                :src="houseFrontImageFirstSrc"
                :preview-src-list="houseFrontImagesList">
            </el-image>
          </div>
        </van-col>
      </van-col>
      <van-col span="9" v-if="housePotentialAccidentsImagesList.length">
        <van-col span="4">
          <span style="padding-left: 10px;width: 100px">房屋隐患照片：</span>
        </van-col>
        <van-col span="20">
          <!--          TODO  照片-->
          <div class="demo-image__preview">
            <el-image
                style="width: 70px; height: 70px"
                :src="housePotentialAccidentsImageFirstSrc"
                :preview-src-list="housePotentialAccidentsImagesList">
            </el-image>
          </div>
        </van-col>
      </van-col>
    </van-row>
    <van-row class="form-item">
      <van-col span="6">
        <van-field label-width="120px" v-model="essentialInformationFormData.plannedConstructionPurpose"
                   label="原规划设计用途：" placeholder="请输入"/>
      </van-col>
      <van-col span="6">
        <van-field label-width="120px" type="number" v-model="essentialInformationFormData.livingNumber"
                   label="住用人数（人）：" placeholder="请输入"/>
      </van-col>
      <van-col span="6">
        <van-field name="radio" label-width="140px" label="是否存在安全隐患：">
          <template #input>
            <van-radio-group v-model="essentialInformationFormData.hasSafetyLoophole" direction="horizontal">
              <van-radio class="van-radio-opt" name="1">是</van-radio>
              <van-radio class="van-radio-opt" name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </van-col>
    </van-row>
    <van-row class="form-item">
      <van-col span="12">
        <van-field name="radio" label-width="80px" label="土地性质：">
          <template #input>
            <van-radio-group v-model="essentialInformationFormData.landStatus" direction="horizontal">
              <van-radio class="van-radio-opt" name="出让用地">出让用地</van-radio>
              <van-radio class="van-radio-opt" name="划拨用地">划拨用地</van-radio>
              <van-radio class="van-radio-opt" name="集体用地">集体用地</van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </van-col>
      <van-col span="6">
        <van-field name="radio" label-width="120px" label="是否产权登记：">
          <template #input>
            <van-radio-group v-model="essentialInformationFormData.hasRegistrationTitle" direction="horizontal">
              <van-radio class="van-radio-opt" name="1">是</van-radio>
              <van-radio class="van-radio-opt" name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </van-col>
    </van-row>
    <van-row class="form-item">
      <van-col span="24">
        <van-field name="radio" label-width="80px" label="实际用途：">
          <template #input>
            <van-radio-group v-model="essentialInformationFormData.practicalPurpose" direction="horizontal">
              <van-radio class="van-radio-opt" name="经营性（包括餐饮住宿、歌舞娱乐、教育培训、商场市场等）">经营性（包括餐饮住宿、歌舞娱乐、教育培训、商场市场等）
              </van-radio>
              <van-radio class="van-radio-opt" name="学习教育机构">学习教育机构</van-radio>
              <van-radio class="van-radio-opt" name="医疗建筑">医疗建筑</van-radio>
              <van-radio class="van-radio-opt" name="宗教建筑">宗教建筑</van-radio>
              <van-radio class="van-radio-opt" name="交通长站">交通长站</van-radio>
              <van-radio class="van-radio-opt" name="养老院">养老院</van-radio>
              <van-radio class="van-radio-opt" name="办公">办公</van-radio>
              <van-radio class="van-radio-opt" name="体育场馆">体育场馆</van-radio>
              <van-radio class="van-radio-opt" name="居住">居住</van-radio>
              <van-radio class="van-radio-opt" name="租赁">租赁</van-radio>
              <van-radio class="van-radio-opt" name="生产">生产</van-radio>
              <van-radio class="van-radio-opt" name="居住、仓储、加工“三合一”">居住、仓储、加工“三合一”</van-radio>
              <van-radio class="van-radio-opt" name="其他">其他</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field label-width="120px" v-if="essentialInformationFormData.practicalPurpose === '其他'"
                   v-model="essentialInformationFormData.otherPracticalPurpose" label="其他实际用途：" placeholder="请输入"/>
      </van-col>
    </van-row>
    <van-row class="form-item">
      <van-col span="12">
        <van-field name="radio" label-width="90px" label="场地情况：">
          <template #input>
            <van-radio-group v-model="essentialInformationFormData.siteConditions" direction="horizontal">
              <van-radio class="van-radio-opt" name="有利或一般场地">有利或一般场地</van-radio>
              <van-radio class="van-radio-opt" name="不利场地">不利场地</van-radio>
              <van-radio class="van-radio-opt" name="危险场地">危险场地</van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </van-col>
      <van-col span="12">
        <van-field name="radio"
                   v-if="essentialInformationFormData.siteConditions === '不利场地'"
                   label-width="90px" label="场地类型：">
          <template #input>
            <van-radio-group
                v-if="essentialInformationFormData.siteConditions === '不利场地'"
                v-model="essentialInformationFormData.siteProperties" direction="horizontal">
              <van-radio class="van-radio-opt" name="软弱土">软弱土</van-radio>
              <van-radio class="van-radio-opt" name="液化土">液化土</van-radio>
              <van-radio class="van-radio-opt" name="突出山嘴">突出山嘴</van-radio>
              <van-radio class="van-radio-opt" name="高耸山丘">高耸山丘</van-radio>
              <van-radio class="van-radio-opt" name="陡坡陡坎">陡坡陡坎</van-radio>
              <van-radio class="van-radio-opt" name="可塑黄土">可塑黄土</van-radio>
              <van-radio class="van-radio-opt" name="结构型裂缝">结构型裂缝</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field name="radio"
                   v-if="essentialInformationFormData.siteConditions === '危险场地'"
                   label-width="90px" label="场地类型：">
          <template #input>
            <van-radio-group
                v-if="essentialInformationFormData.siteConditions === '危险场地'"
                v-model="essentialInformationFormData.siteProperties" direction="horizontal">
              <van-radio class="van-radio-opt" name="地震时可能滑坡">地震时可能滑坡</van-radio>
              <van-radio class="van-radio-opt" name="地陷">地陷</van-radio>
              <van-radio class="van-radio-opt" name="地裂">地裂</van-radio>
              <van-radio class="van-radio-opt" name="泥石流及断裂带可能发生错位">泥石流及断裂带可能发生错位</van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </van-col>
    </van-row>
    <van-row class="form-item">
      <van-col span="12">
        <van-field name="radio" label-width="80px" label="建造方式：">
          <template #input>
            <van-radio-group v-model="essentialInformationFormData.constructionMode" direction="horizontal">
              <van-radio class="van-radio-opt" name="砌体结构">企业自建</van-radio>
              <van-radio class="van-radio-opt" name="钢筋混凝土结构">自然人自建</van-radio>
              <van-radio class="van-radio-opt" name="钢结构">政府投资</van-radio>
              <van-radio class="van-radio-opt" name="砖木结构">集体联建</van-radio>
              <van-radio class="van-radio-opt" name="木结构">开发商开发</van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </van-col>
      <van-col span="12">
        <van-field name="radio" label-width="120px" label="是否采用减隔震：">
          <template #input>
            <van-radio-group v-model="essentialInformationFormData.hasSeismicIsolation" direction="horizontal">
              <van-radio class="van-radio-opt" name="减震">减震</van-radio>
              <van-radio class="van-radio-opt" name="隔震">隔震</van-radio>
              <van-radio class="van-radio-opt" name="均未采用">均为采用</van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </van-col>
    </van-row>
    <van-row class="form-item">
      <van-col span="6">
        <van-field name="radio" label-width="120px" label="是否是保护建筑：">
          <template #input>
            <van-radio-group v-model="essentialInformationFormData.isProtectConstruction" direction="horizontal">
              <van-radio class="van-radio-opt" name="1">是</van-radio>
              <van-radio class="van-radio-opt" name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </van-col>
      <van-col span="16">
        <van-field name="radio"
                   v-if="essentialInformationFormData.isProtectConstruction === '1'"
                   label-width="110px" label="保护建筑类型：">
          <template #input>
            <van-radio-group
                v-if="essentialInformationFormData.isProtectConstruction === '1'"
                v-model="essentialInformationFormData.protectConstructionType" direction="horizontal">
              <van-radio class="van-radio-opt" name="全国重点文物保护建筑">全国重点文物保护建筑</van-radio>
              <van-radio class="van-radio-opt" name="省级文物保护建筑">省级文物保护建筑</van-radio>
              <van-radio class="van-radio-opt" name="市县级文物保护建筑">市县级文物保护建筑</van-radio>
              <van-radio class="van-radio-opt" name="其他历史建筑">其他历史建筑</van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </van-col>
    </van-row>
    <van-row class="form-item">
      <van-col span="12">
        <van-field name="radio" label-width="80px" label="结构类型：">
          <template #input>
            <van-radio-group v-model="essentialInformationFormData.structureType" direction="horizontal">
              <van-radio class="van-radio-opt" name="砌体结构">砌体结构</van-radio>
              <van-radio class="van-radio-opt" name="钢筋混凝土结构">钢筋混凝土结构</van-radio>
              <van-radio class="van-radio-opt" name="钢结构">钢结构</van-radio>
              <van-radio class="van-radio-opt" name="砖木结构">砖木结构</van-radio>
              <van-radio class="van-radio-opt" name="木结构">木结构</van-radio>
              <van-radio class="van-radio-opt" name="简易结构">简易结构</van-radio>
              <van-radio class="van-radio-opt" name="其他">其他</van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </van-col>
      <van-col span="6">
        <van-field name="radio" label-width="140px" label="是否进行过抗震加固：">
          <template #input>
            <van-radio-group v-model="essentialInformationFormData.hasSeismicHardening" direction="horizontal">
              <van-radio class="van-radio-opt" name="1">是</van-radio>
              <van-radio class="van-radio-opt" name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </van-col>
      <van-col span="6">
        <div v-if="essentialInformationFormData.hasSeismicHardening === '1'">
          <span style="padding-left: 10px">抗震加固时间：</span>
          <el-date-picker
              v-model="essentialInformationFormData.seismicHardeningTime"
              type="month"
              format="yyyy年MM月"
              placeholder="选择日期">
          </el-date-picker>
        </div>
      </van-col>
    </van-row>
    <van-row class="form-item">
      <van-col span="15">
        <van-field name="radio" label-width="200px" label="既有房屋实际施工情况排查：">
          <template #input>
            <van-radio-group v-model="essentialInformationFormData.constructionSituationCheck" direction="horizontal">
              <van-radio class="van-radio-opt" name="经有资质的单位设计">经有资质的单位设计</van-radio>
              <van-radio class="van-radio-opt" name="经有资质的单位施工">经有资质的单位施工</van-radio>
              <van-radio class="van-radio-opt" name="未经正规设计">未经正规设计</van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </van-col>
      <van-col span="9">
        <van-field label-width="120px"
                   v-if="essentialInformationFormData.constructionSituationCheck === '经有资质的单位设计'"
                   v-model="essentialInformationFormData.designUnit" label="原设计单位：" placeholder="请输入"/>
        <van-field label-width="120px"
                   v-if="essentialInformationFormData.constructionSituationCheck === '经有资质的单位施工'"
                   v-model="essentialInformationFormData.constructionUnit" label="原施工单位：" placeholder="请输入"/>
        <van-field name="radio"
                   v-if="essentialInformationFormData.constructionSituationCheck === '未经正规设计'"
                   label-width="120px" label="是否有施工草图：">
          <template #input>
            <van-radio-group
                v-if="essentialInformationFormData.constructionSituationCheck === '未经正规设计'"
                v-model="essentialInformationFormData.hasConstructionSketch" direction="horizontal">
              <van-radio class="van-radio-opt" name="1">有</van-radio>
              <van-radio class="van-radio-opt" name="0">无</van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </van-col>
    </van-row>
    <van-row class="form-item">
      <van-col span="14">
        <van-field name="radio" label-width="200px" label="改造（改建扩建）情况排查：">
          <template #input>
            <van-radio-group v-model="essentialInformationFormData.modificationSituationInvestigation"
                             direction="horizontal">
              <van-radio class="van-radio-opt" name="建成后未改造">建成后未改造</van-radio>
              <van-radio class="van-radio-opt" name="经有资质单位设计改造">经有资质单位设计改造</van-radio>
              <van-radio class="van-radio-opt" name="经有资质单位施工改造">经有资质单位施工改造</van-radio>
              <van-radio class="van-radio-opt" name="建成后改造">建成后改造</van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </van-col>
      <van-col span="10">
        <van-field label-width="120px"
                   v-if="essentialInformationFormData.modificationSituationInvestigation === '经有资质单位设计改造'"
                   v-model="essentialInformationFormData.NewDesignUnit" label="改造设计单位：" placeholder="请输入"/>
        <van-field label-width="120px"
                   v-if="essentialInformationFormData.modificationSituationInvestigation === '经有资质单位施工改造'"
                   v-model="essentialInformationFormData.NewConstructionUnit" label="改造施工单位：" placeholder="请输入"/>
        <div v-if="essentialInformationFormData.modificationSituationInvestigation === '建成后改造'">
          <span style="padding-left: 10px">改造完成时间：</span>
          <el-date-picker
              v-model="essentialInformationFormData.modificationCompletionTime"
              type="month"
              format="yyyy年MM月"
              placeholder="选择日期">
          </el-date-picker>
        </div>

        <van-field
            v-if="essentialInformationFormData.modificationSituationInvestigation === '建成后改造'"
            name="radio" label-width="120px" label="改造内容：">
          <template #input v-if="essentialInformationFormData.modificationSituationInvestigation === '建成后改造'">
            <van-radio-group v-model="essentialInformationFormData.modificationContent" direction="horizontal">
              <van-radio class="van-radio-opt" name="加层（含夹层）">加层（含夹层）</van-radio>
              <van-radio class="van-radio-opt" name="扩建">扩建</van-radio>
              <van-radio class="van-radio-opt" name="拆改主体称重结构">拆改主体称重结构</van-radio>
              <van-radio class="van-radio-opt" name="改变用途">改变用途</van-radio>
              <van-radio class="van-radio-opt" name="开完地下空间">开完地下空间</van-radio>
              <van-radio class="van-radio-opt" name="其他">其他</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
            v-if="essentialInformationFormData.modificationContent==='其他'
            && essentialInformationFormData.modificationSituationInvestigation === '建成后改造'"
            label-width="120px" v-model="value" label="其他改造内容：" placeholder="请输入"/>
      </van-col>
    </van-row>
    <van-row class="form-item">
      <van-col span="24" class="form-item-label-opt">
        <span>在建房屋其他信息：</span>
      </van-col>
      <van-col span="6">
        <span style="padding-left: 10px">开工时间：</span>
        <el-date-picker
            v-model="essentialInformationFormData.buildingOnStreamTime"
            type="month"
            format="yyyy年MM月"
            placeholder="选择日期">
        </el-date-picker>
      </van-col>
      <van-col span="6">
        <van-field label-width="90px" v-model="essentialInformationFormData.buildingConstructionUnit" label="建设单位："
                   placeholder="请输入"/>
      </van-col>
      <van-col span="6">
        <van-field label-width="90px" v-model="essentialInformationFormData.buildingRoadworkUnit" label="施工单位："
                   placeholder="请输入"/>
      </van-col>
      <van-col span="6">
        <van-field label-width="90px" v-model="essentialInformationFormData.buildingVisualProgress" label="形象进度："
                   placeholder="请输入"/>
      </van-col>
      <van-col span="6">
        <van-field label-width="120px" v-model="essentialInformationFormData.buildingDesignUnit" label="设计单位："
                   placeholder="请输入"/>
      </van-col>
      <van-col span="6">
        <van-field label-width="120px" v-model="essentialInformationFormData.buildingResumeUnit" label="监理单位："
                   placeholder="请输入"/>
      </van-col>
    </van-row>
    <div class="map-contain" v-if="showMap">
      <Map @hiddenMap="showMap=false" @getPosition="getPosition"
           :default-position="essentialInformationFormData.position"></Map>
    </div>
  </van-form>
</template>
<script>
import Map from './Map'

export default {
  name: "EssentialInformation",  // 基本信息
  components: {Map},
  props: ["essentialInformationFormData"],
  data() {
    return {
      stepper: 1,
      radio: 1,
      showMap: false,
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      houseFrontImagesList: [],
      houseFrontImageFirstSrc: "",
      housePotentialAccidentsImagesList: [],
      housePotentialAccidentsImageFirstSrc: ""
    }
  },
  watch: {
    essentialInformationFormData: function (d) {
      let _this = this;
      const VUE_APP_BASE_IMG_URL = process.env.VUE_APP_BASE_IMG_URL
      let houseFrontImagesStr = d.houseFrontImage
      if (houseFrontImagesStr.length) {
        this.houseFrontImagesList = []
        houseFrontImagesStr.split(",").forEach(e => {
          if(e){
            _this.houseFrontImagesList.push(VUE_APP_BASE_IMG_URL + "/" + e)
          }

        })
        this.houseFrontImageFirstSrc = this.houseFrontImagesList[0]
      }
      let housePotentialAccidentsImageStr = d.housePotentialAccidentsImage
      if (housePotentialAccidentsImageStr.length) {
        this.housePotentialAccidentsImagesList = []
        housePotentialAccidentsImageStr.split(",").forEach(e => {
          if(e){
            _this.housePotentialAccidentsImagesList.push(VUE_APP_BASE_IMG_URL + "/" + e)
          }
        })
        this.housePotentialAccidentsImageFirstSrc = this.housePotentialAccidentsImagesList[0]
      }
    }
  },
  methods: {
    getPosition(position) {
      this.showMap = false;
      this.$emit('getPosition', position)
    },
  }
}
</script>

<style scoped>

.form-item-label-opt {
  margin: 5px 16px;
  font-size: 14px;
  font-weight: bold;
}

.form-item-label-opt-normal {
  font-weight: normal;
  color: #646566;
  display: block;
}

.form-item {
  margin-top: 8px;
  border-bottom: 1px solid #eeeeee;
  background-color: #ffffff;
}

.van-radio-opt {
  margin-bottom: 5px;
}

.form-sub-opt {
  padding-bottom: 40px;
  margin-top: 30px;
}

.form-sub-bun-opt {
  margin-top: 20px;
}

.map-contain {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 2;
  background-color: #ffffff;
}
</style>
