<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.cereContractInformation.contractName" placeholder="请输入" style="width:168px;"/>
            </el-form-item>
<el-form-item label="乙方名称">
  <el-input v-model="formSel.cereContractInformation.tenantName" placeholder="请输入" style="width:168px;"/>

            </el-form-item>
            <el-form-item label="联系方式">
             <el-input v-model="formSel.telephone" placeholder="请输入" style="width:168px;"/>
               </el-form-item>
          </el-form>
          <div>
            <el-button plain @click="onSubmit"  style="background-color: #3F9B6A;color: #fff">查询
            </el-button>
            <el-button plain @click="resetting"  class="buttonHover"
              style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">重置
            </el-button>
          </div>
        </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="50">
            <template slot-scope="scope">
                {{scope.$index + 1}}
            </template>
          </el-table-column>
        <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="150">
          <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.leaseType}}
          </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 prop="maturityDays" label="到期天数"  min-width="150">
            <template slot-scope="scope">
             {{scope.row.cereContractInformation.maturityDays}}
            </template>
          </el-table-column>
          <el-table-column label="操作"  min-width="250">
            <template slot-scope="scope">
              <div @click="details(scope.row)" class="tableBtn greens">查看</div>
               <div @click="addbuss(3,scope.row)" class="tableBtn greens">续约</div>
               <div @click="addbuss(2,scope.row)" class="tableBtn greens">发送提醒</div>
              <div @click="addbuss(4,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-size="pageSize" layout="prev, pager, next,total"
            :total="total " @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>

        <!-- 终止续约 -->
        <el-dialog :title="index == 4?'合同终止':index == 3?'续约申请':'发送提醒'"  :visible.sync="ggXin" custom-class="diaslog_zhong" style="padding: 0;" width="60%" class="dialog_css_Xq"  center :close-on-click-modal="false" :show-close="false"	>
                    <div >
                          <div style="margin-bottom: 20px;">
                          <el-form ref="form" :model="zhong" label-width="80px">
                            <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="月租金" v-if="index ==2">
                              <el-input v-model="zhong.contractAmount" disabled ></el-input>
                            </el-form-item>
                            <el-form-item label="缴费日期" v-if="index ==2">
                              <el-input v-model="zhong.contractAmount" disabled ></el-input>
                            </el-form-item>
                            <el-form-item label="逾期" v-if="index ==2">
                              <el-input v-model="zhong.name" disabled ></el-input>
                            </el-form-item>
                            <el-form-item label="申请人" v-if="index !=2">
                              <el-input v-model="zhong.application"  ></el-input>
                            </el-form-item>
                            <el-form-item label="联系电话" v-if="index !=2">
                              <el-input v-model="zhong.contactNumber"  ></el-input>
                            </el-form-item>

                      <el-form-item :label="index == 4?'终止原因':index == 3?'申请原因':'提醒内容'">
                              <el-input type="textarea" v-model="zhong.reasonApplication"  :rows="4"></el-input>
                            </el-form-item>

                          </el-form>

                          </div>
                          <div style="display: flex;justify-content: flex-end;">
                            <el-button  @click="closeFn(1)" 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>
      </div>

      </div>
        <!-- 详情框 -->
            <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="width:150px;height:42px;">
                                             <el-descriptions-item>
                                               <template slot="label">
                                                 合同编号
                                               </template>
                                               kooriookami
                                             </el-descriptions-item>
                                             <el-descriptions-item>
                                               <template slot="label">
                                                 标段号
                                               </template>
                                               18100000000
                                             </el-descriptions-item>
                                             <el-descriptions-item>
                                               <template slot="label">
                                                 合同名称
                                               </template>
                                               18100000000
                                             </el-descriptions-item>
                                             <el-descriptions-item>
                                               <template slot="label">
                                                 合同金额
                                               </template>
                                               23123
                                             </el-descriptions-item>
                                             <el-descriptions-item>
                                               <template slot="label">
                                                 保证金
                                               </template>
                                               23123
                                             </el-descriptions-item>
                                             <el-descriptions-item>
                                               <template slot="label">
                                                 合同签订日期
                                               </template>
                                               23123
                                             </el-descriptions-item>
                                             <el-descriptions-item>
                                               <template slot="label">
                                                 合同终止日期
                                               </template>
                                               23123
                                             </el-descriptions-item>
                                             <el-descriptions-item>
                                               <template slot="label">
                                                 起租日期
                                               </template>
                                               23123
                                             </el-descriptions-item>
                                             <el-descriptions-item>
                                               <template slot="label">
                                                 出租人名称
                                               </template>
                                               23123
                                             </el-descriptions-item>
                                             <el-descriptions-item>
                                               <template slot="label">
                                                联系电话
                                               </template>
                                               23123
                                             </el-descriptions-item>
                                             <el-descriptions-item>
                                               <template slot="label">
                                                 银行账号
                                               </template>
                                               23123
                                             </el-descriptions-item>
                                             <el-descriptions-item>
                                               <template slot="label">
                                                 承租人名称
                                               </template>
                                               23123
                                             </el-descriptions-item>
                                             <el-descriptions-item>
                                               <template slot="label">
                                                 承租人联系电话
                                               </template>
                                               23123
                                             </el-descriptions-item>
                                             <el-descriptions-item>
                                               <template slot="label">
                                                 承租人银行账号
                                               </template>
                                               23123
                                             </el-descriptions-item>
                                             <el-descriptions-item>
                                               <template slot="label">
                                                 商铺编号
                                               </template>
                                               23123
                                             </el-descriptions-item>
                                             <el-descriptions-item>
                                               <template slot="label">
                                                 商铺名称
                                               </template>
                                               23123
                                             </el-descriptions-item>
                                             <el-descriptions-item>
                                               <template slot="label">
                                                 商铺地址
                                               </template>
                                               23123
                                             </el-descriptions-item>
                                             <el-descriptions-item>
                                               <template slot="label">
                                                 商铺面积
                                               </template>
                                               23123
                                             </el-descriptions-item>
                                             <el-descriptions-item>
                                               <template slot="label">
                                                 商品业态
                                               </template>
                                               23123
                                             </el-descriptions-item>
                                             <el-descriptions-item>
                                               <template slot="label">
                                                 经营项目
                                               </template>
                                               23123
                                             </el-descriptions-item>
                                             <el-descriptions-item>
                                               <template slot="label">
                                                 合同附件
                                               </template>
                                               23123
                                             </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="addbuss(2)"  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="tableData4"
                                         :header-cell-style="{fontSize: '14px', 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: '14px', 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 {
    contractGetAll,
    contractDel,
    addList,
    updateList,
    queryById,
    cereLeasingById,
    cereLeasingEdit,
    cereLeasingByPage,
    daoqi
  } from '../../../api/manage.js'
  export default {
    data() {
      return {
        hetongBox:false,//合同
        detbox:false,//详情
        leixing:true,//切换
        index:1,
        currentPage: 1,
        total: 100,
        flag: false,
        pageSize: 10,
        ggXin: false,
        formInline: {
         contractNumber:'',
         sectionNumber:'',
         contractName:'',
         contractAmount:'',
         earnestMoney:'',
         contractSigningDate:'',
         contractTerminationDate:'',
         leaseStartDate:'',
         lessorName:'',
         telephone:'',
         bankAccount:'',
         tenantName:'',
         tenantTelephone:'',
         tenantBankAccount:'',
         shopNumber:'',
         shopName:'',
         shopAddress:'',
         shopArea:'',
         storeFormats:'',
         businessProjects:'',
         appendicesContract:'',
        },
        tableData: [],
        tableData4: [],
        tableData5: [],
        formSel: {
          cereContractInformation:{
            contractName:'',
            tenantName:'',
          },

        telephone:'',
        pageNumber: 1,
        pageSize: 10,
        },
        pageindex: {
          pageNumber: 1,
          pageSize: 10,
        },
        bianjiBox:1,
        chengeTatle:1,
        zhong:{

                },
                detaiList:{},
             xiangData:{},
             heData:{},
             contentStyle:{
               width:'20%',
               height:'42px',
             },
             labelStyle:{
               width:'150px',
               height:'42px',
               color:'#000',
             },
      }
    },
    created() {
    this.getAll()
    },
    computed: {

    },
    methods: {
      chenge(val){
        this.formSel={
          cereContractInformation:{
            contractName:'',
            tenantName:'',
          },

        telephone:'',
        pageNumber: 1,
        pageSize: 10,
        }
        this.leixing  = !this.leixing
         this.chengeTatle = val
      },
 async getAll(){
   const res =  await cereLeasingByPage(this.pageindex)
    this.tableData = res.data.content
    this.total =  res.data.content.length
  },
      // 新增确定按钮
      async addCheck(val) {
            this.ggXin = false

      },
       // 获取时间
     currentTime(){
     let date = new Date();
     let year = date.getFullYear();//月份从0~11，所以加一
     let month= date.getMonth();
     let dateArr = [date.getMonth()+1,date.getDate(),date.getHours()]
     for(let i=0;i<dateArr.length;i++){
       if(dateArr[i] >=1 &&dateArr[i]<=9){
         dateArr[i] = '0' + dateArr[i]
       }
     }
     let strDate= year +'-' + dateArr[0] +'-' + dateArr[1]
     return strDate
     },

      //详情
      async details(val){
          this.xiangData = val
          this.heData = val.cereContractInformation
          this.detbox = true
      },
      addbuss(val,item) {
        this.index = val
        this.zhong=item
        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
        this.detbox = false
        this.ggXin = true



      },
      handleSizeChange(val) {
        this.pageSize = val
      },
      handleCurrentChange(val) {
        this.currentPage = val
      },

      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)

          this.detbox = false
        }

      },
      //查看合同
      lookHetong(val){
       this.hetongBox = true
      },
      // 查询按钮
    async  onSubmit() {
  const res =  await cereLeasingByPage(this.formSel)
  this.tableData = res.data.content
  this.total =  res.data.content.length

      },
      //重置按钮
      resetting(){
        this.formSel={
          cereContractInformation:{
            contractName:'',
            tenantName:'',
          },

        telephone:'',
        pageNumber: 1,
        pageSize: 10,
        }
        this.getAll()
      },

    }
  }
</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;
    padding-bottom: 10px;

  }

  .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-form-item{
  margin-bottom:16px;
}
  .device-form .el-form-item__label::after {
    content: "*";
    color: #1A1A1A;
    margin-left: 5px;
    font-size: 16px;
  }


  ::v-deep .el-dialog__wrapper {
    .el-dialog__header {
      background-color: #FAFAFA;
    }
  }
 ::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
     }
::v-deep .btn .el-button:focus,
.el-button:hover {
  border: 1px solid #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: 20%;
     margin-top:61px !important;
  }

}
 ::v-deep .diaslog_zhong{
     margin-left: 20%;
     margin-top:61px !important;
     .el-dialog__header{
       background-color:#fff;
       border-bottom:1px solid #EFEFEF;
       .el-dialog__title{
         font-size: 14px;
          color: #000000e6;
       }
     }
     .el-dialog__body{
       padding:10px 20px 30px 20px
     }
  }

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