<template>
  <div style="background-color:#f7f7f7;padding:10px 10px;">
    <div class="zhuti" v-if="ggXin && detbox">
      <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>
      <div style="display: flex;font-size: 14px">
        <div style="margin-right: 4px" @click="chenge(1)" :class="leixing?'chengeXia':''">线上</div>
        ({{xsNum}}个广告位)
        <div style="margin-left: 20px;margin-right: 4px" @click="chenge(2)" :class="leixing?'':'chengeXia'">实体</div>({{xxNum}}个广告位)
      </div>
      <!-- 线上 -->
      <div>
        <!-- 搜索 -->
        <div class="formSearch">
          <el-form :inline="true" :model="formSel">
            <el-form-item label="所属端" prop="affiliation"  v-if="leixing">
              <el-select v-model="formSel.affiliation" placeholder="请选择"
                style="width: 168px;margin-right: 15px">
                <el-option label="游客小程序" value="游客小程序" />
                <el-option label="商家客户端" value="商家客户端" />
              </el-select>
            </el-form-item>
            <el-form-item label="设备类型" prop="deviceType"  v-if="leixing == false">
              <el-select v-model="formSel.deviceType" placeholder="请选择"
                style="width: 168px;margin-right: 15px">
                <el-option label="亚克力" value="亚克力" />
              </el-select>
            </el-form-item>
            <el-form-item label="负责人" prop="createUser">
              <el-select v-model="formSel.createUser" placeholder="请选择"
                style="width: 168px;margin-right: 15px">
                <el-option label="李四" value="李四" />
                <el-option label="张三" value="张三" />
              </el-select>
            </el-form-item>
            <el-form-item label="创建时间" prop="createDate">
              <el-select v-model="formSel.createDate" placeholder="请选择"
                style="width: 168px;margin-right: 15px">
                <el-option label="2024.3.1" value="2024.3.1" />
                <el-option label="2024.3.16" value="2024.3.16" />
              </el-select>
            </el-form-item>


            <!-- <el-input v-model="formSel.contacts" placeholder="请输入关键词"  suffix-icon="el-icon-search"
              style="width: 180px;margin-right: 15px" /> -->
          </el-form>
          <div>
            <el-button  @click="onSubmit"  style="background-color: #3F9B6A;color: #fff;padding:8px 15px;">查询
            </el-button>
            <el-button  @click="resetting"   class="buttonHover"
              style="color: #000;border: 1px solid #DBDBDB;background-color: #fff;">重置
            </el-button>
          </div>
        </div>
        <div style="margin-bottom:20px;">
          <el-button @click="addbuss(1)" style="background-color: #3F9B6A;color: #fff;padding:8px 15px;" icon="el-icon-circle-plus-outline">新增
          </el-button>
        </div>
        <!-- 表格 -->

        <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
           :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
         >
          <el-table-column label="编号" min-width="100" prop="id">
          </el-table-column>
          <el-table-column label="广告位名称" prop="advertisingName" min-width="150">
          </el-table-column>
          <el-table-column label="广告位类型" prop="advertisingType" min-width="120">
          </el-table-column>
          <el-table-column label="所属端" prop="affiliation" min-width="120" v-if="leixing">
          </el-table-column>
          <el-table-column label="详细地址" prop="detailedLocation" min-width="200" v-if="leixing == false">
          </el-table-column>
          <el-table-column label="设备类型" prop="deviceType" min-width="200" v-if="leixing == false">
          </el-table-column>
          <el-table-column label="设备尺寸" prop="equipmentSize" min-width="200" v-if="leixing == false">
          </el-table-column>
          <el-table-column label="场地编号" prop="venueNumber" min-width="120" v-if="leixing == false">
          </el-table-column>
          <el-table-column label="轮播顺序" prop="rotationOrder" min-width="100" v-if="leixing">

          </el-table-column>
          <el-table-column label="广告尺寸" prop="dimensions" min-width="200" v-if="leixing == false">
          </el-table-column>
          <el-table-column label="广告材质" prop="advertisingMaterial" min-width="150" v-if="leixing == false">
          </el-table-column>
          <el-table-column  label="可上传大小" prop="size" min-width="120" v-if="leixing">

          </el-table-column>
          <el-table-column label="上传格式" prop="uploadFormat" min-width="150" v-if="leixing">
          </el-table-column>
          <el-table-column prop="createUser" label="创建人" min-width="120">
          </el-table-column>
          <el-table-column prop="rentalStatus" label="租赁状态" min-width="120">
            <template slot-scope="scope">
              {{scope.row.rentalStatus=='0'?'待租':'已租'}}
                  </template>
          </el-table-column>
          <el-table-column prop="publishStatus" label="发布状态" min-width="120">
            <template slot-scope="scope">
              {{scope.row.rentalStatus=='0'?'待发布':scope.row.rentalStatus=='1'?'待审核':'已审核'}}
                  </template>
          </el-table-column>
          <el-table-column prop="leaseExpirationDate" label="租赁到期时间" min-width="150">
          </el-table-column>

          <el-table-column label="操作" min-width="200">
            <template slot-scope="scope">
                <div @click="handleEditForm(scope.row)" class="tableBtn greens">查看</div>
              <!-- <div class="tableBtn greens" @click="bianjilist(scope.row)">编辑</div> -->
              <div @click="handleDelete(scope.row)" class="tableBtn greens">删除</div>
            </template>
          </el-table-column>
        </el-table>
        <div class="fenye">
          <el-pagination :hide-on-single-page='flag' background small  :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"  layout="prev,pager, next,total"
            :total="total " @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </div>
      </div>
      <!-- 新增 ····························-->
      <div class="zhuti" v-if="ggXin == false">
        <div style="font-weight: bold;font-size: 14px">
          新增
        </div>
       <div style="margin-top: 30px;">
         <div class="titles">
             基础信息
         </div>

         <div style="padding: 20px;">
            <el-form :model="formInline" :rules="leixing?rules:rulesSt" ref="formInline" label-width="100px" class="demo-ruleForm">
              <el-form-item label="广告位名称" prop="advertisingName">
                <el-input v-model="formInline.advertisingName" placeholder="请输入"  style="margin-top:5px;"></el-input>
              </el-form-item>
              <el-form-item label="广告位编号" prop="advertisingSpaceNumber">
                <el-input v-model="formInline.advertisingSpaceNumber" disabled  placeholder="将根据类型自动为资源编号"  style="margin-top:5px;"></el-input>
              </el-form-item>
              <el-form-item label="广告位类型" prop="advertisingType">
                <el-select v-model="formInline.advertisingType" placeholder="请选择"  style="margin-top:5px;width: 100%;">
                  <el-option label="线上广告位" value="线上广告位" v-if='leixing'></el-option>
                  <el-option label="实体广告位" value="实体广告位" v-else></el-option>
                </el-select>
              </el-form-item>
                <el-form-item label="所属端" prop="affiliation" v-if='leixing'>
                <el-select v-model="formInline.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="formInline.detailedLocation"  placeholder="请输入"  style="margin-top:5px;"></el-input>
                </el-select>
              </el-form-item>
              <el-form-item label="轮播顺序" prop="rotationOrder" v-if='leixing'>
                <el-select v-model="formInline.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-form-item label="地图标点" prop="mapPunctuation" v-if='leixing == false'>
                  <div style="width: 100%;height: 100px;border: 1px solid #3F9B6A;">
                    <map-mark :sendChildDate="getChildDate"></map-mark>
                  </div>
              </el-form-item>
              <el-form-item label="广告尺寸" prop="dimensions" v-if='leixing'>
                <el-input v-model="formInline.dimensions" disabled  placeholder="宽:300px 长:400px"  style="margin-top:5px;"></el-input>

              </el-form-item>
              <el-form-item label="可上传大小" prop="size" v-if='leixing'>
                <el-input v-model="formInline.size" disabled  placeholder="100kb"  style="margin-top:5px;"></el-input>
              </el-form-item>
              <el-form-item label="上传格式" prop="uploadFormat" v-if='leixing'>
                <el-input v-model="formInline.uploadFormat" disabled  placeholder="JPG、PNG、MP4"  style="margin-top:5px;"></el-input>
              </el-form-item>
              <el-form-item label="设备类型" prop="deviceType" v-if='leixing == false'>
                <div style="display: flex;justify-content: space-between;">
                  <el-select v-model="formInline.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-form-item label="设备大小" prop="equipmentSize" v-if='leixing == false'>
                <div style="display: flex;">
                 <div>
                   <span style="font-size: 12px;">长：</span>
                   <el-select v-model="formInline.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: 12px;margin-right:5px;">mm</span>
                 </div>
                 <div>
                   <span style="font-size: 12px;">宽：</span>
                   <el-select v-model="formInline.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: 12px;margin-right:5px;">mm</span>
                 </div>
                 <div>
                   <span style="font-size: 12px;">高：</span>
                   <el-select v-model="formInline.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: 12px;margin-right:5px;">mm</span>
                 </div>
                </div>
              </el-form-item>
  <el-form-item label="广告尺寸"  v-if='leixing == false'>
                <div style="display: flex;">
                 <div>
                   <span style="font-size: 12px;">长：</span>
                   <el-select v-model="formInline.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: 12px;margin-right:5px;">mm</span>
                 </div>
                 <div>
                   <span style="font-size: 12px;">宽：</span>
                   <el-select v-model="formInline.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: 12px;margin-right:5px;">mm</span>
                 </div>
                    </div>
              </el-form-item>

              <el-form-item label="广告材质" prop="advertisingMaterial" v-if='leixing == false'>
                <div style="display: flex;justify-content: space-between;">
                  <el-select v-model="formInline.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-form-item label="位置示意图" prop="locationDiagram">
                <upimg v-model="formInline.locationDiagram" :limit="3"></upimg>
              </el-form-item>
              <el-form-item>
              <div style="margin-top: 20px;display: flex;justify-content: flex-end;">
                <el-button  @click="colse(1)"  class="buttonHover"
              style="color: #000;border: 1px solid #DBDBDB;background-color: #fff;">取消</el-button>
                <el-button   @click="addpush('formInline')" style="background-color: #3F9B6A;color: #fff;">提交</el-button>
              </div>

              </el-form-item>
            </el-form>
         </div>
       </div>
      </div>

      <!-- 查看········································· -->
      <div class="zhuti" v-if='detbox == false'>
        <div style="font-weight: bold;font-size: 14px">
            查看
        </div>
        <div style="padding: 20px;">
                  <el-form :model="editbgid" :rules="leixing?rules:rulesSt" ref="formInline" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="广告位名称" prop="advertisingName">
                      <el-input v-model="editbgid.advertisingName" placeholder="请输入"  style="margin-top:5px;" :disabled="edit"></el-input>
                    </el-form-item>
                    <el-form-item label="广告位编号" prop="advertisingSpaceNumber">
                      <el-input v-model="editbgid.advertisingSpaceNumber" disabled  placeholder="将根据类型自动为资源编号"  style="margin-top:5px;"></el-input>
                    </el-form-item>
                    <el-form-item label="广告位类型" prop="advertisingType">
                      <el-select v-model="editbgid.advertisingType" placeholder="请选择"  style="margin-top:5px;width: 100%;" disabled>
                      </el-select>
                    </el-form-item>
                      <el-form-item label="所属端" prop="affiliation" v-if='leixing'>
                      <el-select v-model="editbgid.affiliation" placeholder="请选择"  style="margin-top:5px;width: 100%;"  :disabled="edit">
                        <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="editbgid.detailedLocation"  placeholder="请输入"  style="margin-top:5px;"  :disabled="edit"></el-input>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="轮播顺序" prop="rotationOrder" v-if='leixing'>
                      <el-select v-model="editbgid.rotationOrder" placeholder="请选择"  style="margin-top:5px;width: 100%;"  :disabled="edit">
                        <el-option label="1" value="1"></el-option>
                        <el-option label="2" value="2"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="地图标点" prop="mapPunctuation" v-if='leixing == false'>
                        <div style="width: 100%;height: 100px;border: 1px solid #3F9B6A;">
                          <MapXian :message="parentMessage"  :edit='edit' :sendMap='getChildDate'></MapXian>

                        </div>
                    </el-form-item>
                    <el-form-item label="广告尺寸" prop="dimensions" v-if='leixing'>
                      <el-input v-model="editbgid.dimensions" disabled  placeholder="宽:300px 长:400px"  style="margin-top:5px;" ></el-input>

                    </el-form-item>
                    <el-form-item label="可上传大小" prop="size" v-if='leixing'>
                      <el-input v-model="editbgid.size" disabled  placeholder="100kb"  style="margin-top:5px;"></el-input>
                    </el-form-item>
                    <el-form-item label="上传格式" prop="uploadFormat" v-if='leixing'>
                      <el-input v-model="editbgid.uploadFormat" disabled  placeholder="JPG、PNG、MP4"  style="margin-top:5px;"></el-input>
                    </el-form-item>
                    <el-form-item label="设备类型" prop="deviceType" v-if='leixing == false'>
                      <div style="display: flex;justify-content: space-between;">
                        <el-select v-model="editbgid.deviceType" placeholder="请选择"  style="margin-top:5px;width: 92%;" :disabled="edit">
                          <el-option label="灯箱广告牌" value="灯箱广告牌"></el-option>
                          <el-option label="2" value="2"></el-option>
                        </el-select>
                      </div>
                    </el-form-item>

                    <el-form-item label="设备大小" prop="equipmentSize" v-if='leixing == false'>
                      <div style="display: flex;">
                       <div>
                         <span style="font-size: 12px;">长：</span>
                         <el-select v-model="editbgid.equipmentSizeH" placeholder="请选择"  style="margin-top:5px;width: 90px;margin: 0 5px 0 0;" :disabled="edit" @change="handleChange('equipmentSizeH', $event)">
                           <el-option label="10" value="10"></el-option>
                           <el-option label="20" value="20"></el-option>
                         </el-select>
                        <span style="font-size: 12px;margin-right:5px;">mm</span>
                       </div>
                       <div>
                         <span style="font-size: 12px;">宽：</span>
                         <el-select v-model="editbgid.equipmentSizeK" placeholder="请选择"  style="margin-top:5px;width: 90px;margin: 0 5px 0 0;" :disabled="edit" @change="handleChange('equipmentSizeK', $event)">
                          <el-option label="10" value="10"></el-option>
                          <el-option label="20" value="20"></el-option>
                         </el-select>
                         <span style="font-size: 12px;margin-right:5px;">mm</span>
                       </div>
                       <div>
                         <span style="font-size: 12px;">高：</span>
                         <el-select v-model="editbgid.equipmentSizeG" placeholder="请选择"  style="margin-top:5px;width: 90px;margin: 0 5px 0 0;" :disabled="edit" @change="handleChange('equipmentSizeG', $event)">
                         <el-option label="10" value="10"></el-option>
                         <el-option label="20" value="20"></el-option>
                         </el-select>
                         <span style="font-size: 12px;margin-right:5px;">mm</span>
                       </div>
                      </div>
                    </el-form-item>
        <el-form-item label="广告尺寸"  v-if='leixing == false'>
                      <div style="display: flex;">
                       <div>
                         <span style="font-size: 12px;">长：</span>
                         <el-select v-model="editbgid.dimensionsH" placeholder="请选择"  style="margin-top:5px;width: 90px;margin: 0 5px 0 0;" :disabled="edit" @change="handleChange('dimensionsH', $event)">
                          <el-option label="10" value="10"></el-option>
                          <el-option label="20" value="20"></el-option>
                         </el-select>
                         <span style="font-size: 12px;margin-right:5px;">mm</span>
                       </div>
                       <div>
                         <span style="font-size: 12px;">宽：</span>
                         <el-select v-model="editbgid.dimensionsK" placeholder="请选择"  style="margin-top:5px;width: 90px;margin: 0 5px 0 0;" :disabled="edit" @change="handleChange('dimensionsK', $event)">
                          <el-option label="10" value="10"></el-option>
                          <el-option label="20" value="20"></el-option>
                         </el-select>
                         <span style="font-size: 12px;margin-right:5px;">mm</span>
                       </div>
                          </div>
                    </el-form-item>

                    <el-form-item label="广告材质" prop="advertisingMaterial" v-if='leixing == false'>
                      <div style="display: flex;justify-content: space-between;">
                        <el-select v-model="editbgid.advertisingMaterial" placeholder="请选择"  style="margin-top:5px;width: 92%" :disabled="edit">
                          <el-option label="亚克力" value="亚克力"></el-option>
                          <el-option label="2" value="2"></el-option>
                        </el-select>
                      </div>
                    </el-form-item>
                    <el-form-item label="位置示意图" prop="locationDiagram">
                      <upimg v-model="editbgid.locationDiagram" :limit="1" :fileSize="1" v-if="edit==false"></upimg>
                      <img :src="editbgid.locationDiagram" alt="" v-else style="width:140px;height:140px;">
                    </el-form-item>
                  </el-form>
               </div>
