<template>
  <!-- 
    整页表单的分片表单
    v 1.0
    2021-05-12
    Lufthafen
  -->
  <a-form-model
    :label-col="labelCol"
    :model="form"
    :rules="rules"
    :wrapper-col="wrapperCol"
    ref="form"
  >
    <a-spin :spinning="loading">
      <a-icon slot="indicator" spin type="loading" />
      <a-row :gutter="16" type="flex">
        <a-col :span="12">
          <a-form-model-item class="ant-row-flex" label="幢名称" prop="houseInfo.buildingName">
            <a-input placeholder="请输入幢名称" v-model="form.houseInfo.buildingName" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item class="ant-row-flex" label="坐落地址" prop="houseCode.address">
            <a-input placeholder="请输入坐落地址" v-model="form.houseCode.address" />
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item class="ant-row-flex" label="土地性质" prop="houseInfo.landAttribute">
            <a-radio-group button-style="solid" v-model="form.houseInfo.landAttribute">
              <a-radio-button
                :key="item.code"
                :value="+item.code"
                v-for="item in codes.landAttribute"
              >{{ item.value }}</a-radio-button>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item class="ant-row-flex mb-none" label="地理坐标">
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-model-item prop="houseCode.lng">
                  <a-input
                    class="yo-input-prefix-2"
                    disabled
                    placeholder="请在地图上选择坐标"
                    prefix="经度"
                    v-model="form.houseCode.lng"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item prop="houseCode.lat">
                  <a-input
                    class="yo-input-prefix-2"
                    disabled
                    placeholder="请在地图上选择坐标"
                    prefix="纬度"
                    v-model="form.houseCode.lat"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model-item>
          <a-form-model-item :colon="false" :label="true" class="ant-row-flex">
            <div class="yo-map-container">
              <div class="yo-map--search">
                <a-input-search allow-clear placeholder="请输入关键字" ref="map-search" />
              </div>
              <div class="h-500" ref="map"></div>
            </div>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item class="ant-row-flex" label="结构类型" prop="houseInfo.structureType">
            <a-radio-group
              button-style="solid"
              placeholder="请选择结构类型"
              v-model="form.houseInfo.structureType"
            >
              <a-radio-button
                :key="item.code"
                :value="+item.code"
                v-for="item in codes.houseStructureType"
              >{{ item.value }}</a-radio-button>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item class="ant-row-flex" label="抗震等级" prop="houseInfo.seismicGrade">
            <a-radio-group button-style="solid" v-model="form.houseInfo.seismicGrade">
              <a-radio-button
                :key="item.code"
                :value="+item.code"
                v-for="item in codes.houseSseismicGrade"
              >{{ item.value }}</a-radio-button>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item class="ant-row-flex" label="基础情况" prop="houseInfo.baseInfo">
            <a-radio-group button-style="solid" v-model="form.houseInfo.baseInfo">
              <a-radio-button
                :key="item.code"
                :value="+item.code"
                v-for="item in codes.houseBaseInfo"
              >{{ item.value }}</a-radio-button>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item
            class="ant-row-flex"
            label="外墙保温材料"
            prop="houseInfo.insulationMaterial"
          >
            <a-checkbox-group v-model="form.houseInfo.insulationMaterial">
              <a-checkbox
                :key="item.code"
                :value="item.code"
                class="mb-xs"
                v-for="item in codes.houseInsulationMaterial"
              >{{ item.value }}</a-checkbox>
              <a-input
                class="w-300"
                placeholder="请输入其他外墙保温材料"
                v-if="form.houseInfo.insulationMaterial && form.houseInfo.insulationMaterial.indexOf(codes.houseInsulationMaterial[codes.houseInsulationMaterial.length - 1].code) >= 0"
                v-model="form.houseInfo.keepWarmMaterialRest"
              />
            </a-checkbox-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item class="ant-row-flex" label="外墙墙体材料" prop="houseInfo.wallMaterial">
            <a-checkbox-group v-model="form.houseInfo.wallMaterial">
              <a-checkbox
                :key="item.code"
                :value="item.code"
                class="mb-xs"
                v-for="item in codes.houseWallMaterial"
              >{{ item.value }}</a-checkbox>
            </a-checkbox-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item class="ant-row-flex" prop="houseInfo.fireproofGrade">
            <span slot="label">
              外墙外保温材料
              <br />防火等级
            </span>
            <a-radio-group button-style="solid" v-model="form.houseInfo.fireproofGrade">
              <a-radio-button
                :key="item.code"
                :value="item.code"
                v-for="item in codes.houseFireproofGrade"
              >{{ item.value }}</a-radio-button>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item class="ant-row-flex" label="建筑幕墙" prop="houseInfo.curtainWall">
            <a-radio-group button-style="solid" v-model="form.houseInfo.curtainWall">
              <a-radio-button
                :key="item.code"
                :value="+item.code"
                v-for="item in codes.houseBuildingCurtainWall"
              >{{ item.value }}</a-radio-button>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item class="ant-row-flex" label="有无外墙面砖" prop="houseInfo.faceBrick">
            <a-switch v-model="form.houseInfo.faceBrick" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item class="ant-row-flex" label="有无外墙粉刷" prop="houseInfo.whiteWash">
            <a-switch v-model="form.houseInfo.whiteWash" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item class="ant-row-flex" label="有无外墙涂料" prop="houseInfo.coating">
            <a-switch v-model="form.houseInfo.coating" />
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item class="ant-row-flex" label="电梯" prop="houseInfo.elevator">
            <a-radio-group button-style="solid" v-model="form.houseInfo.elevator">
              <a-radio-button
                :key="item.code"
                :value="item.code"
                v-for="item in codes.houseElevator"
              >{{ item.value }}</a-radio-button>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item class="ant-row-flex" label="竣工日期" prop="houseInfo.completedDate">
            <a-date-picker
              @change="(date) => $root.transfer.completedYear = date.format('YYYY')"
              class="w-100-p"
              placeholder="请选择竣工日期"
              v-model="form.houseInfo.completedDate"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item class="ant-row-flex" label="设计使用年限" prop="houseInfo.usefulYear">
            <a-row type="flex">
              <a-col flex="1">
                <a-input-number
                  :min="0"
                  class="w-100-p"
                  placeholder="请输入设计使用年限"
                  v-model="form.houseInfo.usefulYear"
                />
              </a-col>
              <a-col>
                <span class="yo-addon">年</span>
              </a-col>
            </a-row>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item class="ant-row-flex" label="总建筑面积" prop="houseInfo.totalArea">
            <a-row type="flex">
              <a-col flex="1">
                <a-input-number
                  :min="0"
                  class="w-100-p"
                  placeholder="请输入总建筑面积"
                  v-model="form.houseInfo.totalArea"
                />
              </a-col>
              <a-col>
                <span class="yo-addon">m²</span>
              </a-col>
            </a-row>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item class="ant-row-flex" label="总户数" prop="houseInfo.houseHolds">
            <a-row type="flex">
              <a-col flex="1">
                <a-input-number
                  :min="0"
                  :precision="0"
                  :step="1"
                  class="w-100-p"
                  placeholder="请输入总户数"
                  v-model="form.houseInfo.houseHolds"
                />
              </a-col>
              <a-col>
                <span class="yo-addon">户</span>
              </a-col>
            </a-row>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item class="ant-row-flex" label="房屋单元数" prop="houseInfo.units">
            <a-row type="flex">
              <a-col flex="1">
                <a-input-number
                  :min="0"
                  :precision="0"
                  :step="1"
                  class="w-100-p"
                  placeholder="请输入房屋单元数"
                  v-model="form.houseInfo.units"
                />
              </a-col>
              <a-col>
                <span class="yo-addon">单元</span>
              </a-col>
            </a-row>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item class="ant-row-flex" label="每层每单元户数" prop="houseInfo.unitFloorHolds">
            <a-row type="flex">
              <a-col flex="1">
                <a-input-number
                  :min="0"
                  :precision="0"
                  :step="1"
                  class="w-100-p"
                  placeholder="请输入每层每单元户数"
                  v-model="form.houseInfo.unitFloorHolds"
                />
              </a-col>
              <a-col>
                <span class="yo-addon">户</span>
              </a-col>
            </a-row>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item class="ant-row-flex" label="建设单位" prop="houseInfo.buildingUnit">
            <a-input placeholder="请输入建设单位" v-model="form.houseInfo.buildingUnit" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item class="ant-row-flex" label="建设单位联系人" prop="houseInfo.buildingUnitUser">
            <a-input placeholder="请输入建设单位联系人" v-model="form.houseInfo.buildingUnitUser" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item class="ant-row-flex" label="建设单位联系电话" prop="houseInfo.buildingUnitTel">
            <a-input placeholder="请输入建设单位联系电话" v-model="form.houseInfo.buildingUnitTel" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item class="ant-row-flex" label="设计单位" prop="houseInfo.desingerUnit">
            <a-input placeholder="请输入设计单位" v-model="form.houseInfo.desingerUnit" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item class="ant-row-flex" label="施工单位" prop="houseInfo.constructionUnit">
            <a-input placeholder="请输入施工单位" v-model="form.houseInfo.constructionUnit" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item class="ant-row-flex" label="监理单位" prop="houseInfo.monitorUnit">
            <a-input placeholder="请输入监理单位" v-model="form.houseInfo.monitorUnit" />
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item class="ant-row-flex ant-form-inline mb-none" label="建筑层数">
            <a-form-model-item
              :colon="false"
              class="ant-row-flex"
              label="地上"
              prop="houseInfo.landFloorCount"
            >
              <a-row type="flex">
                <a-col flex="1">
                  <a-input-number
                    :min="0"
                    :precision="0"
                    :step="1"
                    class="w-100-p"
                    placeholder="请输入地上层"
                    v-model="form.houseInfo.landFloorCount"
                  />
                </a-col>
                <a-col>
                  <span class="yo-addon">层</span>
                </a-col>
              </a-row>
            </a-form-model-item>
            <a-form-model-item
              :colon="false"
              class="ant-row-flex"
              label="地下"
              prop="houseInfo.underFloorCount"
            >
              <a-row type="flex">
                <a-col flex="1">
                  <a-input-number
                    :min="0"
                    :precision="0"
                    :step="1"
                    class="w-100-p"
                    placeholder="请输入地下层"
                    v-model="form.houseInfo.underFloorCount"
                  />
                </a-col>
                <a-col>
                  <span class="yo-addon">层</span>
                </a-col>
              </a-row>
            </a-form-model-item>
            <a-form-model-item
              :colon="false"
              class="ant-row-flex"
              label="总共"
              prop="houseInfo.totalFloor"
            >
              <a-row type="flex">
                <a-col flex="1">
                  <a-input-number
                    :min="0"
                    :precision="0"
                    :step="1"
                    class="w-100-p"
                    disabled
                    placeholder="请输入总层数"
                    v-model="form.houseInfo.totalFloor"
                  />
                </a-col>
                <a-col>
                  <span class="yo-addon">层</span>
                </a-col>
              </a-row>
            </a-form-model-item>
          </a-form-model-item>
          <a-form-model-item class="ant-row-flex ant-form-inline" label="其中">
            <a-form-model-item class="ant-row-flex">
              <a-row type="flex">
                <a-col>
                  <span class="yo-addon">地上第</span>
                </a-col>
                <a-col flex="1">
                  <a-form-model-item class="mr-none" prop="houseInfo.landBsFloorStart">
                    <a-input-number
                      :min="0"
                      :step="1"
                      placeholder="几"
                      v-model="form.houseInfo.landBsFloorStart"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col>
                  <span class="yo-addon">层，至</span>
                </a-col>
                <a-col flex="1">
                  <a-form-model-item class="mr-none" prop="houseInfo.landBsFloorEnd">
                    <a-input-number
                      :min="0"
                      :step="1"
                      placeholder="几"
                      v-model="form.houseInfo.landBsFloorEnd"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col>
                  <span class="yo-addon">层为商业用房</span>
                </a-col>
              </a-row>
            </a-form-model-item>
            <a-form-model-item class="ant-row-flex">
              <a-row type="flex">
                <a-col>
                  <span class="yo-addon">地上</span>
                </a-col>
                <a-col flex="1">
                  <a-form-model-item class="mr-none" prop="houseInfo.landBikeFloorStart">
                    <a-input-number
                      :min="0"
                      :step="1"
                      placeholder="几"
                      v-model="form.houseInfo.landBikeFloorStart"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col>
                  <span class="yo-addon">层为车棚层</span>
                </a-col>
              </a-row>
            </a-form-model-item>
            <a-form-model-item class="ant-row-flex">
              <a-row type="flex">
                <a-col>
                  <span class="yo-addon">地上第</span>
                </a-col>
                <a-col flex="1">
                  <a-form-model-item class="mr-none" prop="houseInfo.landResidenceFloorStart">
                    <a-input-number
                      :min="0"
                      :step="1"
                      placeholder="几"
                      v-model="form.houseInfo.landResidenceFloorStart"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col>
                  <span class="yo-addon">层，至</span>
                </a-col>
                <a-col flex="1">
                  <a-form-model-item class="mr-none" prop="houseInfo.landResidenceFloorEnd">
                    <a-input-number
                      :min="0"
                      :step="1"
                      placeholder="几"
                      v-model="form.houseInfo.landResidenceFloorEnd"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col>
                  <span class="yo-addon">层为住宅</span>
                </a-col>
              </a-row>
            </a-form-model-item>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-spin>
  </a-form-model>
