<template>
  <div style="background-color:#f7f7f7;padding:10px 10px;">
    <div class="zhuti" v-if="ggXin && detbox">
      <div style="height:58px;line-height:58px;">
        <div style="color:#0006"> <span>招商资源监测</span> <span style="padding:0 5px;">></span> <span
            style="color:#000000e6">商铺基本信息</span></div>
      </div>
      <div>
        <!-- 搜索 -->
        <div class="formSearch">
          <el-form :inline="true" :model="formSel">
            <!-- <el-form-item label="商铺编号" prop="venueNumber">
              <el-select v-model="formSel.venueNumber" placeholder="请选择" style="width: 168px;margin-right: 15px">
                <el-option :label="item.venueNumber" :value="item.venueNumber" v-for="(item,index) in this.tableData"
                  :key="index" />
              </el-select>
            </el-form-item> -->
            <el-form-item label="商铺名称" prop="shopName">
              <el-select v-model="formSel.shopName" placeholder="请选择" style="width: 168px;margin-right: 15px">
                <el-option :label="item.shopName" :value="item.shopName" v-for="(item,index) in this.tableData"
                  :key="index" />
              </el-select>
            </el-form-item>
            <el-form-item label="所属区域" prop="belongingRegion">
              <el-select v-model="formSel.belongingRegion" 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="architecturalForm">
              <el-select v-model="formSel.architecturalForm" placeholder="请选择" style="width: 168px;margin-right: 15px">
                <el-option label="框剪结构" value="框剪结构"></el-option>
                <el-option label="区域二" value="区域二"></el-option>
              </el-select>
            </el-form-item>

            <!--     <el-input v-model="formSel.findLike" placeholder="请输入关键词"  suffix-icon="el-icon-search"
              style="width: 180px;margin-right: 15px" /> -->
          </el-form>
          <div> <el-button @click="onSubmit" style="background-color: #3F9B6A;color: #fff;padding:8px 15px;">查询
            </el-button>
            <el-button @click="resetting" class="buttonHover"
              style="color: #606266;border: 1px solid #DBDBDB;background-color: #fff;">重置
            </el-button>
          </div>
        </div>
        <div style="margin-bottom:20px;">
          <el-button @click="addbuss" style="background-color: #3F9B6A;color: #fff;padding:8px 15px;"
            icon="el-icon-circle-plus-outline">新增</el-button>
        </div>
        <!-- 表格 -->
        <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
          :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
          tooltip-effect="dark custom-tooltip-effect">
          <el-table-column label="序号" min-width="80">
            <template slot-scope="scope">
              {{scope.$index +1 }}
            </template>
          </el-table-column>
          <el-table-column label="编号" prop="venueNumber" 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>

          </el-table-column>
          <el-table-column label="所属区域" prop="belongingRegion" min-width="150" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="建筑形式" prop="architecturalForm" min-width="150" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="detailedLocation" label="详细地址" min-width="300" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="实际使用面积" prop="actualUsableArea" min-width="150" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="归属部门" prop="belongingDepartment" min-width="150" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="负责人" prop="head" min-width="120" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="租赁状态" prop="rentalStatus" min-width="120" show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.rentalStatus=='0'?'待租':'已租'}}
            </template>
          </el-table-column>
          <el-table-column label="发布状态" prop="publishStatus" min-width="150" show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.publishStatus=='0'?'待发布':scope.row.publishStatus=='1'?'待审核':'已审核'}}
            </template>
          </el-table-column>
          <el-table-column label="租赁到期时间" prop="leaseExpirationDate" min-width="250" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="操作" min-width="250" 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>
              <div class="tableBtn greens" @click="closemsg(scope.row)">发布</div>
              <div class="tableBtn greens" @click="closemsg(scope.row)">下架</div>
            </template>
          </el-table-column>
        </el-table>

        <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>
      </div>
    </div>
    <!-- 新增············································· -->
    <div class="zhuti" v-if="ggXin == 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 style="margin-top: 30px;">
        <div class="titles">
          基础信息
        </div>

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

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

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

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

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

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="负责人" prop="head">
                  <el-input v-model="ruleForm.head" placeholder="请输入" style="margin-top:5px;" maxlength="20">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="详细位置" prop="detailedLocation">
                  <el-input v-model="ruleForm.detailedLocation" placeholder="请输入" style="margin-top:5px;"
                    maxlength="100">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="地图标点" prop="mapPunctuation">
                  <div style="width: 100%;height: 300px;">
                    <map-mark :sendChildDate="getChildDate"></map-mark>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="建筑图纸" prop="architecturalDrawings">
                  <upimg v-model="ruleForm.architecturalDrawings" :limit="5" :fileSize="1"></upimg>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="商铺描述" prop="shopDescription">
                  <el-input type="textarea" v-model="ruleForm.shopDescription" style="margin-top:5px;" placeholder="请输入"
                    maxlength="200"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="展示主图" prop="displayMainImage">
                  <upimg v-model="ruleForm.displayMainImage" :limit="1" :fileSize="1"></upimg>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="其他图片/视频" prop="otherImageVideos">
                  <el-upload class="upload-demo" ref="upload" :on-remove="handleRemove" :action="uploadFileUrl"
                    :on-success="handleUploadSuccess" :file-list="fileData" :auto-upload="true">
                    <el-button style="background-color: #fff;color: #3F9B6A;border: 1px solid #dcdfe6;"
                      class="buttonHover" v-if="fileData.length==0">+点击上传</el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item>
                  <div style="margin-top: 20px">
                    <el-button @click="addpush('ruleForm')"
                      style="background-color: #3F9B6A;color: #fff;">确定</el-button>
                    <el-button @click="colse(1)" class="buttonHover"
                      style="color: #606266;border: 1px solid #DBDBDB;background-color: #fff;">取消</el-button>

                  </div>

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





          </el-form>
        </div>
      </div>
    </div>
    <!-- 查看········································· -->
    <div class="zhuti" v-if='detbox == false'>
      <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="xiangTab">
        <el-tab-pane label="基础信息" name="first">
          <div style="margin-top: 30px;" class="editcss">
            <div class="titles">
              基础信息
            </div>
            <div style="padding: 20px;">
              <el-form :model="editbgid" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
                <el-row :gutter="20">
                  <el-col :span="8">
                    <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="8">
                    <el-form-item label="场地编号" prop="venueNumber">
                      <div class="duiqi">{{editbgid.venueNumber}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <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-row>
                <el-row :gutter="20">

                  <el-col :span="8">
                    <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-col :span="8">
                    <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="8">
                    <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="8">
                    <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="8">
                    <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-col :span="8">
                    <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-row>
                <el-row :gutter="20">

                  <el-col :span="8">
                    <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-col :span="8">
                    <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="8">
                    <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="24">
                    <el-form-item label="地图标点" prop="mapPunctuation">
                      <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="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>
        </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="padding: 20px;">
              <el-form :model="editbgid" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="招商方案名称" prop="shopName">
                      <div class="duiqi">{{editbgid.shopName}}</div>

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

                </el-row>
                <el-row :gutter="20">

                  <el-col :span="24">
                    <el-form-item label="招商政策与条件" prop="architecturalForm">
                      <div class="duiqi">{{editbgid.architecturalForm}}</div>

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

                  <el-col :span="24">
                    <el-form-item label="方案概述" prop="belongingGreenwaySection">
                      <div class="duiqi">{{editbgid.belongingGreenwaySection}}</div>

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

                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="附件信息" prop="floorSpace">
                      <div class="duiqi">{{editbgid.floorSpace}}</div>

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



              </el-form>
            </div>
            <div class="titles">
              策略方案
            </div>
            <div style="padding: 20px;">
              <el-form :model="editbgid" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="策略名称" prop="shopName">
                      <div class="duiqi">{{editbgid.shopName}}</div>

                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="适用资源" prop="shopName">
                      <div class="duiqi">{{editbgid.shopName}}</div>

                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="是否出租" prop="shopName">
                      <div class="duiqi">{{editbgid.shopName}}</div>

                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="经营类型" prop="shopName">
                      <div class="duiqi">{{editbgid.shopName}}</div>

                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="租金价格" prop="shopName">
                      <div class="duiqi">{{editbgid.shopName}}</div>

                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="付款周期" prop="shopName">
                      <div class="duiqi">{{editbgid.shopName}}</div>

                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="租赁时段" prop="shopName">
                      <div class="duiqi">{{editbgid.shopName}}</div>

                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="免租条件" prop="shopName">
                      <div class="duiqi">{{editbgid.shopName}}</div>

                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="免租期" prop="shopName">
                      <div class="duiqi">{{editbgid.shopName}}</div>

                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="付款日" prop="shopName">
                      <div class="duiqi">{{editbgid.shopName}}</div>

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


                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="优惠政策" prop="floorSpace">
                      <div class="duiqi">{{editbgid.floorSpace}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="其他说明" prop="floorSpace">
                      <div class="duiqi">{{editbgid.floorSpace}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="租赁记录" name="third" v-if="edit">
          <div style="margin-top: 30px;" class="editcss">
            <div class="titles">
              租赁记录
            </div>
            <div style="padding: 20px;">
              <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
                tooltip-effect="dark custom-tooltip-effect">
                <el-table-column label="承租商家" min-width="80">

                </el-table-column>
                <el-table-column label="租赁期限" prop="houseNumber" min-width="80" show-overflow-tooltip>

                </el-table-column>
                <el-table-column label="经营类型" prop="actualUsableArea" min-width="150" show-overflow-tooltip>
                </el-table-column>

                <el-table-column label="租金/周期" prop="head" min-width="120" show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="租赁状态" prop="rentalStatus" min-width="120" show-overflow-tooltip>
                  <template slot-scope="scope">
                    {{scope.row.rentalStatus=='0'?'待租':'已租'}}
                  </template>
                </el-table-column>
                <el-table-column label="当前状态" prop="publishStatus" min-width="150" show-overflow-tooltip>
                  <template slot-scope="scope">
                    {{scope.row.publishStatus=='0'?'待发布':scope.row.publishStatus=='1'?'待审核':'已审核'}}
                  </template>
                </el-table-column>

                <el-table-column label="操作" min-width="160" fixed="right">
                  <template slot-scope="scope">
                    <div @click="handleEditForm(scope.row)" class="tableBtn greens">查看</div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-tab-pane>
        <!--   <el-tab-pane label="人流情况" name="fourth" v-if="edit">
            <div style="margin-top: 30px;" class="editcss">
              <div class="titles">
                人流量情况
              </div>
             </div>
          </el-tab-pane>
          <el-tab-pane label="物业维护记录" name="five" v-if="edit">
            <div style="margin-top: 30px;" class="editcss">
              <div class="titles">
                物业维护记录
              </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(2)" 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,
    lvdaoduan,
    gongyuan
  } from '../../api/information';
  import {
    getToken,
    removeToken
  } from '@/utils/auth'
  import {
    uploadUrl
  } from '@/utils/request'
  import MapMark from "@/components/MapContainer/MapMark";
  import MapXian from "@/components/MapContainer/MapXian";
  import upimg from "@/components/ImageUpload/index";
  import upvidio from "@/components/fujianUpload/index";
  import axios from 'axios';
  export default {
    name: 'information',
    data() {
      return {
        uploadFileUrl: uploadUrl, // 请求地址
        fileData: [],
        xiangTab: 'first',
        edit: true, //编辑
        formInline: {},
        ggXin: true, //新增
        detbox: true, //查看
        formSel: {
          venueNumber: '',
          shopName: '',
          belongingRegion: '',
          architecturalForm: '',
          pageNumber: 1,
          pageSize: 10,
        },
        currentPage: 1,
        total: 0,
        flag: false,
        pageSize: 10,
        tableData: [],
        editbgid: {

        },
        pageindex: {
          pageNumber: 1,
          pageSize: 10,
        },
        ruleForm: {
          shopName: '',
          venueNumber: '',
          houseNumber: '',
          architecturalForm: '',
          actualUsableArea: '',
          belongingRegion: '',
          belongingDepartment: '',
          head: '',
          detailedLocation: '',
          mapPunctuation: '',
          shopDescription: '',
          displayMainImage: '',
          architecturalDrawings: '',
          otherImageVideos: '',
          belongingGreenwaySection: '',
          belongingParkTrail: '',
          floorSpace: '',
        },
        rules: {
          shopName: [{
            required: true,
            message: '请输入商铺名称',
            trigger: 'blur'
          }, ],
          houseNumber: [{
            required: true,
            message: '请输入门牌号',
            trigger: 'blur'
          }, ],
          architecturalForm: [{
            required: true,
            message: '请选择建筑形式',
            trigger: 'change'
          }],
          actualUsableArea: [{
            required: true,
            message: '请输入实际使用面积',
            trigger: 'blur'
          }],
          belongingRegion: [{
            required: true,
            message: '请选择所属区域',
            trigger: 'change'
          }],
          head: [{
            required: true,
            message: '请输入负责人',
            trigger: 'blur'
          }, ],
          detailedLocation: [{
            required: true,
            message: '请输入详细位置',
            trigger: 'blur'
          }, ],
          displayMainImage: [{
            required: true,
            message: '请上传主图',
            trigger: 'blur'
          }, ],
          belongingGreenwaySection: [{
            required: true,
            message: '请选择所属绿道段',
            trigger: 'change'
          }],
          // belongingParkTrail:[
          //   { required: true, message: '请选择所属公园/步道', trigger: 'change' }
          // ],
        },
        //地图标点的经纬度
        mapData: {},
        parentMessage: {},
        lvdaoList: [],
        gongyuanList: [],
        biangongyuanList: []
      }
    },
    components: {
      MapMark,
      MapXian,
      upimg,
      upvidio
    },
    watch: { // 监听,当路由发生变化的时候执行
      '$route.query.xin': {
        handler(toPath, fromPath) {
          if (this.$route.query.xin) {
            this.addbuss()
          }
          if (this.$route.query.chakan) {
            this.handleEditForm(this.$route.query.chakan)
          }
          if (this.$route.query.bian) {
            this.bianjilist(this.$route.query.bian)
          }

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

    },

    mounted() {

      this.getAll()

    },

    methods: {
      onCreated(editor) {
        this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
      },
      //查询全数据
      async getAll() {
        const res = await getAlls(this.pageindex)
        this.tableData = res.data.content
        this.total = res.data.content.length
        const lvdao = await lvdaoduan()
        const gongyaun = await gongyuan()
        this.lvdaoList = lvdao.data
        this.biangongyuanList = gongyaun.data
      },
      async gongyuan(value) {
        const gongyaun = await gongyuan()
        this.gongyuanList = gongyaun.data.filter(item => item.superior == value);
      },
      async gongyuan1(value) {
        const gongyaun = await gongyuan()
        this.biangongyuanList = gongyaun.data.filter(item => item.superior == value);
      },
      //获取当前时间
      updateCurrentTime() {
        const now = new Date();
        const year = now.getFullYear();
        const month = (now.getMonth() + 1).toString().padStart(2, '0');
        const day = now.getDate().toString().padStart(2, '0');
        const hours = now.getHours().toString().padStart(2, '0');
        const minutes = now.getMinutes().toString().padStart(2, '0');
        const seconds = now.getSeconds().toString().padStart(2, '0');

        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      },
      //查看编辑
      bianji() {
        if (this.edit) {
          this.edit = false

        }
      },
      //列表编辑
      bianjilist(item) {
        this.fileData = []
        this.detbox = false
        this.editbgid = item

        if (typeof item.mapPunctuation == 'string') {
          this.parentMessage = JSON.parse(item.mapPunctuation)
        } else {
          this.parentMessage = item.mapPunctuation
        }
        console.log(this.parentMessage)
        const fileMsg = {
          name: '文件',
          url: item.otherImageVideos
        }
        // 将文件地址存储在 uploadedFiles 数组中
        this.fileData.push(fileMsg)
        this.$nextTick(() => {
          this.edit = false

        })
      },
      //新增确定
      addpush(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.fileData.length != 0) {
              this.ruleForm.otherImageVideos = this.fileData[0].url
            }
            this.ruleForm.createDate = this.updateCurrentTime()
            this.ruleForm.mapPunctuation = JSON.stringify(this.mapData)
            this.ruleForm.rentalStatus = 0
            this.ruleForm.publishStatus = 0

            addList(this.ruleForm).then(res => {
              this.fileData = []
              this.ggXin = true
              this.getAll()
            })

          } else {
            this.$message({
              message: '请填写完整信息',
              type: 'error'
            })
            return false;
          }
        })
      },
      //取消
      colse(val) {
        this.xiangTab = 'first'
        if (val == 1) {
          this.ggXin = true
        } else if (val == 2) {
          this.detbox = true
          this.edit = true
        }
      },
      //删除
      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') {
              delList({
                id: item.id
              }).then(res => {
                this.$message({
                  message: '删除成功',
                  type: 'success'
                })
                this.getAll()
                done();
              })
            } else {
              done();
            }
          }
        })
      },

      //查询
      async onSubmit() {
        const res = await getAlls(this.formSel)
        this.tableData = res.data.content
        this.total = res.data.content.length
      },
      //查看点击
      handleEditForm(item) {

        this.editbgid = item
        if (typeof item.mapPunctuation == 'string') {
          this.parentMessage = JSON.parse(item.mapPunctuation)
        } else {
          this.parentMessage = item.mapPunctuation
        }
        this.detbox = false

      },
      //查看编辑确定
      async editpush() {
        if (this.fileData.length != 0) {
          this.editbgid.otherImageVideos = this.fileData[0].url
        }
        this.editbgid.updateDate = this.updateCurrentTime()
        if (Object.keys(this.mapData).length != 0) {
          this.editbgid.mapPunctuation = JSON.stringify(this.mapData)
        }
        await editList(this.editbgid)
        this.fileData = []
        this.detbox = true
        this.edit = true
        this.getAll()
      },
      //新增
      addbuss() {
        this.fileData = []
        this.ggXin = false
        this.ruleForm = {
          shopName: '',
          venueNumber: '',
          houseNumber: '',
          architecturalForm: '',
          actualUsableArea: '',
          belongingRegion: '',
          belongingDepartment: '',
          head: '',
          detailedLocation: '',
          mapPunctuation: '',
          shopDescription: '',
          belongingGreenwaySection: '',
          belongingParkTrail: '',
          floorSpace: ''
        }
      },

      handleCurrentChange(val) {
        this.currentPage = val
      },
      handleSizeChange(val) {
        this.pageSize = val
      },
      //获取地图点击的经纬度
      getChildDate(mapData) {
        this.mapData = mapData

      },
      //重置按钮
      resetting() {
        this.formSel = {
            venueNumber: '',
            shopName: '',
            belongingRegion: '',
            architecturalForm: '',
            pageNumber: 1,
            pageSize: 10,
          },
          this.sel_input = ''
        this.getAll()
      },
      lvdaoSel(vaule) {
        // console.log(vaule)
        this.editbgid.belongingParkTrail = ''
        this.ruleForm.belongingParkTrail = ''
        this.gongyuan(vaule)
      },
      lvdaoBian(vaule) {
        this.editbgid.belongingParkTrail = ''
        this.gongyuan1(vaule)
      },
      handleRemove(file, fileList) {
        this.fileData = []
      },
      handleUploadSuccess(response, file, fileList) {
        const fileMsg = {
          name: file.name,
          url: file.response.data.url,
        }
        // 将文件地址存储在 uploadedFiles 数组中
        this.fileData.push(fileMsg);
      },
    }
  }
</script>
<style 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;
  }

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



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


  ::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: #0006;
    }
  }

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

  ::v-deep .el-input-group__append {
    height: 32px;
  }
</style>