<div style="margin-top: 20px;display: flex;justify-content: flex-end;">
           <el-button  @click="colse(2)"  class="buttonHover"
              style="color: #000;border: 1px solid #DBDBDB;background-color: #fff;">取消</el-button>
           <el-button  @click="bianji"  style="background-color: #3F9B6A;color: #fff;">编辑</el-button>
           <el-button   @click="editpush()" style="background-color: #3F9B6A;color: #fff;">提交</el-button>
         </div>
      <div style="margin-top: 30px;" class="editcss">
         <!-- <div class="titles">
             基础信息
         </div> -->

         <!-- <div style="padding: 20px;">
                <el-row :gutter="20">
                <el-col :span="6">
                  <div class="grid-content bg-purple">
                    <el-form ref="form" :model="editbgid.advertisingName" label-width="80px">
                      <el-form-item label="广告位名称">
                        <div v-if="edit" style="line-height:40px;height: 40px;">{{editbgid.advertisingName}}</div>
                          <el-input v-model="editbgid.advertisingName" placeholder="请输入"  style="margin-top: 5px;" v-else></el-input>
                      </el-form-item>
                    </el-form>
                  </div>
                </el-col>
               <el-col :span="6">
                  <div class="grid-content bg-purple">
                    <el-form ref="form" :model="editbgid.advertisingType" label-width="80px">
                      <el-form-item label="广告位类型">
                        <div style="line-height:40px;height: 40px;">{{editbgid.advertisingType}}</div>

                      </el-form-item>
                    </el-form>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple">
                  <el-form ref="form" :model="editbgid.rotationOrder" label-width="80px" v-if="leixing">
                      <el-form-item label="轮播顺序">
                        <div v-if="edit" style="line-height:40px;height: 40px;">{{editbgid.rotationOrder}}</div>
                          <el-input v-model="editbgid.rotationOrder" placeholder="请输入"  style="margin-top: 5px;" v-else></el-input>
                      </el-form-item>
                    </el-form>
                    <el-form ref="form" :model="editbgid.deviceType" label-width="80px" v-if="leixing == false">
                        <el-form-item label="广告材质">
                          <div v-if="edit" style="line-height:40px;height: 40px;">{{editbgid.deviceType}}</div>
                            <el-input v-model="editbgid.deviceType" placeholder="请输入"  style="margin-top: 5px;" v-else></el-input>
                        </el-form-item>
                      </el-form>
                  </div></el-col>
                <el-col :span="6" >
                  <div class="grid-content bg-purple">
                    <el-form ref="form" :model="editbgid.affiliation" label-width="80px" v-if="leixing">
                        <el-form-item label="所属端">
                          <div v-if="edit" style="line-height:40px;height: 40px;">{{editbgid.affiliation}}</div>
                            <el-input v-model="editbgid.affiliation" placeholder="请输入"  style="margin-top: 5px;" v-else></el-input>
                        </el-form-item>
                      </el-form>
                      <el-form ref="form" :model="editbgid.advertisingMaterial" label-width="80px" v-if="leixing == false">
                          <el-form-item label="广告材质">
                            <div v-if="edit" style="line-height:40px;height: 40px;">{{editbgid.advertisingMaterial}}</div>
                              <el-input v-model="editbgid.advertisingMaterial" placeholder="请输入"  style="margin-top: 5px;" v-else></el-input>
                          </el-form-item>
                        </el-form>
                  </div></el-col>
              </el-row>
              <el-row :gutter="20" v-if="leixing == false">
                <el-col :span="24">
                  <div class="grid-content bg-purple">
                    <el-form ref="form" :model="editbgid.detailedLocation" label-width="80px">
                      <el-form-item label="详细位置">
                        <div v-if="edit" style="line-height:40px;height: 40px;">{{editbgid.detailedLocation}}</div>
                          <el-input v-model="editbgid.detailedLocation" placeholder="请输入"  style="margin-top: 5px;" v-else></el-input>
                      </el-form-item>
                    </el-form>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20" v-if="leixing == false">
                <el-col :span="24">
                  <div class="">
                    <el-form ref="form" :model="editbgid.mapPunctuation" label-width="80px">
                      <el-form-item label="广告位地图">
                        <div  style="border: 1px solid #3F9B6A;height: 100px;margin-top: 17px;">
                          <MapXian :message="parentMessage"  :edit='edit' :sendMap='getChildDate'></MapXian>
                        </div>
                      </el-form-item>
                    </el-form>
                  </div>
                </el-col>

              </el-row>
         </div> -->
         <!-- <div class="titles">
             扩展信息
         </div> -->
         <!-- <div style="padding: 20px;">
              <el-row :gutter="20">
                <el-col :span="6">
                  <div class="grid-content bg-purple">
                    <el-form ref="form" :model="editbgid.dimensions" label-width="80px">
                      <el-form-item label="广告尺寸">
                        <div v-if="edit" style="line-height:40px;height: 40px;">{{editbgid.dimensions}}</div>
                          <el-input v-model="editbgid.dimensions" placeholder="请输入"  style="margin-top: 5px;" v-else></el-input>
                      </el-form-item>
                    </el-form>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple">
                    <el-form ref="form" :model="editbgid.size" label-width="80px" v-if="leixing">
                      <el-form-item label="可上传大小">
                        <div  style="line-height:40px;height: 40px;">{{editbgid.size}}</div>
                      </el-form-item>
                    </el-form>
                    <el-form ref="form" :model="editbgid.equipmentSize" label-width="80px" v-if="leixing == false">
                      <el-form-item label="设备尺寸">
                        <div v-if="edit" style="line-height:40px;height: 40px;">{{editbgid.equipmentSize}}</div>
                          <el-input v-model="editbgid.equipmentSize" placeholder="请输入"  style="margin-top: 5px;" v-else></el-input>
                      </el-form-item>
                    </el-form>
                  </div>
                </el-col>
                <el-col :span="6" v-if="leixing">
                  <div class="grid-content bg-purple">
                    <el-form ref="form" :model="editbgid.uploadFormat" label-width="120px">
                      <el-form-item label="广告位上传类型">
                        <div  style="line-height:40px;height: 40px;">{{editbgid.uploadFormat}}</div>
                      </el-form-item>
                    </el-form>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20" v-if="leixing == false">
                <el-col :span="24">
                  <div class="">
                    <el-form ref="form" :model="editbgid.locationDiagram" label-width="120px">
                      <el-form-item label="广告位位置示意图">
                        <div  style="line-height:40px;height: 40px;"><img :src="editbgid.locationDiagram" alt=""></div>

                      </el-form-item>
                    </el-form>
                  </div>
                </el-col>
              </el-row>


         </div> -->

       </div>
      </div>


    </div>
