<template>
  <div style="background-color:#f7f7f7;padding:10px 10px;">
    <div class="zhuti" v-if="detbox ==false && ggXin == false">
      <div style="height:58px;line-height:58px;">
        <div style="color:#0006"> <span>商铺租赁服务</span> <span style="padding:0 5px;">></span> <span
            style="color:#000000e6">合同管理</span></div>
      </div>
      <!-- 线上 -->
      <div>
        <!-- 搜索 -->
        <div class="formSearch">
          <el-form :inline="true" :model="formSel">
            <el-form-item label="商户名称">
              <el-input v-model="formSel.shopName" placeholder="请输入" style="width:168px;" />
            </el-form-item>
            <el-form-item label="合同名称"> 
              <el-input v-model="formSel.contractName" placeholder="请输入" style="width:168px;" />
            </el-form-item>   
            <el-form-item label="签订时间">
              <el-date-picker style="width:160px;margin-right:5px" v-model="formSel.contractSigningDate"
                value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" 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.leaseStartDate"
                value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" 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" fixed="right">
            <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">
          <div>共{{total}}条</div>
          <el-pagination :hide-on-single-page='flag' background small :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]" layout="prev, pager, next" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </div>


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



    <!-- 详情框 -->

    <div class="zhuti" v-if='detbox'>
      <div style="height:58px;line-height:58px;">
        <div style="color:#0006"> <span>合同管理</span> <span style="padding:0 5px;">></span> <span
            style="color:#000000e6">查看</span></div>
      </div>
      <el-tabs v-model="xiangTab">
        <el-tab-pane label="合同信息" name="first">
          <div style="margin-top: 30px;" class="editcss">
            <div class="titles">
              合同原件
            </div>
            <div style="padding: 20px;">
              <el-form :model="xiangData" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="合同类型" prop="shopName">
                      <div class="duiqi">{{xiangData.shopName}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="合同编号" prop="venueNumber">
                      <div class="duiqi">{{xiangData.venueNumber}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="标段号" prop="houseNumber">
                      <div class="duiqi">{{xiangData.houseNumber}}</div>

                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="合同名称" prop="contractName">
                      <div class="duiqi">{{xiangData.contractName}}</div>

                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="合同签订日期" prop="contractSigningDate">
                      <div class="duiqi">{{xiangData.contractSigningDate}}</div>
                    </el-form-item>

                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="押金" prop="floorSpace">
                      <div class="duiqi">{{xiangData.floorSpace}}</div>

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

                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="起租日期" prop="leaseStartDate">
                      <div class="duiqi">{{xiangData.leaseStartDate}}</div>

                    </el-form-item>

                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="合同终止日期" prop="actualUsableArea">
                      <div class="duiqi">{{xiangData.actualUsableArea}}</div>

                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="付款周期" prop="belongingDepartment">
                      <div class="duiqi">{{xiangData.belongingDepartment}}</div>

                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="租金" prop="zujin">
                      <div class="duiqi">{{xiangData.zujin}}</div>

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

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

                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="承租人名称" prop="detailedLocation">
                      <div class="duiqi">{{xiangData.detailedLocation}}</div>

                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="联系电话" prop="belongingDepartment">
                      <div class="duiqi">{{xiangData.belongingDepartment}}</div>

                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="承租人银行账号" prop="detailedLocation">
                      <div class="duiqi">{{xiangData.detailedLocation}}</div>

                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="主体类型" prop="belongingDepartment">
                      <div class="duiqi">{{xiangData.belongingDepartment}}</div>

                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="主体名称" prop="detailedLocation">
                      <div class="duiqi">{{xiangData.detailedLocation}}</div>

                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="营业执照照片" prop="belongingDepartment">


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

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

                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <div class="titles">
              合同修订版
            </div>
            <div style="padding:20px;">
              <el-form :model="xiangData" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="合同类型" prop="shopName">
                      <div class="duiqi">{{xiangData.shopName}}</div>

                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="合同编号" prop="venueNumber">
                      <div class="duiqi">{{xiangData.venueNumber}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="标段号" prop="houseNumber">
                      <div class="duiqi">{{xiangData.houseNumber}}</div>

                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="合同名称" prop="contractName">
                      <div class="duiqi">{{xiangData.contractName}}</div>

                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">

                    <el-form-item label="保证金" prop="floorSpace">
                      <div class="duiqi">{{xiangData.floorSpace}}</div>

                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="合同金额" prop="belongingParkTrail">
                      <div class="duiqi">{{xiangData.belongingParkTrail}}</div>

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

                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="合同签订日期" prop="contractSigningDate">
                      <div class="duiqi">{{xiangData.contractSigningDate}}</div>

                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="合同终止日期" prop="actualUsableArea">
                      <div class="duiqi">{{xiangData.actualUsableArea}}</div>

                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="起租日期" prop="leaseStartDate">
                      <div class="duiqi">{{xiangData.leaseStartDate}}</div>

                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="出租人名称" prop="belongingDepartment">
                      <div class="duiqi">{{xiangData.belongingDepartment}}</div>

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

                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="联系电话" prop="head">
                      <div class="duiqi">{{xiangData.head}}</div>

                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="承租人银行账号" prop="detailedLocation">
                      <div class="duiqi">{{xiangData.detailedLocation}}</div>

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

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


                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <div class="titles">
              合同修订历史
            </div>
            <div style="padding:20px;">
              <el-row :gutter="20">
                <el-col :span="12">
                  <!-- <div><span>查看</span></div> -->
                </el-col>
              </el-row>


            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="商家信息" name="second">
          <div style="margin-top: 30px;" class="editcss">
            <div class="titles">
              基本信息
            </div>
            <div style="padding: 20px;">
              <el-form :model="xiangData" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="姓名" prop="shopName">
                      <div class="duiqi">{{xiangData.shopName}}</div>

                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="手机号" prop="venueNumber">
                      <div class="duiqi">{{xiangData.venueNumber}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="账号" prop="venueNumber">
                      <div class="duiqi">{{xiangData.venueNumber}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="证件类型" prop="houseNumber">
                      <div class="duiqi">{{xiangData.houseNumber}}</div>

                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="身份证号码" prop="architecturalForm">
                      <div class="duiqi">{{xiangData.architecturalForm}}</div>

                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8">

                    <el-form-item label="身份证照片（正)" prop="floorSpace">
                      <div class="duiqi">{{xiangData.floorSpace}}</div>

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

                </el-row>

                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="身份证照片（反)" prop="belongingParkTrail">
                      <div class="duiqi">{{xiangData.belongingParkTrail}}</div>

                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="商户租赁信息" name="third">
          <div style="margin-top: 30px;" class="editcss">
            <div class="titles">
              商户租赁信息
            </div>
            <div style="margin-top: 30px;" class="editcss">
              <div style="padding: 20px;">
                <el-form :model="xiangData" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
                  <el-row :gutter="20">
                    <el-col :span="8">
                      <el-form-item label="主体名称" prop="shopName">
                        <div class="duiqi">{{xiangData.shopName}}</div>

                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="主体类型" prop="venueNumber">
                        <div class="duiqi">{{xiangData.venueNumber}}</div>
                      </el-form-item>
                    </el-col>

                  </el-row>

                  <el-row :gutter="20">
                    <el-col :span="24">

                      <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.$index +1}}
                          </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.belongingDepartment}}

                          </template>
                        </el-table-column>
                        <el-table-column prop="contractStatus" label="状态" min-width="150">
                          <template slot-scope="scope">

                          </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> -->
                          </template>
                        </el-table-column>
                      </el-table>
                      <div class="fenye">
                        <div>共{{total}}条</div>
                        <el-pagination :hide-on-single-page='flag' background small :current-page="currentPage"
                          :page-sizes="[10, 20, 50, 100]" layout="prev, pager, next" :total="total "
                          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                      </div>
                    </el-col>

                  </el-row>


                </el-form>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <el-row :gutter="20">
        <el-col :span="12">
          <div style="padding-left:160px;">
            <el-button class="buttonHover" style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
              @click="closeFn(2)">返回</el-button>

          </div>

        </el-col>
      </el-row>
    </div>

    <div class="zhuti" v-if="ggXin">
      <div style="height:58px;line-height:58px;">
        <div style="color:#0006"> <span>合同管理</span> <span style="padding:0 5px;">></span> <span
            style="color:#000000e6">新增</span></div>
      </div>

      <div style="padding: 20px 20px 20px 0;">
        <el-form :model="formInline" :rules="rulesHetong" ref="heForm" label-width="130px" class="demo-ruleForm">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="合同类型" prop="helei">
                <el-select v-model="formInline.helei" placeholder="请选择" style="margin-top:5px;width: 100%;">
                  <el-option label="商铺合同" value="商铺合同"></el-option>
                  <el-option label="广告位合同" value="广告位合同"></el-option>
                  <el-option label="场地合同" value="场地合同"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合同编号" prop="venueNumber">
                <el-input v-model="formInline.venueNumber" placeholder="请输入" style="margin-top:5px;"
                  maxlength="20"></el-input>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="标段号" prop="biaoduan">
                <el-input v-model="formInline.biaoduan" placeholder="请输入" style="margin-top:5px;"
                  maxlength="20"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合同名称" prop="contractName">
                <el-input v-model="formInline.contractName" placeholder="请输入" style="margin-top:5px;"
                  maxlength="50"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="合同签订日期" prop="contractSigningDate">
                <el-date-picker v-model="formInline.contractSigningDate" type="date" value-format="yyyy-MM-dd"
                  placeholder="选择日期" style="margin-top:5px;width: 100%;">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="押金" prop="yajin">
                <el-input v-model="formInline.yajin" placeholder="请输入" style="margin-top:5px;"
                  maxlength="20"></el-input>
              </el-form-item>

            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="起租日期" prop="leaseStartDate">
                <el-date-picker v-model="formInline.leaseStartDate" type="date" value-format="yyyy-MM-dd"
                  placeholder="选择日期" style="margin-top:5px;width: 100%;">
                </el-date-picker>
              </el-form-item>

            </el-col>
            <el-col :span="12">
              <el-form-item label="终止日期" prop="actualUsableArea">
                <el-date-picker v-model="formInline.actualUsableArea" type="date" value-format="yyyy-MM-dd"
                  placeholder="选择日期" style="margin-top:5px;width: 100%;">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="付款周期" prop="belongingDepartment">
                <el-select v-model="formInline.belongingDepartment" placeholder="请选择"
                  style="margin-top:5px;width: 100%;">
                  <el-option label="按年" value="按年"></el-option>
                  <el-option label="按月" value="按月"></el-option>
                  <el-option label="按日" value="按日"></el-option>
                  <el-option label="季度" value="季度"></el-option>
                </el-select>
              </el-form-item>

            </el-col>
            <el-col :span="12">
              <el-form-item label="租金" prop="zujin">
                <el-input v-model="formInline.zujin" placeholder="请输入" style="margin-top:5px;"
                  maxlength="20"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="付款日" prop="fukuanRi">
                <el-select v-model="formInline.fukuanRi" placeholder="请选择" style="margin-top:5px;width: 100%;">
                  <el-option :label="val+'号'" :value="val+'号'" v-for="val in 31"></el-option>
                </el-select>
              </el-form-item>

            </el-col>
            <el-col :span="12">
              <el-form-item label="承租人名称" prop="czrName">
                <el-input v-model="formInline.czrName" placeholder="请输入" style="margin-top:5px;"
                  maxlength="20"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="联系电话" prop="lxdh">
                <el-input v-model="formInline.lxdh" placeholder="请输入" style="margin-top:5px;" maxlength="20"></el-input>
              </el-form-item>

            </el-col>
            <el-col :span="12">
              <el-form-item label="承租人银行账号" prop="yhzh">
                <el-input v-model="formInline.yhzh" placeholder="请输入" style="margin-top:5px;" maxlength="20"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="主体类型" prop="ztLei">
                <el-select v-model="formInline.ztLei" placeholder="请选择" style="margin-top:5px;width: 100%;">
                  <el-option label="企业" value="企业"></el-option>
                  <el-option label="个体" value="个体"></el-option>
                </el-select>
              </el-form-item>

            </el-col>
            <el-col :span="12">
              <el-form-item label="主体名称" prop="ztName">
                <el-input v-model="formInline.ztName" placeholder="请输入" style="margin-top:5px;"
                  maxlength="20"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="营业执照" prop="otherImageVideos">
                <upimg v-model="formInline.otherImageVideos" :limit="1" :fileSize="1"></upimg>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="附件信息" prop="fujian">

                <el-upload class="video-uploader" :action="uploadFileUrl" :on-remove="hefuRemove"
                  :on-success="hefuSuccess" :auto-upload="true" :file-list="hefuData" v-if="index ==1">
                  <el-button style="background-color: #fff;color: #3F9B6A;border: 1px solid #dcdfe6;"
                    class="buttonHover" v-if="hefuData.length==0">+点击上传</el-button>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="绑定商家" prop="useCategory">
                <el-select style="width: 100%;" v-model="formInline.useCategory" placeholder="请输入关键词搜索" filterable
                  @change="changeuseCategory">
                  <el-option v-for="item in shopList" :key="item.shopId"
                    :label="item.shopName+ ' ' + item.chargePersonPhone" :value="item.shopId" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="绑定资源" prop="ziyaun">
                <div style="border: 1px solid #E5E5E5;padding: 1px" id="huodong">
                  <div
                    style="padding: 10px 13px;font-size: 14px;border-bottom: 1px solid #E5E5E5;display: flex;justify-content: space-between;">
                    <div></div>
                    <div style="color: #3F9B6A;padding:10px;" @click="mingShow">
                      添加
                    </div>
                  </div>
                  <div style="padding: 15px;">
                    <div style="padding: 0px 20px 0px 0px">
                      <el-table :data="AddData"
                        :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
                        <el-table-column label="序号" min-width="5%">
                          <template slot-scope="scope">
                            {{scope.$index + 1}}
                          </template>
                        </el-table-column>
                        <el-table-column label="资源名称" min-width="20%" show-overflow-tooltip>
                          <template slot-scope="scope">
                            {{scope.row.shopName ? scope.row.shopName :  scope.row.advertisingName?scope.row.advertisingName:scope.row.venueName}}
                          </template>
                        </el-table-column>
                        <el-table-column label="资源类型" min-width="10%">
                          <template slot-scope="scope">
                            {{scope.row.shopName ? '商铺' : scope.row.advertisingType?scope.row.advertisingType:'场地'}}
                          </template>
                        </el-table-column>

                        <el-table-column label="详细地址" min-width="20%">
                          <template slot-scope="scope">
                            {{scope.row.detailedLocation}}
                          </template>
                        </el-table-column>

                        <el-table-column prop="notes" label="实际使用面积" min-width="25%">
                          <template slot-scope="scope">
                            {{scope.row.actualArea ? scope.row.actualArea :  scope.row.actualUsableArea?scope.row.actualUsableArea:'-'}}
                          </template>

                        </el-table-column>

                        <el-table-column label="操作" min-width="15%">
                          <template slot-scope="scope">
                            <div @click="" class="tableBtn greens">查看</div>
                            <div @click="MingDelete(scope.$index)" class="tableBtn greens">删除</div>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item>
                <div style="margin-top: 20px">
                  <el-button @click="addCheck(2,'heForm')" style="background-color: #3F9B6A;color: #fff"
                    v-if="index == 2">确认</el-button>
                  <el-button @click="addCheck(1,'heForm')" style="background-color: #3F9B6A;color: #fff;"
                    v-else>确定</el-button>
                  <el-button @click="closeFn(1)" class="buttonHover"
                    style="color: #606266;border: 1px solid #DBDBDB;background-color: #fff;">取消</el-button>



                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <el-dialog :visible.sync="addMing" title="添加" style="padding: 0;" width="65%" append-to-body center
      :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">

      <div style="padding:20px;max-height: calc(100vh - 200px);
      overflow-y: auto;">
        <div style="border: 1px solid #E5E5E5;padding: 1px" id="huodong">
          <div
            style="padding: 10px 13px;font-size: 14px;border-bottom: 1px solid #E5E5E5;display: flex;justify-content: space-between;">
            <div>选择资源</div>
          </div>
          <div style="padding: 15px;">
            <div style="padding: 0px 20px 0px 0px">
              <el-table :data="ziyuanData" tooltip-effect="dark" @selection-change="handleSelectionChange"
                :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
                <el-table-column label="选择" type="selection" width="55">
                </el-table-column>
                <el-table-column label="序号" min-width="8%">
                  <template slot-scope="scope">
                    {{scope.$index + 1}}
                  </template>
                </el-table-column>
                <el-table-column label="编号" prop="id" min-width="8%">

                </el-table-column>
                <el-table-column label="资源名称" min-width="25%">
                  <template slot-scope="scope">
                    {{scope.row.shopName ? scope.row.shopName :  scope.row.advertisingName?scope.row.advertisingName:scope.row.venueName}}
                  </template>
                </el-table-column>
                <el-table-column label="资源类型" min-width="12%">
                  <template slot-scope="scope">
                    {{scope.row.shopName ? '商铺' : scope.row.advertisingType?scope.row.advertisingType:'场地'}}
                  </template>
                </el-table-column>
                <el-table-column prop="notes" label="对应策略" min-width="15%">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div style="display: flex; justify-content: flex-end; align-items: center;">
          <el-button @click="minSev" style="background-color: #3F9B6A;color: #fff;">确定
          </el-button>
          <el-button @click="mingClose" class="buttonHover"
            style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取消
          </el-button>

        </div>
      </template>

    </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'
  import {
    getAlls,
    changAlls
  } from '../../../api/information.js'
  import {
    getAlls as map1
  } from '../../../api/map1'
  import {
    businessListGetAll,
  } from '@/api/business'
  import {
    duiyingAll,
  } from '../../../api/newZiyuan'
  import upimg from "@/components/ImageUpload/index"
  export default {
    name: 'manage',
    components: {
      upimg
    },
    data() {
      return {
        xiangTab: 'first',
        shopList: [],
        AddData: [],
        multipleSelection: [],
        ziyuanData: [], //资源列表
        addMing: false, //资源框
        rulesHetong: {
          helei: [{
            required: true,
            message: '请选择合同类型',
            trigger: 'change'
          }, ],
          venueNumber: [{
            required: true,
            message: '请输入合同编号',
            trigger: 'blur'
          }],
          // biaoduan: [{
          //   required: true,
          //   message: '请输入标段号',
          //   trigger: 'blur'
          // }],

          contractName: [{
            required: true,
            message: '请输入合同名称',
            trigger: 'blur'
          }],
          yajin: [{
            required: true,
            message: '请输入押金',
            trigger: 'blur'
          }],
          belongingDepartment: [{
            required: true,
            message: '请选择付款周期',
            trigger: 'change'
          }],
          zujin: [{
            required: true,
            message: '请输入租金',
            trigger: 'blur'
          }],
          leaseStartDate: [{
            required: true,
            message: '请选择起租日期',
            trigger: 'change'
          }],
          actualUsableArea: [{
            required: true,
            message: '请选择终止日期',
            trigger: 'change'
          }],
          contractSigningDate: [{
            required: true,
            message: '请选择签订日期',
            trigger: 'change'
          }],
          useCategory: [{
            required: true,
            message: '请选择绑定商家',
            trigger: 'change'
          }],
          fukuanRi: [{
            required: true,
            message: '请选择付款日',
            trigger: 'change'
          }],
          czrName: [{
            required: true,
            message: '请输入承租人名称',
            trigger: 'blur'
          }],
          lxdh: [{
            required: true,
            message: '请输入承租人名称',
            trigger: 'blur'
          }],
          czrName: [{
            required: true,
            message: '请输入联系电话',
            trigger: 'blur'
          }],
          yhzh: [{
            required: true,
            message: '请输入承租人银行账号',
            trigger: 'blur'
          }],
          ztLei: [{
            required: true,
            message: '请选择主体类型',
            trigger: 'change'
          }],
          ztName: [{
            required: true,
            message: '请输入主体名称',
            trigger: 'blur'
          }],
          otherImageVideos: [{
            required: true,
            message: '请上传营业执照',
            trigger: 'blur'
          }],

          // fujian: [{
          //       required: true,
          //       message: '请上传附件信息',
          //       trigger: 'blur'
          //     }],
          // ziyaun: [{
          //       required: true,
          //       message: '请选择绑定资源',
          //       trigger: 'blur'
          //     }],


        }, //合同规则
        shopfrom: {
          shopName: '', // 店铺名称
          shopCode: '', // 店铺编码
          chargePersonName: '', // 店铺负责人
          contractState: '1', // 合同状态 1-有效 0-无效
          page: '1', // 当前页
          pageSize: '1000' // 每页记录数
        },
        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: [],
        formSel: {
          shopName: '',
          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 = {
          shopName: '',
          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, formName) {
        if (val == 1) {
          this.$refs[formName].validate((valid) => {
            console.log(valid)
            if (valid) {
              // if(this.hefuData.length!=0){
              //   this.formInline.appendicesContract =  JSON.stringify(this.hefuData[0])
              // }
              //  this.formInline.createDate = this.currentTime()
              //  addList(this.ruleForm).then(res => {
              //    this.hefuData = []
              //    this.ggXin = true
              //    this.getAll()
              //  })
              if (this.hefuData.length != 0) {
                this.formInline.appendicesContract = JSON.stringify(this.hefuData[0])
              }
              this.formInline.createDate = this.currentTime()
              contractAdd(this.formInline).then(res => {
                this.formInline.contractNumber = res.data.contractNumber
                this.formInline.createDate = this.currentTime()
                cereLeasingAdd(this.formInline).then(res => {
                  this.ggXin = false
                  this.getAll()
                })
              })
            } else {
              this.$message({
                message: '请填写完整信息',
                type: 'error'
              })
              return false;
            }
          })

          //   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 => {
              this.ggXin = false
              this.getAll()
            })
          })

        }


      },
      // 获取时间
      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 = {}
          businessListGetAll(this.shopfrom).then(res => {
            this.shopList = res.data.list
          })


        } else if (val == 2) {
          this.heForm = item.cereContractInformation
          const {
            cereContractInformation,
            ...rest
          } = item
          this.formInline = rest
        }
        this.ggXin = true

      },
      closeFn(val) {
        this.xiangTab = 'first'
        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() {
        const res = await cereLeasingByPage(this.formSel)
        this.tableData = res.data.content
        this.total = res.data.content.length

      },
      //重置按钮
      resetting() {
        this.formSel = {
            shopName: '',
            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);
      },
      changeuseCategory(e) {
        console.log(e)
      },
      async mingShow() {

        // const ziyuan =  await duiyingAll(this.pageindex)

        // ziyuan.data.content.map(item=>{
        //    if(item.resources.advIds.length !=0){
        //      item.ziyuan = item.resources.advIds[0]
        //    }else if(item.resources.shopIds.length !=0){
        //       item.ziyuan = item.resources.shopIds[0]
        //    }else if(item.resources.siteIds.length !=0){
        //       item.ziyuan = item.resources.siteIds[0]
        //    }else{
        //       item.ziyuan ={}
        //    }
        // })

        const ziyuan = await getAlls(this.pageindex)
        const ggw = await map1(this.pageindex)
        const changdi = await changAlls(this.pageindex)
        this.ziyuanData = [...ziyuan.data.content, ...ggw.data.content, ...changdi.data.content]
        this.addMing = true
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      minSev() {
        // this.AddData = this.multipleSelection
        const filteredAddData = this.AddData.filter(itemAdd => {
          // 使用 some 方法检查 this.multipleSelection 中是否存在具有相同 id 的元素
          return !this.multipleSelection.some(itemMultiple => itemMultiple.id === itemAdd.id);
        });
        this.AddData = filteredAddData.concat(this.multipleSelection)
        this.addMing = false
        this.multipleSelection = []
      },
      mingClose() {
        this.multipleSelection = []
        this.ziyuanData = []
        this.addMing = false
      },
      MingDelete(item) {
        this.AddData.splice(item, 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: space-between;
  }

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



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



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




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

  ::v-deep .el-dialog__title {
    color: #000;
  }

  ::v-deep .el-dialog__wrapper {

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

    }

    .diaslog_zhong {
      margin-left: 222px;
      margin-top: 61px !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 .el-dialog__body {
    padding: 0 0 !important;
  }

  ::v-deep .buttonHover:hover {
    color: #3f9b6a !important;
    border-color: #c5e1d2 !important;
    background-color: #ecf5f0 !important;
    outline: none;
  }
</style>
