<template>
  <div style="background-color:#f7f7f7;padding:10px 10px;">
    <div class="zhuti" v-if="showAdd == false && showBian == false">
      <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>
        <!-- 搜索 -->

        <div class="formSearch">
          <el-form :inline="true">
            <el-form-item label="资源名称" prop="Name">
              <el-input placeholder="请输入" v-model="formSel.Name" style="width: 168px;margin-right: 15px" />
            </el-form-item>
            <!-- <el-form-item label="资源编号" prop="Number">
              <el-input placeholder="请输入" v-model="formSel.Number" style="width: 168px;margin-right: 15px" />
            </el-form-item> -->
            <el-form-item label="所属区域" prop="Region">
              <el-select v-model="formSel.Region" placeholder="请选择" style="width: 168px;margin-right: 15px">
                <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-form-item label="归属部门" prop="belongingDepartment">
              <el-input placeholder="请输入" v-model="formSel.belongingDepartment"
                style="width: 168px;margin-right: 15px" />

            </el-form-item>
            <el-form-item label="经营类型" prop="head">

            <el-select v-model="formSel.head" placeholder="请选择" style="width: 168px;margin-right: 15px">
              <el-option label="测试" value="测试"></el-option>
              <el-option label="类型1" value="类型1"></el-option>

            </el-select>
            </el-form-item>
          </el-form>
          <div style="width:18%">
            <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;display:flex;">
          <el-button @click="addbuss"
            style="background-color: #3F9B6A;color: #fff;padding:8px 15px;"
            icon="el-icon-circle-plus-outline">新增</el-button>
        <el-upload class="upload-demo" ref="upload"
                          :limit="1"
                          accept=".xlsx"
                          :action="uploadFileUrl"
                          :on-success="daoru"
                          :file-list="daoData"
                           :auto-upload="true"
                           :show-file-list="false">
                          <el-button style="background-color: #fff;color: #3F9B6A;border: 1px solid #dcdfe6;margin-left:15px;"  class="buttonHover">导入</el-button>
                        </el-upload>
            </div>
        <!-- 地图 -->
        <div style="display: flex;justify-content: space-between;margin-bottom: 20px;">
          <div style="width: 100%;height: 400px; border: 1px solid #3F9B6A;position: relative;">

            <map-container :message="parentMessage" @MapItem='HandMapItem' ref="mapComponent"></map-container>
          </div>
          <!-- <div style="padding: 5px 0;width: 22%;font-size: 12px;">
             <div>已检索到{{listof.length}}个招商资源</div>
             <div style="display: flex;margin-top: 10px;">
               <div style="padding: 5px 10px;background-color: #4F7AFF;margin-right: 5px;color: #fff;">已租</div> <span style="margin-right: 15px;line-height: 200%;">{{pendingCount}}个</span>
               <div style="padding: 5px 10px;background-color: #F59A23;margin-right: 5px;color: #fff;">待租</div> <span style="line-height: 200%;">{{rentedCount}}个</span>
             </div>
              <el-table
                 :data="listof"
                 style="width: 100%;margin-top: 10px;"
                 :show-header="false"
                  border
                 max-height="335">
                 <el-table-column
                   fixed
                   prop="id"
                   min-width="15%">
                 </el-table-column>
                 <el-table-column

                     min-width="70%">
                     <template slot-scope="scope">
                         <div style="text-decoration: underline;">
                             {{
                               activeName === 'first'
                                 ? `${scope.row.belongingDepartment}/${scope.row.belongingRegion}/${scope.row.shopName}`
                                 : activeName === 'second'
                                 ? scope.row.detailedLocation
                                 : ''
                             }}
                         </div>
                     </template>
                 </el-table-column>
                 <el-table-column
                   prop="rentalStatus"
                    min-width="15%">
                   <template slot-scope="scope">
                       <div :class="scope.row.rentalStatus == '0'?'daizu':'yizu'"></div>
                   </template>
                 </el-table-column>


               </el-table>
           </div> -->
        </div>
        <!-- 表格 -->
        <div style="position: relative;">
          <el-tabs v-model="activeName" @tab-click="handleClick(activeName)">
            <el-tab-pane label="商铺" name="first">
              <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">
                  <template slot-scope="scope">
                    {{scope.$index +1}}
                  </template>
                </el-table-column>
                <el-table-column label="编号" prop="venueNumber" min-width="200">
                </el-table-column>
                <el-table-column label="门牌号" prop="houseNumber" min-width="150">

                </el-table-column>
                <el-table-column label="商铺名称" prop="shopName" min-width="150">

                </el-table-column>
                <el-table-column label="所属区域" prop="belongingRegion" min-width="150">
                </el-table-column>
                <el-table-column label="建筑形式" prop="architecturalForm" min-width="150">
                </el-table-column>
                <el-table-column prop="detailedLocation" label="详细地址" min-width="300">
                </el-table-column>
                <el-table-column label="商户名称" prop="commercialTenantName" min-width="150">
                </el-table-column>
                <el-table-column label="商户电话" prop="commercialTenantPhone" min-width="150">
                </el-table-column>
                <el-table-column label="实际使用面积" prop="actualUsableArea" min-width="150">
                </el-table-column>
                <el-table-column label="归属部门" prop="belongingDepartment" min-width="150">
                </el-table-column>
                <el-table-column label="负责人" prop="head" min-width="120">
                </el-table-column>
                <el-table-column label="商铺业态" prop="commercialForm" min-width="120">
                </el-table-column>
                <el-table-column label="租赁状态" prop="rentalStatus" min-width="120">
                  <template slot-scope="scope">
                    {{scope.row.rentalStatus == 0?'未租':'已租'}}
                  </template>
                </el-table-column>
                <el-table-column label="发布状态" prop="publishStatus" min-width="120">
                  <template slot-scope="scope">
                    {{scope.row.publishStatus == 0?'待发布':'已提交'}}
                  </template>
                </el-table-column>
                <el-table-column label="租赁到期时间" prop="leaseExpirationDate" min-width="150">
                </el-table-column>
                <el-table-column label="操作" min-width="200" fixed="right">
                  <template slot-scope="scope">
                    <div @click="handleEditForm(scope.row)" class="tableBtn greens">查看</div>
                    <div class="tableBtn greens" @click="bianjilist(scope.row)">编辑</div>
                    <div class="tableBtn greens" @click="closemsg(scope.row)">删除</div>
                  </template>
                </el-table-column>

              </el-table>
            </el-tab-pane>
            <el-tab-pane label="广告位" name="second">
              <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" v-if="activeName == 'second'">
                  <template slot-scope="scope">
                    {{scope.$index +1}}
                  </template>
                </el-table-column>
                <el-table-column label="广告位名称" prop="advertisingName" min-width="200" v-if="activeName == 'second'">
                </el-table-column>
                <el-table-column label="广告位类型" prop="advertisingType" min-width="150" v-if="activeName == 'second'">
                </el-table-column>
                <el-table-column label="详细地址" prop="detailedLocation" min-width="200" v-if="activeName == 'second'">
                </el-table-column>
                <el-table-column label="设备类型" prop="deviceType" min-width="150" v-if="activeName == 'second'">
                </el-table-column>
                <el-table-column label="设备尺寸" prop="equipmentSize" min-width="200" v-if="activeName == 'second'">
                </el-table-column>
                <el-table-column label="广告位编号" prop="advertisingSpaceNumber" min-width="150" v-if="activeName == 'second'">
                </el-table-column>
                <el-table-column label="广告尺寸" prop="dimensions" min-width="200" v-if="activeName == 'second'">
                </el-table-column>
                <el-table-column label="广告材质" prop="advertisingMaterial" min-width="150" v-if="activeName == 'second'">
                </el-table-column>
                <el-table-column prop="createUser" label="创建人" min-width="120" v-if="activeName == 'second'">
                </el-table-column>
                <el-table-column prop="rentalStatus" label="租赁状态" min-width="120" v-if="activeName == 'second'">
                  <template slot-scope="scope">
                    {{scope.row.rentalStatus == 0?'未租':'已租'}}
                  </template>
                </el-table-column>
                <el-table-column prop="publishStatus" label="发布状态" min-width="120" v-if="activeName == 'second'">
                  <template slot-scope="scope">
                    {{scope.row.publishStatus == 0?'待发布':'已提交'}}
                  </template>
                </el-table-column>
                <el-table-column prop="leaseExpirationDate" label="租赁到期时间" min-width="200"
                  v-if="activeName == 'second'">
                </el-table-column>
                <el-table-column label="操作" min-width="200" v-if="activeName == 'second'" fixed="right">
                  <template slot-scope="scope">
                    <div @click="handleEditForm(scope.row)" class="tableBtn greens">查看</div>
                    <div class="tableBtn greens" @click="bianjilist(scope.row)">编辑</div>
                    <div class="tableBtn greens" @click="closemsg(scope.row)">删除</div>
                  </template>
                </el-table-column>

              </el-table>

            </el-tab-pane>
            <el-tab-pane label="场地" name="third">
              <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="6%" v-if="activeName == 'third'">
                  <template slot-scope="scope">
                    {{scope.$index +1}}
                  </template>
                </el-table-column>
                <!-- <el-table-column label="编号" min-width="6%" prop="id" v-if="activeName == 'second'">
                     </el-table-column> -->
                <el-table-column label="场地名称" min-width="6%" prop="venueName" v-if="activeName == 'third'">
                </el-table-column>
                <el-table-column label="实际使用面积" min-width="6%" prop="actualArea" v-if="activeName == 'third'">
                </el-table-column>
                <el-table-column label="场地编号" prop="venueSpaceNumber" min-width="10%" v-if="activeName == 'third'" />
                <el-table-column label="场地类型" min-width="6%" prop="venueType" v-if="activeName == 'third'">
                </el-table-column>
                <el-table-column label="所属区域" min-width="6%" prop="district" v-if="activeName == 'third'">
                </el-table-column>
                <el-table-column label="详细位置" min-width="6%" prop="detailedLocation" v-if="activeName == 'third'">
                </el-table-column>
                <el-table-column label="租赁状态" min-width="6%" v-if="activeName == 'third'">
                </el-table-column>
                <el-table-column label="发布状态" min-width="6%" v-if="activeName == 'third'">
                </el-table-column>
                <el-table-column label="操作" width="auto" min-width="10%" v-if="activeName == 'third'">
                  <template slot-scope="scope" fixed="right">
                    <div @click="handleEditForm(scope.row)" class="tableBtn greens">查看</div>
                    <div class="tableBtn greens" @click="bianjilist(scope.row)">编辑</div>
                    <div class="tableBtn greens" @click="closemsg(scope.row)">删除</div>
                  </template>
                </el-table-column>

              </el-table>

            </el-tab-pane>
            <div class="fenye">

                              <el-pagination class="pagination" :hide-on-single-page="flag" background small
                                :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" layout="total,prev, pager,next"
                                :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                            </div>
            <!-- <el-tab-pane label="临铺" name="fourth">
                <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                  :header-cell-style="{fontSize: '12px', backgroundColor: '#FAFAFA',color:'#000',fontWeight: 'normal'}"
                 >
                     <el-table-column label="编号" min-width="6%" prop="id" v-if="activeName == 'second'">
                     </el-table-column>
                     <el-table-column label="操作" width="auto" min-width="10%" v-if="activeName == 'second'">
                       <template slot-scope="scope">
                         <div @click="handleEditForm(scope.row)" class="tableBtn greens">查看</div>
                         <div class="tableBtn greens" @click="bianjilist(scope.row)">编辑</div>
                         <div class="tableBtn greens" @click="closemsg(scope.row)" >删除</div>
                       </template>
                     </el-table-column>
                <div class="fenye">
                  <div style="line-height: 34px">显示第1到第10条记录</div>
                  <el-pagination class="pagination" :hide-on-single-page="flag" background small :current-page="currentPage"
                    :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total,sizes,prev, pager,next" :total="total "
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </div>
                     </el-table>
              </el-tab-pane> -->
          </el-tabs>

        </div>
      </div>
    </div>
    <!-- 详情············································· -->

    <el-dialog :visible.sync="detbox" custom-class='dialog_css' style="padding: 0;" width="85%" center
      :close-on-click-modal="false" class="dialog_css_Xq" :show-close="false">
      <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;">
        <el-tabs v-model="xiangTabs">
          <el-tab-pane label="基本信息" name="first">
            <div style="display: flex;justify-content: space-between;font-size: 14px;margin-bottom: 20px;">
              <div>基本信息</div>
              <div
                style="background-color: #3678D8; color: #fff;padding: 5px;border-radius: 5px;width: 100px;text-align:center;">
                业态变更信息</div>
            </div>
            <el-row style="border: 1px solid #EBEEF5;height: 42px;">
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">所属区域</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.region}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">建筑形式</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.jzxs}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">实际使用面积</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.sjsymj}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <el-row style="border-right: 1px solid #EBEEF5;border-left: 1px solid #EBEEF5;height: 42px;">
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">场地编号</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.resourceNumber}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">归属部门</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.gsbm}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">主要设施</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.zyss}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <el-row style="border: 1px solid #EBEEF5;height: 42px; margin-bottom: 20px;">
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">负责人</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.fzr}}</div>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">业态类型</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.fzr}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;"></span>
                    </div>
                    <div style="height: 42px;line-height: 42px;"></div>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <div class="" style="margin-bottom: 20px;">
              <div style="margin-bottom: 10px;">建筑图纸</div>
              <div><img :src="secondData.zszt" alt="" style="height: 120px;width:180px" /></div>
            </div>
            <div style="margin-bottom: 20px;">
              <div style="margin-bottom: 10px;">其他展示图片/视频</div>
              <div style="display: flex;"><img src="../../assets/images/empty.png" alt=""
                  style="height: 120px;margin-right: 20px;" />
                <img src="../../assets/images/empty.png" alt="" style="height: 120px;" />
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="租赁信息" name="second">
            <div style="display: flex;justify-content: space-between;font-size: 14px;margin-bottom: 20px;">
              <div>租赁信息</div>
              <!-- <div
                    style="background-color: #3678D8; color: #fff;padding: 5px;border-radius: 5px;width: 100px;text-align:center;">
                    历史租赁信息</div> -->
            </div>
            <el-row style="border: 1px solid #EBEEF5;height: 42px;">
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">出租情况</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.czqk}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">租赁人</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.zlr}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">联系电话</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.telephone}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <el-row style="border-right: 1px solid #EBEEF5;border-left: 1px solid #EBEEF5;height: 42px;">
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">租赁主体</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.zlzt}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">主体名称</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.ztmc}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">法人</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.fr}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <el-row style="border: 1px solid #EBEEF5;height: 42px; margin-bottom: 20px;">
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">租期</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.zq}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">租金</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.zj}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;"></span>
                    </div>
                    <div style="height: 42px;line-height: 42px;"></div>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>

            <div style="font-size: 14px;margin-bottom: 20px;">
              <div>合同信息</div>
            </div>
            <el-row style="border: 1px solid #EBEEF5;height: 42px;">
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">合同编号</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.htbh}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">标段号</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.bdh}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">合同名称</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.htmc}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <el-row
              style="border-left: 1px solid #EBEEF5; border-right: 1px solid #EBEEF5;border-bottom: 1px solid #EBEEF5;height: 42px;">
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">合同金额</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.htje}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">保证金</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.bzj}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">合同签订日期</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.htqdrq}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <el-row
              style="border-left: 1px solid #EBEEF5; border-right: 1px solid #EBEEF5;border-bottom: 1px solid #EBEEF5;height: 42px;">
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">合同终止日期</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.htzzrq}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">起租日期</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.qzrq}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">出租人名称</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.czrmc}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <el-row
              style="border-left: 1px solid #EBEEF5; border-right: 1px solid #EBEEF5;border-bottom: 1px solid #EBEEF5;height: 42px;">
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">联系电话</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.telephone}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">银行账号</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.yhzh}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">承租人名称</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.tenantName}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <el-row
              style="border-left: 1px solid #EBEEF5; border-right: 1px solid #EBEEF5;border-bottom: 1px solid #EBEEF5;height: 42px;">
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">承租人联系电话</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.czrlxdh}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">承租人银行账号</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.czryhzh}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">商铺编号</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.spbh}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <el-row
              style="border-left: 1px solid #EBEEF5; border-right: 1px solid #EBEEF5;border-bottom: 1px solid #EBEEF5;height: 42px;">
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">商铺名称</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.spmc}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">商铺地址</span>
                    </div>
                    <div
                      style="height: 42px;line-height: 42px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                      {{secondData.spdz}}
                    </div>

                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">商铺面积</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.spmj}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <el-row
              style="border-left: 1px solid #EBEEF5; border-right: 1px solid #EBEEF5;border-bottom: 1px solid #EBEEF5;height: 42px;margin-bottom: 20px;">
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">商铺业态</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.commercialForm}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">经营项目</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.jyxm}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">合同附件</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;text-decoration: underline;">{{secondData.htfj}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="经营情况" name="there">
            <div style="display: flex;justify-content: space-between;font-size: 14px;margin-bottom: 20px;">
              <div>经营情况</div>
            </div>
            <el-row
              style="border-top: 1px solid #EBEEF5;height: 42px;border-left: 1px solid #EBEEF5;border-right: 1px solid #EBEEF5;">
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 125px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">线下销售统计时间</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.xxtjsj}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 125px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">线下销售总金额</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.xxzje}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8">
              </el-col>
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 125px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">在线商城统计时间</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.xstjsj}}</div>

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

              </el-col>
              <el-col :span="8" style="border: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 125px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">在线商城销售总金额 </span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.xszje}}</div>

                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8">
              </el-col>
            </el-row>

            <!-- 图表 -->
            <div style="width: 100%;">
              <div style="display: flex;justify-content: space-between;font-size: 14px;margin-bottom: 20px;">
                <div>经营分析报表</div>
              </div>
              <div style="display: flex;margin-bottom: 20px;">
                <div style="border: #EBEEF5 1px solid; margin-right: 20px; width: 45%;">
                  <div style="border-bottom: #EBEEF5 1px solid;background-color: #F7F7F7;padding: 10px 15px;">销售额趋势图
                  </div>
                  <!--    折线图-->

                  <div ref="container" style="width: 600px; height: 400px;"></div>

                </div>
                <div style="border: #EBEEF5 1px solid; width: 45%;">
                  <div style="border-bottom: #EBEEF5 1px solid;background-color: #F7F7F7;padding: 10px 15px;">销售额增长率图表
                  </div>
                  <!-- 漏斗图 -->
                  <div ref="container1" style="width: 600px; height: 400px;"></div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="物业维护记录" name="four">
            <div style="display: flex;justify-content: space-between;font-size: 14px;margin-bottom: 20px;">
              <div>物业维护记录</div>
            </div>

            <el-row
              style="border-left: 1px solid #EBEEF5; border-right: 1px solid #EBEEF5;border-bottom: 1px solid #EBEEF5;height: 42px;margin-bottom: 30px;">
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">维护时间</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.whsj}}</div>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">维护项目</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.whxm}}</div>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8" style="border-right: 1px solid #EBEEF5;">
                <el-form size="small" :inline="true">
                  <el-form-item prop="name">
                    <div slot="label"
                      style="text-align:left;border-right: 1px solid #EBEEF5;height: 42px;line-height: 42px;width: 119px;padding-left:10px;background-color:#FAFAFA">
                      <span style="font-size: 14px;color: #000;">维护内容</span>
                    </div>
                    <div style="height: 42px;line-height: 42px;">{{secondData.whnr}}</div>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>

        <div style="margin-top: 50px;width: 99%;padding:10px;display:flex;justify-content: flex-end;">
          <el-button class="buttonHover" style="color: #000;border: 1px solid #DBDBDB;background-color: #fff;"
            @click="closeFn(1)">取消</el-button>
          <!-- <el-button    @click="closemsg"
                    style="background-color: #fff;color: #000;">删除</el-button> -->
          <!--    <el-button @click=""
                    style="background-color: #3F9B6A;color: #fff;">编辑</el-button>
                  <el-button
                    style="background-color: #3F9B6A;color: #fff;">确定</el-button> -->


        </div>
      </div>
    </el-dialog>

    <addziyuan :showAdd="showAdd" @childClose='childClose' v-if="showAdd"></addziyuan>

    <!-- 查看 -->
    <div class="zhuti" v-if='showBian'>
      <div style="height:58px;line-height:58px;">
        <div style="color:#0006"> <span>招商资源地图</span> <span style="padding:0 5px;">></span> <span
            style="color:#000000e6">{{edit?'查看':'编辑'}}</span></div>
      </div>
      <el-tabs v-model="chakanTab">
        <el-tab-pane label="基础信息" name="first">
          <div style="margin-top: 30px;" class="editcss">
            <div class="titles">
              基础信息
            </div>
            <div style="padding: 20px;" v-if="restype == '商铺'">
              <el-form :model="editbgid" :rules="rules" ref="Addrule" label-width="140px" class="demo-ruleForm">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="商铺名称" prop="shopName">
                      <div v-if="edit" class="duiqi">{{editbgid.shopName}}</div>
                      <el-input v-model="editbgid.shopName" placeholder="请输入" style="margin-top: 5px;" maxlength="50"
                        v-else></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="场地编号" prop="venueNumber">
                      <div class="duiqi">{{editbgid.venueNumber}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="门牌号" prop="houseNumber">
                      <div v-if="edit" class="duiqi">{{editbgid.houseNumber}}</div>
                      <el-input v-model="editbgid.houseNumber" placeholder="请输入" style="margin-top: 5px;" maxlength="50"
                        v-else></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="建筑形式" prop="architecturalForm">
                      <div v-if="edit" class="duiqi">{{editbgid.architecturalForm}}</div>
                      <el-select v-model="editbgid.architecturalForm" placeholder="请选择"
                        style="margin-top:5px;width: 100%;" v-else>
                        <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">
                      <div v-if="edit" class="duiqi">{{editbgid.belongingGreenwaySection}}</div>
                      <el-select v-model="editbgid.belongingGreenwaySection" placeholder="请选择"
                        style="margin-top:5px;width: 100%;" @change="lvdaoBian" v-else>
                        <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">
                      <div v-if="edit" class="duiqi">{{editbgid.belongingParkTrail}}</div>
                      <el-select v-model="editbgid.belongingParkTrail" placeholder="请选择"
                        style="margin-top:5px;width: 100%;" v-else>
                        <el-option :label="item.name" :value="item.code" v-for="(item,index) in biangongyuanList"
                          :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">
                      <div v-if="edit" class="duiqi">{{editbgid.floorSpace}}</div>
                      <el-input v-model="editbgid.floorSpace" placeholder="请输入" style="margin-top:5px;" v-else>
                        <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">
                      <div v-if="edit" class="duiqi">{{editbgid.actualUsableArea}}</div>
                      <el-input v-model="editbgid.actualUsableArea" placeholder="请输入" style="margin-top:5px;"
                        v-else>
                        <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">
                      <div v-if="edit" class="duiqi">{{editbgid.belongingRegion}}</div>
                      <el-select v-model="editbgid.belongingRegion" placeholder="请选择"
                        style="margin-top:5px;width: 100%;" v-else>
                        <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">
                      <div v-if="edit" class="duiqi">{{editbgid.belongingDepartment}}</div>
                      <el-input v-model="editbgid.belongingDepartment" placeholder="请输入" style="margin-top:5px;"
                        v-else />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="负责人" prop="head">
                      <div v-if="edit" class="duiqi">{{editbgid.head}}</div>
                      <el-input v-model="editbgid.head" placeholder="请输入" style="margin-top:5px;" maxlength="30" v-else>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="详细位置" prop="detailedLocation">
                      <div v-if="edit" class="duiqi">{{editbgid.detailedLocation}}</div>
                      <el-input v-model="editbgid.detailedLocation" placeholder="请输入" style="margin-top:5px;" v-else
                        maxlength="100" />
                    </el-form-item>
                  </el-col>
                </el-row>
<el-row :gutter="20">
                    <el-col :span="12">
                      <el-form-item label="商铺业态" prop="commercialForm">
                        <div v-if="edit" class="duiqi">{{editbgid.commercialForm}}</div>
                        <el-select v-model="ruleForm.commercialForm" placeholder="请选择" style="margin-top:5px;width: 100%;" v-else>
                          <el-option label="商超" value="商超"></el-option>
                        </el-select>
                        </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;">
                        <MapXian :message="shopMessage" :edit='edit' :sendMap='getChildDate'></MapXian>
                      </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="editbgid.architecturalDrawings" :limit="5" :fileSize="1" v-if="edit==false"></upimg>
                      <div v-else>
                          <img :src="item" alt="" style="width:140px;height:140px;" v-for="item in editbgid.architecturalDrawings.split(',')" >
                      </div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="商铺描述" prop="shopDescription">
                      <div v-if="edit" class="duiqi">{{editbgid.shopDescription}}</div>
                      <el-input type="textarea" v-model="editbgid.shopDescription" style="margin-top:5px;"
                        placeholder="请输入" v-else></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="editbgid.displayMainImage" :limit="1" :fileSize="1" v-if="edit==false"></upimg>
                      <img :src="editbgid.displayMainImage" alt="" style="width:140px;height:140px;" v-else>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="其他图片/视频" prop="otherImageVideos">
                      <div v-if="edit" class="duiqi">{{editbgid.otherImageVideos}}</div>
                      <el-upload class="upload-demo" ref="upload" :on-remove="handleRemove" :action="uploadFileUrl"
                            :on-success="handleUploadSuccess" :file-list="fileData" :auto-upload="true"
                           v-else>
                            <el-button style="background-color: #fff;color: #3F9B6A;border: 1px solid #dcdfe6;"
                              class="buttonHover" v-if="fileData.length==0 && edit==false">+点击上传</el-button>
                          </el-upload>
                    </el-form-item>
                  </el-col>
                </el-row>

              </el-form>
            </div>
            <div style="padding: 20px;" v-if="restype == '场地'">
              <el-form :model="editbgid" :rules="rulestwo" ref="Addrule" label-width="140px" class="demo-ruleForm">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="场地名称" prop="venueName">
                      <div v-if="edit" class="duiqi">{{editbgid.venueName}}</div>
                      <el-input v-model="editbgid.venueName" placeholder="请输入" style="margin-top: 5px;" maxlength="50"
                        v-else></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="场地类型" prop="venueType">
                      <div class="duiqi" v-if="edit">{{editbgid.venueType}}</div>
                      <el-select v-model="editbgid.venueType" placeholder="请选择" style="margin-top:5px;width: 100%;"
                        v-else>
                        <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">
                      <div v-if="edit" class="duiqi">{{editbgid.actualArea}}</div>
                      <el-input v-model="editbgid.actualArea" placeholder="请输入" style="margin-top:5px;" v-else>
                        <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">
                      <div v-if="edit" class="duiqi">{{editbgid.district}}</div>
                      <el-select v-model="editbgid.district" placeholder="请选择" style="margin-top:5px;width: 100%;"
                        v-else>
                        <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">
                      <div v-if="edit" class="duiqi">{{editbgid.department}}</div>
                      <el-input v-model="editbgid.department" placeholder="请输入" style="margin-top:5px;" maxlength="50"
                        v-else />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="负责人" prop="responsiblePerson">
                      <div v-if="edit" class="duiqi">{{editbgid.belongingParkTrail}}</div>
                      <el-input v-model="editbgid.responsiblePerson" placeholder="请输入" style="margin-top:5px;"
                        maxlength="20" v-else>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="详细位置" prop="detailedLocation">
                      <div v-if="edit" class="duiqi">{{editbgid.detailedLocation}}</div>
                      <el-input v-model="editbgid.detailedLocation" placeholder="请输入" style="margin-top:5px;"
                        maxlength="100" v-else />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="场地编号" prop="venueSpaceNumber">
                      <div v-if="edit" class="duiqi">{{editbgid.venueSpaceNumber}}</div>
                    </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;">
                        <MapXian :message="shopMessage" :edit='edit' :sendMap='getChildDate'></MapXian>

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

                </el-row>

                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="场地描述" prop="description">
                      <div v-if="edit" class="duiqi">{{editbgid.description}}</div>
                      <el-input type="textarea" v-model="editbgid.description" style="margin-top:5px;" maxlength="200"
                        v-else></el-input>
                    </el-form-item>
                  </el-col>

                </el-row>

                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="规划图纸" prop="planningDrawing">
                      <!-- <img :src="editbgid.planningDrawing" alt="" style="width:140px;height:140px;" v-if="edit"> -->

                      <div v-if="edit">
                          <img :src="item" alt="" style="width:140px;height:140px;" v-for="item in editbgid.planningDrawing.split(',')" >
                      </div>
                      <upimg v-model="editbgid.planningDrawing" :limit="1" :fileSize="1" v-else></upimg>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="展示主图" prop="displayImage">
                      <img :src="editbgid.displayImage" alt="" style="width:140px;height:140px;" v-if="edit">
                      <upimg v-model="editbgid.displayImage" :limit="1" :fileSize="1" v-else></upimg>

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

                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="其他图片/视频" prop="otherMedia">
                      <div v-if="edit" class="duiqi">{{editbgid.otherMedia}}</div>
                      <!-- <el-upload class="upload-demo" ref="upload" :on-remove="handleRemove" :action="uploadFileUrl"
                            :on-success="handleUploadSuccess" :file-list="fileData" :auto-upload="true"
                            v-if="fileData.length==0" v-else>
                            <el-button style="background-color: #fff;color: #3F9B6A;border: 1px solid #dcdfe6;"
                              class="buttonHover" v-if="fileData.length==0 && edit==false">+点击上传</el-button>
                          </el-upload> -->
                    </el-form-item>
                  </el-col>
                </el-row>

              </el-form>
            </div>
            <div style="padding: 20px;" v-if="restype == '广告位'">
              <el-form :model="editbgid" :rules="leixing?rulesthree:rulesSt" ref="Addrule" label-width="100px"
                class="demo-ruleForm">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="广告位名称" prop="advertisingName">
                      <div v-if="edit" class="duiqi">{{editbgid.advertisingName}}</div>
                      <el-input v-model="editbgid.advertisingName" placeholder="请输入" style="margin-top: 5px;" maxlength="50"
                        v-else></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="广告位编号" prop="advertisingSpaceNumber">
                      <div class="duiqi">{{editbgid.advertisingSpaceNumber}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="广告位类型" prop="advertisingType">
                      <div class="duiqi">{{editbgid.advertisingType}}</div>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="所属端" prop="affiliation" v-if='leixing'>
                      <div class="duiqi" v-if="edit">{{editbgid.affiliation}}</div>
                      <el-select v-model="editbgid.affiliation" placeholder="请选择" style="margin-top:5px;width: 100%;"
                        v-else>
                        <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'>
                      <div class="duiqi" v-if="edit">{{editbgid.detailedLocation}}</div>
                      <el-input v-model="editbgid.detailedLocation" placeholder="请输入" style="margin-top:5px;" v-else
                        maxlength="200"></el-input>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="轮播顺序" prop="rotationOrder" v-if='leixing'>
                      <div class="duiqi" v-if="edit">{{editbgid.rotationOrder}}</div>
                      <el-select v-model="editbgid.rotationOrder" placeholder="请选择" style="margin-top:5px;width: 100%;"
                        v-else>
                        <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'>
                      <div class="duiqi">{{editbgid.dimensions}}</div>
                    </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;">
                        <MapXian :message="parentMessage" :edit='edit' :sendMap='getChildDate'></MapXian>
                      </div>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="可上传大小" prop="size" v-if='leixing'>
                      <div class="duiqi">{{editbgid.size}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="上传格式" prop="uploadFormat" v-if='leixing'>
                      <div class="duiqi">{{editbgid.uploadFormat}}</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 class="duiqi" v-if="edit">{{editbgid.deviceType}}</div>
                      <el-select v-model="editbgid.deviceType" placeholder="请选择" style="margin-top:5px;width: 92%;" v-else>
                        <el-option label="灯箱广告牌" value="灯箱广告牌"></el-option>

                      </el-select>
                    </el-form-item>
                  </el-col>
                  <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="editbgid.equipmentSizeH"
                            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: 14px;margin-right:5px;">mm</span>
                        </div>
                        <div>
                          <span style="font-size: 14px;">宽：</span>
                          <el-select v-model="editbgid.equipmentSizeK"
                            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: 14px;margin-right:5px;">mm</span>
                        </div>
                        <div>
                          <span style="font-size: 14px;">高：</span>
                          <el-select v-model="editbgid.equipmentSizeG"
                            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: 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="广告尺寸" v-if='leixing == false'>
                      <div style="display: flex;">
                        <div>
                          <span style="font-size: 14px;">长：</span>
                          <el-select v-model="editbgid.dimensionsH"
                            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: 14px;margin-right:5px;">mm</span>
                        </div>
                        <div>
                          <span style="font-size: 14px;">宽：</span>
                          <el-select v-model="editbgid.dimensionsK"
                            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: 14px;margin-right:5px;">mm</span>
                        </div>
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="广告材质" prop="advertisingMaterial" v-if='leixing == false'>
                      <div v-if="edit"  class="duiqi">{{editbgid.advertisingMaterial}}</div>
                      <div style="display: flex;justify-content: space-between;" v-else>
                        <el-select v-model="editbgid.advertisingMaterial"
                          style="margin-top:5px;width: 92%">
                          <el-option label="亚克力" value="亚克力"></el-option>
                          <el-option label="玻璃" value="玻璃"></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="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-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="历史租赁信息" name="second" v-if="edit">
          <div style="margin-top: 30px;" class="editcss">
            <div class="titles">
              历史租赁信息
            </div>
            <div style="margin:20px 0;">
              <el-table :data="lishiData"
                :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"   tooltip-effect="dark custom-tooltip-effect">
              <el-table-column label="承租人" min-width="80" prop="tenantName">

                                </el-table-column>
                                <el-table-column label="租赁期限" prop="leaseStartDate" min-width="200" show-overflow-tooltip>
                                </el-table-column>
                                <el-table-column label="经营类型" prop="houseNumber" min-width="80" show-overflow-tooltip>

                                </el-table-column>
                                <el-table-column label="租金/周期" prop="shopName" min-width="250" show-overflow-tooltip>
              <template slot-scope="scope">
                         {{scope.row.contractAmount}}/{{scope.row.intendedLeaseTerm}}

                        </template>
                                </el-table-column>
                                <el-table-column label="当前状态" prop="belongingRegion" min-width="150" show-overflow-tooltip>
                                </el-table-column>

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



      </el-tabs>
      <el-row :gutter="20">
        <el-col :span="12">
          <div style="padding-left:160px;">
            <el-button @click="editpush()" style="background-color: #3F9B6A;color: #fff;" v-if="!edit">确定</el-button>
            <el-button @click="colse" class="buttonHover"
              style="color: #606266;border: 1px solid #DBDBDB;background-color: #fff;">取消</el-button>

          </div>

        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import {
    getAlls,
    addList,
    editList,
    delList,
    likeGet,
    changAlls,
    changadd,
    changedit,
    changDel,
    excelAdd,
    zulxin
  } from '../../api/information'
  import {
    getAlls as getAllMap,
    addList as addMap,
    delList as deleteMap,
    likeGet as likeGetMap,
    editList as ggwedit
  } from '../../api/map1'
  import MapContainer from "@/components/MapContainer/MapContainer"
  import addziyuan from "./addziyuan"
  import ziyuanList from "./ziyuanList"
  import MapMark from "@/components/MapContainer/MapMark"
  import MapXian from "@/components/MapContainer/MapXian"
  import upimg from "@/components/ImageUpload/index"
  import {
    uploadUrl
  } from '@/utils/request'
  export default {
    data() {
      return {
        edit: true, //编辑
        formInline: {},
        detbox: false, //详情
        activeName: 'first', //切换列表
        mapSelNum: {
          belongingRegionNum: '0',
          belongingDepartmentNum: '0',
          architecturalFormNum: '0',
          rentalStatusNum: '0',
          jyqkNum: '0',
        },
        formSel: {
          Name: '',
          Number: '',
          head:'',
          Region: '',
          leixing: '',
          belongingDepartment: '',
          pageNumber: 1,
          pageSize: 10,
        },
        rentedCount: 0, //待租
        pendingCount: 0, //已租
        listof: [],
        currentPage: 1,
        total: 0,
        flag: false,
        pageSize: 10,
        tableData: [],
        editbgid: {},
        pageindex: {
          pageNumber: 1,
          pageSize: 10,
        },

        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'
          }],
        },
        leixing:true,
        //传地图数据
        parentMessage: [],
        shopMessage: {},
        // 详情
        secondData: {
          region: '',
          jzxs: '框剪结构',
          sjsymj: '',
          resourceNumber: '',
          gsbm: '',
          zyss: '',
          jztz: '点击查看',
          fzr: '',
          czqk: '',
          zszt: '../../assets/images/empty.png',
          zlr: '',
          telephone: '',
          zlzt: '',
          ztmc: '',
          fr: '',
          zq: '',
          zj: '',
          htbh: '',
          bdh: '',
          htmc: '',
          htje: '',
          bzj: '',
          htqdrq: '',
          htzzrq: '',
          qzrq: '',
          tenantName: '',
          lxdh: '',
          yhzh: '',
          czrmc: '',
          czrlxdh: '',
          czryhzh: '',
          spbh: '',
          spmc: '',
          spdz: '',
          spmj: '',
          spyt: '',
          jyxm: '',
          htfj: '',
          xxtjsj: '',
          xxzje: '',
          xstjsj: '',
          xszje: '',
          whsj: '',
          whxm: '',
          whnr: '',

        },
        showAdd: false,
        showBian: false,

        restype: '商铺',
        xiangTabs: 'first',
        chakanTab: 'first',
        //地图标点的经纬度
        mapData: {},
fileData:[],
uploadFileUrl: uploadUrl, // 请求地址
daoData:[],
lishiData:[]
      }


    },
    components: {
      MapContainer,
      addziyuan,
      ziyuanList,
      MapMark,
      MapXian,
      upimg
    },
    mounted() {

      this.first()
    },

    methods: {
      onCreated(editor) {
        this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
      },
      // 首次
      async first() {
        const res = await getAlls(this.pageindex)
        this.tableData = res.data.content
        this.setzulin(res.data.content)
        this.parentMessage = res.data.content
      },
      //查询全数据
      async getAll() {

        if (this.activeName == 'first') {
          const res = await getAlls(this.pageindex)
          this.tableData = res.data.content
          this.setzulin(res.data.content)
          this.parentMessage = res.data.content
        } else if (this.activeName == 'second') {
          // this.pageindex.advertisingType = '实体广告位'
          const res = await getAllMap(this.pageindex)
          this.parentMessage = res.data.content
          this.setzulin(res.data.content)
          this.tableData = res.data.content
        } else if (this.activeName == 'third') {
          const res = await changAlls(this.pageindex)
          this.tableData = res.data.content
          this.parentMessage = res.data.content
        } else if (this.activeName == 'fourth') {
          this.parentMessage = []
          this.tableData = []
          this.setzulin([])
        }
      },

      async mapSelXian(val) {
        let pageindex = {
          pageNumber: 1,
          pageSize: 10,
        }
        if (val == 1 && this.activeName == 'first') {
          const res = await likeGet(pageindex)

        }
      },
      //获取当前时间
      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}`;
      },
      //查询租赁列表
      setzulin(res) {
        this.listof = res
        let rentedCount = 0 //待租
        let pendingCount = 0 //已租
        for (let i = 0; i < this.listof.length; i++) {
          if (this.listof[i].rentalStatus == '0') {
            rentedCount += 1
          }
          if (this.listof[i].rentalStatus == '1') {
            pendingCount += 1
          }
        }
        this.rentedCount = rentedCount
        this.pendingCount = pendingCount
      },
      //切换列表
      async handleClick(event) {
        if (event == 'first') {
          const res = await getAlls(this.pageindex)
          this.tableData = res.data.content
          this.setzulin(res.data.content)
          this.parentMessage = res.data.content
          this.total = res.data.content.length
        } else if (event == 'second') {
          // this.pageindex.advertisingType = '实体广告位'
          const res = await getAllMap(this.pageindex)
          this.parentMessage = res.data.content
          this.setzulin(res.data.content)
          this.tableData = res.data.content
          this.total = res.data.content.length
        } else if (event == 'third') {
          const res = await changAlls(this.pageindex)
          this.tableData = res.data.content
          this.setzulin(res.data.content)
          this.parentMessage = res.data.content
          this.total = res.data.content.length
        } else if (event == 'fourth') {
          this.parentMessage = []
          this.tableData = []
          this.setzulin([])
        }
      },

      //删除
      async closemsg(item) {

        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') {
              if (this.activeName == 'first') {
                delList({
                  id: item.id
                }).then(res => {
                  this.$message({
                    message: '删除成功',
                    type: 'success'
                  })
                  this.getAll()
                  getAlls(this.pageindex).then((datas) => {

                    this.tableData = datas.data.content
                    this.parentMessage = datas.data.content
                  })

                })
                // await delList({id:item.id})
                //   this.getAll()
              } else if (this.activeName == 'second') {
                deleteMap({
                  id: item.id
                }).then(res => {
                  this.$message({
                    message: '删除成功',
                    type: 'success'
                  })
                  getAllMap(this.pageindex).then((datas) => {
                    this.tableData = datas.data.content
                    this.parentMessage = datas.data.content
                  })
                })
                // await deleteMap({id:item.id})
                // this.pageindex.advertisingType = '实体广告位'
                //  const res =  await getAllMap(this.pageindex)
                // this.tableData = res.data.content
              } else if (this.activeName == 'third') {
                changDel({
                  id: item.id
                }).then(res => {
                  this.$message({
                    message: '删除成功',
                    type: 'success'
                  })
                  changAlls(this.pageindex).then((datas) => {
                    this.tableData = datas.data.content
                    this.parentMessage = datas.data.content
                  })
                })
              } else if (this.activeName == 'fourth') {

              }
              // delList({
              //   id: val.id
              // }).then(res => {
              //   this.getTable(this.chengeTatle)
              // })
              done();
            } else {
              done();
            }
          }
        })



      },

      //查询
      async onSubmit() {
        let obj = {
          pageNumber: 1,
          pageSize: 10,
        }
        if (this.activeName == 'first') {
          obj.shopName = this.formSel.Name
          obj.venueNumber = this.formSel.Number
          obj.belongingRegion = this.formSel.Region
          obj.belongingDepartment = this.formSel.belongingDepartment
          obj.head = this.formSel.head
          const res = await getAlls(obj)
          this.tableData = res.data.content
          this.parentMessage = res.data.content

        } else if (this.activeName == 'second') {
          obj.advertisingName = this.formSel.Name
          obj.id = this.formSel.Number
          const res = await getAllMap(obj)
          this.tableData = res.data.content
          this.parentMessage = res.data.content

        } else if (this.activeName == 'third') {
          obj.venueName = this.formSel.Name
          obj.id = this.formSel.Number
          obj.district = this.formSel.Region
          obj.department = this.formSel.belongingDepartment
          const res = await changAlls(obj)
          this.tableData = res.data.content
          this.parentMessage = res.data.content
        }



      },

      //查看点击
      handleEditForm(item) {

        if (this.activeName == 'first') {
          this.editbgid = item
          this.restype = '商铺'
  zulxin({venueNumber:item.venueNumber}).then(res=>{
          this.lishiData = res.data.content
           console.log(res)
        })
          this.showBian = true
          if (typeof this.editbgid.mapPunctuation == 'string') {
            this.parentMessage = JSON.parse(this.editbgid.mapPunctuation)
          }

        } else if (this.activeName == 'second') {
          this.editbgid = item
          this.restype = '广告位'
  zulxin({venueNumber:item.advertisingSpaceNumber}).then(res=>{
          this.lishiData = res.data
           this.lishiData.map(item=>{
                  item.earnestMoney =this.$decrypt(item.earnestMoney)
                  item.contractAmount =this.$decrypt(item.contractAmount)
                  item.lessorName =this.$decrypt(item.lessorName)
                  item.telephone =this.$decrypt(item.telephone)
                  item.bankAccount =this.$decrypt(item.bankAccount)
                  item.tenantName =this.$decrypt(item.tenantName)
                  item.tenantTelephone =this.$decrypt(item.tenantTelephone)
                  item.tenantBankAccount =this.$decrypt(item.tenantBankAccount)
                })
        })
          this.showBian = true
          if(item.advertisingType == '线上广告位'){
             this.leixing  =true
          }else{
              this.leixing  = false
          }

          if (typeof this.editbgid.mapMarker == 'string') {
            this.parentMessage = JSON.parse(this.editbgid.mapMarker)
          }
        } else if (this.activeName == 'third') {
          this.editbgid = item
          this.restype = '场地'
  zulxin({venueNumber:item.venueSpaceNumber}).then(res=>{
          this.lishiData = res.data
           this.lishiData.map(item=>{
                  item.earnestMoney =this.$decrypt(item.earnestMoney)
                  item.contractAmount =this.$decrypt(item.contractAmount)
                  item.lessorName =this.$decrypt(item.lessorName)
                  item.telephone =this.$decrypt(item.telephone)
                  item.bankAccount =this.$decrypt(item.bankAccount)
                  item.tenantName =this.$decrypt(item.tenantName)
                  item.tenantTelephone =this.$decrypt(item.tenantTelephone)
                  item.tenantBankAccount =this.$decrypt(item.tenantBankAccount)
                })
        })
          this.showBian = true
          if (typeof this.editbgid.mapMarker == 'string') {
            this.parentMessage = JSON.parse(this.editbgid.mapMarker)
          }
        }


      },
      // 查看取消
      colse() {
        this.showBian = false
        this.edit = true
        this.chakanTab = 'first'
        this.fileData = []
        this.getAll()
      },
      //列表编辑
      bianjilist(item) {

        if (this.activeName == 'first') {
          this.editbgid = item
          this.restype = '商铺'
          const fileMsg = {
                name: '文件',
                url: item.otherImageVideos
              }
              // 将文件地址存储在 uploadedFiles 数组中
              this.fileData.push(fileMsg)
          this.showBian = true
          this.$nextTick(() => {
            this.edit = false

          })
          if (typeof this.editbgid.mapPunctuation == 'string') {
            this.parentMessage = JSON.parse(this.editbgid.mapPunctuation)
          }
        } else if (this.activeName == 'second') {
          this.editbgid = item
          this.editbgid.equipmentSizeH = ''
          this.editbgid.equipmentSizeK = ''
          this.editbgid.equipmentSizeG = ''
          this.editbgid.dimensionsH= ''
          this.editbgid.dimensionsK =''
          this.restype = '广告位'
          this.showBian = true
          this.$nextTick(() => {
            this.edit = false

          })
          if(item.advertisingType == '线上广告位'){
             this.leixing  =true
          }else{
              this.leixing  = false
          }
          if (typeof this.editbgid.mapMarker == 'string') {
            this.parentMessage = JSON.parse(this.editbgid.mapMarker)
          }

        } else if (this.activeName == 'third') {
          this.editbgid = item
          this.restype = '场地'
          const fileMsg = {
            name: '文件',
            url: item.otherMedia
          }
          // 将文件地址存储在 uploadedFiles 数组中
          this.fileData.push(fileMsg)
          this.showBian = true
          this.$nextTick(() => {
            this.edit = false

          })
          if (typeof this.editbgid.mapMarker == 'string') {
            this.parentMessage = JSON.parse(this.editbgid.mapMarker)
          }
        } else if (this.activeName == 'fourth') {

        }

      },
      //查看编辑确定
       editpush(formName) {

                 this.$refs.Addrule.validate((valid) => {
              if (valid) {
                if(this.restype =='商铺'){
                  this.editbgid.updateDate = this.updateCurrentTime()
                  if(Object.keys(this.mapData).length != 0){
                    this.editbgid.mapPunctuation = JSON.stringify(this.mapData)
                  }

                  if (this.fileData.length != 0) {
                    this.editbgid.otherImageVideos = this.fileData[0].url
                  }

                  editList(this.editbgid).then(res=>{
                  this.edit = true
                  this.showBian = false
                  this.fileData =[]
                  this.getAll()

                  })
                }else if(this.restype =='广告位'){
                  this.editbgid.updateDate = this.updateCurrentTime()

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

                  ggwedit(this.editbgid).then(res=>{
      this.edit = true
                  this.showBian = false
                  this.getAll()
                  })

                }else{
    this.editbgid.updateDate = ''
    this.editbgid.createDate = ''
    if(Object.keys(this.mapData).length != 0){
      this.editbgid.mapMarker = JSON.stringify(this.mapData)
    }


                  if (this.fileData.length != 0) {
                    this.editbgid.otherMedia = this.fileData[0].url
                  }
                  changedit(this.editbgid).then(res=>{
      this.edit = true
                  this.showBian = false
                  this.fileData =[]
                  this.getAll()
                  })
                }

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


      },
      bianClose(msg) {
        this.showBian = msg
        this.getAll()
      },
      childClose(msg) {
        this.showAdd = msg
        this.getAll()
      },
      //新增
      addbuss() {
        this.fileData = []
        this.showAdd = true

      },

      handleCurrentChange(val) {
        this.currentPage = val
      },
      handleSizeChange(val) {
        this.pageSize = val
      },
      //地图详细
      HandMapItem(item) {
        console.log(item)


        if (this.activeName == 'first') {
          this.editbgid = item
          this.restype = '商铺'

          this.showBian = true
          if (typeof this.editbgid.mapPunctuation == 'string') {
            this.parentMessage = JSON.parse(this.editbgid.mapPunctuation)
          }

        } else if (this.activeName == 'second') {
          this.editbgid = item
          this.restype = '广告位'

          this.showBian = true
          if(item.advertisingType == '线上广告位'){
             this.leixing  =true
          }else{
              this.leixing  = false
          }

          if (typeof this.editbgid.mapMarker == 'string') {
            this.parentMessage = JSON.parse(this.editbgid.mapMarker)
          }
        } else if (this.activeName == 'third') {
          this.editbgid = item
          this.restype = '场地'

          this.showBian = true
          if (typeof this.editbgid.mapMarker == 'string') {
            this.parentMessage = JSON.parse(this.editbgid.mapMarker)
          }
        } else if (this.activeName == 'fourth') {

        }


      },

      //重置按钮
      resetting() {
        this.formSel = {
          Name: '',
          Number: '',
          head:'',
          Region: '',
          leixing: '',
          belongingDepartment: '',
          pageNumber: 1,
          pageSize: 10,
        },
          this.getAll()

      },
      //详情取消
      closeFn(val) {
        this.detbox = false
      },
      //获取地图点击的经纬度
      getChildDate(mapData) {
        this.mapData = mapData
      },
   handleChange(field, value) {
        this.$set(this.editbgid, field, value);
        this.$forceUpdate(); // 强制组件重新渲染
      },
      handleRemove(file, fileList) {
        this.fileData = []
      },
      handleUploadSuccess(response, file, fileList) {
        const fileMsg = {
          name: file.name,
          url: file.response.data.url,
        }
        // 将文件地址存储在 uploadedFiles 数组中
        this.fileData.push(fileMsg);
      },
     daoru(response, file, fileList){
       this.daoData.push(file.raw)
       const formDate = new FormData()
       formDate.append('file', this.daoData[0])
       excelAdd(formDate).then(res => {
          this.getAll()
       })
        },
    }
  }
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style scoped>
  /deep/ .first-column-bg {
    background-color: #f4f4f5 !important;
  }

  .zhuti {
    padding: 0 20px 20px 20px;
    min-height: calc(100vh - 50px - 20px);
    background-color: #Fff;

  }

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

  ::v-deep .xinForm .el-form-item__content {
    line-height: 3;
  }

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

  .formSearch {
    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;
  }


  :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/ .el-form--label-top .el-form-item__label {
    padding: 0;
  }

  .demo-input-suffix {
    display: flex;
    margin-right: 20px;
  }

  .pagination {
    text-align: right;
    line-height: 20px;
  }

  /deep/ .el-pagination__total {
    margin-top: 4px;
  }

  /deep/ .btn-prev {
    position: absolute;
    top: 4px;
    right: 69px;
  }

  /deep/ .el-pager {
    position: absolute;
    top: 4px;
    right: 40px;
  }

  /deep/ .btn-next {
    position: absolute;
    top: 4px;
    right: 10px;
  }

  .dialog_css {
    padding: 0px;
  }

  .dialog_xin {
    padding: 0px;
  }

  /deep/.el-dialog__body {
    padding: 0px;
  }

  /deep/ .el-dialog__header {
    background-color: #fff;
    padding: 0
  }

  /deep/.el-dialog__title {
    color: #000;
  }

  .el-row {


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

  /deep/ .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }


  .avatar {
    width: 108px;
    height: 108px;
    display: block;
  }

  ::v-deep .el-tabs__item.is-active {
    color: #3F9B6A;
    opacity: 1;
  }

  /deep/ .el-tabs__nav-wrap::after {
    background-color: #fff;
  }

  ::v-deep .el-tabs__item:hover {
    color: #3F9B6A;
    cursor: pointer;
    opacity: 1;
  }

  /deep/ .el-tabs__active-bar {
    background-color: #389865;
  }

  /deep/ .el-table_2_column_13 {
    font-weight: 100;
  }

  ::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
  }


  /* ::v-deep .el-steps .el-step__head.is-wait {
  background-color: red; /* 修改为你想要的颜色 */

  /* 修改未进行步骤的描述文字颜色 */
  ::v-deep .el-steps .el-step__description.is-wait {
    color: #999;
    /* 修改为你想要的颜色 */
  }

  ::v-deep .el-col {
    padding: 0 !important;
  }

 .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;
 }


  ::v-deep .editcss {
    font-size: 14px;

    .el-form-item__label {
      color: #AEAEAE;
    }
  }

  ::v-deep .zystyle {
    margin-top: 20px;

    .el-input--suffix .el-input__inner {
      padding: 0;
      border: none;
      color: #3F9B6A;
    }
  }

  .yizu {
    background-color: #4F7AFF;
    width: 5px;
    height: 5px;
  }

  .daizu {
    background-color: #F59A23;
    width: 5px;
    height: 5px;
  }
  .el-row {
    margin-bottom: 16px;
  }
  .duiqi {
    line-height: 40px;
  }
</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>
