<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.tenantName" placeholder="请输入" style="width:168px;" />
            </el-form-item>
            <el-form-item label="租赁类型">
              <el-select v-model="formSel.leaseType" placeholder="请选择"
                style="width: 168px;margin-right: 15px">
             <el-option label="商铺合同" value="商铺合同" />
             <el-option label="场地合同" value="场地合同" />
             <el-option label="广告位合同" value="广告位合同" />
              </el-select>
            </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="addList" style="background-color: #3F9B6A;color: #fff">新增
          </el-button>
        <el-button @click="tuizuSetWit" style="background-color: #3F9B6A;color: #fff">退租设置
          </el-button>
          <el-button @click="daochu" style="background-color: #3F9B6A;color: #fff">导出
          </el-button>
          <el-button  @click="dayin"  style="background-color: #3F9B6A;color: #fff">打印</el-button>

        </div>
        <!-- 表格 -->

        <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" align="left"
          :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="200">
            <template slot-scope="scope">
              <div @click="details(0,scope.row)" class="tableBtn greens">查看</div>
              <div @click="addbuss(scope.row)" class="tableBtn greens">退租</div>
              <div @click="tuizhuDan(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 title="退租申请" :visible.sync="ggXin" custom-class="diaslog_zhong" style="padding: 0;" width="80%"
          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.name"  placeholder="请输入" ></el-input>
                </el-form-item>
                <el-form-item label="乙方">
                  <el-input v-model="zhong.yi"   placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="合同编号">
                  <el-input v-model="zhong.bqwe" placeholder="请输入" ></el-input>
                </el-form-item>
                <el-form-item label="起止时间">
                  <el-input v-model="zhong.dding"  placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="申请人">
                  <el-input v-model="zhong.shenr" placeholder="请输入" ></el-input>
                </el-form-item>
                <el-form-item label="联系电话">
                  <el-input v-model="zhong.tel" placeholder="请输入" ></el-input>
                </el-form-item>

                <el-form-item label="退租原因">
                  <el-input type="textarea" v-model="zhong.textarea" :rows="4" placeholder="请输入" ></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()" style="background-color: #3F9B6A;color: #fff">确定</el-button>
            </div>
          </div>
        </el-dialog>
      </div>

    </div>
    <!-- 退租设置 -->
    <el-dialog title="退租规则设置" :visible.sync="tuizuSet" custom-class="diaslog_zhong" style="padding: 0;" width="80%"
      class="dialog_css_Xq" center :close-on-click-modal="false" :show-close="false">
      <div style="color: #000;">
        <div style="margin-bottom: 20px;">
          <div style="margin-bottom: 20px;">当未入驻时退租，收取保证金
            <el-select v-model="tuiZuSet.weitui" placeholder="比例"  style="width: 70px;margin:  0  10px">
              <el-option label="10%" value="10%" />
            </el-select>
            作为退租押金
          </div>

          <div style="margin-bottom: 20px;">当已入驻目入驻时间不超过30天时，收取保证金
            <el-select v-model="tuiZuSet.yixiao" placeholder="比例"  style="width: 70px;margin:  0  10px">
              <el-option label="10%" value="10%" />
            </el-select>
            作为退租押金
          </div>

          <div style="margin-bottom: 20px;">当入驻时间超过30天日距到期时间大于整体租期的50%时，收取保证金
            <el-select v-model="tuiZuSet.yichao1" placeholder="比例"  style="width: 70px;margin:  0  10px">
              <el-option label="10%" value="10%" />
            </el-select>
            作为退租押金
          </div>
          <div style="margin-bottom: 20px;">当入驻时间超过30天日距到期时间小于整体租期的50%时，收取保证金
            <el-select v-model="tuiZuSet.yichao2" placeholder="比例"  style="width: 70px;margin:  0  10px">
              <el-option label="10%" value="10%" />
            </el-select>
            作为退租押金
          </div>
          <div style="margin-bottom: 20px;">当距到期时间小于30天时，收取保证金
            <el-select v-model="tuiZuSet.daoxiao" placeholder="比例"  style="width: 70px;margin:  0  10px">
              <el-option label="10%" value="10%" />
            </el-select>
            作为退租押金
          </div>

        </div>
        <div style="display: flex;justify-content: flex-end;">
          <el-button @click="closeFn(3)" style="background-color: #3F9B6A;color: #fff">提交</el-button>
          <el-button @click="closeFn(3)" class="buttonHover"
            style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取消</el-button>

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

    <!-- 详情框 -->
    <el-dialog :visible.sync="detbox" custom-class='bian_css' style="padding: 0;" width="75%"
      :close-on-press-escape="false" center :close-on-click-modal="false" class="dialog_css_Xq" :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="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-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()" style="background-color: #3F9B6A;color: #fff">审批节点</el-button> -->

        </div>

      </div>

    </el-dialog>
    <el-dialog :visible.sync="tuizhuDanShow" custom-class='bian_css' style="padding: 0;" width="75%"
      :close-on-press-escape="false" 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="xudan" label-width="120px">
                    <el-form-item label="退租日期">
                      <el-input v-model="xudan.tuizhu" disabled ></el-input>
                    </el-form-item>
                    <el-form-item label="退租原因">
                      <el-select v-model="xudan.yuan" placeholder="请选择" style="margin-top:5px;width: 100%;">
                        <el-option label="正常退租" value="正常退租"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="待缴租金">
                      <el-input v-model="xudan.daijiao"  placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="支付类型">
                      <el-select v-model="xudan.zhifu" placeholder="请选择" style="margin-top:5px;width: 100%;">
                        <el-option label="线上支付" value="线上支付"></el-option>
                        <el-option label="线下支付" value="线下支付"></el-option>
                      </el-select>
                    </el-form-item>
        <el-form-item label="支付方式说明">
                        <wang-editor v-model="xudan.zhifushuo" ref="editor" :height="200"></wang-editor>
                      </el-form-item>

                <el-form-item label="退租注意事项">
                        <wang-editor v-model="xudan.zhuangxiu" ref="editor" :height="200"></wang-editor>
                      </el-form-item>
                <el-form-item label="其他备注信息">
                        <wang-editor v-model="xudan.noto" ref="editor" :height="200"></wang-editor>
                      </el-form-item>
                    </el-form>




        <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="tuizhuDanShow = false">取消</el-button>
          <!-- <el-button @click="addbuss()" style="background-color: #3F9B6A;color: #fff" >保存</el-button> -->
          <el-button @click="yulan =true" style="background-color: #3F9B6A;color: #fff" >预览</el-button>

        </div>

      </div>
