<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" :model="formSel">
            <el-form-item label="商户名称">
              <el-input v-model="formSel.leaseName" placeholder="请输入" style="width:168px;" />
            </el-form-item>
            <el-form-item label="合同名称">
              <el-input v-model="formSel.cereContractInformation.contractName" placeholder="请输入" style="width:168px;" />
            </el-form-item>
            <el-form-item label="签订时间">
              <el-date-picker style="width:160px;margin-right:5px" v-model="formSel.cereContractInformation.contractSigningDate"
                value-format="yyyy-M-d"   type="daterange" range-separator="-" start-placeholder=""
                end-placeholder="" prefix-icon="none" >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="起租日期">
              <el-date-picker style="width:160px;margin-right:5px" v-model="formSel.cereContractInformation.leaseStartDate"
                value-format="yyyy-M-d"   type="daterange" range-separator="-" start-placeholder=""
                end-placeholder="" prefix-icon="none" >
              </el-date-picker>
            </el-form-item>
          </el-form>
          <div>
            <el-button @click="onSubmit" style="background-color: #3F9B6A;color: #fff">查询
            </el-button>
            <el-button @click="resetting" class="buttonHover"
              style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">重置
            </el-button>
          </div>
        </div>
        <div style="margin-bottom: 20px;">
          <el-button @click="addbuss(1)" style="background-color: #3F9B6A;color: #fff;padding:8px 15px;"
            icon="el-icon-circle-plus-outline">新增</el-button>
          <!-- <el-button @click="" style="background-color: #3F9B6A;color: #fff">批量导入</el-button> -->
        </div>
        <!-- 表格 -->

        <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
          :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
          <el-table-column label="合同编号" min-width="150" >
            <template slot-scope="scope">
              {{scope.row.cereContractInformation.contractNumber}}

            </template>
          </el-table-column>
          <el-table-column label="合同名称"  min-width="200">
            <template slot-scope="scope">
             {{scope.row.cereContractInformation.contractName}}

            </template>
          </el-table-column>
          <el-table-column label="合同金额" min-width="100">
          <template slot-scope="scope">
           {{scope.row.cereContractInformation.contractAmount}}

          </template>
          </el-table-column>
          <el-table-column label="签订日期"  min-width="150">
          <template slot-scope="scope">
           {{scope.row.cereContractInformation.contractSigningDate}}

          </template>
          </el-table-column>
          <el-table-column label="起租日期"  min-width="300">
            <template slot-scope="scope">
             {{scope.row.cereContractInformation.leaseStartDate}}

            </template>
          </el-table-column>
          <el-table-column  label="出租人名称" min-width="100">
          <template slot-scope="scope">
           {{scope.row.cereContractInformation.lessorName}}

          </template>
          </el-table-column>
          <el-table-column label="承租人名称"  min-width="150">
            <template slot-scope="scope">
             {{scope.row.cereContractInformation.tenantName}}

            </template>
          </el-table-column>
          <el-table-column label="商铺编号"  min-width="150">
            <template slot-scope="scope">
             {{scope.row.cereContractInformation.shopNumber}}
            </template>
          </el-table-column>
          <el-table-column  label="合同类型" min-width="150">
            <template slot-scope="scope">
             {{scope.row.cereContractInformation.contractType}}

            </template>
          </el-table-column>
          <el-table-column prop="contractStatus" label="合同状态" min-width="150">
            <template slot-scope="scope">
              <span v-if='scope.row.cereContractInformation.contractStatus == 1'>使用中</span>
              <span v-else-if='scope.row.cereContractInformation.contractStatus == 2'>往期合同</span>
              <span v-else-if='scope.row.cereContractInformation.contractStatus == 3'>已终止</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" min-width="300">
            <template slot-scope="scope">
              <div @click="details(scope.row)" class="tableBtn greens">查看</div>
              <div @click="addbuss(2,scope.row)" class="tableBtn greens">编辑</div>
             <div @click="biangeng(scope.row)" class="tableBtn greens">变更</div>
              <div @click="xuyue(scope.row)" class="tableBtn greens">续约</div>
              <div @click="zhongzhi(scope.row)" class="tableBtn greens">终止</div>
              <div @click="handleDelete(scope.row)" class="tableBtn greens">删除</div>
            </template>
          </el-table-column>
        </el-table>
        <div class="fenye">
          <el-pagination :hide-on-single-page='flag' background small :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]" layout="prev, pager, next,total" :total="total "
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
        <!-- 新增 -->
        <el-dialog :visible.sync="ggXin" custom-class='bian_css xiang_css' style="padding: 0;" width="75%" center
          :close-on-click-modal="false" :show-close="false">
          <div style="padding:20px;">
            <div style="font-size: 14px;padding-bottom: 20px;color: #000;">租赁信息</div>
            <div style="margin-bottom: 10px;">
              <el-descriptions class="margin-top" :column="3" border :labelStyle="labelStyle"
               :contentStyle="contentStyle">
                <el-descriptions-item>
                  <template slot="label">
                    租赁人
                  </template>
                  <el-input v-model="formInline.tenant" placeholder="请输入" style="width:100%;" />
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    意向租期
                  </template>
                  <el-input v-model="formInline.intendedLeaseTerm" placeholder="请输入" style="width:100%;" />
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    意向租金
                  </template>
                  <el-input v-model="formInline.intentionalRent" placeholder="请输入" style="width:100%;" />
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    租赁主体
                  </template>
                  <el-input v-model="formInline.leasingEntity" placeholder="请输入" style="width:100%;" />
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    经营者
                  </template>
                  <el-input v-model="formInline.operator" placeholder="请输入" style="width:100%;" />
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    状态
                  </template>
                  <el-input v-model="formInline.state" placeholder="请输入" style="width:100%;" />
                </el-descriptions-item>
              </el-descriptions>
            </div>
            <div style="">
              <el-descriptions class="margin-top" :column="3" border :labelStyle="labelStyle"
                :contentStyle="contentStyle">
                <el-descriptions-item>
                  <template slot="label">
                    租赁类型
                  </template>
                  <el-input v-model="formInline.leaseType" placeholder="请输入" style="width:100%;" />
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    编号
                  </template>
                  <el-input v-model="formInline.leaseCode" placeholder="请输入" style="width:100%;" />
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    名称
                  </template>
                  <el-input v-model="formInline.leaseName" placeholder="请输入" style="width:100%;" />
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    行政区
                  </template>
                  <el-input v-model="formInline.administrativeRegion" placeholder="请输入" style="width:100%;" />
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    地址
                  </template>
                  <el-input v-model="formInline.leaseAddress" placeholder="请输入" style="width:100%;" />
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    所属主体
                  </template>
                  <el-input v-model="formInline.owner" placeholder="请输入" style="width:100%;" />
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    负责人
                  </template>
                  <el-input v-model="formInline.commander" placeholder="请输入" style="width:100%;" />
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    联系电话
                  </template>
                  <el-input v-model="formInline.telephone" placeholder="请输入" style="width:100%;" />
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    范围
                  </template>
                  <el-input v-model="formInline.scope" placeholder="请输入" style="width:100%;" />
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    面积
                  </template>
                  <el-input v-model="formInline.area" placeholder="请输入" style="width:100%;" />
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    建成时间
                  </template>
                  <el-input v-model="formInline.completionTime" placeholder="请输入" style="width:100%;" />
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    房屋类型
                  </template>
                  <el-input v-model="formInline.houseType" placeholder="请输入" style="width:100%;" />
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    主要设施
                  </template>
                  <el-input v-model="formInline.mainFacilities" placeholder="请输入" style="width:100%;" />
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    平面图
                  </template>
                  <!-- <el-input v-model="formInline.planeFigure" placeholder="请输入" style="width:100%;"/> -->
                  <el-upload class="upload-demo" ref="upload" :on-remove="pingimgRemove" :action="uploadFileUrl"
                    :on-success="pingimgUploadSuccess" :file-list="pingimgData" :auto-upload="true">
                    <div slot="trigger" style="color:#3f9b6a" v-if="pingimgData.length==0"> +点击上传</div>
                  </el-upload>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    收费标准
                  </template>
                  <el-input v-model="formInline.feeStandards" placeholder="请输入" style="width:100%;" />
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    标签
                  </template>
                  <el-input v-model="formInline.label" placeholder="请输入" style="width:100%;" />
                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">
                    宣传视频
                  </template>
                  <el-upload class="video-uploader" :action="uploadFileUrl" :on-success="videoSuccess"
                    :before-upload="videoUpload" :auto-upload="true" :file-list="videoData"
                    accept="video/mp4, video/ogg, video/*">
                    <div slot="trigger" style="color:#3f9b6a"> +选择视频</div>
                    <!-- <div slot="tip" class="el-upload__tip">只能上传.mp4/.ogg格式视频文件</div> -->
                  </el-upload>
                  <!-- <el-input v-model="formInline.promotionVideo" placeholder="请输入" style="width:100%;"/> -->
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    宣传图片
                  </template>
                  <!-- <el-input v-model="formInline.promotionImage" placeholder="请输入" style="width:100%;"/> -->
                  <el-upload class="upload-demo" ref="upload" :on-remove="xuanimgRemove" :action="uploadFileUrl"
                    :on-success="xuanimgUploadSuccess" :file-list="xuanimgData" :auto-upload="true">
                    <div slot="trigger" style="color:#3f9b6a" v-if="xuanimgData.length==0"> +点击上传</div>
                  </el-upload>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    备注信息
                  </template>
                  <el-input v-model="formInline.notes" placeholder="请输入" style="width:100%;" />
                </el-descriptions-item>
              </el-descriptions>
            </div>
            <div style="font-size: 14px;padding: 20px 0;color: #000;">合同录入</div>
            <div>
              <el-descriptions class="margin-top" :column="3" border :labelStyle="labelStyle"
               :contentStyle="contentStyle">
                <el-descriptions-item>
                  <template slot="label">
                    合同编号
                  </template>
                  <div v-if="index ==2">{{heForm.contractNumber}}</div>
                  <el-input v-model="heForm.contractNumber"  style="width:100%;" v-else placeholder="请输入"/>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    标段号
                  </template>
                  <div v-if="index ==2">{{heForm.sectionNumber}}</div>
                  <el-input v-model="heForm.sectionNumber"  style="width:100%;" v-else placeholder="请输入"/>

                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    合同名称
                  </template>
                  <div v-if="index ==2">{{heForm.contractName}}</div>
                  <el-input v-model="heForm.contractName"  style="width:100%;" v-else placeholder="请输入"/>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    合同金额
                  </template>
                  <div v-if="index ==2">{{heForm.contractAmount}}</div>
                  <el-input v-model="heForm.contractAmount"  style="width:100%;" v-else placeholder="请输入"/>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    保证金
                  </template>
                  <div v-if="index ==2">{{heForm.contractAmount}}</div>
                  <el-input v-model="heForm.contractAmount"  style="width:100%;" v-else placeholder="请输入"/>

                  <!-- <el-input v-model="heForm.earnestMoney" placeholder="请输入" style="width:100%;" /> -->
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    合同签订日期
                  </template>
                  <div v-if="index ==2">{{heForm.contractSigningDate}}</div>
                  <el-input v-model="heForm.contractSigningDate"  style="width:100%;" v-else placeholder="请输入"/>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    合同终止日期
                  </template>
                  <div v-if="index ==2">{{heForm.contractTerminationDate}}</div>
                  <el-input v-model="heForm.contractTerminationDate"  style="width:100%;" v-else placeholder="请输入"/>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    起租日期
                  </template>
                  <div v-if="index ==2">{{heForm.leaseStartDate}}</div>
                  <el-input v-model="heForm.leaseStartDate"  style="width:100%;" v-else placeholder="请输入"/>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    出租人名称
                  </template>
                  <div v-if="index ==2">{{heForm.lessorName}}</div>
                  <el-input v-model="heForm.lessorName"  style="width:100%;" v-else placeholder="请输入"/>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    联系电话
                  </template>
                  <div v-if="index ==2">{{heForm.telephone}}</div>
                  <el-input v-model="heForm.telephone"  style="width:100%;" v-else placeholder="请输入"/>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    银行账号
                  </template>
                  <div v-if="index ==2">{{heForm.bankAccount}}</div>
                  <el-input v-model="heForm.bankAccount"  style="width:100%;" v-else placeholder="请输入"/>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    承租人名称
                  </template>
                  <div v-if="index ==2">{{heForm.tenantName}}</div>
                  <el-input v-model="heForm.tenantName"  style="width:100%;" v-else placeholder="请输入"/>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    承租人联系电话
                  </template>
                  <div v-if="index ==2">{{heForm.tenantTelephone}}</div>
                  <el-input v-model="heForm.tenantTelephone"  style="width:100%;" v-else placeholder="请输入"/>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    承租人银行账号
                  </template>
                  <div v-if="index ==2">{{heForm.tenantBankAccount}}</div>
                  <el-input v-model="heForm.tenantBankAccount"  style="width:100%;" v-else placeholder="请输入"/>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    商铺编号
                  </template>
                  <div v-if="index ==2">{{heForm.shopNumber}}</div>
                  <el-input v-model="heForm.shopNumber"  style="width:100%;" v-else placeholder="请输入"/>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    商铺名称
                  </template>
                  <div v-if="index ==2">{{heForm.shopName}}</div>
                  <el-input v-model="heForm.shopName"  style="width:100%;" v-else placeholder="请输入"/>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    商铺地址
                  </template>
                  <div v-if="index ==2">{{heForm.shopAddress}}</div>
                  <el-input v-model="heForm.shopAddress"  style="width:100%;" v-else placeholder="请输入"/>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    商铺面积
                  </template>
                  <div v-if="index ==2">{{heForm.shopArea}}</div>
                  <el-input v-model="heForm.shopArea"  style="width:100%;" v-else placeholder="请输入"/>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    商铺业态
                  </template>
                  <div v-if="index ==2">{{heForm.storeFormats}}</div>
                  <el-input v-model="heForm.storeFormats"  style="width:100%;" v-else placeholder="请输入"/>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    经营项目
                  </template>
                  <div v-if="index ==2">{{heForm.businessProjects}}</div>
                  <el-input v-model="heForm.businessProjects"  style="width:100%;" v-else placeholder="请输入"/>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    合同附件
                  </template>
                  <el-upload class="video-uploader" :action="uploadFileUrl" :on-remove="hefuRemove"
                    :on-success="hefuSuccess" :auto-upload="true" :file-list="hefuData" v-if="index==1">
                    <div slot="trigger" style="color:#3f9b6a"> +点击上传</div>
                  </el-upload>
                </el-descriptions-item>
              </el-descriptions>
            </div>
            <div style="padding-top:20px;display:flex;justify-content: flex-end;">
              <el-button class="buttonHover" style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
                @click="closeFn(1)">返回</el-button>
              <!-- <el-button @click="" style="background-color: #3F9B6A;color: #fff" v-if="index == 1">导入</el-button> -->
              <el-button @click="addCheck(1)" style="background-color: #3F9B6A;color: #fff"
                v-if="index == 1">提交</el-button>
              <el-button @click="addCheck(2)" style="background-color: #3F9B6A;color: #fff"
                v-if="index == 2">确认</el-button>
              <el-button @click="addCheck(3)" style="background-color: #3F9B6A;color: #fff"
                v-if="index == 3">确认续约</el-button>
            </div>
          </div>
        </el-dialog>
        <!-- 新增 -->

      </div>

    </div>
    <!-- 终止 -->
    <el-dialog :visible.sync="zhongzhiShow" custom-class="bian_css" style="padding: 0;" width="60%" center
      :close-on-click-modal="false" :show-close="false">
      <div style="padding:20px;">
        <div style="font-size: 14px;padding-bottom: 20px;color: #000;">合同终止</div>
        <el-form ref="form" :model="zhong" label-width="120px">
          <el-form-item label="甲方">
            <el-input v-model="zhong.lessorName" disabled></el-input>
          </el-form-item>
          <el-form-item label="乙方">
            <el-input v-model="zhong.tenantName" disabled></el-input>
          </el-form-item>
          <el-form-item label="合同编号">
            <el-input v-model="zhong.contractNumber" disabled></el-input>
          </el-form-item>
          <el-form-item label="起止时间">
            <el-input v-model="zhong.leaseStartDate" disabled></el-input>
          </el-form-item>
          <el-form-item label="申请人">
            <el-input v-model="zhong.shenqr"></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="zhong.tenantTelephone"></el-input>
          </el-form-item>

          <el-form-item label="终止原因">
            <el-input type="textarea" v-model="zhong.textarea" :rows="4"></el-input>
          </el-form-item>
          <el-form-item label="终止类型">
            <el-select v-model="zhong.leixing" placeholder="请选择" style="width: 80%;">
              <el-option label="正常终止" value="正常终止" />
              <el-option label="商家终止" value="商家终止" />
            </el-select>
          </el-form-item>
        </el-form>
        <div style="display: flex;justify-content: flex-end;">
          <el-button @click="zhongzhiShow=false" class="buttonHover"
            style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
          <el-button @click="addCheck(4)" style="background-color: #3F9B6A;color: #fff">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 续约 -->
    <el-dialog :visible.sync="xuyueShow" custom-class="bian_css" style="padding: 0;" width="60%" center
      :close-on-click-modal="false" :show-close="false">
      <div style="padding:20px;">
        <div style="font-size: 14px;padding-bottom: 20px;color: #000;">续约申请</div>
        <el-form ref="form" :model="xuyueData" label-width="120px">
          <el-form-item label="甲方">
            <el-input v-model="xuyueData.lessorName" disabled></el-input>
          </el-form-item>
          <el-form-item label="乙方">
            <el-input v-model="xuyueData.tenantName" disabled></el-input>
          </el-form-item>
          <el-form-item label="合同编号">
            <el-input v-model="xuyueData.contractNumber" disabled></el-input>
          </el-form-item>
          <el-form-item label="起止时间">
            <el-input v-model="xuyueData.leaseStartDate" disabled></el-input>
          </el-form-item>
          <el-form-item label="合同金额">
            <el-input v-model="xuyueData.contractAmount"></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="xuyueData.tenantTelephone"></el-input>
          </el-form-item>

          <el-form-item label="申请原因">
            <el-input type="textarea" v-model="zhong.textarea" :rows="4"></el-input>
          </el-form-item>

        </el-form>
        <div style="display: flex;justify-content: flex-end;">
          <el-button @click="xuyueShow=false" class="buttonHover"
            style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
          <el-button @click="xuQue()" style="background-color: #3F9B6A;color: #fff">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 变更 -->
    <el-dialog :visible.sync="biangengShow" custom-class="bian_css" style="padding: 0;" width="60%" center
      :close-on-click-modal="false" :show-close="false" :close-on-press-escape="false">
      <div style="padding:20px;">
        <div style="font-size: 14px;padding-bottom: 20px;color: #000;">合同变更管理</div>
        <el-form ref="form" :model="biangengData" label-width="120px">
          <el-form-item label="甲方">
            <el-input v-model="biangengData.lessorName" disabled></el-input>
          </el-form-item>
          <el-form-item label="乙方">
            <el-input v-model="biangengData.tenantName" disabled></el-input>
          </el-form-item>
          <el-form-item label="合同编号">
            <el-input v-model="biangengData.contractNumber" disabled></el-input>
          </el-form-item>
        </el-form>
        <div style="margin:20px;border:1px solid #EAEAEA">
          <div
            style="display: flex;flex-wrap: wrap;justify-content: space-between;padding: 5px 10px;background-color: #FAFAFA;align-items: center;">
            <div style="line-height: 28px;">变更内容</div>
            <div class="greens" @click="bianAdd">
              添加
            </div>
          </div>
          <div style="padding: 20px 10px 10px 20px;">
            <el-table :data="biangengTab.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
              :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
              <el-table-column label="原合同内容" width="200" prop="contct">

              </el-table-column>
              <el-table-column label="变更后" prop="bianConct" width="200">
              </el-table-column>
              <el-table-column label="变更原因" prop="bianYuan" width="200">

              </el-table-column>
              <el-table-column label="备注" prop="beizhu" width="200">
              </el-table-column>
              <el-table-column prop="contactInformation" label="操作" width="250">
                <template slot-scope="scope">
                  <div @click="bianEdit(scope.row)" class="tableBtn greens">编辑</div>
                  <div @click="bianDel(scope.$index)" class="tableBtn greens">删除</div>
                </template>
              </el-table-column>


            </el-table>
          </div>
        </div>
        <div style="display: flex;justify-content: flex-end;">
          <el-button @click="biangengShow=false" class="buttonHover"
            style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
          <el-button @click="xuQue()" style="background-color: #3F9B6A;color: #fff">确定</el-button>
        </div>
      </div>
      <el-dialog :visible.sync="bianAddShow" custom-class="bian_css" style="padding: 0;" width="50%" center
        :close-on-click-modal="false" :show-close="false" :close-on-press-escape="false" append-to-body>
        <div style="padding:20px;">
          <div style="font-size: 14px;padding-bottom: 20px;color: #000;">变更内容</div>
          <el-form ref="form" :model="bianList" label-width="120px">
            <el-form-item label="原合同内容">
              <el-input v-model="bianList.contct"></el-input>
            </el-form-item>
            <el-form-item label="变更后">
              <el-input v-model="bianList.bianConct"></el-input>
            </el-form-item>
            <el-form-item label="变更原因">
              <el-input v-model="bianList.bianYuan"></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input type="textarea" v-model="bianList.beizhu" :rows="4"></el-input>
            </el-form-item>
          </el-form>
          <div style="display: flex;justify-content: flex-end;">
            <el-button @click="bianAddShow=false" class="buttonHover"
              style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
            <el-button @click="bianCheck" style="background-color: #3F9B6A;color: #fff">确定</el-button>
          </div>
        </div>
      </el-dialog>
    </el-dialog>
    <!-- 详情框 -->
    <el-dialog :visible.sync="detbox" custom-class='bian_css' style="padding: 0;" width="75%" center
      :close-on-click-modal="false" :show-close="false">
      <div style="padding:20px;">
        <div style="font-size: 14px;padding-bottom: 20px;color: #000;">租赁信息</div>
        <div style="margin-bottom: 10px;">
          <el-descriptions class="margin-top" :column="3" border :labelStyle="labelStyle"
           :contentStyle="contentStyle">
            <el-descriptions-item>
              <template slot="label">
                租赁人
              </template>
              {{xiangData.tenant}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                意向租期
              </template>
              {{xiangData.intendedLeaseTerm}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                意向租金
              </template>
              {{xiangData.intentionalRent}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                租赁主体
              </template>
              {{xiangData.leasingEntity}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                经营者
              </template>
              {{xiangData.operator}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                状态
              </template>
              {{xiangData.state}}
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div style="">
          <el-descriptions class="margin-top" :column="3" border  :labelStyle="labelStyle"
            :contentStyle="contentStyle">
            <el-descriptions-item>
              <template slot="label">
                租赁类型
              </template>
              {{xiangData.leaseType}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                编号
              </template>
              {{xiangData.leaseCode}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                名称
              </template>
              {{xiangData.leaseName}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                行政区
              </template>
              {{xiangData.administrativeRegion}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                地址
              </template>
              {{xiangData.leaseAddress}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                所属主体
              </template>
              {{xiangData.owner}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                负责人
              </template>
              {{xiangData.commander}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                联系电话
              </template>
              {{xiangData.telephone}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                范围
              </template>
              {{xiangData.scope}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                面积
              </template>
              {{xiangData.area}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                建成时间
              </template>
              {{xiangData.completionTime}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                房屋类型
              </template>
              {{xiangData.houseType}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                主要设施
              </template>
              {{xiangData.mainFacilities}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                平面图
              </template>
              <img :src="xiangData.planeFigure" alt="">
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                收费标准
              </template>
              {{xiangData.feeStandards}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                标签
              </template>
              {{xiangData.label}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                宣传视频
              </template>
              <img :src="xiangData.promotionVideo" alt="">
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                宣传图片
              </template>
              <img :src="xiangData.promotionImage" alt="">
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                备注信息
              </template>
              {{xiangData.notes}}
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div style="font-size: 14px;padding: 20px 0;color: #000;">合同信息</div>
        <div>
          <el-descriptions class="margin-top" :column="3" border :labelStyle="labelStyle"
            :contentStyle="contentStyle">
            <el-descriptions-item>
              <template slot="label">
                合同编号
              </template>
              {{heData.contractNumber}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                标段号
              </template>
              {{heData.sectionNumber}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                合同名称
              </template>
              {{heData.contractName}}

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                合同金额
              </template>
              {{heData.contractAmount}}

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                保证金
              </template>
              {{heData.earnestMoney}}

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                合同签订日期
              </template>
              {{heData.contractSigningDate}}

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                合同终止日期
              </template>
              {{heData.contractTerminationDate}}

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                起租日期
              </template>
              {{heData.leaseStartDate}}

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                出租人名称
              </template>
              {{heData.lessorName}}

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                联系电话
              </template>
              {{heData.telephone}}

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                银行账号
              </template>
              {{heData.bankAccount}}

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                承租人名称
              </template>
              {{heData.tenantName}}

            </el-descriptions-item>
           <el-descriptions-item>
              <template slot="label">
                承租人联系电话
              </template>
              {{heData.tenantTelephone}}

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                承租人银行账号
              </template>
              {{heData.tenantBankAccount}}

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                商铺编号
              </template>
              {{heData.shopNumber}}

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                商铺名称
              </template>
              {{heData.shopName}}

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                商铺地址
              </template>
              {{heData.shopAddress}}

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                商铺面积
              </template>
              {{heData.shopArea}}

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                商品业态
              </template>
              {{heData.storeFormats}}

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                经营项目
              </template>
              {{heData.businessProjects}}

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                合同附件
              </template>
              {{heData.appendicesContract}}

            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div style="padding:20px 0;">
          续约记录
          <el-select v-model="detaiList.renewalTime  || ''" placeholder="" style="margin: 0 10px;">
            <el-option :label="'续约时间' + (detaiList.renewalTime || '')" :value="detaiList.renewalTime || ''"></el-option>
          </el-select>
          操作人：
          </select>
        </div>
        <div>
          <el-descriptions class="margin-top" :column="3" border :labelStyle="labelStyle"
            :contentStyle="contentStyle">
            <el-descriptions-item>
              <template slot="label">
                合同编号
              </template>

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                标段号
              </template>

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                合同名称
              </template>

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                合同金额
              </template>

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                保证金
              </template>

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                合同签订日期
              </template>

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                合同终止日期
              </template>

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                起租日期
              </template>

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                出租人名称
              </template>

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                联系电话
              </template>

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                银行账号
              </template>

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                承租人名称
              </template>

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                承租人联系电话
              </template>

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                承租人银行账号
              </template>

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                商铺编号
              </template>

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                商铺名称
              </template>

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                商铺地址
              </template>

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                商铺面积
              </template>

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                商品业态
              </template>

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                经营项目
              </template>

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                合同附件
              </template>

            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div style="padding-top:20px;display:flex;justify-content: flex-end;">
          <el-button class="buttonHover" style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
            @click="closeFn(2)">返回</el-button>
          <!-- <el-button @click="" style="background-color: #3F9B6A;color: #fff">审批节点</el-button> -->

        </div>
      </div>

    </el-dialog>

    <!-- 合同 -->
    <!-- <el-dialog title="合同信息" :visible.sync="hetongBox" custom-class='dialog_css' style="padding: 0;" width="88%" center
      :close-on-click-modal="false" :show-close="false">
      <div style="display: flex;">
        <div style="width: 100%;">
          <div style="width: 100%;">
            <div style="padding: 0px 20px 0 0;">

              <el-table :data="hetongData"
                :header-cell-style="{fontSize: '12px', backgroundColor: '#fff',fontWeight: 'normal'}" :border="true"
                style="width: 100%;margin: auto;">
                <el-table-column class-name="first-column-bg" label="合同编号" prop="name" min-width="12%">
                </el-table-column>
                <el-table-column :label="hetongNum" prop="names" min-width="20%">

                </el-table-column>
                <el-table-column class-name="first-column-bg" label="标段号" prop="shun" min-width="12%">

                </el-table-column>
                <el-table-column :label="bdNum" prop="shuns" min-width="20%">

                </el-table-column>
                <el-table-column class-name="first-column-bg" label="合同名称" prop="duan" min-width="12%">

                </el-table-column>
                <el-table-column :label="hetongName" prop="duans" min-width="20%">

                </el-table-column>
              </el-table>


            </div>
          </div>
          <div style="width: 100%;">
            <div
              style="font-size: 16px;font-weight: 600;padding: 30px  0 20px 0 ;color: #000;display: flex;flex-wrap: wrap;">
              <div style="font-size:14px;">
                续约记录
                <el-select v-model="detaiList.renewalTime" placeholder="" style="margin: 0 10px;">
                  <el-option :label="'续约时间' + detaiList.renewalTime" :value="detaiList.renewalTime"></el-option>
                </el-select>
                操作人：王五
                </select>
              </div>

            </div>
            <div style="padding: 0px 20px 0 0;">
              <el-table :data="tableData5"
                :header-cell-style="{fontSize: '12px', backgroundColor: '#fff',fontWeight: 'normal'}" :border="true"
                style="width: 100%;margin: auto;">
                <el-table-column class-name="first-column-bg" label="合同编号" prop="name" min-width="12%">
                </el-table-column>
                <el-table-column :label="hetongNum" prop="names" min-width="20%">

                </el-table-column>
                <el-table-column class-name="first-column-bg" label="标段号" prop="shun" min-width="12%">

                </el-table-column>
                <el-table-column :label="bdNum" prop="shuns" min-width="20%">

                </el-table-column>
                <el-table-column class-name="first-column-bg" label="合同名称" prop="duan" min-width="12%">

                </el-table-column>
                <el-table-column :label="hetongName" prop="duans" min-width="20%">

                </el-table-column>
              </el-table>


            </div>
          </div>

          <div
            style="margin-top: 50px;border: 1px solid #000;width: 99%;padding:10px;display:flex;justify-content: flex-end;">

            <el-button type="primary"
              style="background-color: #3F739B;color: #fff;border-color:#3F9B6A;width: 75px;height: 35px;line-height: 0px;">编辑</el-button>
            <el-button type="primary"
              style="background-color: #22C4A7;color: #fff;border-color:#3F9B6A;width: 75px;height: 35px;line-height: 0px;">下载</el-button>
            <el-button type="primary"
              style="color: #000;border-color:#3F9B6A;background-color: #fff;width: 75px;height: 35px;line-height: 0px;"
              @click="closeFn(2)">取消</el-button>

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

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


</template>

<script>
  import {
    async
  } from 'q'
  import axios from 'axios'
  import {
    uploadUrl
  } from '@/utils/request'
  import {
    contractGetAll,
    contractDel,
    contractAdd,
    updateList,
    queryById,
    cereLeasingByPage,
    cereLeasingEdit,
    cereLeasingAdd,
    cereLeasingDel
  } from '../../../api/manage.js'
  export default {
    name: 'manage',
    data() {
      return {
        uploadFileUrl: uploadUrl, // 请求地址
        hetongBox: false, //合同
        detbox: false, //详情
        leixing: true, //切换
        bianAddShow: false, //新增变更
        index: 1,
        currentPage: 1,
        total: 100,
        flag: false,
        pageSize: 10,
        ggXin: false,
        formInline: {
          tenant: '',
          intendedLeaseTerm: '',
          intentionalRent: '',
          leasingEntity: '',
          operator: '',
          state: '',
          leaseType: '',
          leaseCode: '',
          leaseName: '',
          administrativeRegion: '',
          leaseAddress: '',
          owner: '',
          commander: '',
          telephone: '',
          scope: '',
          area: '',
          completionTime: '',
          houseType: '',
          mainFacilities: '',
          planeFigure: '',
          feeStandards: '',
          label: '',
          promotionVideo: '',
          promotionImage: '',
          notes: '',
        }, //租赁信息字段
        tableData: [{
          id:1,
        }],
        formSel: {
          leaseName:'',
          cereContractInformation:{
            contractName:'',
            contractSigningDate:[],
            leaseStartDate:[],
          },
        pageNumber: 1,
        pageSize: 10,
        },
        pageindex: {
          pageNumber: 1,
          pageSize: 10,
        },
        bianjiBox: 1,
        chengeTatle: 1,
        zhong: {
          lessorName:'',
          tenantName:'',
          contractNumber:'',
          leaseStartDate:'',
          shenqr:'',
          tenantTelephone:'',
          textarea:'' ,//原因
          leixing:''//终止类型
        }, //终止
        detaiList: {}, //续约记录
        heForm: {
          contractNumber: '', //合同对应的ID
          sectionNumber: '',
          contractName: '',
          contractAmount: '',
          earnestMoney: '',
          contractSigningDate: '',
          contractTerminationDate: '',
          leaseStartDate: '',
          lessorName: '',
          telephone: '',
          bankAccount: '',
          tenantName: '',
          tenantTelephone: '',
          tenantBankAccount: '',
          shopNumber: '',
          shopName: '',
          shopAddress: '',
          shopArea: '',
          storeFormats: '',
          businessProjects: '',
          appendicesContract: '',
          renewalTime: '', //续约时间
          associatedEvents: '', //关联事件
          relatedMerchants: '', //关联商家
          contractType: '', //合同类型
          contractStatus: '', //合同状态
          dataStatus: '1', //数据状态（1.使用中  2.往期合同 3.已终止）
        }, //合同字段
        zhongzhiShow: false, //终止框
        xuyueShow: false, //续约框
        biangengShow: false, //变更框
        videoData: [], //上传视频
        xuanimgData: [], //宣传图片
        pingimgData: [], //平面图
        hefuData: [], //合同附件
        contentStyle:{
          width:'20%',
          height:'42px',
        },
        labelStyle:{
          width:'150px',
          height:'42px',
          color:'#000',
        },
        xiangData:{},
        heData:{},
        xuyueData:{
          lessorName:'',
           tenantName:'',
           contractNumber:'',
           leaseStartDate:'',
          contractAmount:'',
           tenantTelephone:'',
           textarea:'',
        },
biangengData:{
  lessorName:'',
  tenantName:'',
  contractNumber:'',
},
biangengTab:[],
bianList:{
  contct:'',
  bianConct:'',
  bianYuan:'',
  beizhu:''
},
biangengPan:false,


      }
    },
    created() {
      this.getAll()
    },
    computed: {

    },
    methods: {
      chenge(val) {
        this.formSel = {
          leaseName:'',
          cereContractInformation:{
            contractName:'',
            contractSigningDate:[],
            leaseStartDate:[],
          },
        pageNumber: 1,
        pageSize: 10,
        }
        this.leixing = !this.leixing
        this.chengeTatle = val
      },
      async getAll(val) {
        const res = await cereLeasingByPage(this.pageindex)
        this.tableData = res.data.content
        this.total = res.data.content.length

      },

      // 新增确定按钮
      addCheck(val) {
        // 1：新增录入 2：变更 3：续约 4：终止

        if (val == 1) {
            if(this.hefuData.length!=0){
              this.heForm.appendicesContract =  JSON.stringify(this.hefuData[0])
            }
          this.heForm.createDate = this.currentTime()
          contractAdd(this.heForm).then(res => {
            this.formInline.contractNumber = res.data.contractNumber
            this.formInline.createDate = this.currentTime()
            cereLeasingAdd(this.formInline).then(res => {
              this.getAll()
            })
          })
        } else if (val == 2) {
          this.heForm.updateDate = ''
          this.heForm.createDate =  this.currentTime()
        updateList(this.heForm).then(res=>{
           this.formInline.contractNumber = res.data.contractNumber
               this.formInline.updateDate = ''
            cereLeasingEdit(this.formInline).then(item=>{

            })
        })



        } else if (val == 3) {


        } else {
          // await cereLeasingDel({id:this.zhong.id,dataStatus:'3'})
        }


        this.ggXin = false

      },
      // 获取时间
      currentTime() {
          let date = new Date();
          let year = date.getFullYear();
          let month = date.getMonth() + 1; // 月份从0~11，所以加一
          let day = date.getDate();
          let hours = date.getHours();
          let minutes = date.getMinutes();
          let seconds = date.getSeconds();

          // 为月、日、时、分、秒添加前导零（如果需要）
          month = month < 10 ? '0' + month : month;
          day = day < 10 ? '0' + day : day;
          hours = hours < 10 ? '0' + hours : hours;
          minutes = minutes < 10 ? '0' + minutes : minutes;
          seconds = seconds < 10 ? '0' + seconds : seconds;

          // 拼接日期和时间字符串
          let strDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
          return strDate;
      },

      //删除记录按钮
       handleDelete(val) {
              const h = this.$createElement;
                      this.$msgbox({
                        title: '消息',
                        message: h('p', null, [
                          h('span', null, '是否删除当前记录 '),
                        ]),
                        showCancelButton: true,
                        showClose:false,
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        customClass:'oe-dialog-btn',
                        beforeClose: (action, instance, done) => {
                          if (action === 'confirm') {

                            cereLeasingDel({id:val.id}).then(res=>{
                               this.getAll()
                              done();
                            })
                          } else {
                            done();
                          }
            }
            })
      },
      //详情
      details(val) {
        this.xiangData = val
        this.heData = val.cereContractInformation
        this.detbox = true

      },
      handleSizeChange(val) {
        this.pageSize = val
      },
      handleCurrentChange(val) {
        this.currentPage = val
      },
      addbuss(val, item) {
        this.index = val
        this.detbox = false

        if (val == 1) {
        this.formInline= {
           tenant: '',
           intendedLeaseTerm: '',
           intentionalRent: '',
           leasingEntity: '',
           operator: '',
           state: '',
           leaseType: '',
           leaseCode: '',
           leaseName: '',
           administrativeRegion: '',
           leaseAddress: '',
           owner: '',
           commander: '',
           telephone: '',
           scope: '',
           area: '',
           completionTime: '',
           houseType: '',
           mainFacilities: '',
           planeFigure: '',
           feeStandards: '',
           label: '',
           promotionVideo: '',
           promotionImage: '',
           notes: '',
         }//租赁信息字段
        this.heForm={
           contractNumber: '', //合同对应的ID
           sectionNumber: '',
           contractName: '',
           contractAmount: '',
           earnestMoney: '',
           contractSigningDate: '',
           contractTerminationDate: '',
           leaseStartDate: '',
           lessorName: '',
           telephone: '',
           bankAccount: '',
           tenantName: '',
           tenantTelephone: '',
           tenantBankAccount: '',
           shopNumber: '',
           shopName: '',
           shopAddress: '',
           shopArea: '',
           storeFormats: '',
           businessProjects: '',
           appendicesContract: '',
           renewalTime: '', //续约时间
           associatedEvents: '', //关联事件
           relatedMerchants: '', //关联商家
           contractType: '', //合同类型
           contractStatus: '', //合同状态
           dataStatus: '1', //数据状态（1.使用中  2.往期合同 3.已终止）
         } //合同字段
        } else if (val == 2) {
        this.heForm = item.cereContractInformation
        const { cereContractInformation, ...rest } = item
        this.formInline = rest
        } else {

        }
this.ggXin = true

      },
      closeFn(val) {
        this.bianjiBox = 1
        if (val == 1) {
          this.ggXin = false
        } else {
          this.detbox = false
        }
      },
      // 详情编辑
      async bianji() {
        if (this.bianjiBox == 1) {
          this.bianjiBox = 2
        } else {
          this.bianjiBox = 1

          let res = await cereLeasingEdit(formList)
          console.log(res)
          this.detbox = false
        }

      },
      //查看合同
      lookHetong(val) {
        this.hetongBox = true
      },
      // 查询按钮
      async onSubmit() {
        let page ={
          leaseName:this.formSel.leaseName,
            cereContractInformation:{
              contractName:this.formSel.cereContractInformation.contractName,
              contractSigningDate:[],
              leaseStartDate:[],
            },
          pageNumber: 1,
          pageSize: 10,
        }
        page.cereContractInformation.contractSigningDate =this.formSel.cereContractInformation.contractSigningDate.join(',')
  page.cereContractInformation.leaseStartDate =this.formSel.cereContractInformation.leaseStartDate.join(',')

        const res = await cereLeasingByPage(page)
        this.tableData = res.data.content
        this.total = res.data.content.length

      },
      //重置按钮
      resetting() {
        this.formSel = {
          leaseName:'',
          cereContractInformation:{
            contractName:'',
            contractSigningDate:[],
            leaseStartDate:[],
          },
        pageNumber: 1,
        pageSize: 10,
        },
          this.getAll()
      },
      zhongzhi(item) {
        this.zhongzhiShow = true
        this.zhong.lessorName = item.cereContractInformation.lessorName
        this.zhong.tenantName = item.cereContractInformation.tenantName
        this.zhong.contractNumber = item.cereContractInformation.contractNumber
        this.zhong.leaseStartDate = item.cereContractInformation.leaseStartDate
        this.zhong.tenantTelephone = item.cereContractInformation.tenantTelephone
      },
      xuyue(item) {
        this.xuyueShow = true
        this.xuyueData.lessorName = item.cereContractInformation.lessorName
        this.xuyueData.tenantName = item.cereContractInformation.tenantName
        this.xuyueData.contractNumber = item.cereContractInformation.contractNumber
        this.xuyueData.leaseStartDate = item.cereContractInformation.leaseStartDate
        this.xuyueData.contractAmount = item.cereContractInformation.contractAmount
        this.xuyueData.tenantTelephone = item.cereContractInformation.tenantTelephone
      },
      biangeng(item) {
        this.biangengShow = true
          this.biangengData.lessorName = item.cereContractInformation.lessorName
          this.biangengData.tenantName= item.cereContractInformation.tenantName
          this.biangengData.contractNumber = item.cereContractInformation.contractNumber
      },
      bianAdd() {
        this.bianList={
          contct:'',
          bianConct:'',
          bianYuan:'',
          beizhu:''
        }
        this.biangengPan = false
        this.bianAddShow = true
      },
      videoSuccess(response, file, fileList) {
        console.log('Upload success:', file)
      },
      videoUpload(file) {
        const isVideo = file.type === 'video/mp4' || file.type === 'video/ogg';
        const isLt500M = file.size / 1024 / 1024 < 500;

        if (!isVideo) {
          this.$message.error('上传的视频只能是 MP4 或 OGG 格式!');
        }
        if (!isLt500M) {
          this.$message.error('上传视频大小不能超过 500MB!');
        }
        return isVideo && isLt500M;
      },
      xuanimgRemove() {
        this.xuanimgData = []
      },
      xuanimgUploadSuccess(response, file, fileList) {
        const fileMsg = {
          name: file.name,
          url: file.response.data.url,
        }
        // 将文件地址存储在 uploadedFiles 数组中
        this.xuanimgData.push(fileMsg);
      },
      pingimgRemove() {
        this.pingimgData = []
      },
      pingimgUploadSuccess(response, file, fileList) {
        const fileMsg = {
          name: file.name,
          url: file.response.data.url,
        }
        // 将文件地址存储在 uploadedFiles 数组中
        this.pingimgData.push(fileMsg);
      },
      hefuRemove() {
        this.hefuData = []
      },
      hefuSuccess(response, file, fileList) {
        const fileMsg = {
          name: file.name,
          url: file.response.data.url,
        }
        // 将文件地址存储在 uploadedFiles 数组中
        this.hefuData.push(fileMsg)
      },
      bianCheck(){
        if(this.biangengPan){

        }else{
          this.biangengTab.push(this.bianList)
        }

         this.bianAddShow =false
      },
      bianEdit(item){
        this.biangengPan = true
        this.bianList = item
         this.bianAddShow =true
      },
      bianDel(index){
        this.biangengTab.splice(index, 1);
      },
    }
  }
</script>

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

  }

  .chengeXia {
    border-bottom: 6px solid #3F9B6A;
    padding-bottom: 4px;
    color: #3F9B6A;
  }

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

  .tableBtn {
    display: inline-block;
    margin-right: 10px;
    color: #ACACAC;
  }

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

  .greens {
    color: #3F9B6A;
  }

  /deep/ .el-table__row {
    font-size: 14px;
    color: #000000e6;
    height: 42px;
  }

  .fenye {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }

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

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

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

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

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

  .bg-purple {
    background: #d3dce6;
  }

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

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

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

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

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

  ::v-deep .bg-purple {
    background: #fff;
    height: 50px;
  }

  /deep/ .el-form--label-top .el-form-item__label {
    padding: 0;
  }

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

  ::v-deep .el-input__inner:focus {
    border: #3F9B6A 1px solid;
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    border-top: solid rgba(209, 209, 209, 0.2) 2px;
    padding-top: 20px;
  }

  ::v-deep .el-input__inner:focus {
    border: #3F9B6A 1px solid;
  }

  ::v-deep .el-input__inner:hover {
    border: #3F9B6A 1px solid;
  }

  ::v-deep .el-select .el-input.is-focus .el-input__inner {
    border-color: #3F9B6A
  }

  .el-select-dropdown__item.selected {
    color: #3F9B6A;
  }

  .el-pagination__sizes .el-input .el-input__inner:hover {
    border-color: #3F9B6A;
  }

  ::v-deep .el-dialog__wrapper {

    .dialog_css {
      margin-right: 12px;
      margin-top: 61px !important;

      .el-dialog__title {
        font-size: 16px !important;
        font-weight: 600;
        color: #000;
      }
    }

    .diaslog_zhong {
      margin-left: 222px;
      margin-top: 61px !important;
    }

  }

  ::v-deep .dialog_css_Xq .el-dialog__body {
    padding: 0 20px 30px 20px !important;
  }

  /deep/ .el-table_1_column_8 .hetong {
    color: #7DBB9A;
    text-decoration: underline;
  }

  /deep/ .first-column-bg {
    background-color: #FAFAFA !important;
  }

  .el-table tr {
    height: 56px;
  }

  ::v-deep .table3 {
    .el-table__empty-block {
      display: none;
    }
  }

  ::v-deep .textarea {
    width: 85%;

    .el-textarea__inner {
      width: 100%;
    }
  }

  ::v-deep .el-button--mini {
    padding: 7px 10px;
  }

  ::v-deep .pass_input {
    width: 100%;

    .el-input__inner {
      border: none;
      padding: 0;
    }
  }

  ::v-deep .pass_select {
    width: 100%;

    .el-input__inner {
      border: none;
      padding: 0;
    }

    .el-icon-arrow-up:before {
      content: ''
    }

  }

  /deep/ .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
    background-color: #fff;
  }
</style>
<style lang="scss" scoped>
  ::v-deep .xiang_css {
    height: auto;
    margin-left: 15%;

    .el-dialog__header {
      padding: 0px;
    }

    .el-input__inner {
      height: 18px;
      border: 0px;
      margin-top: 0px;
    }

    .el-input__inner:hover {
      border: 0px;
    }

    .el-input__inner:focus {
      border: 0px;
    }
  }

  ::v-deep .bian_css {
    .el-dialog__header {
      padding: 0px;
    }
  }

  ::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: 33px;
  }

  ::v-deep .diaslog_zhong {
    .el-dialog__body {
      padding: 10px 20px 20px 20px;
    }

    .el-upload--picture-card {
      width: 130px;
      height: 130px;
    }
  }
</style>