</template>

<script>
  import {
    async
  } from 'q'
  import axios from 'axios'
  import {
    getAlls,
    addList,
    delList,
    likeGet,
    editList
  } from '../../api/map1'
  import MapMark from "@/components/MapContainer/MapMark";
  import MapXian from "@/components/MapContainer/MapXian";
  import upimg from "@/components/ImageUpload/index";
  export default {
    data() {
      return {
        xsNum:0,
        xxNum:0,
        leixing:true,//切换
        detbox:true,//查看、
        edit: true, //编辑
        currentPage: 1,
        total: 100,
        flag: false,
        pageSize: 10,
        ggXin: true,
        radio: '1',
        rules: {
          advertisingName: [{
            required: true,
            message: '请输入名称',
            trigger: ['blur', 'change']
          }],
          advertisingType: [{
            required: true,
            message: '请选择类型',
            trigger: ['blur', 'change']
          }],
          affiliation: [{
            required: true,
            message: '请选择所属端',
            trigger: ['blur', 'change']
          }],
          rotationOrder: [{
            required: true,
            message: '请选择轮播顺序',
            trigger: ['blur', 'change']
          }],

        },
        rulesSt: {
          advertisingName: [{
            required: true,
            message: '请输入名称',
            trigger: ['blur', 'change']
          }],
          advertisingType: [{
            required: true,
            message: '请选择类型',
            trigger: ['blur', 'change']
          }],
          position: [{
            required: true,
            message: '请输入详细位置',
            trigger: ['blur', 'change']
          }],
          dimensionsH: [{
            required: true,
            message: '请选择广告尺寸',
            trigger: ['blur', 'change']
          }],
            dimensionsK: [{
              required: true,
              message: '请选择广告尺寸',
              trigger: ['blur', 'change']
            }],
            advertisingMaterial: [{
              required: true,
              message: '请选择材质',
              trigger: ['blur', 'change']
            }],
        },
        editbgid: {
         advertisingName:'',//广告位名称
         advertisingType: '', //广告位类型
         rotationOrder: '', // 轮播顺序
         createUser: '', // 创建人
         affiliation: '', //所属端
         position:'',//详细位置
         dimensions: '', //广告尺寸
         size: '', //广告大小
         uploadFormat: '', //上传类型
         advertisingSpaceStrategy: '', //策略
         advertisingSpaceNumber:'',//广告位编号
         locationDiagram:'',//位置示意图
         mapPunctuation:'',//地图标点
         deviceType:'',//设备类型
         equipmentSize:'',//设备尺寸
         advertisingMaterial:'',//广告材质
         createDate:'',//创建时间
         equipmentSizeH:"",
         equipmentSizeK:'',
         equipmentSizeG:'',
         dimensionsH:'',
         dimensionsK:''
           },
        formInline: {
          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'
        },
        tableData: [],
        formSel: {
         affiliation:'',
         deviceType:'',
         createUser:'',
         createDate:'',
         pageNumber: 1,
         pageSize: 10,
        advertisingType:''
        },
        pageindex: {
          pageNumber: 1,
          pageSize: 10,
          advertisingType:'线上广告位'
        },
        chengeTatle:1,
        //地图标点的经纬度
        mapData:{},
        parentMessage:{}
      }
    },
    components: {MapMark,MapXian,upimg},
    watch: { // 监听,当路由发生变化的时候执行
           '$route.query.xin': {
                       handler(toPath, fromPath){
                           if(this.$route.query.xin){
                             this.leixing = false
                               this.addbuss()
                           }
                           if(this.$route.query.chakan){
                               this.leixing = false
                                 this.detbox = false
                               this.pageindex.advertisingType = '实体广告位'
                                this.handleEditForm(this.$route.query.chakan)
                           }
                           if(this.$route.query.bian){
                             this.leixing = false
                        this.edit = false
                        this.detbox = false
                             this.pageindex.advertisingType = '实体广告位'
                              this.bianjilist(this.$route.query.bian)
                           }

                       },
                       deep: true, // 深度监听
                       immediate: true, // 第一次初始化渲染就可以监听到
                   }

       },
    created() {
      // this.getAll()
      likeGet(this.pageindex).then(res=>{
        this.tableData = res.data.content
        this.total = res.data.content.length
         this.xsNum = res.data.content.length
        })
        let obj={
          pageNumber: 1,
          pageSize: 10,
          advertisingType:'实体广告位'
        }
        likeGet(obj).then(res=>{
              this.xxNum = res.data.content.length
          })
    },
    computed: {

    },
    methods: {
       getTable(val){
         if(val == 1){
           console.log(111)
           this.pageindex.advertisingType = '线上广告位'
            this.getAll((this.pageindex))
         }else{
           this.pageindex.advertisingType = '实体广告位'
           this.getAll((this.pageindex))
         }
       },
      chenge(val){
        this.formSel={
         affiliation:'',
         deviceType:'',
         createUser:'',
         createDate:'',
         pageNumber: 1,
         pageSize: 10,
        advertisingType:''
        }
         this.chengeTatle = val
         if(val == 1){
            this.leixing  = true
           this.pageindex.advertisingType = '线上广告位'
            this.getAll((this.pageindex))
         }else{
            this.leixing  = false
           this.pageindex.advertisingType = '实体广告位'
           this.getAll((this.pageindex))
         }
      },
      async getAll(val) {
        const res = await likeGet(val)
        this.tableData = res.data.content
        if(this.pageindex.advertisingType == '线上广告位'){
          this.xsNum = res.data.content.length
        }else{
          this.xxNum = res.data.content.length
        }
        this.total = res.data.content.length

      },
 //获取当前时间
       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}`;
          },
          //获取地图点击的经纬度
          getChildDate(mapData){
            this.mapData = mapData
          },
          //查看编辑
          bianji() {
            if(this.edit){
              this.edit = false
            }
          },
          //查看点击

          handleEditForm(item) {
            this.editbgid={
              advertisingName:'',//广告位名称
              advertisingType: '', //广告位类型
              rotationOrder: '', // 轮播顺序
              createUser: '', // 创建人
              affiliation: '', //所属端
              position:'',//详细位置
              dimensions: '', //广告尺寸
              size: '', //广告大小
              uploadFormat: '', //上传类型
              advertisingSpaceStrategy: '', //策略
              advertisingSpaceNumber:'',//广告位编号
              locationDiagram:'',//位置示意图
              mapPunctuation:'',//地图标点
              deviceType:'',//设备类型
              equipmentSize:'',//设备尺寸
              advertisingMaterial:'',//广告材质
              createDate:'',//创建时间
              equipmentSizeH:"",
              equipmentSizeK:'',
              equipmentSizeG:'',
              dimensionsH:'',
              dimensionsK:''
               }

                console.log(item)
               let  dimensions_parts = item.dimensions.split(" ")
             let  dimensions = item.equipmentSize.split(" ")
                console.log(dimensions)
                dimensions_parts.forEach(part => {
                    if (part.startsWith("长")) {
                        item.dimensionsH = part.split("：")[1];
                    } else if (part.startsWith("宽")) {
                        item.dimensionsK = part.split("：")[1];
                    }
                })
                dimensions.forEach(part => {
                    if (part.startsWith("长")) {
                        item.equipmentSizeH = part.split("：")[1];
                    } else if (part.startsWith("宽")) {
                        item.equipmentSizeK = part.split("：")[1];
                    }else if (part.startsWith("高")) {
                        item.equipmentSizeG = part.split("：")[1];
                    }
                })
                this.editbgid = item
                // equipmentSizeH
                // equipmentSizeK
                // equipmentSizeG
                // dimensionsH
                // dimensionsK
            // this.editbgid.id = item.id
            // this.editbgid.advertisingName = item.advertisingName
            // this.editbgid.advertisingType = item.advertisingType
            // this.editbgid.rotationOrder = item.rotationOrder
            // this.editbgid.affiliation = item.affiliation
            // this.editbgid.detailedLocation = item.detailedLocation
            // this.editbgid.dimensions = item.dimensions
            // this.editbgid.size = item.size
            // this.editbgid.uploadFormat = item.uploadFormat
            // this.editbgid.deviceType = item.deviceType
            // this.editbgid.advertisingMaterial = item.advertisingMaterial
            // this.editbgid.equipmentSize = item.equipmentSize
            // this.editbgid.locationDiagram = item.locationDiagram
            if(this.leixing == false){
                this.parentMessage = JSON.parse(item.mapPunctuation)
            }

            this.detbox = false

          },
          //列表编辑
          bianjilist(item){

              this.detbox = false
              this.editbgid = item
             this.edit = false
              if(this.leixing == false){
                  this.parentMessage = JSON.parse(item.mapPunctuation)
              }
             // this.editbgid.id = item.id
             // this.editbgid.advertisingName = item.advertisingName
             // this.editbgid.advertisingType = item.advertisingType
             // this.editbgid.rotationOrder = item.rotationOrder
             // this.editbgid.affiliation = item.affiliation
             // this.editbgid.detailedLocation = item.detailedLocation
             // this.editbgid.dimensions = item.dimensions
             // this.editbgid.size = item.size
             // this.editbgid.uploadFormat = item.uploadFormat
             // this.editbgid.deviceType = item.deviceType
             // this.editbgid.advertisingMaterial = item.advertisingMaterial
             // this.editbgid.equipmentSize = item.equipmentSize
          },
          //查看编辑确定
          async editpush(){
            this.editbgid.updateDate = this.updateCurrentTime()

             if(this.leixing == false){
                 this.editbgid.mapPunctuation = JSON.stringify(this.mapData)
                 this.editbgid.equipmentSize = `长：${this.editbgid.equipmentSizeH} 宽：${this.editbgid.equipmentSizeK} 高：${this.editbgid.equipmentSizeG}`
                 this.editbgid.dimensions =`长：${this.editbgid.dimensionsH} 宽：${this.editbgid.dimensionsK}`
             }

             await editList(this.editbgid)
             this.detbox = true
             if(this.leixing){
               this.pageindex.advertisingType = '线上广告位'
             }else{
               this.pageindex.advertisingType = '实体广告位'
             }
            this.edit = true
             this.getAll(this.pageindex)
           },
      // 新增确定按钮
     addpush(formName){
            this.$refs[formName].validate((valid) => {
         if (valid) {
             this.formInline.createDate = this.updateCurrentTime()
             if(this.leixing){
                this.pageindex.advertisingType = '线上广告位'
                this.formInline.dimensions = '宽:300px 长:400px'
                this.formInline.size = '100kb'
                this.formInline.uploadFormat ='JPG、PNG、MP4'
             }else{
               this.pageindex.advertisingType = '实体广告位'
               this.formInline.mapPunctuation = JSON.stringify(this.mapData)
               this.formInline.equipmentSize = `长：${this.formInline.equipmentSizeH} 宽：${this.formInline.equipmentSizeK} 高：${this.formInline.equipmentSizeG}`
               this.formInline.dimensions =`长：${this.formInline.dimensionsH} 宽：${this.formInline.dimensionsK}`
             }
          addList(this.formInline).then(res=>{
            this.ggXin = true
             this.getAll((this.pageindex))
          })

         } else {
           this.$message({
             message: '请填写完整信息',
             type: 'error'
           })
           return false;
         }
       })
     },
      //取消
      colse(val){
        if(val == 1){
          this.ggXin=true
        }else if(val == 2){
           this.detbox =true
           this.edit = true
        }
      },
      //删除记录按钮
      handleDelete(val) {
         const h = this.$createElement;
         this.$msgbox({
           title: '消息',
           message: h('p', null, [
             h('span', null, '是否删除 '),
           ]),
           showCancelButton: true,
           showClose: false,
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           customClass: 'oe-dialog-btn',
           beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              delList({
                id: val.id
              }).then(res => {
                this.getTable(this.chengeTatle)
              })
              done();
            } else {
              done();
            }
          }
           })

        // const res = await delList({id:val.id})
        //  this.getTable(this.chengeTatle)
      },
      handleSizeChange(val) {
        this.pageSize = val
      },
      handleCurrentChange(val) {
        this.currentPage = val
      },
      addbuss(val) {
       this.formInline = {
        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'
       }

        this.ggXin = false
      },
      closeFn() {
        this.ggXin = true
      },
      // 查询按钮
      onSubmit() {

   if(this.pageindex.advertisingType =='线上广告位'){
      this.formSel.advertisingType = '线上广告位'
   getAlls(this.formSel).then(res=>{
                            this.tableData = res.data.content
                            this.total = res.data.content.length
                          })

   }else{
     this.formSel.advertisingType = '实体广告位'
     getAlls(this.formSel).then(res=>{
                              this.tableData = res.data.content
                              this.total = res.data.content.length
                            })
   }
  // if(this.formSel.createDate=='' && this.formSel.createUser == '' && this.formSel.affiliation == ''){
  //             console.log(1)
  //             console.log(this.pageindex)
  //                       Object.keys(this.formInline).forEach(key => {
  //                               this.formInline[key] = this.formSel.contacts;
  //                             });
  //                         this.formInline.id = this.formSel.contacts
  //                         this.formInline.pageNumber = 1
  //                         this.formInline.pageSize = 10
  //                         this.formInline.advertisingType = this.pageindex.advertisingType
  //                       likeGet(this.formInline).then(res=>{
  //                           this.tableData = res.data.content
  //                           this.total = res.data.content.length
  //                         })

  //           }else{
  //              if(this.formSel.contacts == ''){
  //                likeGet({affiliation:this.formSel.affiliation,createUser:this.formSel.createUser,pageNumber:1,pageSize:10}).then(res=>{
  //                  this.tableData = res.data.content
  //                  this.total = res.data.content.length
  //                  })
  //              }else{
  //                Object.keys(this.formInline).forEach(key => {
  //                        this.formInline[key] = this.formSel.contacts;
  //                      });
  //                      console.log(this.formInline)
  //                  this.formInline.id = this.formSel.contacts
  //                   this.formInline.affiliation=this.formSel.affiliation
  //                   this.formInline.createUser=this.formSel.createUser
  //                   this.formInline.advertisingType = this.pageindex.advertisingType
  //                   this.formInline.pageNumber = 1
  //                   this.formInline.pageSize = 10
  //                likeGet(this.formInline).then(res=>{
  //                   console.log(res.data)
  //                  this.tableData = res.data.content
  //                  this.total = res.data.content.length
  //                  })
  //              }
  //           }

      },
      //重置按钮
      resetting(){
        this.formSel={
         affiliation:'',
         deviceType:'',
         createUser:'',
         createDate:'',
         pageNumber: 1,
         pageSize: 10,
        advertisingType:''
        }
        this.getTable(this.chengeTatle)
      },
  handleChange(field, value) {
    console.log(field, value)
    this.$set(this.editbgid, field, value);
     this.$forceUpdate(); // 强制组件重新渲染
  }
    }
  }
</script>

<style scoped>
  .zhuti {
    padding: 0 20px 20px 20px;
      min-height: calc(100vh - 50px - 20px);
    background-color: #Fff;
  }
  .chengeXia{
    border-bottom: 6px solid #3F9B6A;padding-bottom: 4px;color: #3F9B6A;
  }

  /deep/ .el-form-item__content {
    line-height: 0;
  }

  .tableBtn {
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;
  }

  .formSearch {
    margin-top:20px;
    display: flex;
    width: 100%;
    font-size: 14px;
    justify-content: space-between;
  }

  .greens {
    color: #3F9B6A;
  }
  .fenye {
   margin-top: 20px;
   display: flex;
   justify-content: flex-end;
   position: relative;
  }

  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #3F9B6A;
  }

  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  /deep/ .bg-purple[data-v-0e3fe4ec] {
    background: #fff;
    height: 50px;
  }
    /deep/ .bg-purple[data-v-3bebae82]{
    background: #fff;
    height: 50px;
  }

::v-deep .bg-purple{
    background: #fff;
    height: 50px;
  }
  /deep/ .el-form--label-top .el-form-item__label {
    padding: 0;
  }

  .device-form .el-form-item__label::after {
    content: "*";
    color: #1A1A1A;
    margin-left: 5px;
    font-size: 16px;
  }

  /deep/.el-form-item__content label:nth-child(1) .is-checked+.el-radio__label {
    color: #757575 !important;
  }

  /deep/.el-form-item__content label:nth-child(1) .is-checked .el-radio__inner {
    border-color: #757575 !important;
    background: #757575 !important;
  }

  ::v-deep .el-dialog__wrapper {
    .el-dialog__header {
      background-color: #fff;

      .el-dialog__title {
        font-size: 24px;
        color: #000;
      }
    }
  }
 ::v-deep .el-input__inner:focus {
      border: #3F9B6A 1px solid;
   }
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    border-top: solid rgba(209, 209, 209, 0.2) 2px;
    padding-top: 20px;
  }
 ::v-deep .el-input__inner:focus {
      border: #3F9B6A 1px solid;
   }
   ::v-deep .el-input__inner:hover {
        border: #3F9B6A 1px solid;
     }
     ::v-deep .el-select .el-input.is-focus .el-input__inner{
         border-color:#3F9B6A
     }
.el-select-dropdown__item.selected{
    color: #3F9B6A;
}

.el-pagination__sizes .el-input .el-input__inner:hover{
    border-color: #3F9B6A;
}
.titles{
  position: relative;
  padding-left: 10px;
  font-weight: 600;
}

.titles::before{
  content: '';
  width: 2px;
  height: 10px;
  background-color: #3F9B6A;
    position: absolute;
    top: 2px;
    left: 0;
}
::v-deep .editcss{
     .el-form-item__label{
       color: #AEAEAE;
     }
}
</style>
<style lang="scss" scoped>
  ::v-deep .bian_css {
    .el-dialog__header {
     padding: 10px 20px 20px 20px;
    }
  .el-dialog__body{
    padding:5px;
  }
  }

  ::v-deep .xinFrom{
    .el-input--mini .el-input__inner{
      height:36px;
      line-height:36px;
    }
    .el-range-editor--mini.el-input__inner{
        height:36px;
        width:100%;
    }
  }
  ::v-deep .buttonHover:hover{
    color:#3f9b6a !important;
    border-color: #c5e1d2 !important;
    background-color: #ecf5f0 !important;
    outline: none;
  }
::v-deep .el-pagination__total {
    position: absolute;
    left: 10px;
  }

</style>