<el-dialog :visible.sync="yulan" custom-class="actSpye_dialog" style="padding: 0;" width="50%"   center :close-on-click-modal="false" 	append-to-body>
                                    <div style="padding:20px 0">
                                          <div class="form-container" ref="contentToConvert" style="background-color:#fff;">
                                                      <div class="form-header">退租单</div>
                                               <div class="form-group">
                                                   <label for="partyA">退租日期：</label>
                                                   <input type="text" id="partyA" disabled v-model="xudan.tuizhu">
                                               </div>
                                               <div class="form-group">
                                                   <label for="partyB">退租原因：</label>
                                                   <input type="text" id="partyB" v-model="xudan.yuan" disabled>
                                               </div>
                                          <div class="form-group">
                                              <label for="partyB">待缴租金：</label>
                                              <input type="text" id="partyB" v-model="xudan.daijiao" disabled>
                                          </div>
                                          <div class="form-group">
                                              <label for="partyB">支付类型：</label>
                                              <input type="text" id="partyB" v-model="xudan.zhifu" disabled>
                                          </div>
                                          <div class="form-group">
                                              <label for="renovationRules">支付方式说明：</label>
                                              <div style="padding:20px;width:100%;border: 1px solid #ccc;" v-html="xudan.zhifushuo"></div>
                                          </div>
                                                      <div class="form-group">
                                                          <label for="renovationRules">退租注意事项：</label>
                                                          <div style="padding:20px;width:100%;border: 1px solid #ccc;" v-html="xudan.zhuangxiu"></div>
                                                      </div>
                                                      <div class="form-group">
                                                          <label for="remarks">其他备注信息：</label>
                                                          <div style="padding:20px;width:100%;border: 1px solid #ccc;" v-html="xudan.noto"></div>
                                                      </div>

                                                  </div>
                                          <div style="justify-content:flex-end;margin:20px 20px 0 0;display:flex;">
                                            <el-button @click="downloadPdf" style="background-color: #3F9B6A;color: #fff">下载</el-button>


                                          </div>
                                    </div>
                                                </el-dialog>
    </el-dialog>
    <el-dialog :visible.sync="addListShow" custom-class='bian_css' style="padding: 0;" width="50%"
      :close-on-press-escape="false" center :close-on-click-modal="false" class="dialog_css_Xq" :show-close="false">
      <div style="padding:20px;">
        <div style="font-size: 14px;padding-bottom: 20px;color: #000;">选择退租合同</div>
        <div>
            <el-select v-model="heIds" filterable placeholder="请选择">
              <el-option
                v-for="item in heList"
                :key="item.id"
                :label="item.cereContractInformation.contractName"
                :value="item.id">
              </el-option>
            </el-select>
        </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="addListShow =false">取消</el-button>
          <el-button @click="addListCheck" style="background-color: #3F9B6A;color: #fff">确定</el-button>

        </div>

      </div>

    </el-dialog>
  </div>


