<template>
  <!-- <div>
    <el-dialog :visible.sync="showAdd"
      :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false"
      style="padding: 0;" width="65%" center>
      <div
        style="background-color: #FAFAFA;border:1px solid #EAEAEA;height: 42px;width: 100%;margin-bottom: 20px;padding: 0 20px;line-height: 42px;">
        新增
      </div>
      <div style="padding: 0 20px 20px  20px;">
        <el-form label-width="140px" :rules="rulesLei" :model="resourceType" >
          <el-form-item label="资源类型" prop="leixin">
            <el-radio-group v-model="resourceType.leixin" style="margin-top:12px;" @input="chengleixing">
              <el-radio label="商铺">商铺</el-radio>
              <el-radio label="场地">场地</el-radio>
              <el-radio label="广告位">广告位</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div style="margin-top: 20px;" v-if="resourceType.leixin == '商铺'">

        </div>
        <div style="margin-top: 20px;" v-if="resourceType.leixin == '场地'">

        </div>

        <div style="margin-top: 20px;" v-if="resourceType.leixin == '广告位'">

        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeFn()" class="buttonHover"
          style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取 消</el-button>
        <el-button @click="addCheck('Addrule')" style="background-color: #3F9B6A;color:#fff;">确 定</el-button>
      </span>
    </el-dialog>

  </div> -->

  <div class="zhuti" v-if="showAdd">
    <div style="height:58px;line-height:58px;">
      <div style="color:#0006"> <span>招商资源地图</span> <span style="padding:0 5px;">></span> <span
          style="color:#000000e6">新增</span></div>
    </div>


    <el-tabs v-model="addType" @tab-click="handleClick">
      <el-tab-pane label="商铺" name="sp">
        <div style="margin-top: 30px;" v-if="addType == 'sp'">
          <div class="titles">
            基础信息
          </div>

          <div style="padding: 20px 20px 20px 0;">
            <el-form label-width="140px" :model="ruleForm" :rules="rules" ref="Addrule"
              :validate-on-rule-change="false">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="商铺名称" prop="shopName">
                    <el-input v-model="ruleForm.shopName" placeholder="请输入" style="margin-top:5px;"
                      maxlength="50"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="场地编号" prop="venueNumber">
                    <el-input v-model="ruleForm.venueNumber" disabled placeholder="将根据类型自动为资源编号"
                      style="margin-top:5px;"></el-input>
                  </el-form-item>
                </el-col>

              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="门牌号" prop="houseNumber">
                    <el-input v-model="ruleForm.houseNumber" placeholder="请输入" style="margin-top:5px;"
                      maxlength="20"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="建筑形式" prop="architecturalForm">
                    <el-select v-model="ruleForm.architecturalForm" placeholder="请选择"
                      style="margin-top:5px;width: 100%;">
                      <el-option label="框剪结构" value="框剪结构"></el-option>
                      <el-option label="区域二" value="区域二"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="所属绿道段" prop="belongingGreenwaySection">
                    <el-select v-model="ruleForm.belongingGreenwaySection" placeholder="请选择"
                      style="margin-top:5px;width: 100%;" @change="lvdaoSel">
                      <el-option :label="item.name" :value="item.code" v-for="(item,index) in lvdaoList"
                        :key="index"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="所属公园/步道" prop="belongingParkTrail">
                    <el-select v-model="ruleForm.belongingParkTrail" placeholder="请选择"
                      style="margin-top:5px;width: 100%;">
                      <el-option :label="item.name" :value="item.code" v-for="(item,index) in gongyuanList"
                        :key="index"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="建筑面积" prop="floorSpace">
                    <el-input v-model="ruleForm.floorSpace" placeholder="请输入" style="margin-top:5px;">
                      <template slot="append">M<sup>2</sup></template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="实际使用面积" prop="actualUsableArea">
                    <el-input v-model="ruleForm.actualUsableArea" placeholder="请输入" style="margin-top:5px;">
                      <template slot="append">M<sup>2</sup></template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="所属区域" prop="belongingRegion">
                    <el-select v-model="ruleForm.belongingRegion" placeholder="请选择" style="margin-top:5px;width: 100%;">
                      <el-option label="成华区" value="成华区"></el-option>
                      <el-option label="武侯区" value="武侯区"></el-option>
                      <el-option label="锦江区" value="锦江区"></el-option>
                      <el-option label="青羊区" value="青羊区"></el-option>
                      <el-option label="金牛区" value="金牛区"></el-option>
                      <el-option label="双流区" value="双流区"></el-option>
                      <el-option label="郫都区" value="郫都区"></el-option>
                      <el-option label="龙泉驿区" value="龙泉驿区"></el-option>
                      <el-option label="温江区" value="温江区"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="归属部门" prop="belongingDepartment">
                    <el-input v-model="ruleForm.belongingDepartment" placeholder="请输入" style="margin-top:5px;"
                      maxlength="50">
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>


              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="负责人" prop="head">
                    <el-input v-model="ruleForm.head" placeholder="请输入" style="margin-top:5px;" maxlength="20">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="详细位置" prop="detailedLocation">
                    <el-input v-model="ruleForm.detailedLocation" placeholder="请输入" style="margin-top:5px;"
                      maxlength="100">
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="地图标点" prop="mapPunctuation">
                    <div style="width: 100%;height: 300px;border: 1px solid #3F9B6A;" v-if="showAdd">
                      <MapMark :sendChildDate="getChildDate" ref="mapComponent"></MapMark>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="建筑图纸" prop="architecturalDrawings">
                    <upimg v-model="ruleForm.architecturalDrawings" :limit="5" :fileSize="1"></upimg>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="商铺描述" prop="shopDescription">
                    <el-input type="textarea" v-model="ruleForm.shopDescription" style="margin-top:5px;"
                      placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="展示主图" prop="displayMainImage">
                    <upimg v-model="ruleForm.displayMainImage" :limit="1" :fileSize="1"></upimg>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="其他图片/视频" prop="otherImageVideos">

                    <el-upload class="upload-demo" ref="upload" :on-remove="handleRemove" :action="uploadFileUrl"
                      :on-success="handleUploadSuccess" :file-list="fileData" :auto-upload="true">
                      <el-button style="background-color: #fff;color: #3F9B6A;border: 1px solid #dcdfe6;"
                        class="buttonHover" v-if="fileData.length==0">+点击上传</el-button>
                    </el-upload>
                  </el-form-item>
                </el-col>
              </el-row>

            </el-form>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="场地" name="cd">
        <div style="margin-top: 30px;" v-if="addType == 'cd'">
          <div class="titles">
            基础信息
          </div>

          <div style="padding: 20px 20px 20px 0;">
            <el-form label-width="140px" :model="ruleForm" :rules="rulestwo" ref="Addrule"
              :validate-on-rule-change="false">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="场地名称" prop="venueName">
                    <el-input v-model="ruleForm.venueName" placeholder="请输入" style="margin-top:5px;"
                      maxlength="50"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="场地类型" prop="venueType">
                    <el-select v-model="ruleForm.venueType" placeholder="请选择" style="margin-top:5px;width: 100%;">
                      <el-option label="草地" value="草地"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="实际使用面积" prop="actualArea">
                    <el-input v-model="ruleForm.actualArea" placeholder="请输入" style="margin-top:5px;">
                      <template slot="append">M<sup>2</sup></template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="所属区域" prop="district">
                    <el-select v-model="ruleForm.district" placeholder="请选择" style="margin-top:5px;width: 100%;">
                      <el-option label="成华区" value="成华区"></el-option>
                      <el-option label="武侯区" value="武侯区"></el-option>
                      <el-option label="锦江区" value="锦江区"></el-option>
                      <el-option label="青羊区" value="青羊区"></el-option>
                      <el-option label="金牛区" value="金牛区"></el-option>
                      <el-option label="双流区" value="双流区"></el-option>
                      <el-option label="郫都区" value="郫都区"></el-option>
                      <el-option label="龙泉驿区" value="龙泉驿区"></el-option>
                      <el-option label="温江区" value="温江区"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="归属部门" prop="department">
                    <el-input v-model="ruleForm.department" placeholder="请输入" style="margin-top:5px;" maxlength="50">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="负责人" prop="responsiblePerson">
                    <el-input v-model="ruleForm.responsiblePerson" placeholder="请输入" style="margin-top:5px;"
                      maxlength="20">
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="详细位置" prop="detailedLocation">
                    <el-input v-model="ruleForm.detailedLocation" placeholder="请输入" style="margin-top:5px;"
                      maxlength="100">
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="地图标点" prop="mapMarker">
                    <div style="width: 100%;height: 300px;border: 1px solid #3F9B6A;" v-if="showAdd">
                      <MapMark :sendChildDate="getChildDate" ref="mapComponent"></MapMark>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="规划图纸" prop="planningDrawing">
                    <upimg v-model="ruleForm.planningDrawing" :limit="5" :fileSize="1"></upimg>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="场地描述" prop="description">
                    <el-input type="textarea" v-model="ruleForm.description" style="margin-top:5px;" placeholder="请输入"
                      maxlength="200"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="展示主图" prop="displayImage">
                    <upimg v-model="ruleForm.displayImage" :limit="1" :fileSize="1"></upimg>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="其他图片/视频" prop="otherMedia">

                    <el-upload class="upload-demo" ref="upload" :on-remove="handleRemove" :action="uploadFileUrl"
                      :on-success="handleUploadSuccess" :file-list="fileData" :auto-upload="true">
                      <el-button style="background-color: #fff;color: #3F9B6A;border: 1px solid #dcdfe6;"
                        class="buttonHover" v-if="fileData.length==0">+点击上传</el-button>
                    </el-upload>
                  </el-form-item>
                </el-col>
              </el-row>

            </el-form>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="广告位" name="gg">
        <div style="margin-top: 30px;" v-if="addType == 'gg'">
          <div class="titles">
            基础信息
          </div>

          <div style="padding: 20px 20px 20px 0;">
            <el-form :model="ruleForm" :rules="leixing?rulesthree:rulesSt" ref="Addrule" label-width="140px"
              class="demo-ruleForm" :validate-on-rule-change="false">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="广告位类型">
                    <el-select v-model="advue.type" placeholder="请选择" style="margin-top:5px;width: 100%;"
                      @change="changeType">
                      <el-option label="线上广告位" value="线上广告位"></el-option>
                      <el-option label="实体广告位" value="实体广告位"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="广告位名称" prop="advertisingName">
                    <el-input v-model="ruleForm.advertisingName" placeholder="请输入" style="margin-top:5px;"
                      maxlength="50"></el-input>
                  </el-form-item>
                </el-col>

              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="广告位编号" prop="advertisingSpaceNumber">
                    <el-input v-model="ruleForm.advertisingSpaceNumber" disabled placeholder="将根据类型自动为资源编号"
                      style="margin-top:5px;"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="所属端" prop="affiliation" v-if='leixing'>
                    <el-select v-model="ruleForm.affiliation" placeholder="请选择" style="margin-top:5px;width: 100%;">
                      <el-option label="游客小程序" value="游客小程序"></el-option>
                      <el-option label="商家客户端" value="商家客户端"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="详细位置" prop="detailedLocation" v-if='leixing == false'>
                    <el-input v-model="ruleForm.detailedLocation" placeholder="请输入" style="margin-top:5px;"
                      maxlength="50"></el-input>
                  </el-form-item>

                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="轮播顺序" prop="rotationOrder" v-if='leixing'>
                    <el-select v-model="ruleForm.rotationOrder" placeholder="请选择" style="margin-top:5px;width: 100%;">
                      <el-option label="1" value="1"></el-option>
                      <el-option label="2" value="2"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="广告尺寸" prop="dimensions" v-if='leixing'>
                    <el-input v-model="ruleForm.dimensions" disabled placeholder="宽:300px 长:400px"
                      style="margin-top:5px;"></el-input>
                  </el-form-item>

                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="可上传大小" prop="size" v-if='leixing'>
                    <el-input v-model="ruleForm.size" disabled placeholder="100kb" style="margin-top:5px;"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="上传格式" prop="uploadFormat" v-if='leixing'>
                    <el-input v-model="ruleForm.uploadFormat" disabled placeholder="JPG、PNG、MP4"
                      style="margin-top:5px;"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="地图标点" prop="mapPunctuation" v-if='leixing == false'>
                    <div style="width: 100%;height: 300px;border: 1px solid #3F9B6A;" v-if="showAdd">
                      <MapMark :sendChildDate="getChildDate" ref="mapComponent"></MapMark>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="设备类型" prop="deviceType" v-if='leixing == false'>
                    <div style="display: flex;justify-content: space-between;">
                      <el-select v-model="ruleForm.deviceType" placeholder="请选择" style="margin-top:5px;width: 92%;">
                        <el-option label="灯箱广告牌" value="灯箱广告牌"></el-option>
                        <el-option label="2" value="2"></el-option>
                      </el-select>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="广告材质" prop="advertisingMaterial" v-if='leixing == false'>
                    <div style="display: flex;justify-content: space-between;">
                      <el-select v-model="ruleForm.advertisingMaterial" placeholder="请选择"
                        style="margin-top:5px;width: 92%">
                        <el-option label="亚克力" value="亚克力"></el-option>
                        <el-option label="2" value="2"></el-option>
                      </el-select>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="设备大小" prop="equipmentSize" v-if='leixing == false'>
                    <div style="display: flex;">
                      <div>
                        <span style="font-size: 14px;">长：</span>
                        <el-select v-model="ruleForm.equipmentSizeH" placeholder="请选择"
                          style="margin-top:5px;width: 90px;margin: 0 5px 0 0;">
                          <el-option label="10" value="10"></el-option>
                          <el-option label="20" value="20"></el-option>
                        </el-select>
                        <span style="font-size: 14px;margin-right:5px;">mm</span>
                      </div>
                      <div>
                        <span style="font-size: 14px;">宽：</span>
                        <el-select v-model="ruleForm.equipmentSizeK" placeholder="请选择"
                          style="margin-top:5px;width: 90px;margin: 0 5px 0 0;">
                          <el-option label="10" value="10"></el-option>
                          <el-option label="20" value="20"></el-option>
                        </el-select>
                        <span style="font-size: 14px;margin-right:5px;">mm</span>
                      </div>
                      <div>
                        <span style="font-size: 14px;">高：</span>
                        <el-select v-model="ruleForm.equipmentSizeG" placeholder="请选择"
                          style="margin-top:5px;width: 90px;margin: 0 5px 0 0;">
                          <el-option label="10" value="10"></el-option>
                          <el-option label="20" value="20"></el-option>
                        </el-select>
                        <span style="font-size: 14px;margin-right:5px;">mm</span>
                      </div>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="广告尺寸" v-if='leixing == false'>
                    <div style="display: flex;">
                      <div>
                        <span style="font-size: 14px;">长：</span>
                        <el-select v-model="ruleForm.dimensionsH" placeholder="请选择"
                          style="margin-top:5px;width: 90px;margin: 0 5px 0 0;">
                          <el-option label="10" value="10"></el-option>
                          <el-option label="20" value="20"></el-option>
                        </el-select>
                        <span style="font-size: 14px;margin-right:5px;">mm</span>
                      </div>
                      <div>
                        <span style="font-size: 14px;">宽：</span>
                        <el-select v-model="ruleForm.dimensionsK" placeholder="请选择"
                          style="margin-top:5px;width: 90px;margin: 0 5px 0 0;">
                          <el-option label="10" value="10"></el-option>
                          <el-option label="20" value="20"></el-option>
                        </el-select>
                        <span style="font-size: 14px;margin-right:5px;">mm</span>
                      </div>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="位置示意图" prop="locationDiagram">
                    <upimg v-model="ruleForm.locationDiagram" :limit="3"></upimg>
                  </el-form-item>
                </el-col>

              </el-row>

            </el-form>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <div style="padding-left:130px;">
      <el-button @click="addCheck('Addrule')" style="background-color: #3F9B6A;color: #fff;">确定</el-button>
      <el-button @click="closeFn()" class="buttonHover"
        style="color: #606266;border: 1px solid #DBDBDB;background-color: #fff;">取消</el-button>

    </div>
  </div>
