<template>
  <div style="background-color:#f7f7f7;padding:10px 10px;">
    <div class="zhuti">
      <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="leixing">
              <el-select v-model="formSel.leixing" placeholder="请选择"
                style="width: 168px;margin-right: 15px">
                <el-option label="无" value="无" />
              </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>
          <div>
            <el-button  @click="onSubmit"
             style="background-color: #3F9B6A;color: #fff;padding:8px 15px;">查询
            </el-button>
            <el-button  @click="resetting"  class="buttonHover"
             style="color: #000;border: 1px solid #DBDBDB;background-color: #fff;">重置
            </el-button>
          </div>
        </div>
       <div style="margin-bottom:20px;"><el-button  @click="addbuss"  style="background-color: #3F9B6A;color: #fff;padding:8px 15px;" icon="el-icon-circle-plus-outline">新增</el-button></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="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="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" >
                        <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]" layout="total,prev, pager,next" :total="total "
                          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                      </div>
                           </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" prop="id" v-if="activeName == 'second'">
                     </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="venueNumber" 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'">
                       <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]"  layout="total,prev, pager,next" :total="total "
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </div>
                     </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="场地类型" 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">
                         <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]"  layout="total,prev, pager,next" :total="total "
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </div>
                     </el-table>

              </el-tab-pane>
              <!-- <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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.region}}</div>
                                <el-input placeholder="请输入" class="moren" v-model="secondData.region" v-else></el-input>
                              </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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.jzxs}}</div>
                                <el-input placeholder="请输入" class="moren" v-model="secondData.jzxs" v-else></el-input>
                              </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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.sjsymj}}</div>
                                <el-input placeholder="请输入" class="moren" v-model="secondData.sjsymj" v-else></el-input>
                              </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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.resourceNumber}}</div>
                                <el-input placeholder="请输入" class="moren" v-model="secondData.resourceNumber" v-else></el-input>
                              </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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.gsbm}}</div>
                                <el-input placeholder="请输入" class="moren" v-model="secondData.gsbm" v-else></el-input>
                              </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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.zyss}}</div>
                                <el-input placeholder="请输入" class="moren" v-model="secondData.zyss" v-else></el-input>
                              </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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.fzr}}</div>
                                <el-input placeholder="请输入" class="moren" v-model="secondData.fzr" v-else></el-input>
                              </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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.czqk}}</div>
                        <el-input placeholder="请输入" class="moren" v-model="secondData.czqk" v-else></el-input>
                      </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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.zlr}}</div>
                        <el-input placeholder="请输入" class="moren" v-model="secondData.zlr" v-else></el-input>
                      </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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.telephone}}</div>
                        <el-input placeholder="请输入" class="moren" v-model="secondData.telephone" v-else></el-input>
                      </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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.zlzt}}</div>
                        <el-input placeholder="请输入" class="moren" v-model="secondData.zlzt" v-else></el-input>
                      </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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.ztmc}}</div>
                        <el-input placeholder="请输入" class="moren" v-model="secondData.ztmc" v-else></el-input>
                      </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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.fr}}</div>
                        <el-input placeholder="请输入" class="moren" v-model="secondData.fr" v-else></el-input>
                      </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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.zq}}</div>
                        <el-input placeholder="请输入" class="moren" v-model="secondData.zq" v-else></el-input>
                      </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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.zj}}</div>
                        <el-input placeholder="请输入" class="moren" v-model="secondData.zj" v-else></el-input>
                      </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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.htbh}}</div>
                                    <el-input placeholder="请输入" class="moren" v-model="secondData.htbh" v-else></el-input>
                                  </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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.bdh}}</div>
                                    <el-input placeholder="请输入" class="moren" v-model="secondData.bdh" v-else></el-input>
                                  </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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.htmc}}</div>
                                    <el-input placeholder="请输入" class="moren" v-model="secondData.htmc" v-else></el-input>
                                  </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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.htje}}</div>
                                    <el-input placeholder="请输入" class="moren" v-model="secondData.htje" v-else></el-input>
                                  </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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.bzj}}</div>
                                    <el-input placeholder="请输入" class="moren" v-model="secondData.bzj" v-else></el-input>
                                  </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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.htqdrq}}</div>
                                    <el-input placeholder="请输入" class="moren" v-model="secondData.htqdrq" v-else></el-input>
                                  </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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.htzzrq}}</div>
                                    <el-input placeholder="请输入" class="moren" v-model="secondData.htzzrq" v-else></el-input>
                                  </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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.qzrq}}</div>
                                    <el-input placeholder="请输入" class="moren" v-model="secondData.qzrq" v-else></el-input>
                                  </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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.czrmc}}</div>
                                    <el-input placeholder="请输入" class="moren" v-model="secondData.czrmc" v-else></el-input>
                                  </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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.telephone}}</div>
                                    <el-input placeholder="请输入" class="moren" v-model="secondData.telephone" v-else></el-input>
                                  </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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.yhzh}}</div>
                                    <el-input placeholder="请输入" class="moren" v-model="secondData.yhzh" v-else></el-input>
                                  </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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.tenantName}}</div>
                                    <el-input placeholder="请输入" class="moren" v-model="secondData.tenantName" v-else></el-input>
                                  </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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.czrlxdh}}</div>
                                    <el-input placeholder="请输入" class="moren" v-model="secondData.czrlxdh" v-else></el-input>
                                  </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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.czryhzh}}</div>
                                    <el-input placeholder="请输入" class="moren" v-model="secondData.czryhzh" v-else></el-input>
                                  </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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.spbh}}</div>
                                    <el-input placeholder="请输入" class="moren" v-model="secondData.spbh" v-else></el-input>
                                  </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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.spmc}}</div>
                                    <el-input placeholder="请输入" class="moren" v-model="secondData.spmc" v-else></el-input>
                                  </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 v-if="edit" style="height: 42px;line-height: 42px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                {{secondData.spdz}}
                                    </div>
                                    <el-input placeholder="请输入" class="moren" v-model="secondData.spdz" v-else></el-input>
                                  </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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.spmj}}</div>
                                    <el-input placeholder="请输入" class="moren" v-model="secondData.spmj" v-else></el-input>
                                  </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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.spyt}}</div>
                                    <el-input placeholder="请输入" class="moren" v-model="secondData.spyt" v-else></el-input>
                                  </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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.jyxm}}</div>
                                    <el-input placeholder="请输入" class="moren" v-model="secondData.jyxm" v-else></el-input>
                                  </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 v-if="edit" style="height: 42px;line-height: 42px;text-decoration: underline;">{{secondData.htfj}}</div>
                                    <el-input placeholder="请输入" class="moren" v-model="secondData.htfj" v-else></el-input>
                                  </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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.xxtjsj}}</div>
                        <el-input placeholder="请输入" class="moren" v-model="secondData.xxtjsj" v-else></el-input>
                      </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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.xxzje}}</div>
                        <el-input placeholder="请输入" class="moren" v-model="secondData.xxzje" v-else></el-input>
                      </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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.xstjsj}}</div>
                            <el-input placeholder="请输入" class="moren" v-model="secondData.xstjsj" v-else></el-input>
                          </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 v-if="edit" style="height: 42px;line-height: 42px;">{{secondData.xszje}}</div>
                            <el-input placeholder="请输入" class="moren" v-model="secondData.xszje" v-else></el-input>
                          </el-form-item>
                        </el-form>
                      </el-col>
                      <el-col :span="8">
                      </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-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'></addziyuan>