</template>
<script>
import { CITY } from '@/util/global';

/* 表单内容默认值 */
const defaultForm = {
  /* ... */
  houseCode: {
    address: null,
    lng: null,
    lat: null,
  },

  houseInfo: {
    buildingName: null,
    landAttribute: '1',
    structureType: null,
    seismicGrade: null,
    baseInfo: null,
    insulationMaterial: null,
    keepWarmMaterialRest: null,
    wallMaterial: null,
    fireproofGrade: null,
    curtainWall: null,
    faceBrick: null,
    whiteWash: null,
    coating: null,
    elevator: null,
    completedDate: null,
    usefulYear: null,
    totalArea: null,
    houseHolds: null,
    units: null,
    unitFloorHolds: null,
    buildingUnit: null,
    buildingUnitUser: null,
    buildingUnitTel: null,
    desingerUnit: null,
    constructionUnit: null,
    monitorUnit: null,
    landFloorCount: null,
    underFloorCount: null,
    totalFloor: null,
    landBsFloorStart: null,
    landBsFloorEnd: null,
    landBikeFloorStart: null,
    landResidenceFloorStart: null,
    landResidenceFloorEnd: null,
  },
};

export default {
  props: ['param', 'frame'],

  data() {
    return {
      labelCol: { flex: '150px' },
      wrapperCol: { flex: '1' },

      /** 表单数据 */
      form: {
        ...defaultForm,
      },
      /** 验证格式 */
      rules: {
        /* ... */
        'houseInfo.buildingName': [{ required: true, message: '请输入幢名称', trigger: 'blur' }],
        'houseCode.address': [{ required: true, message: '请输入坐落地址', trigger: 'blur' }],
        'houseInfo.landAttribute': [{ required: true, message: '请选择土地性质' }],
        'houseCode.lng': [{ required: true, message: '请在地图上选择坐标', trigger: 'blur' }],
        'houseCode.lat': [{ required: true, message: '请在地图上选择坐标', trigger: 'blur' }],
        'houseInfo.structureType': [{ required: true, message: '请选择结构类型' }],
        'houseInfo.seismicGrade': [{ required: true, message: '请选择抗震等级' }],
        'houseInfo.baseInfo': [{ required: true, message: '请选择基础情况' }],
        'houseInfo.curtainWall': [{ required: true, message: '请选择建筑幕墙' }],
        'houseInfo.elevator': [{ required: true, message: '请选择电梯' }],
        'houseInfo.completedDate': [{ required: true, message: '请选择竣工日期' }],
        'houseInfo.usefulYear': [{ required: true, message: '请输入设计使用年限' }],
        'houseInfo.totalArea': [{ required: true, message: '请输入总建筑面积' }],
        'houseInfo.houseHolds': [{ required: true, message: '请输入总户数' }],
        'houseInfo.units': [{ required: true, message: '请输入房屋单元数' }],
        'houseInfo.unitFloorHolds': [{ required: true, message: '请输入每层每单元户数' }],
        // 'houseInfo.buildingUnit': [{ required: true, message: '请输入建设单位', trigger: 'blur' }],
        // 'houseInfo.buildingUnitUser': [{ required: true, message: '请输入建设单位联系人', trigger: 'blur' }],
        // 'houseInfo.buildingUnitTel': [{ required: true, message: '请输入建设单位联系电话', trigger: 'blur' }],
        // 'houseInfo.desingerUnit': [{ required: true, message: '请输入设计单位', trigger: 'blur' }],
        // 'houseInfo.constructionUnit': [{ required: true, message: '请输入施工单位', trigger: 'blur' }],
        'houseInfo.landFloorCount': [{ required: true, message: '请输入地上层' }],
        'houseInfo.underFloorCount': [{ required: true, message: '请输入地下层' }],
      },

      /** 加载异步数据状态 */
      loading: false,

      /** 其他成员属性 */
      /* ... */
      codes: {
        landAttribute: [],
        houseStructureType: [],
        houseSseismicGrade: [],
        houseBaseInfo: [],
        houseInsulationMaterial: [],
        houseWallMaterial: [],
        houseFireproofGrade: [],
        houseBuildingCurtainWall: [],
        houseElevator: [],
      },
    };
  },

  watch: {
    'form.houseInfo.insulationMaterial'(value, oldValue) {
      // 选中"无"时全不选,反之取消选择"无"
      if (value) {
        if (value.indexOf('0') >= 0 && oldValue.indexOf('0') === -1) {
          this.form.houseInfo.insulationMaterial = ['0'];
        } else if (value.indexOf('0') >= 0 && value.length > 1) {
          this.form.houseInfo.insulationMaterial.splice(value.indexOf('0'), 1);
        }
      }
    },
    'form.houseInfo.landFloorCount'(value) {
      this.form.houseInfo.totalFloor = value + this.form.houseInfo.underFloorCount;
    },
    'form.houseInfo.underFloorCount'(value) {
      this.form.houseInfo.totalFloor = value + this.form.houseInfo.landFloorCount;
    },
    // 'form.houseInfo.curtainWall'(value) {
    //   this.frame.onTogglePane(!!+value, 'curtainWall');
    // },
    // 'form.houseInfo.faceBrick'(value) {
    //   this.frame.onTogglePane(value, 'faceBrick');
    // },
    // 'form.houseInfo.whiteWash'(value) {
    //   this.frame.onTogglePane(value, 'whiteWash');
    // },
    // 'form.houseInfo.coating'(value) {
    //   this.frame.onTogglePane(value, 'coating');
    // },
  },

  created() {
    this.onFillData();
  },

  beforeDestroy() {
    if (this.map) this.map.destroy();
    //组件销毁时，删除竣工日期的全局监听
    this.$delete(this.$root.transfer, 'completedYear');
  },

  methods: {
    /**
     * 必要的方法
     * 在打开编辑页时允许填充数据
     */
    async onFillData() {
      this.loading = true;
      {
        await this.onLoadCodes();

        /** 将默认数据覆盖到form */
        const record = this.param && this.param.record;
        const form = this.$_.cloneDeep(defaultForm);

        if (record) {
          this.$_.giveDeep(form, record);
        }

        this.form = form;
        this.$set(
          this.$root.transfer,
          'completedYear',
          !!this.form.houseInfo.completedDate ? this.form.houseInfo.completedDate.substr(0, 4) : ''
        );
        this.$nextTick(async () => {
          await this.onMapInit();
          if (this.form.houseCode.lng && this.form.houseCode.lat) {
            this.setMarker([this.form.houseCode.lng, this.form.houseCode.lat]);
            this.map.setCenter([this.form.houseCode.lng, this.form.houseCode.lat]);
          }
        });
      }
      this.loading = false;
    },

    /**
     * 必要方法
     * 验证表单并获取表单数据
     */
    onGetData() {
      return new Promise((reslove, reject) => {
        this.$refs.form.validate((valid, err) => {
          if (valid) {
            const record = this.$_.cloneDeep(this.form);

            /** 验证通过后可以对数据进行转换得到想要提交的格式 */
            /* ... */
            if (record.houseInfo.completedDate && record.houseInfo.completedDate.constructor === Object) {
              record.houseInfo.completedDate = record.houseInfo.completedDate.format('YYYY-MM-DD');
            }

            reslove(record);
          } else {
            reject(err);
          }
        });
      });
    },

    /**
     * 必要的方法
     * 在外部窗口关闭或重置时对表单验证进行初始化
     */
    onResetFields() {
      setTimeout(() => {
        this.$refs.form.resetFields();

        /** 在这里可以初始化当前组件中其他属性 */
        /* ... */
      }, 300);
    },

    /** 当前组件的其他方法 */
    /* ... */
    onLoadCodes() {
      return this.$api
        .sysDictTypeDropDowns({
          code: [
            'dic_land_attribute',
            'dic_house_structure_type',
            'dic_house_aseismic_grade',
            'dic_house_base_info',
            'dic_house_insulation_material',
            'dic_house_wall_material',
            'dic_house_fireproof_grade',
            'dic_house_building_curtain_wall',
            'dic_house_elevator',
          ],
        })
        .then(
          ({
            data: {
              dic_land_attribute,
              dic_house_structure_type,
              dic_house_aseismic_grade,
              dic_house_base_info,
              dic_house_insulation_material,
              dic_house_wall_material,
              dic_house_fireproof_grade,
              dic_house_building_curtain_wall,
              dic_house_elevator,
            },
          }) => {
            this.codes = {
              landAttribute: dic_land_attribute,
              houseStructureType: dic_house_structure_type,
              houseSseismicGrade: dic_house_aseismic_grade,
              houseBaseInfo: dic_house_base_info,
              houseInsulationMaterial: dic_house_insulation_material,
              houseWallMaterial: dic_house_wall_material,
              houseFireproofGrade: dic_house_fireproof_grade,
              houseBuildingCurtainWall: dic_house_building_curtain_wall,
              houseElevator: dic_house_elevator,
            };
          }
        );
    },

    onMapInit() {
      return new Promise((resolve) => {
        const city = CITY;

        const district = new AMap.DistrictSearch({
          subdistrict: 0,
          extensions: 'all',
          level: 'city',
        });

        district.search(city, (status, result) => {
          const bounds = result.districtList[0].boundaries;
          const mask = [];
          for (let i = 0; i < bounds.length; i += 1) {
            mask.push([bounds[i]]);
          }

          // 挂载map到this,但不监听
          this.map = new AMap.Map(this.$refs.map, {
            mask,
            zoom: 12,
          });

          const geocoder = new AMap.Geocoder({ city });

          this.map.on('click', (e) => {
            this.setMarker(e.lnglat, geocoder);
          });

          this.map.on('complete', () => {
            this.map.setFitView();
            this.map.setZoom(12);
            resolve();
          });

          const auto = new AMap.AutoComplete({
            input: this.$refs['map-search'].$el.querySelector('input'),
            city,
            citylimit: true,
          });

          const placeSearch = new AMap.PlaceSearch({
            city,
            citylimit: true,
            pageSize: 1,
          });

          auto.on('select', ({ poi: { name: keywords, adcode } }) => {
            this.map.clearMap();
            this.marker = null;
            placeSearch.search(keywords, (status, result) => {
              const {
                poiList: { pois },
              } = result;
              pois.forEach((p) => {
                this.setMarker(p.location, geocoder);
              });

              this.map.setFitView();
            });
          });

          for (let i = 0; i < bounds.length; i += 1) {
            new AMap.Polyline({
              path: bounds[i],
              strokeColor: '#ccc',
              strokeWeight: 4,
              map: this.map,
            });
          }
        });
      });
    },

    setMarker(position, geocoder) {
      if (this.marker) {
        this.marker.setPosition(position);
      } else {
        this.marker = new AMap.Marker({
          map: this.map,
          icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
          position,
          offset: new AMap.Pixel(-13, -30),
        });
      }

      if (geocoder) {
        geocoder.getAddress(position, (status, result) => {
          if (status === 'complete' && result.regeocode) {
            this.onSetPosition(result.regeocode.formattedAddress, position);
          } else {
            console.error('根据经纬度查询地址失败');
          }
        });
      }
    },

    onSetPosition(address, { lng, lat }) {
      Object.assign(this.form.houseCode, {
        address,
        lng: lng.toString(),
        lat: lat.toString(),
      });
    },
  },
};
</script>