</template>

<script>
  import MapMark from "@/components/MapContainer/MapMark"
  import MapXian from "@/components/MapContainer/MapXian"
  import upimg from "@/components/ImageUpload/index"

  import axios from 'axios'
  import {
    getToken,
    removeToken
  } from '@/utils/auth'
  import {
    addList as shopadd,
    lvdaoduan,
    gongyuan,
    changAlls,
    changadd,
    changedit,
    changDel,
  } from '../../api/information'
  import {
    addList as ggwadd
  } from '../../api/map1'
  import {
    uploadUrl
  } from '@/utils/request'
  export default {
    props: {
      showAdd: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        addType: 'sp',
        uploadFileUrl: uploadUrl, // 请求地址
        fileData: [],
        resourceType: {
          leixin: '商铺'
        },
        advue: {
          type: '线上广告位'
        },
        leixing: true, //广告位类型
        ruleForm: {
          shopName: '',
          venueNumber: '',
          houseNumber: '',
          architecturalForm: '',
          actualUsableArea: '',
          belongingRegion: '',
          belongingDepartment: '',
          head: '',
          detailedLocation: '',
          mapPunctuation: '',
          shopDescription: '',
          displayMainImage: '',
          architecturalDrawings: '',
          otherImageVideos: '',
          belongingGreenwaySection: '',
          belongingParkTrail: '',
          floorSpace: '',
        },
        rules: {
          shopName: [{
            required: true,
            message: '请输入商铺名称',
            trigger: 'blur'
          }, ],
          houseNumber: [{
            required: true,
            message: '请输入门牌号',
            trigger: 'blur'
          }, ],
          architecturalForm: [{
            required: true,
            message: '请选择建筑形式',
            trigger: 'change'
          }, ],
          actualUsableArea: [{
              required: true,
              message: '请输入实际使用面积',
              trigger: 'blur'
            },

          ],
          belongingRegion: [{
            required: true,
            message: '请选择所属区域',
            trigger: 'change'
          }],
          head: [{
            required: true,
            message: '请输入负责人',
            trigger: 'blur'
          }, ],
          detailedLocation: [{
            required: true,
            message: '请输入详细位置',
            trigger: 'blur'
          }, ],
          displayMainImage: [{
            required: true,
            message: '请上传主图',
            trigger: 'blur'
          }, ],
          belongingGreenwaySection: [{
            required: true,
            message: '请选择所属绿道段',
            trigger: 'change'
          }]
        },
        rulestwo: {
          venueName: [{
            required: true,
            message: '请输入场地名称',
            trigger: 'blur'
          }, ],
          venueType: [{
            required: true,
            message: '请选择场地类型',
            trigger: 'change'
          }, ],
          actualArea: [{
            required: true,
            message: '请输入实际使用面积',
            trigger: 'blur'
          }, ],
          district: [{
            required: true,
            message: '请选择所属区域',
            trigger: 'change'
          }],
          detailedLocation: [{
            required: true,
            message: '请输入详细位置',
            trigger: 'blur'
          }, ]
        },
        rulesLei: {
          leixin: [{
            required: true,
            message: '请选择资源类型',
            trigger: 'change'
          }, ],
        },
        rulesthree: {
          advertisingName: [{
            required: true,
            message: '请输入名称',
            trigger: 'blur'
          }],
          advertisingType: [{
            required: true,
            message: '请选择类型',
            trigger: 'change'
          }],
          affiliation: [{
            required: true,
            message: '请选择所属端',
            trigger: 'change'
          }],
          rotationOrder: [{
            required: true,
            message: '请选择轮播顺序',
            trigger: 'change'
          }],

        },
        rulesSt: {
          advertisingName: [{
            required: true,
            message: '请输入名称',
            trigger: 'blur'
          }],
          advertisingType: [{
            required: true,
            message: '请选择类型',
            trigger: 'change'
          }],
          position: [{
            required: true,
            message: '请输入详细位置',
            trigger: 'blur'
          }],
          dimensionsH: [{
            required: true,
            message: '请选择广告尺寸',
            trigger: 'change'
          }],
          dimensionsK: [{
            required: true,
            message: '请选择广告尺寸',
            trigger: 'change'
          }],
          advertisingMaterial: [{
            required: true,
            message: '请选择材质',
            trigger: 'change'
          }],
        },
        lvdaoList: [],
        gongyuanList: [],
        //地图标点的经纬度
        mapData: {},
        parentMessage: {},
        edit: true,
        showMap: false,
      }
    },
    components: {
      MapMark,
      upimg,
    },

    mounted() {
      this.getAll()
    },

    computed: {

    },
    methods: {
      //查询全数据
      async getAll() {
        const lvdao = await lvdaoduan()
        this.lvdaoList = lvdao.data

      },
      async gongyuan(value) {
        const gongyaun = await gongyuan()
        this.gongyuanList = gongyaun.data.filter(item => item.superior == value);
      },
      closeFn() {
        this.fileData = []
        this.resourceType = {
          leixin: '商铺'
        }
        this.advue = {
          type: '线上广告位'
        }
        this.leixing = true //广告位类型
        this.ruleForm = {
          shopName: '',
          venueNumber: '',
          houseNumber: '',
          architecturalForm: '',
          actualUsableArea: '',
          belongingRegion: '',
          belongingDepartment: '',
          head: '',
          detailedLocation: '',
          mapPunctuation: '',
          shopDescription: '',
          displayMainImage: '',
          architecturalDrawings: '',
          otherImageVideos: '',
          belongingGreenwaySection: '',
          belongingParkTrail: '',
          floorSpace: '',
        }
        this.$emit('childClose', false)
      },
      //获取当前时间
      updateCurrentTime() {
        const now = new Date();
        const year = now.getFullYear();
        const month = (now.getMonth() + 1).toString().padStart(2, '0');
        const day = now.getDate().toString().padStart(2, '0');
        const hours = now.getHours().toString().padStart(2, '0');
        const minutes = now.getMinutes().toString().padStart(2, '0');
        const seconds = now.getSeconds().toString().padStart(2, '0');

        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      },
      // 确定
      addCheck(formName) {
        this.$refs.Addrule.validate((valid) => {
          if (valid) {
            if (this.addType == 'sp') {
              this.ruleForm.createDate = this.updateCurrentTime()
              this.ruleForm.mapPunctuation = JSON.stringify(this.mapData)
              this.ruleForm.rentalStatus = 0
              this.ruleForm.publishStatus = 0
              if (this.fileData.length != 0) {
                this.ruleForm.otherImageVideos = this.fileData[0].url
              }
              shopadd(this.ruleForm).then(res => {
                this.$emit('childClose', false);
              })
            } else if (this.addType == 'gg') {
              if (this.advue.type == '线上广告位') {
                this.ruleForm.advertisingType = '线上广告位'
                this.ruleForm.dimensions = '宽:300px 长:400px'
                this.ruleForm.size = '100kb'
                this.ruleForm.uploadFormat = 'JPG、PNG、MP4'
                this.ruleForm.createDate = this.updateCurrentTime()
              } else {
                this.ruleForm.createDate = this.updateCurrentTime()
                this.ruleForm.advertisingType = '实体广告位'
                this.ruleForm.mapPunctuation = JSON.stringify(this.mapData)
                this.ruleForm.equipmentSize =
                  `长：${this.ruleForm.equipmentSizeH} 宽：${this.ruleForm.equipmentSizeK} 高：${this.ruleForm.equipmentSizeG}`
                this.ruleForm.dimensions = `长：${this.ruleForm.dimensionsH} 宽：${this.ruleForm.dimensionsK}`
              }
              ggwadd(this.ruleForm).then(res => {
                this.$emit('childClose', false);
              })
            } else {
              this.ruleForm.createDate = this.updateCurrentTime()
              this.ruleForm.mapMarker = JSON.stringify(this.mapData)
              if (this.fileData.length != 0) {
                this.ruleForm.otherMedia = this.fileData[0].url
              }
              changadd(this.ruleForm).then(res => {
                this.fileData = []
                this.addType = 'sp'
                this.advue = {
                  type: '线上广告位'
                }
                this.leixing = true //广告位类型
                this.ruleForm = {
                  shopName: '',
                  venueNumber: '',
                  houseNumber: '',
                  architecturalForm: '',
                  actualUsableArea: '',
                  belongingRegion: '',
                  belongingDepartment: '',
                  head: '',
                  detailedLocation: '',
                  mapPunctuation: '',
                  shopDescription: '',
                  displayMainImage: '',
                  architecturalDrawings: '',
                  otherImageVideos: '',
                  belongingGreenwaySection: '',
                  belongingParkTrail: '',
                  floorSpace: '',
                }

                this.$emit('childClose', false);
              })
            }

          } else {
            this.$message({
              message: '请填写完整信息',
              type: 'error'
            })
            return false;
          }
        })

      },
      lvdaoSel(vaule) {
        this.ruleForm.belongingParkTrail = ''
        this.gongyuan(vaule)
      },
      handleClick(va) {

        if (va == '0') {
          this.ruleForm = {
            shopName: '',
            venueNumber: '',
            houseNumber: '',
            architecturalForm: '',
            actualUsableArea: '',
            belongingRegion: '',
            belongingDepartment: '',
            head: '',
            detailedLocation: '',
            mapPunctuation: '',
            shopDescription: '',
            displayMainImage: '',
            architecturalDrawings: '',
            otherImageVideos: '',
            belongingGreenwaySection: '',
            belongingParkTrail: '',
            floorSpace: '',
          }
        } else if (va == '1') {
          this.ruleForm = {
            venueName: '',
            venueType: '',
            actualArea: '',
            district: '',
            department: '',
            responsiblePerson: '',
            detailedLocation: '', //详细位置
            mapMarker: '', //地图标点
            description: '', //场地描述
            planningDrawing: '', //规划图纸
            displayImage: '', //展示主图
            otherMedia: '', //其他图片视频
          }
        } else {
          this.ruleForm = {
            advertisingName: '', //广告位名称
            advertisingType: '', //广告位类型
            rotationOrder: '', // 轮播顺序
            createUser: '', // 创建人
            affiliation: '', //所属端
            detailedLocation: '', //详细位置
            dimensions: '', //广告尺寸
            size: '', //广告大小
            uploadFormat: '', //上传类型
            advertisingSpaceStrategy: '', //策略
            advertisingSpaceNumber: '', //广告位编号
            locationDiagram: '', //位置示意图
            mapPunctuation: '', //地图标点
            deviceType: '', //设备类型
            equipmentSize: '', //设备尺寸
            advertisingMaterial: '', //广告材质
            createDate: '', //创建时间
            equipmentSizeH: "",
            equipmentSizeK: '',
            equipmentSizeG: '',
            dimensionsH: '',
            dimensionsK: '',
            rentalStatus: '0',
            publishStatus: '0'
          }
        }
      },

      //获取地图点击的经纬度
      getChildDate(mapData) {
        this.mapData = mapData
      },
      changeType(val) {
        this.advue.type = val
        this.leixing = !this.leixing
      },
      destroyMap() {
        this.$refs.mapComponent.destroyMap();
      },
      handleRemove(file, fileList) {
        this.fileData = []
      },
      handleUploadSuccess(response, file, fileList) {
        const fileMsg = {
          name: file.name,
          url: file.response.data.url,
        }
        // 将文件地址存储在 uploadedFiles 数组中
        this.fileData.push(fileMsg);
      },
    }
  }
</script>

<style>
  .titles {
    font-size: 16px;
    position: relative;
    padding-left: 14px;
    font-weight: 600;
  }

  .titles::before {
    content: '';
    width: 4px;
    height: 16px;
    background-color: #3F9B6A;
    position: absolute;
    top: 1px;
    left: 0;
    border-radius: 5px;
  }
</style>
