<template>
  <div class="addinfo-wrapper">
    <el-form ref="formenterinfo1" :rules="formenterinforules" :model="formenterinfo" label-width="180px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="企业名称:" prop="companyName">
            <el-input v-model="formenterinfo.companyName" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业状态:" prop="companyStatus">
            <el-select v-model="formenterinfo.companyStatus" placeholder="请选择企业状态">
              <el-option label="正常生产" value="正常生产" />
              <el-option label="停产企业" value="停产企业" />
              <el-option label="已经注销" value="已经注销" />
              <el-option label="基建企业" value="基建企业" />
              <el-option label="停建企业" value="停建企业" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="行业类型:" prop="companyIndustryName">
            <el-select v-model="formenterinfo.companyIndustryName" placeholder="请选择行业类型">
              <!-- <el-option label="危化品生产" value="hcpro" />
              <el-option label="危化品生产 (含储存经营)" value="hcprosm" />
              <el-option label="危化品使用" value="uohc" />
              <el-option label="危化品使用 (含储存经营)" value="uohcsm" />
              <el-option label="危化品储存经营" value="hcsm" />
              <el-option label="一般化工" value="gci" />
              <el-option label="一般化工 (含危化品经营)" value="gcichc" />
              <el-option label="加油站" value="gs" />
              <el-option label="危化品纯经营" value="gcihc" />
              <el-option label="建材" value="bm" />
              <el-option label="化工设备加工" value="ce" />
              <el-option label="橡胶、农膜和塑料制品业" value="rplastic" />
              <el-option label="其他行业" value="other" /> -->
              <el-option v-for="(item, index) in industryNames" :key="index" :label="item.industryName" :value="item.industryName" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否化工" prop="companyChemical">
            <el-radio-group v-model="formenterinfo.companyChemical">
              <el-radio label="1" value="1">是</el-radio>
              <el-radio label="0" value="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="国民行业类型" prop="companyDimTwoIndustryName">
        <el-select v-model="curNationIndusLevel1" @change="nationInduschangelevel1">
          <el-option v-for="(item, index) in nationindusNames" :key="index" :label="item.name" :value="item.name" />
        </el-select>
        <el-select v-if="nationindusSecondNames.length > 0" v-model="curNationIndusLevel2" @change="nationInduschangelevel2">
          <el-option v-for="(item, index) in nationindusSecondNames" :key="index" :label="item.name" :value="item.name" />
        </el-select>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="统一社会信用代码:" prop="companyCode">
            <el-input v-model="formenterinfo.companyCode" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="总人数" prop="companyPeople">
            <el-input v-model="formenterinfo.companyPeople" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="所属地区" prop="companyCounty">
        <!-- <el-select v-model="formenterinfo.company_town" placeholder="请选择所属镇办">
          <el-option label="金岭回族镇" value="town1" />
          <el-option label="湖田镇" value="town2" />
          <el-option label="金山镇" value="town3" />
          <el-option label="雪宫镇" value="town4" />
          <el-option label="凤凰镇" value="town5" />
          <el-option label="辛店镇" value="town6" />
        </el-select> -->
        <el-select v-model="region1model" @change="region1schange">
          <el-option v-for="(item, index) in regionlevel1" :key="index" :label="item.name" :value="item.areaCode" />
        </el-select>
        <el-select v-if="regionlevel2.length > 0" v-model="region2model" @change="region2schange">
          <el-option v-for="(item, index) in regionlevel2" :key="index" :label="item.name" :value="item.areaCode" />
        </el-select>
        <el-select v-if="regionlevel3.length > 0" v-model="region3model" @change="region3schange">
          <el-option v-for="(item, index) in regionlevel3" :key="index" :label="item.name" :value="item.areaCode" />
        </el-select>
        <el-select v-if="regionlevel4.length > 0" v-model="region4model" @change="region4schange">
          <el-option v-for="(item, index) in regionlevel4" :key="index" :label="item.name" :value="item.areaCode" />
        </el-select>
        <el-select v-if="regionlevel5.length > 0" v-model="region5model" @change="region5schange">
          <el-option v-for="(item, index) in regionlevel5" :key="index" :label="item.name" :value="item.areaCode" />
        </el-select>
      </el-form-item>
      <el-form-item label="值班电话" prop="dutytel">
        <el-input v-model="formenterinfo.companyDutyTel" />
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="主要负责人" prop="companyChargePer">
            <el-input v-model="formenterinfo.companyChargePer" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="主要负责人电话" prop="companyChargeTel">
            <el-input v-model="formenterinfo.companyChargeTel" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="安全负责人">
            <el-input v-model="formenterinfo.companySecurityPer" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="安全负责人电话">
            <el-input v-model="formenterinfo.companySecurityTel" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="企业简介">
        <el-input v-model="formenterinfo.companyIntroduction" type="textarea" />
      </el-form-item>
      <el-form-item label="通讯地址">
        <el-input v-model="formenterinfo.companyCommunicationAddr" />
      </el-form-item>
      <el-form-item label="经营范围">
        <el-input v-model="formenterinfo.companyBusinessNature" type="textarea" />
      </el-form-item>
      <el-form-item label="原料">
        <el-input v-model="formenterinfo.companyRawMaterial" />
      </el-form-item>
      <el-form-item label="主要产品">
        <el-input v-model="formenterinfo.companyMainProduct" />
      </el-form-item>
      <el-form-item label="地理坐标">
        <!-- <el-row>
          <el-col :span="8">
            <el-input v-model="tochoosepos" size="mini" placeholder="请输入地点" />
          </el-col>
          <el-col :span="16">
            <el-button size="mini" type="primary" @click="searchpos">搜索</el-button>
          </el-col>
        </el-row> -->
        <el-row>
          <el-col :span="8">
            <el-input v-model="tochoosecomregion" size="mini" placeholder="请输入公司名称或公司所在地" />
          </el-col>
          <el-col :span="16">
            <el-button size="mini" type="primary" @click="searchcom">搜索</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-select v-if="companyregions.length > 0" v-model="comrealpos" style="width:20%;" @change="comrealposselect">
            <el-option v-for="(item, index) in companyregions" :key="index" :label="item.name + '-' + item.address" :value="item.location.lng + ',' + item.location.lat" />
          </el-select>
        </el-row>
      </el-form-item>
    </el-form>
    <div class="submit-map-wrapper">
      <div id="submitformmap" />
      <div class="pos-info-wrapper">
        <div>坐标经纬度:&nbsp;</div>
        <div class="submitoriginpos" />
        <div>&nbsp;&nbsp;鼠标经纬度:&nbsp;</div>
        <div class="submitmousepos" />
      </div>
    </div>
    <div class="submitbtnwrapper">
      <el-button type="primary" @click="submitlittleform">提交</el-button>
    </div>
  </div>