</template>

<script>
  import {
    async
  } from 'q'
  import axios from 'axios'
  import {
    contractGetAll,
    contractDel,
    updateList,
    queryById,
    pdfManagementOfFinalAccountsForRentals,
    cereLeasingEdit
  } from '../../../api/manage.js'
  import {
  rentalGetAll,
  rentalDel,
  rentalAdd,
  excelManagementOfFinalAccountsForRentals
  } from '../../../api/rentalMan.js'
  import {
    businessListGetAll,
    businessListSave,
    businessListGetById,
    businessListUpdate,
    businessListStart,
    delBusinessById
  } from '@/api/business'
  import html2canvas from 'html2canvas'
  import jsPDF from 'jspdf'
  import wangEditor from "@/components/editor/index"
  export default {
    components: { wangEditor},
    data() {
      return {
        hetongBox: false, //合同
        detbox: false, //详情
        leixing: true, //切换
        tuizuSet: false, //退租设置
        index: 0,
        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: [],
        leaseStartDate:[],
        formSel: {
          leaseType:'',
          cereContractInformation:{
            leaseStartDate:[],
            tenantName:''
          },
        pageNumber: 1,
        pageSize: 10,
        rentalCondition:2
        },
        pageindex: {
          pageNumber: 1,
          pageSize: 10,
          rentalCondition:2
        },
        bianjiBox: 1,
        chengeTatle: 1,
        zhong: {

          Num: '',

          Name: '',

          Time: '',

          Data: '',

          textarea: ''

        },
        xudan:{
         tuizhu:'',
         yuan:'',
         daijiao:'',
         zhifu:'',
         zhifushuo:'',
         zhuangxiu:'',
         noto:'',
        },
        detaiList: {},
        tuiZuSet: {
          weitui: '10%',
          yixiao: '10%',
          yichao1: '10%',
          yichao2: '10%',
          daoxiao: '10%'
        },
        tuizhuDanShow: false,
        yulan:false,
        xiangData:{},
        heData:{},
        contentStyle:{
          width:'20%',
          height:'42px',
        },
        labelStyle:{
          width:'150px',
          height:'42px',
          color:'#000',
        },
        addListShow:false,
        heIds:'',
        heList:[]
      }
    },
    created() {
      this.getAll()
    },
    computed: {

    },
    methods: {
      async getAll(val) {

    const res = await rentalGetAll(this.pageindex)
    this.total = res.data.numberOfElements
    this.tableData = res.data.content

         let page={
           pageNumber: 1,
           pageSize: 10,
           rentalCondition:1
         }
         const list =  await rentalGetAll(page)
         this.heList = list.data.content


      },
      addList(){
        this.heIds =''
        this.addListShow = true
      },
      async addListCheck(){
        await cereLeasingEdit({id:this.heIds,rentalCondition:2})
        this.getAll()
        this.addListShow = false
      },
     async dayin(){
        let res = await pdfManagementOfFinalAccountsForRentals(this.pageindex)
          if(!res){
                  return
                }
                const blob = new Blob([res], { type: 'application/pdf' })
                const fileName = '退租决算管理.pdf'
                if ('download' in document.createElement('a')) {
                   // 非IE下载
                   const elink = document.createElement('a')
                   elink.download = fileName
                   elink.style.display = 'none'
                   elink.href = URL.createObjectURL(blob)
                   document.body.appendChild(elink)
                   elink.click()
                   URL.revokeObjectURL(elink.href) // 释放URL 对象
                   document.body.removeChild(elink)
                 } else {
                  // IE10+下载
                  navigator.msSaveBlob(blob, fileName)
                }


      },
      // 退租确定按钮
       addCheck(val) {
        this.ggXin = false
        this.getAll()
      },
      // 获取时间
      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(index, val) {
        this.index = index
        this.xiangData = val
        this.heData = val.cereContractInformation
        this.detbox = true



      },
      addbuss(item) {
        this.detbox = false
        this.ggXin = true
  this.zhong.lessorName = item.cereContractInformation.lessorName
        this.zhong.tenantName = item.cereContractInformation.tenantName
        this.zhong.leaseAddress = item.leaseAddress
        this.zhong.leaseName = item.leaseName
        this.zhong.completionTime = item.completionTime
        this.zhong.intendedLeaseTerm = item.intendedLeaseTerm
        this.zhong.intentionalRent = item.intentionalRent

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

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

          let formList = {
            // 租赁人
            contractNumber: this.detaiList.contractNumber,
            id: this.detaiList.id,
            tenant: this.ggwName,
            intendedLeaseTerm: this.shunNum,
            intentionalRent: this.duanK,
            leasingEntity: this.tableData1[0].names,
            operator: this.tableData1[0].shuns,
            state: this.tableData1[0].duans,
            // 租赁类型
            leaseType: this.zuLei,
            leaseCode: this.bianHao,
            leaseName: this.oneName,
            administrativeRegion: this.tableData1_one[0].names,
            leaseAddress: this.tableData1_one[0].shuns,
            owner: this.tableData1_one[0].duans,
            commander: this.tableData1_one[1].names,
            telephone: this.tableData1_one[1].shuns,
            range: this.tableData1_one[1].duans,

            area: this.tableData1_one[2].names,
            completionTime: this.tableData1_one[2].shuns,
            houseType: this.tableData1_one[2].duans,

            mainFacilities: this.tableData1_one[3].names,
            planeFigure: this.tableData1_one[3].shuns,
            feeStandards: this.tableData1_one[3].duans,
            label: this.tableData1_one[4].names,
            promotionVideo: this.tableData1_one[4].shuns,
            promotionImage: this.tableData1_one[4].duans,
            notes: this.tableData1_one[5].names

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

      },
      //查看合同
      lookHetong(val) {
        this.hetongBox = true
      },
      // 查询按钮
      async onSubmit() {

        let page ={
            leaseType:this.formSel.leaseType,
            cereContractInformation:{
              tenantName:this.formSel.cereContractInformation.tenantName,
              leaseStartDate:[],
            },
          pageNumber: 1,
          pageSize: 10,
        }
 page.cereContractInformation.leaseStartDate = this.formSel.cereContractInformation.leaseStartDate.join(',')
  const res = await rentalGetAll(page)
  this.total = res.data.numberOfElements
  this.tableData = res.data.content

      },
      //重置按钮
      resetting() {
      this.formSel={
          leaseType:'',
          cereContractInformation:{
            leaseStartDate:[],
            tenantName:''
          },
        pageNumber: 1,
        pageSize: 10,
        rentalCondition:2
        }
      this.leaseStartDate = []
        this.getAll()
      },
      tuizuSetWit() {
        this.tuizuSet = true
      },
      tuizhuDan(item) {
        this.tuizhuDanShow = true

      },
      // 下载
       async downloadPdf() {
            const content = this.$refs.contentToConvert;

            // 使用 html2canvas 将 div 渲染为画布
            const canvas = await html2canvas(content);

            // 获取画布的图像数据
            const imgData = canvas.toDataURL('image/png');

            // 创建一个新的 PDF 文档
            const pdf = new jsPDF('p', 'mm', 'a4');

            // 添加图像到 PDF，第二个参数是图像格式，第三个参数是缩放比例
            const imgWidth = 190; // 图像的宽度（mm）
            const imgHeight = (canvas.height * imgWidth) / canvas.width; // 保持图像的宽高比

            pdf.addImage(imgData, 'PNG', 10, 10, imgWidth, imgHeight); // 10, 10 是图像在 PDF 中的位置（mm）

            // 保存 PDF 文件
            pdf.save('downloaded.pdf');
          },
async daochu(){

  let res = await excelManagementOfFinalAccountsForRentals(this.pageindex)
     if(!res){
       return
     }
     const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
     const fileName = '退租决算管理列表.xls'
     if ('download' in document.createElement('a')) {
        // 非IE下载
        const elink = document.createElement('a')
        elink.download = fileName
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href) // 释放URL 对象
        document.body.removeChild(elink)
      } else {
       // IE10+下载
       navigator.msSaveBlob(blob, fileName)
     }
     this.$message({
       message: '导出成功',
       type: 'success'
     })

},
    }
  }
</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;
    align-items: center;
  }

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

  .device-form .el-form-item__label::after {
    content: "*";
    color: #1A1A1A;
    margin-left: 5px;
    font-size: 14px;
  }


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

  .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: 14px !important;
        /* font-weight: 600; */
        color: #000;
      }
    }

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

  }

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

    .el-dialog__header {
      background-color: #FAFAFA;

      .el-dialog__title {
        color: #000;
        font-size: 14px;
      }
    }

    .el-dialog__body {
      padding: 10px 20px 30px 20px
    }
  }



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

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

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

  ::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;
  }
  .form-container {
            max-width: 600px;
            margin: 0px auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color:#fff;

        }
        .form-group {
            margin-bottom: 15px;
            display:flex;
            align-items: center
        }
        .form-group label {
            display: block;
            font-weight: bold;
            margin-bottom: 5px;
            width: 152px;
        }
        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .form-group textarea {
            resize: vertical;
        }
        .form-header {
            text-align: center;
            margin-bottom: 20px;
            font-size: 1.5em;
            font-weight: bold;
        }
        .jianju{
          margin-bottom:10px;
        }
        .titles{
          position: relative;
          padding-left: 10px;

        }

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