<ziyuanList :showBian="showBian"  :restype="restype" :listData="listData" @bianClose='bianClose'></ziyuanList>

  </div>
</template>

<script>
  import {
    getAlls,
    addList,
    editList,
    delList,
    likeGet,
    changAlls,
    changadd,
    changedit,
    changDel,
  } from '../../api/information'
  import {
    getAlls as  getAllMap,
    addList as addMap,
    delList as  deleteMap,
    likeGet as likeGetMap
  } from '../../api/map1'
  import MapContainer from "@/components/MapContainer/MapContainer"
  import addziyuan from "./addziyuan"
  import ziyuanList from "./ziyuanList"
  export default {
    name: 'information',
    data() {
      return {
        edit: true, //编辑
        formInline: {},
        detbox:false,//详情
        activeName:'first',//切换列表
        mapSelNum:{
          belongingRegionNum:'0',
          belongingDepartmentNum:'0',
          architecturalFormNum:'0',
          rentalStatusNum:'0',
          jyqkNum:'0',
        },
        formSel: {
          Name:'',
          Number:'',
          Region:'',
          leixing:'',
          belongingDepartment:'',
          pageNumber: 1,
          pageSize: 10,
        },
        rentedCount :0,//待租
        pendingCount :0,//已租
        listof:[],
        currentPage: 1,
        total: 100,
        flag: false,
        pageSize: 10,
        tableData: [],
         editbgid: {
            shopName:'',
            venueNumber:'',
            houseNumber:'',
            architecturalForm:'',
            actualUsableArea:'',
            belongingRegion:'',
            belongingDepartment:'',
            head:'',
            detailedLocation:'',
            mapPunctuation:'',
            shopDescription:'',
            otherImageVideos:'',
            displayMainImage:'',
            name:''
            },
        pageindex: {
          pageNumber: 1,
          pageSize: 10,
        },
           ruleForm: {
                 shopName:'',
                 venueNumber:'',
                 houseNumber:'',
                 architecturalForm:'',
                 actualUsableArea:'',
                 belongingRegion:'',
                 belongingDepartment:'',
                 head:'',
                 detailedLocation:'',
                 mapPunctuation:'',
                 shopDescription:'',
                },
        rules: {
                  shopName: [
                    { required: true, message: '请输入商铺名称', trigger: 'blur' },
                    { min: 3, max: 15, message: '长度在 3 到 15 个字符', 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' },
                  ],
                },
                //传地图数据
                parentMessage:[],
                // 详情
                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,
                listData:{},
                restype:'商铺',
                xiangTabs:'first',
      }


    },
  components: {MapContainer,addziyuan,ziyuanList},
    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}:${seconds}`;
          },
          //查询租赁列表
          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
              }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
              }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
              }else if(event == 'fourth'){
                 this.parentMessage = []
                 this.tableData =[]
                 this.setzulin([])
              }
          },
      //列表编辑
      bianjilist(item){
          //  this.edit = false
          // this.detbox = false

          if(this.activeName == 'first'){
               this.editbgid.id = item.id
               this.editbgid.shopName = item.shopName
               this.editbgid.mapPunctuation = item.mapPunctuation
               this.editbgid.belongingRegion = item.belongingRegion
               this.editbgid.detailedLocation = item.detailedLocation
               this.editbgid.displayMainImage = item.displayMainImage
               this.editbgid.otherImageVideos = item.otherImageVideos
               this.editbgid.shopDescription = item.shopDescription
               this.$router.push({ path: '/detect/information', query: { bian: this.editbgid }})
                   }else if(this.activeName == 'second'){
            this.editbgid.advertisingName = item.advertisingName
            this.editbgid.advertisingType = item.advertisingType
            this.editbgid.rotationOrder = item.rotationOrder
            this.editbgid.affiliation = item.affiliation
            this.editbgid.detailedLocation = item.detailedLocation
            this.editbgid.dimensions = item.dimensions
            this.editbgid.size = item.size
            this.editbgid.uploadFormat = item.uploadFormat
            this.editbgid.deviceType = item.deviceType
            this.editbgid.advertisingMaterial = item.advertisingMaterial
            this.editbgid.equipmentSize = item.equipmentSize
            this.editbgid.locationDiagram = item.locationDiagram
          this.$router.push({ path: '/detect/map', query: { bian: this.editbgid }})
                  }else if(this.activeName == 'third'){

                  }else if(this.activeName == 'fourth'){

                  }

      },
      //删除
    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.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 => {
                    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 => {
                    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
          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) {
        this.editbgid.id = item.id
        if(this.activeName == 'first'){
           this.editbgid = item
          this.restype = '商铺'
          this.listData =  this.editbgid
          this.showBian = true
          // this.$router.push({ path: '/detect/information', query: { chakan: this.editbgid }})
         }else if(this.activeName == 'second'){
           this.editbgid = item
           this.restype = '广告位'
           this.listData =  this.editbgid
           this.showBian = true
        }else if(this.activeName == 'third'){
            this.editbgid = item
           this.restype = '场地'
           this.listData =  this.editbgid
           this.showBian = true
        }else if(this.activeName == 'fourth'){

        }



        // this.detbox = false

      },
      //查看编辑确定
     async editpush(){
        await editList(this.editbgid)
        this.detbox = true
        this.getAll()
      },
      bianClose(msg){
        this.showBian = msg
      this.getAll()
      },
      childClose(msg) {
        this.showAdd = msg
         this.getAll()
      },
        //新增
        addbuss(){
          this.showAdd = true

        },

      handleCurrentChange(val) {
        this.currentPage = val
      },
      handleSizeChange(val) {
        this.pageSize = val
      },
      //地图详细
HandMapItem(item){
  this.secondData = {
    region:'',
    jzxs:'框剪结构',
    sjsymj:'',
    resourceNumber:'',
    gsbm:'',
    zyss:'',
    jztz:'点击查看',
    fzr:'',
    czqk:'',
    zlr:'',
    telephone:'',
    zszt:'../../assets/images/empty.png',
    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:'',
  },
  this.detbox = true
  // let items =  JSON.parse(item)
  this.secondData.region =  item.belongingRegion || ''
  this.secondData.jzxs = item.architecturalForm || ''
     this.secondData.sjsymj = item.actualUsableArea || ''
      this.secondData.resourceNumber = item.venueNumber || ''
      this.secondData.gsbm = item.detailedLocation || ''
      this.secondData.zszt = item.displayMainImage  || item.locationDiagram || '../../assets/images/empty.png'
},

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

      },
      //详情取消
      closeFn(val) {
          this.detbox = false
          },

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

  /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{
  position: relative;
  padding-left: 10px;
  font-weight: 600;
}

.titles::before{
  content: '';
  width: 2px;
  height: 10px;
  background-color: #3F9B6A;
    position: absolute;
    top: 2px;
    left: 0;
}
::v-deep .editcss{
  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;
}
</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>