</template>

<script>
import { getindustry, getAllProvince, findAreaByCode, addCompanyInfo, findDimindustry } from '../api/industry'
export default {
  data() {
    return {
      formenterinfo: {
        companyName: '',
        companyStatus: '正常生产',
        companyIndustryName: '一般化工行业',
        companyChemical: '0',
        companyCode: '',
        companyPeople: '',
        companyDutyTel: '',
        companyChargePer: '',
        companyChargeTel: '',
        companySecurityPer: '',
        companySecurityTel: '',
        companyIntroduction: '',
        companyCommunicationAddr: '',
        companyBusinessNature: '',
        companyRawMaterial: '',
        companyMainProduct: '',
        companyLng: '',
        companyLat: '',
        companyProvince: '',
        companyCity: '',
        companyCounty: '',
        companyCommunity: '',
        companyTown: '',
        companyDimOneIndustryName: '',
        companyDimTwoIndustryName: ''
      },
      formenterinforules: {
        companyName: [
          { required: true, message: '请输入企业名称', trigger: 'blur' },
          { min: 2, message: '长度须大于2个字符', trigger: 'blur' }
        ],
        companyCounty: [
          { required: true, message: '请输入地址', trigger: 'change' }
        ],
        companyCode: [
          { required: true, message: '请输入统一社会信用代码', trigger: 'blur' }
        ],
        companyIndustryName: [
          { required: true, message: '请输入行业类型', trigger: 'blur' }
        ],
        companyChargePer: [
          { required: true, message: '请输入主要负责人', trigger: 'blur' },
          { min: 1, message: '长度须大于1个字符', trigger: 'blur' }
        ],
        companyChargeTel: [
          { required: true, message: '请输入主要负责人电话', trigger: 'blur' },
          { min: 1, message: '长度须大于1个字符', trigger: 'blur' }
        ],
        companyDimTwoIndustryName: [
          { required: true, message: '请输入国民经济行业', trigger: 'change' }
        ]
      },
      // 当前输入的地点
      tochoosepos: '',
      map: null,
      industryNames: [],
      region1model: '',
      region2model: '',
      region3model: '',
      region4model: '',
      region5model: '',
      regionlevel1: [],
      regionlevel2: [],
      regionlevel3: [],
      regionlevel4: [],
      regionlevel5: [],
      companyregions: [],
      // input选择的坐标
      tochoosecomregion: '',
      // 公司选择的坐标
      comrealpos: '',
      // 5个当前地点的总计
      completeposname: '',
      // 国民经济行业第一级别列表
      nationindusNames: [],
      // 国民经济行业第二级别列表
      nationindusSecondNames: [],
      // 当前选择的国民经济行业第一级别
      curNationIndusLevel1: '',
      // 当前选择的国民经济行业第二级别
      curNationIndusLevel2: ''
    }
  },
  mounted() {
    // 获取行业信息
    getindustry().then(res => {
      this.industryNames = [...res.content]
    })
    // 获取所有省份信息
    getAllProvince().then(res => {
      this.regionlevel1 = [...res]
    })
    // 在这里画地图
    const AMap = window.AMap || {}
    const satellite = new AMap.TileLayer.Satellite()
    const roadNet = new AMap.TileLayer.RoadNet()
    this.map = new AMap.Map('submitformmap', {
      resizeEnable: true, // 是否监控地图容器尺寸变化
      zoom: 16, // 初始化地图层级
      center: [122.086287, 37.493758],
      layers: [
        satellite,
        roadNet
      ]
    })
    const marker = new AMap.Marker({
      icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png',
      position: [122.086287, 37.493758],
      // anchor: 'bottom-center'
      offset: new AMap.Pixel(-10, -31),
      zIndex: 100
    })
    this.marker = marker
    this.map.on('mousemove', (e) => {
      document.querySelector('.submitmousepos').innerHTML = e.lnglat.getLng() + ',' + e.lnglat.getLat()
    })
    document.querySelector('.submitoriginpos').innerHTML = '122.086287, 37.493758'
    // this.formenterinfo.companyLng = '122.086287'
    // this.formenterinfo.companyLat = '37.493758'
    this.map.add(marker)
    this.map.on('click', (e) => {
      document.querySelector('.submitoriginpos').innerHTML = e.lnglat.getLng() + ',' + e.lnglat.getLat()
      // document.querySelector('.submitoriginpos').innerHTML = '122.086287, 37.493758'
      // map.remove(marker)
      // marker = new AMap.Marker({

      // })
      this.map.setCenter([e.lnglat.getLng(), e.lnglat.getLat()])
      marker.setPosition(e.lnglat)
      this.formenterinfo.companyLng = '' + e.lnglat.getLng()
      this.formenterinfo.companyLat = '' + e.lnglat.getLat()
      AMap.plugin('AMap.Geocoder', () => {
        // 在这里面获取到点击经纬度的所对应的地理信息
        const geocoder = new AMap.Geocoder({
          radius: 1000
        })
        geocoder.getAddress(e.lnglat, (status, result) => {
          if (status === 'complete' && result && result.info === 'OK' && result.regeocode) {
            /**
             * result.regeocode.addressComponent.province
             * result.regeocode.addressComponent.city
             * result.regeocode.addressComponent.district
             */
            this.setRegionSelect(result.regeocode.addressComponent.province, result.regeocode.addressComponent.city, result.regeocode.addressComponent.district)
            this.comrealpos = result.regeocode.formattedAddress
            this.tochoosecomregion = this.comrealpos
            AMap.plugin('AMap.PlaceSearch', () => {
              const placesearch = new AMap.PlaceSearch({})
              placesearch.search(this.comrealpos, (status, result) => {
                if (status === 'complete' && result.info === 'OK' && result.poiList.pois && result.poiList.pois.length > 0) {
                  this.companyregions = [...result.poiList.pois]
                }
              })
            })
          }
        })
      })
    })
    // 获取国民行业信息
    findDimindustry().then(res => {
      // console.log(res, 'res')
      this.nationindusNames = [...res]
    })
    this.searchPosPro('威海市经济技术开发区')
    this.setRegionSelect('山东省', '威海市', '威海经济技术开发区')
    this.formenterinfo.companyLng = '122.086287'
    this.formenterinfo.companyLat = '37.493758'
  },
  methods: {
    searchpos() {
      // const AMap = window.AMap || {}
      const tochoosepos = this.tochoosepos
      // const map = this.map || {}
      if (tochoosepos === '') {
        return
      }
      if (tochoosepos !== '') {
        // AMap.plugin('AMap.DistrictSearch', function() {
        //   // 创建行政区查询对象
        //   const district = new AMap.DistrictSearch({
        //     // 返回行政区边界坐标等具体信息
        //     extensions: 'all',
        //     // 设置查询行政级别为区
        //     level: 'district'
        //   })
        //   district.search(tochoosepos, function(status, result) {
        //     console.log(status, 'status')
        //     console.log(result, 'result')
        //     if (status === 'complete' && result.info === 'OK') {
        //       // 查询
        //       map.setCenter([result.districtList[0].center.lng, result.districtList[0].center.lat])
        //     }
        //   })
        // })
        // AMap.plugin('AMap.PlaceSearch', function() {
        //   // 常见地点查询对象
        //   const placesearch = new AMap.PlaceSearch({
        //     // city: '北京',
        //     map: map
        //   })
        //   placesearch.search(tochoosepos, function(status, result) {
        //     console.log(status, 'status')
        //     console.log(result, 'result')
        //   })
        // })
      }
    },
    searchcom() {
      // 搜索公司
      // companyregions
      const AMap = window.AMap || {}
      const tochoosecomregion = this.tochoosecomregion
      // const map = this.map || {}
      if (tochoosecomregion === '') {
        return
      }
      if (tochoosecomregion !== '') {
        AMap.plugin('AMap.PlaceSearch', () => {
          // 查询公司地点
          const placesearch = new AMap.PlaceSearch({
            // map: map
          })
          placesearch.search(tochoosecomregion, (status, result) => {
            if (status === 'complete' && result.info === 'OK' && result.poiList.pois && result.poiList.pois.length > 0) {
              this.companyregions = [...result.poiList.pois]
            }
          })
        })
      }
    },
    region1schange() {
      // 根据region1model选择区域
      // this.regionlevel2 =
      findAreaByCode(Number(this.region1model), 1).then(res => {
        this.regionlevel2 = [...res]
      })
      this.completeposname = this.regionlevel1.filter(item => {
        return item.areaCode === Number(this.region1model)
      })[0].name
      this.tochoosecomregion = this.completeposname
      this.searchPosPro(this.tochoosecomregion)
      this.formenterinfo.companyProvince = this.regionlevel1.filter(item => {
        return item.areaCode === Number(this.region1model)
      })[0].name
    },
    region2schange() {
      findAreaByCode(Number(this.region2model), 2).then(res => {
        this.regionlevel3 = [...res]
      })
      this.completeposname = this.regionlevel1.filter(item => {
        return item.areaCode === Number(this.region1model)
      })[0].name
      this.completeposname += this.regionlevel2.filter(item => {
        return item.areaCode === Number(this.region2model)
      })[0].name
      this.tochoosecomregion = this.completeposname
      this.searchPosPro(this.tochoosecomregion)
      this.formenterinfo.companyCity = this.regionlevel2.filter(item => {
        return item.areaCode === Number(this.region2model)
      })[0].name
    },
    region3schange() {
      findAreaByCode(Number(this.region3model), 3).then(res => {
        this.regionlevel4 = [...res]
      })
      this.completeposname = this.regionlevel1.filter(item => {
        return item.areaCode === Number(this.region1model)
      })[0].name
      this.completeposname += this.regionlevel2.filter(item => {
        return item.areaCode === Number(this.region2model)
      })[0].name
      this.completeposname += this.regionlevel3.filter(item => {
        return item.areaCode === Number(this.region3model)
      })[0].name
      this.tochoosecomregion = this.completeposname
      this.searchPosPro(this.tochoosecomregion)
      this.formenterinfo.companyCounty = this.regionlevel3.filter(item => {
        return item.areaCode === Number(this.region3model)
      })[0].name
    },
    region4schange() {
      findAreaByCode(Number(this.region4model), 4).then(res => {
        this.regionlevel5 = [...res]
      })
      this.completeposname = this.regionlevel1.filter(item => {
        return item.areaCode === Number(this.region1model)
      })[0].name
      this.completeposname += this.regionlevel2.filter(item => {
        return item.areaCode === Number(this.region2model)
      })[0].name
      this.completeposname += this.regionlevel3.filter(item => {
        return item.areaCode === Number(this.region3model)
      })[0].name
      this.completeposname += this.regionlevel4.filter(item => {
        return item.areaCode === Number(this.region4model)
      })[0].name
      this.tochoosecomregion = this.completeposname
      this.searchPosPro(this.tochoosecomregion)
      this.formenterinfo.companyCommunity = this.regionlevel4.filter(item => {
        return item.areaCode === Number(this.region4model)
      })[0].name
    },
    region5schange() {
      this.completeposname = this.regionlevel1.filter(item => {
        return item.areaCode === Number(this.region1model)
      })[0].name
      this.completeposname += this.regionlevel2.filter(item => {
        return item.areaCode === Number(this.region2model)
      })[0].name
      this.completeposname += this.regionlevel3.filter(item => {
        return item.areaCode === Number(this.region3model)
      })[0].name
      this.completeposname += this.regionlevel4.filter(item => {
        return item.areaCode === Number(this.region4model)
      })[0].name
      this.completeposname += this.regionlevel5.filter(item => {
        return item.areaCode === Number(this.region5model)
      })[0].name
      this.tochoosecomregion = this.completeposname
      this.searchPosPro(this.tochoosecomregion)
      this.formenterinfo.companyTown = this.regionlevel5.filter(item => {
        return item.areaCode === Number(this.region5model)
      })[0].name
    },
    // 获取公司选中的位置，差一个定位中心
    comrealposselect(e) {
      const AMap = window.AMap || {}
      this.formenterinfo.companyLng = this.comrealpos.split(',')[0]
      this.formenterinfo.companyLat = this.comrealpos.split(',')[1]
      this.map.setCenter([Number(this.comrealpos.split(',')[0]), Number(this.comrealpos.split(',')[1])])
      this.marker.setPosition(new AMap.LngLat(Number(this.comrealpos.split(',')[0]), Number(this.comrealpos.split(',')[1])))
      document.querySelector('.submitoriginpos').innerHTML = this.comrealpos
    },
    // 一个专门查询的方法
    searchPosPro(tochoosecomregion) {
      // 搜索公司
      // companyregions
      const AMap = window.AMap || {}
      // const tochoosecomregion = this.tochoosecomregion
      // const map = this.map || {}
      if (tochoosecomregion === '') {
        return
      }
      if (tochoosecomregion !== '') {
        AMap.plugin('AMap.PlaceSearch', () => {
          // 查询公司地点
          const placesearch = new AMap.PlaceSearch({
            // map: this.map
          })
          placesearch.search(tochoosecomregion, (status, result) => {
            if (status === 'complete' && result.info === 'OK' && result.poiList.pois && result.poiList.pois.length > 0) {
              this.companyregions = [...result.poiList.pois]
              if (this.companyregions.length > 0) {
                this.comrealpos = this.companyregions[0].location.lng + ',' + this.companyregions[0].location.lat
                this.marker.setPosition(new AMap.LngLat(Number(this.comrealpos.split(',')[0]), Number(this.comrealpos.split(',')[1])))
                this.map.setCenter(new AMap.LngLat(Number(this.comrealpos.split(',')[0]), Number(this.comrealpos.split(',')[1])))
                this.formenterinfo.companyLng = this.comrealpos.split(',')[0]
                this.formenterinfo.companyLat = this.comrealpos.split(',')[1]
              }
            }
          })
        })
      }
    },
    // 提交表单
    submitlittleform() {
      // 转换数字
      const testNum = Number(this.formenterinfo.companyPeople)
      console.log(testNum, '是否汇报异常')
      if (isNaN(testNum)) {
        this.$confirm('请输入正确的企业人数', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {}, () => {})
        return
      }
      this.$refs.formenterinfo1.validate((valid) => {
        if (valid) {
          // 在这里判断this.formenterinfo
          // this.formenterinfo.com
          // let isFormValid = false
          if (this.formenterinfo.companyLng === '') {
            this.$message.error('请填写经纬度')
            return
          }
          if (this.formenterinfo.companyLat === '') {
            this.$message.error('请填写经纬度')
            return
          }
          addCompanyInfo(this.formenterinfo).then(res => {
            this.$message({
              showClose: true,
              message: '提交成功',
              type: 'success'
            })
          }, () => {
            this.$message({
              showClose: true,
              message: '提交失败',
              type: 'error'
            })
          })
        } else {
          this.$message({
            message: '请传入正确信息',
            type: 'warning'
          })
        }
      })
    },
    // 根据省市区设置
    async setRegionSelect(province, city, district) {
      if (this.formenterinfo.companyProvince === province && this.formenterinfo.companyCity === city && this.formenterinfo.companyCounty === district) {
        console.log('')
      } else {
        this.regionlevel4 = []
        this.regionlevel5 = []
        this.region4model = ''
        this.region5model = ''
        // 获取所有省份信息
        await getAllProvince().then(res => {
          this.regionlevel1 = [...res]
        })
        const areaCode1 = this.regionlevel1.filter(item => item.name === province)[0].areaCode
        await findAreaByCode(areaCode1, 1).then(res => {
          this.regionlevel2 = [...res]
        })
        const areaCode2 = this.regionlevel2.filter(item => item.name === city)[0].areaCode
        await findAreaByCode(areaCode2, 2).then(res => {
          this.regionlevel3 = [...res]
        })
        const areaCode3 = this.regionlevel3.filter(item => item.name === district)[0].areaCode
        await findAreaByCode(areaCode3, 3).then(res => {
          this.regionlevel4 = [...res]
        })
        this.region1model = areaCode1
        this.region2model = areaCode2
        this.region3model = areaCode3
        this.formenterinfo.companyProvince = province
        this.formenterinfo.companyCity = city
        this.formenterinfo.companyCounty = district
        this.formenterinfo.companyCommunity = ''
        this.formenterinfo.companyTown = ''
      }
    },
    // 选择当前的国民第一行业
    nationInduschangelevel1() {
      // 动态获取国民第二行业
      // nationindusSecondNames
      findDimindustry(this.nationindusNames.filter(item => item.name === this.curNationIndusLevel1)[0].industryId).then(res => {
        this.nationindusSecondNames = [...res]
      })
      this.formenterinfo.companyDimOneIndustryName = this.curNationIndusLevel1
    },
    // 选择当前的国民第二行业
    nationInduschangelevel2() {
      // 改变当前的国民第二行业
      this.formenterinfo.companyDimTwoIndustryName = this.curNationIndusLevel2
    }
  }
}
</script>

<style lang="scss">
  .addinfo-wrapper {
    padding: 26px;
    .submitbtnwrapper {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      margin-right: 20px;
    }
    .submit-map-wrapper {
      margin-left: 180px;
      margin-right: 20px;
      #submitformmap {
        width: 100%;
        height: 450px;
      }
      .pos-info-wrapper {
        display: flex;
        flex-direction: row;
      }
    }
  }
</style>
