<template>
  <div>
    <!-- 合同信息 -->
    <div class="layout-content">
      <div class="step">
        <!-- step -->
        <el-steps
          v-if="isstepshow"
          :active="active"
          finish-status="success"
          :align-center="true"
          class="fx_step"
        >
          <el-step title="合同基本信息" class="first_title"></el-step>
          <el-step title="租金款项信息" class="second_title"></el-step>
          <el-step title="合同租金账单" class="third_title"></el-step>
          <el-step title="物业款项信息" class="fourth_title"></el-step>
          <el-step title="物业账单" class="fourth_title"></el-step>
        </el-steps>
        <el-form v-show="active==0" ref="form" :model="form" :rules="rules" label-width="130px">
          <!-- 商户信息 -->
          <div class="public_part">
            <div class="public_part_title">商户信息</div>
            <div class="public_part_Box">
              <el-form-item label="商户名称" prop="merchantName" class="fx_title">
                <!-- <el-input
                  v-if="!showContractTable"
                  v-model="form.merchantName "
                  placeholder="请输入商户名称"
                  maxlength="50"
                  clearable
                ></el-input> -->
                <el-select @change="changeMerchantName" v-model="form.merchantName" clearable filterable placeholder="请输入或者选择商户名">
                  <el-option
                    v-for="(item,index) in merchantList"
                    
                    :key="index"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>

                <el-select @change="changeContract" v-model="curContractIndex" clearable filterable placeholder="请选择商户合同">
                  <el-option
                    v-for="(item,index) in curContractList"
                    
                    :key="index"
                    :label="item.wxRentContract.shopName"
                    :value="index">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="合同主体名称" prop class="fx_title">
                <el-input
                  v-model="form.subjectName "
                  placeholder="合同中乙方主体名称"
                  maxlength="50"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item label="经营品牌" prop="brand" class="fx_send">
                <el-select v-model="form.brand" placeholder="请先选择品牌" class="select-method" :disabled="!isEditOk">
                  <el-option
                    v-for="(item,index) in brands"
                    :key="index"
                    :value="item.id"
                    :label="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="经营业态" prop="businessId" class="fx_send">
                <el-select v-model="form.businessId" placeholder="请先选择经营业态" :disabled="!isEditOk">
                  <el-option
                    v-for="(item,index) in businessIds"
                    :key="index"
                    :value="item.id"
                    :label="item.title"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="店面类型" prop="shopType" class="fx_send">
                <el-select v-model="form.shopType	" placeholder="请先选择店铺类型">
                  <el-option
                    v-for="index in shopTypes"
                    :key="index.value"
                    :value="index.value"
                    :label="index.label"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="联系人" prop="linkPerson" class="fx_title">
                <el-input v-model="form.linkPerson" placeholder="请输入联系人" maxlength="8" clearable :disabled="!isEditOk"></el-input>
              </el-form-item>
              <el-form-item label="联系电话" prop="linkPhone" class="fx_title numberInputBox">
                <el-input
                  :disabled="!isEditOk"
                  type="number"
                  v-model="form.linkPhone"
                  placeholder="请输入手机号或座机号"
                  clearable
                  maxlength="20"
                ></el-input>
              </el-form-item>
            </div>
          </div>
          <!-- 商铺关联的合同列表 表格 wkx -->
          <contract-shop-table v-if="showContractTable" :contractType="1" :ref="contractTable" :merchantId="merchantIdFromSearch"></contract-shop-table>
          <!-- 选择信息 -->
          <rent-shop :ref="rentshop"></rent-shop>
          <!-- 合同信息 -->
          <div class="public_part">
            <div class="public_part_title">合同信息</div>
            <div class="public_part_Box">
              <el-form-item label="合同状态" prop="status" class="fx_send">
                <el-select :disabled="showContractTable" v-model="form.status" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="合同编号" prop="contractNumber" class="fx_title">
                <el-input
                  :disabled="showContractTable"
                  v-model="form.contractNumber"
                  placeholder="请输入合同编号"
                  maxlength="50"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item label="合同签约日" prop="signDate">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.signDate"></el-date-picker>
              </el-form-item>
            </div>
          </div>
          
          <!-- 租赁信息 -->
          <div class="public_part">
            <div class="public_part_title">租赁信息</div>
            <div class="public_part_Box">
              <el-form-item label="租赁开始日期" prop="rentalStartDate">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="form.rentalStartDate"
                  :picker-options="pickerOptions0"
                  @change="(value) => changeDates(value, 'rentalStartDate')"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="租赁截止日期" prop="rentalEndDate">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="form.rentalEndDate"
                  :picker-options="pickerOptions1"
                  @change="(value) => changeDates(value, 'rentalEndDate')"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="总租期" class="width">
                <span>{{form.totalPeriodMonth}}</span>个月
                <span>{{form.totalPeriodDay}}</span>天
              </el-form-item>
              <el-form-item label="装修日期" prop="fixDate">
                <el-date-picker
                  v-model="form.fixDate"
                  type="daterange"
                  style="width:400px!important;"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="计租开始日期" prop="startDate">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="form.startDate"
                  @change="comperData"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="账单生成方式" prop="adjustPeriod">
                <el-radio-group
                  v-model="form.adjustPeriod"
                  @change="setAdjustPeriod"
                  size="small"
                  style="margin-left:20px;"
                >
                  <el-radio-button label="2" value="2">按计租日期</el-radio-button>
                  <el-radio-button label="3" value="3">按自然月</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </div>
          </div>
          <div class="group-btn">
            <el-button class="quxiaoBtn" @click="cancel">取消</el-button>
            <el-button class="baocunBtn" :loading="loading" @click="submit('form')">保存并下一步</el-button>
          </div>
        </el-form>
      </div>
    </div>
    <!-- 款项信息 -->
    <div class="layout-content" v-if="active==1">
      <el-form ref="moneyform" :model="form" :rules="rules" label-width="130px">
        <div class="public_part">
          <div class="public_part_title">租金信息</div>
          <div class="public_part_Box">
            <contract-money :formDataList="form" ref="contractMoney"></contract-money>
          </div>
          <div class="public_part">
            <div class="public_part_title">账户信息</div>
            <div class="public_part_Box">
              <el-form-item label="甲方接收账户" prop="payAccount" class="fx_title">
                <el-input v-model="form.payAccount " placeholder="请输入接收账户" maxlength="20" clearable></el-input>
              </el-form-item>
              <el-form-item label="开户行" prop="bankName" class="fx_title">
                <el-input v-model="form.bankName " placeholder="请输入开户行" maxlength="20" clearable></el-input>
              </el-form-item>
            </div>
          </div>
        </div>
        <div class="group-btn">
          <el-button class="quxiaoBtn" @click="moneycancel">返回上一步</el-button>
          <el-button class="baocunBtn" :loading="loading" @click="moneysubmit('moneyform')">保存并下一步</el-button>
        </div>
      </el-form>
    </div>
    <!-- 附件 -->
    <div class="layout-content" v-show="active==2">
      <el-form ref="fileform" :model="form" :rules="rules" label-width="130px">
        <div class="public_part">
          <div class="public_part_title">合同租金明细</div>
          <div class="public_part_Box">
            <el-radio-group
              v-model="form.rentStartType"
              @change="submitMoney(1)"
              style="margin-bottom:20px;"
            >
              <el-radio :label="1" border>按租赁开始日生成</el-radio>
              <el-radio :label="2" border>按计租日生成</el-radio>
            </el-radio-group>
            <rent-bill :data="billData" :id="form.id" :type='1' :ref="billTk"></rent-bill>
          </div>
        </div>
        <div class="group-btn">
          <el-button class="quxiaoBtn" @click="filecancel">返回上一步</el-button>
          <el-button class="baocunBtn" :loading="loading" @click="filesubmit('fileform')">保存并下一步</el-button>
        </div>

        <!-- 跳转商户弹框 -->
        <el-dialog
          title
          :visible.sync="centerDialogVisible"
          width="30%"
          center
          :modal-append-to-body="false"
        >
          <span>合同信息已保存。为开启相关权限，请完善商户信息</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="cancleMerchant">取 消</el-button>
            <el-button type="primary" @click="sureMerchant">去商户完善信息</el-button>
          </span>
        </el-dialog>
      </el-form>
    </div>
    <!-- 款项信息 -->
    <div class="layout-content" v-show="active==3">
      <el-form ref="moneyform02" :model="moneyform" :rules="rules" label-width="130px">
        <div class="public_part">
          <div class="public_part_title">款项信息</div>
          <div class="public_part_Box" style="margin-left:50px;">
            <el-form-item
              label="计租面积"
              prop="price"
              class="fx_title"
            >{{getTotleArea+'㎡'+' ('+getAreaList+')'}}</el-form-item>
            <el-form-item label="物业单价" prop="rentPrice" class="fx_title">
                   <el-input
                :value="moneyform.rentPrice"
                @input="changeArea('rentPrice', $event)"
                placeholder="请输入物业单价"
                maxlength="10"
                clearable
              ></el-input>
              <span class="per">元/㎡</span>
              <el-radio-group
                :value="moneyform.priceUnit"
                @input="changeFormData('priceUnit', $event)"
                size="small"
              >
                <el-radio-button
                  v-for="(item,index) in priceUnitOption"
                  :key="index"
                  :label="item.value"
                >{{item.name}}</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="物业费" prop="price" class="fx_title">
              <el-input v-model="moneyform.price " placeholder="请输入" maxlength="10" clearable></el-input>
              <span class="per">元/{{changeUnitType}}</span>
            </el-form-item>
            <el-form-item label="物业押金" prop="deposit" class="fx_title">
              <el-input v-model="moneyform.deposit " placeholder="请输入" maxlength="10" clearable></el-input>
              <span class="per">元</span>
            </el-form-item>
            <el-form-item
              v-if="months.length>0"
              label="年物业费调整"
              class="fx_title"
              style="display:inline-block;"
            >
              <el-radio-group
                :value="moneyform.adjustRatioWay"
                @input="changeFormData('adjustRatioWay', $event)"
                size="small"
                style="margin-left:20px;"
              >
                <el-radio-button label="1" value="1">比例上调</el-radio-button>
                <el-radio-button label="2" value="2">固定上调</el-radio-button>
                <el-radio-button label="3" value="3">自定义</el-radio-button>
              </el-radio-group>
              <!-- <help title content="年物业费调整为固定上调，请在输入框中输入需要上调的比例或金额"></help> -->
            </el-form-item>
            <div v-if="moneyform.adjustRatioWay==1" class="per-list">
              <el-form-item
                v-for="index in months"
                :key="index"
                label
                :value="index"
                :prop="`adjustRatio[${index}]`"
                :rules="formvail.adjustRatio"
                class="fx_title"
                style="display:inline-block;width:400px;"
              >
                <el-input v-model="moneyform.adjustRatio[index]" placeholder="调整比例" clearable>
                  <template slot="prepend">第{{index+2}}年</template>
                </el-input>
                <span class="per">%</span>
              </el-form-item>
            </div>
            <div v-else class="per-list">
              <el-form-item
                v-for="index in months"
                :key="index"
                label
                :value="index"
                :prop="`adjustRatio[${index}]`"
                :rules="formvail.adjustRatio1"
                class="fx_title"
                style="display:inline-block;width:400px;"
              >
                <el-input v-model="moneyform.adjustRatio[index]" placeholder="调整金额" clearable>
                  <template slot="prepend">第{{index+2}}年</template>
                </el-input>
                <span class="per">元/{{changeUnitType}}</span>
              </el-form-item>
            </div>
            <el-form-item label="付款周期" prop="receivePeriod" class="paydata">
              <el-select
                v-model="moneyform.receivePeriod"
                filterable
                class="select-method innerinput"
                style="width:150px"
              >
                <el-option
                  v-for="index in cycles"
                  :key="index.value"
                  :value="index.value"
                  :label="index.label"
                ></el-option>
              </el-select>
              <!-- <el-input-number
                v-if="moneyform.priceUnit==1"
                :value="moneyform.receivePeriod"
                @input="changeFormData('receivePeriod', $event)"
                controls-position="right"
                :min="1"
                :max="365"
              ></el-input-number>-->
              <span class="per">月</span>
            </el-form-item>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="滞纳金费率"
                  prop='latePayRatio'
                >
                  <el-input
                    style="width:160px"
                    v-model="moneyform.latePayRatio"
                    placeholder="请输入"
                    maxlength="10"
                    clearable
                  ></el-input>
                  %
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item
                  label="欠缴后"
                  prop='latePayDay'
                >
                  <el-input
                    style="width:160px"
                    v-model="moneyform.latePayDay"
                    placeholder="请输入"
                    maxlength="10"
                    clearable
                  ></el-input>
                  日开始计费
                  <help title content="例如：“0”为欠缴当天开始计滞纳金"></help>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="账单生成方式" prop="lease">
              <el-radio-group
                v-model="moneyform.adjustPeriod"
                size="small"
                style="margin-left:20px;"
              >
                <el-radio-button label="2" value="2">按计租日期</el-radio-button>
                <el-radio-button label="3" value="3">按自然月</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="甲方接收账户" prop="payAccount" class="fx_title">
              <el-input
                v-model="moneyform.payAccount "
                placeholder="请输入"
                class="edit-item-input"
                maxlength="20"
                clearable
              ></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="group-btn">
          <el-button class="quxiaoBtn" @click="propertyMoneycancel">返回上一步</el-button>
          <el-button
            class="baocunBtn"
            :loading="loading"
            @click="moneysubmit02('moneyform02')"
          >保存并下一步</el-button>
        </div>
      </el-form>
    </div>
    <!-- 附件 -->
    <div class="layout-content" v-show="active==4">
      <!-- 合同上传 -->
      <el-form ref="fileform02" :model="form" :rules="rules" label-width="130px">
        <div class="public_part">
          <div class="public_part_title">物业租金明细</div>
          <div class="public_part_Box">
            <el-radio-group
              v-model="moneyform.rentStartType"
              @change="submitMoney(2)"
              style="margin-bottom:20px;"
            >
              <el-radio :label="1" border>按租赁开始日生成</el-radio>
              <el-radio :label="2" border>按计租日生成</el-radio>
            </el-radio-group>
            <rent-bill :data="billData" :id="moneyform.id" :type='2' :ref="billTk02"></rent-bill>
          </div>
        </div>
        <div class="public_part">
          <div class="public_part_title">附件</div>
          <div class="public_part_Box" style="width:500px;margin-left:50px;">
            <el-form-item label="合同文件：">
              <el-upload
                class="upload-demo fx_upload"
                drag
                action="/api/upload/awsFileUpload"
                :on-error="importError"
                :on-success="importSuccess"
                :on-remove="handleRemove"
                :on-preview="downloadPr"
                :file-list="fileNames"
                :beforeUpload="beforeUpload"
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或
                  <em>点击上传</em>
                </div>
              </el-upload>
            </el-form-item>
          </div>
        </div>
        <div class="public_part_title" v-if="processData.length>0&&form.status==1">合同审批</div>
        <div
          class="public_part_Box"
          style="background:#fff;"
          v-if="processData.length>0&&form.status==1"
        >
          <div style="width:800px;">
            <el-form-item label="审批流程">
              <process-template :processData="processData"></process-template>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input
                type="textarea"
                maxlength="150"
                v-model="form.remark"
                placeholder="请填写备注！"
                class="edit-item-input"
              ></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="group-btn">
          <el-button class="quxiaoBtn" @click="filecancel">返回上一步</el-button>
          <el-button class="baocunBtn" :loading="loading" @click="filesubmit02('fileform02')">完成</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import help from "../../help.vue";
import commonUtil from "../../../core/tool/commonUtil";
import moment, { months } from "moment";
import { mapState, mapActions } from "vuex";
import { deepcopy } from "../../../utils/validate";
import rentBill from "../contractutil/rentbill.vue";
import Vue from "vue";
import rentShop from "../contractutil/rentshop.vue";
import contractMoney from "../contractComp/contractMoney.vue";
import { ContractUrl } from "../businessComp/UrlEnum.js";
import { ContractData } from "../../../service/contract/data.js";
import { promissionUrl } from "../../../urlconfig/promission/url.js";
import processTemplate from "../contractutil/processTemplate.vue";
import contractShopTable from "../contractutil/contractShopTable.vue";
export default {
  components: {
    rentBill,
    rentShop,
    contractMoney,
    processTemplate,
    contractShopTable,
    help
  },
  name: "rentLeaseEdit",
  data() {
    return {
      //wkx
      showContractTable: false,//来自续签才展示合同列表表格
      merchantIdFromSearch: '',//根据搜索查到的商户id
      merchantList: [],
      curRentInfo: [],
      contractTable:'contractTable',
      
      loading: false,
      ...mapActions(["setRentInfo", "setNavData", "setFormData"]),
      billTk: "rentbill",
      billTk02: "rentbill02",
      billData: null,
      pickerAfterdata: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7; //限制只能选今天以后的日期
        }
      },
      priceUnitOption: ContractData.priceUnitOption,
      processData: [],
      rentshop: "rentshop",
      centerDialogVisible: false, //商户弹框
      isEditOk: true,//用于招商页面携带，不可编辑
      months: [],
      brands: [],
      active: 0,
      cycles: ContractData.cycles,
      isstepshow: true, //新建商户是否显示
      shopshow: true,
      isShow: true,
      businessIds: [], //经营业态列表
      newshopTableData: {},
      moneyform: {
        adjustRatioWay: "1", //年物业费调整方式1、比例上调2、按固定上调
        rentStartType: 1,
        rentContractId: "",
        id: "",
        priceUnit: 2, //物业费单价
        rentPrice: "", //物业费单价
        rentShopType: 1,
        signDate: "", //合同签约日
        rentalStartDate: "", //租赁开始日期
        lease: "",
        brand: "", //商铺经营品牌
        merchantName: "", //商户名称
        merchantId: "", //商户id
        contractNumber: "", //合同编号
        status: "", //合同状态
        linkPerson: "", //联系人
        linkPhone: "", //联系人电话
        rentArea: "", //计租面积
        shopType: "", //店铺类型
        zuqi: "", //计租日期
        price: "", //租金
        deposit: "", //押金
        receivePeriod: "", //付款周期
        payAccount: "", //支付账号
        shopId: "", //商铺id
        filepath: "", //文件路径
        filename: "", //文件名称
        merchantId: "", //商户id
        businessId: "", //经营业态
        adjustRatio: [], //上浮比例
        adjustPeriod: "2",
        id: "",
        latePayRatio:"",
        latePayDay:""
      },
      form: {
        adjustRatioWay: "1", //年物业费调整方式1、比例上调2、按固定上调
        operationType: 2,
        rentStartType: 1,
        fixDate: [],
        rentShopType: 1,
        signDate: "", //合同签约日
        startDate: "",
        rentalStartDate: "", //租赁开始日期
        rentalEndDate: "", //租賃截止日期
        totalPeriodMonth: 0, //总租期（月）
        totalPeriodDay: 0, //总租期（天）
        shopTableData: [],
        brand: "", //商铺经营品牌
        merchantName: "", //商铺名称
        subjectName: "", //合同主体名称
        contractNumber: "", //合同编号
        status: "", //合同状态
        linkPerson: "", //联系人
        linkPhone: "", //联系人电话
        rentArea: "", //计租面积
        shopType: "", //店铺类型
        zuqi: "", //计租日期
        price: "", //租金
        deposit: "", //押金
        receivePeriod: "", //付款周期
        payAccount: "", //支付账号
        shopId: "", //商铺id
        filename: "", //文件名
        merchantId: "", //商户id
        businessId: "", //经营业态
        id: "",
        lease: 0, //老数据总周期
        type: null, //计算方式
        revenue: "", //营业额
        payRatio: "", //支付比例
        adjustRatio: [], //上浮比例
        adjustPeriod: "2", //周期浮动比例
        accountType: "", //支付账号类型
        priceUnit: "", //租赁单价计算时间单位
        bankName: "", //开户行
        latePayRatio:"",
        latePayDay:""
      },
      curContractId: '',
      curContractIndex: '',
      curContractList: '',
      centerDialogVisible: false, //商户弹框
      brands: [],
      fileNames: [],
      //合同状态
      options: [
        {
          value: 0,
          label: "意向"
        },
        {
          value: 1,
          label: "待签约"
        }
      ],
      // 店铺类型
      shopTypes: ContractData.shopTypes,
      //计租计算方式
      computedTypes: ContractData.computedTypes,
      formvail: {
        adjustRatio: [
          {
            required: true,
            message: "抱歉，不能识别您输入的浮动比例",
            trigger: "blur"
          },
          {
            validator(rule, value, callback, source, options) {
              var errors = [];
              const reg = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/;
              if (!reg.test(value)) {
                callback("抱歉，浮动比例限制为数字");
              } else if (value > 50) {
                callback("抱歉，浮动比例不能大于50%");
              }
              callback(errors);
            }
          }
        ],
        adjustRatio1:[
           {
            required: true,
            message: "抱歉，此项为必填项！",
            trigger: "blur"
          },
          {
            validator(rule, value, callback, source, options) {
              var errors = [];
              const reg = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/;
              console.log(value)
              if (!reg.test(value)||Number(value)>=10000000) {
                callback("抱歉，金额限制为大于0且小于9999999.99的最多保留两位小数的数字！");
              } 
              callback(errors);
            }
          }
        ]
      },
      rules: {
        latePayRatio: [
          {
            required: false,
            trigger: "blur"
          },
          {
            validator(rule, value, callback, source, options) {
              var errors = [];
              const reg = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/;
              if (!reg.test(value)&&value!='') {
                callback("抱歉，滞纳金费率限制为大于0且最多保留两位小数的数字");
              } else {
                if (typeof value == "string") {
                  if (Number(value)>100) {
                    callback("滞纳金费率最大值为100%");
                  }
                }
              }
              callback(errors);
            }
          }
        ],
        latePayDay: [
          {
            required: false,
            trigger: "blur"
          },
          {
            validator(rule, value, callback, source, options) {
              var errors = [];
              const reg = /^[0-9]+$/;
              if (!reg.test(value)&&value!='') {
                callback("抱歉，限制为0~1000的整数！");
              } else {
                if (typeof value == "string") {
                  if (Number(value)>1000) {
                    callback("抱歉，限制为0~1000的整数！");
                  }
                }
              }
              callback(errors);
            }
          }
        ],
        adjustPeriod: [
          {
            required: true,
            trigger: "change",
            message: "抱歉，请选择账单生成方式"
          }
        ],
        rentalStartDate: [
          {
            required: true,
            trigger: "change",
            message: "抱歉，不能识别您选择的租赁开始日期"
          }
        ],
        rentalEndDate: [
          {
            required: true,
            trigger: "change",
            message: "抱歉，不能识别您选择的租赁结束日期"
          }
        ],
        startDate: [
          {
            required: true,
            trigger: "change",
            message: "抱歉，不能识别您选择的计租开始日期"
          }
        ],
        signDate: [
          {
            required: true,
            trigger: "change",
            message: "抱歉，不能识别您选择的合同签约日"
          }
        ],
        revenue: [
          {
            required: true,
            pattern: /.+/,
            message: "抱歉，不能识别您输入的营业额",
            trigger: "blur"
          },
          {
            validator(rule, value, callback, source, options) {
              var errors = [];
              // const reg = /^[0-9]\d*$/;
              const reg = /(^[0-9]\d*(\.\d{1,2})?$)|(^1(\.\d{1,2})?$)/;
              if (!reg.test(value)) {
                callback("抱歉，营业额限制为数字");
              } else {
                if (typeof value == "string") {
                  if (value.split(".")[0].length > 7) {
                    callback("最大金额为9999999.99");
                  }
                }
              }
              callback(errors);
            }
          }
        ],
        status: [
          {
            required: true,
            trigger: "change",
            message: "抱歉，不能识别您选择的合同状态"
          }
        ],
        businessId: [
          {
            required: true,
            trigger: "change",
            message: "抱歉，不能识别您选择的经营业态"
          }
        ],
        contractNumber: [
          {
            required: true,
            trigger: "blur",
            message: "抱歉，不能识别您输入的合同编号"
          }
        ],
        merchantName: [
          {
            required: true,
            trigger: "blur",
            message: "抱歉，不能识别您输入的商铺名称"
          }
        ],
        zuqi: [
          {
            required: true,
            trigger: "blur",
            message: "抱歉，不能识别您输入的总租期"
          }
        ],
        // brand: [{
        //   required: true,
        //   trigger: "blur",
        //   message: "抱歉，不能识别您输入的经营品牌"
        // }],
        // shopType: [
        //   {
        //     required: true,
        //     trigger: "change",
        //     message: "抱歉，不能识别您选择的店铺类型"
        //   }
        // ],

        receivePeriod: [
          {
            required: true,
            trigger: "change",
            message: "抱歉，不能识别您输入的付款周期"
          },
          {
            validator(rule, value, callback, source, options) {
              var errors = [];
              if (value < 1) {
                callback("抱歉，付款周期不能小于1个月");
              }
              callback(errors);
            }
          }
        ],
        rentdata: [
          {
            required: true,
            trigger: "blur",
            message: "抱歉，不能识别您输入的交租日"
          }
        ],
        firstrentdata: [
          {
            required: true,
            trigger: "blur",
            message: "抱歉，不能识别您输入的首期款缴日期"
          }
        ],
        linkPhone: [
          {
            required: true,
            message: "抱歉，不能识别您输入的手机号哦!",
            trigger: "blur"
          },
          {
            validator(rule, value, callback, source, options) {
              var errors = [];
              var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/,
                phone = /^0\d{2,3}-?\d{7,8}$/;
              if (value && !mobile.test(value) && !phone.test(value)) {
                callback("抱歉，请输入正确的手机号和座机号");
              }
              if (value && !mobile.test(value) && !phone.test(value)) {
                callback("抱歉，请输入正确的手机号和座机号");
              }
              callback(errors);
            }
          }
        ],
        // addr: [{
        //         required: true,
        //         message: '地址不能不能为空...',
        //         trigger: 'blur'
        // }],
        linkPerson: [
          {
            required: true,
            message: "抱歉，不能识别您输入的联系人",
            trigger: "blur"
          },

          {
            validator(rule, value, callback, source, options) {
              var errors = [];
              if (value.length > 19) {
                callback("抱歉，商铺号限制为20字符以内");
              }
              callback(errors);
            }
          }
        ],
        buildArea: [
          {
            required: true,
            pattern: /.+/,
            message: "抱歉，不能识别您输入的建筑面积",
            trigger: "blur"
          },
          {
            validator(rule, value, callback, source, options) {
              var errors = [];
              const reg = /(^[1-9]\d*(\.\d{1,2})?$)|(^1(\.\d{1,2})?$)/;
              if (!reg.test(value)) {
                callback("抱歉，建筑面积限制为大于0的数字");
              }
              callback(errors);
            }
          }
        ],
        rentArea: [
          {
            required: true,
            pattern: /.+/,
            message: "抱歉，不能识别您输入的经营面积",
            trigger: "blur"
          }
        ]
      }
    };
  },
  computed: {
    ...mapState({
      rentInfo: state => state.setRentInfo.rentInfo,
      formData: state => state.setRentInfo.formData
    }),
    changeUnitType() {
      return this.priceUnitOption.filter(
        e => e.value == this.moneyform.priceUnit
      )[0].name;
    },
    getTotleArea() {
      let Str = 0;
      this.rentInfo.map((item, index) => {
        Str += Number(item.rentArea);
      });
      return Str.toFixed(2);
    },
    getAreaList() {
      let Str = "";
      this.rentInfo.map((item, index) => {
        Str =
          Str != ""
            ? Str + "," + item.shopNumber + "号铺:" + item.rentArea + "㎡"
            : item.shopNumber + "号铺:" + item.rentArea + "㎡";
      });
      return Str;
    },
    pickerOptions0: function() {
      return {
        disabledDate: time => {
          let endDate = moment(this.form.rentalEndDate);
          if (endDate) {
            return moment(time) > endDate;
          }
        }
      };
    },
    pickerOptions1: function() {
      return {
        disabledDate: time => {
          let beginDateVal = moment(this.form.rentalStartDate);
          if (beginDateVal) {
            return moment(time) < beginDateVal;
          }
        }
      };
    }
  },
  watch: {},
  methods: {
    /**
     * 修改租赁面积及单价改变租金
     */
    changeArea(type, val) {
      this.moneyform[type] = val;
      let Str = 0;
      this.rentInfo.map((item, index) => {
        Str += Number(item.rentArea);
      });
      this.moneyform.price = (
        (Number(this.moneyform["rentPrice"] * 100) * Number(Str * 100)) /
        10000
      ).toFixed(2);
    },
    propertyMoneycancel() {
      this.active--;
    },
    changeFormData(type, val) {
      this.moneyform[type] = val;
    },
    //
    setAdjustPeriod(e) {
      this.formData.adjustPeriod = e;
      // this.formData.adjustRatio = [];
      this.setFormData(this.formData);
    },
    //修改租赁开始时间及租赁结束日期
    changeDates(e, type) {
      this.form[type] = moment(e).format("YYYY-MM-DD");
      this.getDateDiff(this.form.rentalStartDate, this.form.rentalEndDate);
    },
    getDateDiff(rentalStartDate, rentalEndDate) {
      if (rentalStartDate && rentalEndDate) {
        this.getFetch(
          `${ContractUrl.getDateDiff}?startDate=${moment(
            this.form.rentalStartDate
          ).format("YYYY-MM-DD")}&endDate=${moment(this.form.rentalEndDate)
            .add(1, "days")
            .format("YYYY-MM-DD")}`
        ).then(res => {
          this.form.totalPeriodMonth = res.data.month;
          this.form.totalPeriodDay = res.data.day;
          this.form.lease =
            Number(res.data.month) + (Number(res.data.day) > 0 ? 1 : 0);
          this.lease();
        });
      }
    },
    //保存第一步
    saveFirst(param) {
      console.log(this.rentInfo)
      if (this.$route.query.from!=undefined) {
        this.form.shopId = this.rentInfo[0].shopId;
        param.shopId = this.rentInfo[0].shopId;
      }
      this.loading = true;
      let url = this.form.id
        ? "/api/wxRentContract/update"
        : "/api/wxRentContract/add";
      if (this.showContractTable) {
        // url = '/api/wxRentContractExtension/extension';
        url = "/api/wxRentContract/add";
        param.fromId = this.curContractId;
        param.operationType = 2;
        
      }
      //wkx
      /* if (this.showContractTable) {
        url = '/api/wxRentContractExtension/extension';
        param.status = 9;
      } */
      this.postFetch(url, param)
        .then(d => {
          this.loading = false;
          if (this.form.id == "" && this.active == 0) {
            this.form.id = d.data.id;
          }
          this.$refs[this.billTk].setData(d.data.previewBillRentList,this.formData.receivePeriod);
          if (this.active++ > 4) this.active = 0;
          this.$message.success("提交成功");
          this.form.id = d.data.id;
          //
          if (d.data.busDiscountRatio == undefined ||  d.data.busDiscountTime == undefined) {
            d.data.busDiscountRatio = '';
            d.data.busDiscountTime = 1;
          }
          let myObj = Object.assign({},this.formData);
          myObj.busDiscountRatio = d.data.busDiscountRatio;
          myObj.busDiscountTime = d.data.busDiscountTime;
          this.setFormData(myObj);
        })
        .catch(err => {
          this.$message.error(err.data);
          this.loading = false;
        });
    },
    checkcontractNum(param) {
      this.$confirm("抱歉,此合同编号已存在, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.saveFirst(param);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    //合同基本信息提交
    submit(formName) {
      if (this.$route.query.from!=undefined) {
        this.form.shopId = this.rentInfo[0].shopId;
      }
      let param = deepcopy(this.form);
      param = Object.assign(param, this.formData);
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.form.startDate && this.form.rentalStartDate) {
            //计租开始日期
            let startDate = moment(this.form.startDate).format("YYYY-MM-DD");
            //租赁开始日期
            let rentalStartDate = moment(this.form.rentalStartDate).format(
              "YYYY-MM-DD"
            );
            if (moment(startDate).isBefore(rentalStartDate)) {
              this.$message.error("计租开始日期不能早于租赁开始日期");
              return;
            }
          }
          if(moment(this.form.startDate).valueOf()>moment(this.form.rentalEndDate).valueOf()){
            this.$message.error("计租开始日期不能大于租赁结束日期");
            return;
          }
          if (this.form.lease > 600) {
            this.$message.error("抱歉，总租期最大限制为600个月");
            return;
          }
          param.fileNames = JSON.stringify(this.fileNames);
          if (this.formData.rentInputWay == 1) {
            param.depositStr = this.formData.deposit;
            param.priceStr = this.formData.price;
          } else {
            param.depositStr = 0;
            param.priceStr = 0;
            this.rentInfo.map((item, index) => {
              param.depositStr += Number(item.deposit);
              param.priceStr += Number(item.price);
            });
          }
          param.price = Number(Number(param.price * 100).toFixed(2));
          param.deposit = Number(Number(param.deposit * 100).toFixed(2));
          param.rentArea = this.getTotleRentArea();
          param.revenue = Number(
            Number(this.formData.revenue * 100).toFixed(2)
          );
          param.payRatio = Number(
            Number(this.formData.payRatio * 100).toFixed(2)
          );
          param.type = this.formData.type ? this.formData.type : 1;
          param.rentalStartDate =
            commonUtil.date.date(this.form.rentalStartDate) + " 00:00:00";
          param.rentalEndDate =
            commonUtil.date.date(this.form.rentalEndDate) + " 23:59:59";
          param.startDate =
            commonUtil.date.date(this.form.startDate) + " 00:00:00";
          param.signDate =
            commonUtil.date.date(this.form.signDate) + " 00:00:00";
          let adjustRatios01 = this.formData.adjustRatio.filter(
            (item, index) =>
              (param.totalPeriodMonth + (param.totalPeriodDay > 0 ? 1 : 0)) /
                12 -
                1 >
              index
          );
          let adjustRatios02 = adjustRatios01.map(item =>
            Number(Number(item * 100).toFixed(2))
          );
          param.adjustRatio = JSON.stringify(adjustRatios02);
          let errorIf = false;
          //账单生成方式未自然月时付款周期处理
          this.formData.receivePeriod =
            this.form.adjustPeriod == 3
              ? this.cycles.filter(e => e.value == this.formData.receivePeriod)
                  .length > 0
                ? this.formData.receivePeriod
                : 1
              : this.formData.receivePeriod;
          this.setFormData(this.formData);
          param.receivePeriod = this.formData.receivePeriod;
          const reg = /(^[0-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/;
          this.rentInfo.map((item, index) => {
            if (!reg.test(item.rentArea)) {
              errorIf = true;
            }
          });
          /* if (errorIf) {
            this.$message.error("抱歉，计租面积限制为最多保留两位小数的正数！");
            return;
          } */
          param.rentInfo = JSON.stringify(this.rentInfo);
          if (this.form.fixDate && this.form.fixDate[0] != undefined) {
            param.fixStartDate =
              moment(this.form.fixDate[0]).format("YYYY-MM-DD") + " 00:00:00";
            param.fixEndDate =
              moment(this.form.fixDate[1]).format("YYYY-MM-DD") + " 23:59:59";
          } else {
            param.fixStartDate = "";
            param.fixEndDate = "";
          }
          param.previewBillRentList = [];
          this.getFetch(
            `/api/wxRentContract/hasContractNumber?contractNumber=${
              this.form.contractNumber
            }&id=${this.form.id}`
          )
            .then(d => {
              //如果合同编号重复
              if (d.data) {
                this.checkcontractNum(param);
              } else {
                this.saveFirst(param);
              }
            })
            .catch(err => {
              this.$message.error(err.data);
            });
        } else {
          return false;
        }
      });
    },
    cancel() {
      this.$router.back(-1);
    },
    moneycancel() {
      if (this.$refs["contractMoney"].checkFormRule(1)) {
        return;
      }
      if (this.active-- > 4) this.active = 0;
    },
    filecancel() {
      if (this.active-- > 4) this.active = 0;
    },
    getTotleRentArea() {
      this.rentArea = 0;
      this.rentInfo.map((item, index) => {
        this.rentArea += Number(item.rentArea);
      });
      this.rentArea = this.rentArea ? this.rentArea.toFixed("2") : "0";
      this.form.rentArea = this.rentArea;
      return this.rentArea;
    },
    submitMoney(type) {
      let param = {
        id: type == 1 ? this.form.id : this.moneyform.id,
        rentStartType:
          type == 1 ? this.form.rentStartType : this.moneyform.rentStartType,
        rentalStartDate:
          moment(this.form.rentalStartDate).format("YYYY-MM-DD") + " 00:00:00"
      };
      let _this = this;
      _this
        .postFetch(type == 1? "/api/wxRentContract/updateRentStartTime": "/api/wxPropertyContract/updateRentStartTime",param)
        .then(d => {
          _this.$message.success("预账单生成成功!");
          _this.$refs[type == 1 ? _this.billTk : _this.billTk02].setData(
            d.data.previewBillRentList,type == 1?this.formData.receivePeriod:this.moneyform.receivePeriod
          );
        })
        .catch(err => {
          if (type == 1) {
            _this.form.rentStartType = _this.form.rentStartType == 1 ? 2 : 1;
          } else {
            _this.moneyform.rentStartType =
              _this.moneyform.rentStartType == 1 ? 2 : 1;
          }
          _this.$message.error(err.data);
        });
    },
    moneysubmit(formName, type) {
      let param = deepcopy(this.form);
      param.fileNames = JSON.stringify(this.fileNames);
      console.log(this.formData,55555555555)
      param = Object.assign(param, this.formData);
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.formData.rentInputWay == 1) {
            param.depositStr = this.formData.deposit;
            param.priceStr = this.formData.price;
          } else {
            param.depositStr = 0;
            param.priceStr = 0;
            this.rentInfo.map((item, index) => {
              param.depositStr += Number(item.deposit);
              param.priceStr += Number(item.price);
            });
          }
          param.price = Number(Number(param.price * 100).toFixed(2));
          param.deposit = Number(Number(param.deposit * 100).toFixed(2));
          param.revenue = Number(
            Number(this.formData.revenue * 100).toFixed(2)
          );
          param.payRatio = Number(
            Number(this.formData.payRatio * 100).toFixed(2)
          );
          param.type = this.formData.type || 1;
          param.rentArea = this.getTotleRentArea();
          param.rentalStartDate =
            commonUtil.date.date(this.form.rentalStartDate) + " 00:00:00";
          param.rentalEndDate =
            commonUtil.date.date(this.form.rentalEndDate) + " 23:59:59";
          param.startDate =
            commonUtil.date.date(this.form.startDate) + " 00:00:00";
          param.signDate =
            commonUtil.date.date(this.form.signDate) + " 00:00:00";
            console.log(this.formData.adjustRatio)
          let adjustRatios01 = this.formData.adjustRatio.filter(
            (item, index) =>
              (param.totalPeriodMonth + (param.totalPeriodDay > 0 ? 1 : 0)) /
                12 -
                1 >
              index
          );
          let adjustRatios02 = adjustRatios01.map(item =>
            Number(Number(item * 100).toFixed(2))
          );
          param.adjustRatio = JSON.stringify(adjustRatios02);
          // this.$refs['contractMoney'].checkFormRule()
          if (this.$refs["contractMoney"].checkFormRule()) {
            return;
          }
          param.rentInfo = JSON.stringify(this.rentInfo);
          param.previewBillRentList = [];
          this.loading = true;
          if (this.$route.query.Renew) {
            param.status = 9;
          }
          this.postFetch("/api/wxRentContract/updateMoney", param)
            .then(d => {
              this.loading = false;
              if (!type) {
                if (this.active++ > 4) this.active = 0;
                this.$message.success("提交成功");
              } else {
                this.$message.success("预账单生成成功!");
              }
              this.$refs[this.billTk].setData(d.data.previewBillRentList,this.formData.receivePeriod);
            })
            .catch(err => {
              this.$message.error(err.data);
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    },
    moneysubmit02(formName) {
      let _this = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.form.rentalStartDate =
            commonUtil.date.date(this.form.rentalStartDate) + " 00:00:00";
          this.form.rentalEndDate =
            commonUtil.date.date(this.form.rentalEndDate) + " 23:59:59";
          this.form.startDate =
            commonUtil.date.date(this.form.startDate) + " 00:00:00";
          this.form.signDate =
            commonUtil.date.date(this.form.signDate) + " 00:00:00";
          let postData = deepcopy(this.form);
          postData.operationType = 2;
          postData.businessId = this.form.businessId;
          postData.rentContractId = this.form.id;
          postData.id = this.moneyform.id;
          postData.shopType = this.form.shopType;
          postData.price = this.moneyform.price;
          postData.deposit = this.moneyform.deposit;
          postData.receivePeriod = this.moneyform.receivePeriod;
          postData.payAccount = this.moneyform.payAccount;
          postData.brand = this.moneyform.brand;
          postData.adjustPeriod = this.moneyform.adjustPeriod;
          postData.priceUnit = this.moneyform.priceUnit;
          postData.rentPrice = Number(
            Number(this.moneyform.rentPrice * 100).toFixed(2)
          );
          postData.rentStartType = this.moneyform.rentStartType;
          postData.adjustRatio = this.moneyform.adjustRatio;
          postData.latePayRatio = this.moneyform.latePayRatio;
          postData.latePayDay = this.moneyform.latePayDay;
          let param = postData;
          param.deposit = Number(Number(postData.deposit * 100).toFixed(2));
          param.price = Number(Number(postData.price * 100).toFixed(2));
          param.fileNames = JSON.stringify(this.fileNames);
          param.rentInfo = JSON.stringify(this.rentInfo);
          let adjustRatios01 = postData.adjustRatio.filter(
            (item, index) => postData.lease / 12 - 1 > index
          );
          let adjustRatios02 = adjustRatios01.map(item =>
            Number(Number(item * 100).toFixed(2))
          );
          param.adjustRatio = JSON.stringify(adjustRatios02);
          this.loading = true;
          param.status = 0;
          param.adjustRatioWay = this.moneyform.adjustRatioWay;
          if (this.$route.query.Renew) {
            param.status = 9;
          }
          this.postFetch(`/api/wxPropertyContract/add`, param)
            .then(d => {
              this.loading = false;
              this.$message.success("预账单成功");
              this.moneyform.id = d.data.id;
              if (this.active++ > 4) this.active = 0;
              this.$refs[this.billTk02].setData(d.data.previewBillRentList,this.moneyform.receivePeriod);
            })
            .catch(err => {
              this.$message.error(err.data);
              this.loading = false;
            });
        }
      });
    },
    filesubmit(formName) {
      let _this = this;
      let param = deepcopy(this.form);
      param = Object.assign(param, this.formData);
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.formData.rentInputWay == 1) {
            param.depositStr = this.formData.deposit;
            param.priceStr = this.formData.price;
          } else {
            param.depositStr = 0;
            param.priceStr = 0;
            this.rentInfo.map((item, index) => {
              param.depositStr += Number(item.deposit);
              param.priceStr += Number(item.price);
            });
          }
          param.price = Number(Number(param.price * 100).toFixed(2));
          param.deposit = Number(Number(param.deposit * 100).toFixed(2));
          param.rentArea = this.getTotleRentArea();
          param.revenue = Number(
            Number(this.formData.revenue * 100).toFixed(2)
          );
          param.payRatio = Number(
            Number(this.formData.payRatio * 100).toFixed(2)
          );
          param.rentalStartDate =
            commonUtil.date.date(this.form.rentalStartDate) + " 00:00:00";
          param.rentalEndDate =
            commonUtil.date.date(this.form.rentalEndDate) + " 23:59:59";
          param.type = this.formData.type;
          param.fileNames = JSON.stringify(this.fileNames);
          let adjustRatios01 = this.formData.adjustRatio.filter(
            (item, index) =>
              (param.totalPeriodMonth + (param.totalPeriodDay > 0 ? 1 : 0)) /
                12 -
                1 >
              index
          );
          param.signDate =
            commonUtil.date.date(this.form.signDate) + " 00:00:00";
          let adjustRatios02 = adjustRatios01.map(item =>
            Number(Number(item * 100).toFixed(2))
          );
          param.adjustRatio = JSON.stringify(adjustRatios02);
          param.rentInfo = JSON.stringify(this.rentInfo);
          let previewBillRentList = [];
          if (
            this.$refs[this.billTk].getData() != false &&
            this.$refs[this.billTk].getData().length > 0
          ) {
            let haveCommentsError = false;
            let message = "";
            this.$refs[this.billTk].getData().map((item, index) => {
              let a = {};
              a.id = item.id;
              a.receivePay = item.receivePay;
              a.needPay = item.needPay;
              a.receiveDate = item.receiveDate;
              a.starttime = moment(item.starttime).format('YYYY-MM-DD')+' 00:00:00';
              a.endtime = moment(item.endtime).format('YYYY-MM-DD')+' 23:59:59';
              a.comments = item.comments;
              previewBillRentList.push(a);
              if (
                item.receivePay != item.needPay &&
                !item.comments
              ) {
                haveCommentsError = true;
                message = "建议账单金额调整后,补充金额调整原因！";
              }
            });
            param.previewBillRentList = previewBillRentList;
            if (haveCommentsError) {
              this.$confirm(message, "有金额变更原因未填写", {
                confirmButtonText: "去补充",
                cancelButtonText: "继续提交",
                type: "warning"
              })
                .then(() => {
                  return false;
                })
                .catch(() => {
                  _this.continueSubmit(param);
                });
            } else {
              _this.continueSubmit(param);
            }
          }
        }
      });
    },
    continueSubmit(param) {
      /**
       * businessType操作类型：
       * 1合同审批,
       * 2账单审批,
       * 3终止合同审批，
       * 4商铺合同签约，
       * 5多径点位合同签约，
       * 6商铺合同终止，
       * 7多经点位合同终止，
       * 8账单应收金额变更，
       * 9有价券上架
       * 其中1，2，3是为了兼容老数据
       */
      if (this.form.status == 1) {
        param.status = 1;
      } else {
        param.status = 0;
      }
      this.loading = true;
      if (this.$route.query.Renew) {
        param.status = 9;
      }
      this.postFetch("/api/wxRentContract/updateFile", param)
        .then(d => {
          this.loading = false;
          this.$message.success("提交成功");
          this.active++;
        })
        .catch(err => {
          this.$message.error(err.data);
          this.loading = false;
        });
    },
    filesubmit02(formName) {
      let _this = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.form.rentalStartDate =
            commonUtil.date.date(this.form.rentalStartDate) + " 00:00:00";
          this.form.rentalEndDate =
            commonUtil.date.date(this.form.rentalEndDate) + " 23:59:59";
          this.form.startDate =
            commonUtil.date.date(this.form.startDate) + " 00:00:00";
          this.form.startDate =
            commonUtil.date.date(this.form.startDate) + " 00:00:00";
          this.form.signDate =
            commonUtil.date.date(this.form.signDate) + " 00:00:00";
          let postData = deepcopy(this.form);
          postData.shopType = this.moneyform.shopType;
          postData.businessId = this.moneyform.businessId;
          postData.rentContractId = this.form.id;
          postData.id = this.moneyform.id;
          postData.price = this.moneyform.price;
          postData.deposit = this.moneyform.deposit;
          postData.receivePeriod = this.moneyform.receivePeriod;
          postData.payAccount = this.moneyform.payAccount;
          postData.brand = this.moneyform.brand;
          postData.rentStartType = this.moneyform.rentStartType;
          postData.priceUnit = this.moneyform.priceUnit;
          postData.latePayRatio = this.moneyform.latePayRatio;
          postData.latePayDay = this.moneyform.latePayDay;
          postData.rentPrice = Number(
            Number(this.moneyform.rentPrice * 100).toFixed(2)
          );
          let param = postData;
          param.deposit = Number(Number(postData.deposit * 100).toFixed(2));
          param.price = Number(Number(postData.price * 100).toFixed(2));
          param.fileNames = JSON.stringify(this.fileNames);
          param.rentInfo = JSON.stringify(this.rentInfo);
          param.adjustRatioWay = this.moneyform.adjustRatioWay;
          if (this.processData.length > 0 && this.form.status == 1) {
            param.flowParams = {
              variables: [
                {
                  key: "contractType",
                  value: "5"
                },
                {
                  key: "contractNumber",
                  value: this.form.contractNumber
                }
              ],
              businessType: 17,
              remark: this.form.remark
            };
          }
          let adjustRatios01 = this.moneyform.adjustRatio.filter(
            (item, index) => postData.lease / 12 - 1 > index
          );
          let adjustRatios02 = adjustRatios01.map(item =>
            Number(Number(item * 100).toFixed(2))
          );
          param.adjustRatio = JSON.stringify(adjustRatios02);
          let previewBillRentList = [];
          if (
            this.$refs[this.billTk02].getData() != false &&
            this.$refs[this.billTk02].getData().length > 0
          ) {
            let haveCommentsError = false;
            let message = "";
            this.$refs[this.billTk02].getData().map((item, index) => {
              let a = {};
              a.id = item.id;
              a.receivePay = item.receivePay;
              a.needPay = item.needPay;
              a.receiveDate = item.receiveDate;
              a.starttime = moment(item.starttime).format('YYYY-MM-DD')+' 00:00:00';
              a.endtime = moment(item.endtime).format('YYYY-MM-DD')+' 23:59:59';
              a.comments = item.comments;
              previewBillRentList.push(a);
              if (
                item.receivePay != item.needPay &&
                !item.comments
              ) {
                haveCommentsError = true;
                message = "建议账单金额调整后,补充金额调整原因！";
              }
            });
            param.previewBillRentList = previewBillRentList;
            if (haveCommentsError) {
              this.$confirm(message, "有金额变更原因未填写", {
                confirmButtonText: "去补充",
                cancelButtonText: "继续提交",
                type: "warning"
              })
                .then(() => {
                  return false;
                })
                .catch(() => {
                  if (this.form.status == 1 && _this.processData.length == 0) {
                    _this.makeSure(param);
                  } else {
                    _this.continueSubmit02(param);
                  }
                });
            } else {
              if (this.form.status == 1 && _this.processData.length == 0) {
                _this.makeSure(param);
              } else {
                _this.continueSubmit02(param);
              }
            }
          } else {
            return;
          }
        } else {
          return false;
        }
      });
    },
    makeSure(param) {
      this.$confirm("为确保合同有效生成，请联系管理员添加审批流程!", "提示", {
        confirmButtonText: "坚持提交",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.continueSubmit02(param);
        })
        .catch(() => {
          this.loading = false;
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    continueSubmit02(param) {
      this.loading = true;
      let url = "/api/wxPropertyContract/update";
      if (this.$route.query.Renew) {
        param.status = 9;
      }
      this.postFetch(url, param)
        .then(d => {
          this.$message.success("提交成功");
          this.$router.back(-1);
          this.loading = false;
        })
        .catch(err => {
          this.$message.error(err.data);
          this.loading = false;
        });
    },
    //文件上传
    beforeUpload: function(file) {
      let type = file.name.split(".")[1];
      const extension =
        type === "doc" ||
        type === "docx" ||
        type === "pdf" ||
        type === "png" ||
        type === "jpg" ||
        type === "jpeg";
      const isLt2M = file.size / 1024 / 1024 < 20;
      if (!extension) {
        this.$message.warning(
          "抱歉，上传文件只能是doc、docx、pdf、png、jpg、jpeg格式"
        );
      }
      if (!isLt2M) {
        this.$message.warning("抱歉，上传文件大小不能超过 20MB");
      }
      return extension && isLt2M;
    },
    importSuccess: function(response, file, fileList) {
      this.$message.success("上传成功");
      let a = {
        name: file.name,
        url: response.data.url
      };
      this.fileNames.push(a);
    },
    importError: function(response, file, fileList) {
      this.$message.error("抱歉，上传失败");
      console.log("error:" + response + "--" + file + "---" + fileList);
    },
    downloadPr(file) {
      window.open(file.url);
    },
    handleRemove: function(file, filelist) {
      this.fileNames.map((item, index) => {
        if (item.url == file.url) {
          this.fileNames.splice(index, 1);
        }
      });
    },
    //商户跳转取消
    cancleMerchant() {
      this.$router.push({
        path: "/rentlist"
      });
    },
    //商户跳转确定
    sureMerchant() {
      this.$router.push({
        path: "/merchant/merchantAdd",
        query: {
          arr: JSON.stringify(this.form)
        }
      });
    },
    lease() {
      this.months = [];
      if (
        this.form.totalPeriodMonth + (this.form.totalPeriodDay > 0 ? 1 : 0) >
        12
      ) {
        let j =
          (this.form.totalPeriodMonth +
            (this.form.totalPeriodDay > 0 ? 1 : 0)) /
          12;
        if (j % 1 === 0) {
          //判断是不是整数
          j = j - 1;
        } else {
          j = Math.floor(j);
        }
        for (var i = 0; i < j; i++) {
          this.months.push(i);
        }
        let rentInfo = JSON.parse(JSON.stringify(this.rentInfo));
        rentInfo.map((item, index) => {
          item.adjustRatio.length = this.months.length;
          for (var q = 0; q < item.adjustRatio.length; q++) {
            if (item.adjustRatio[q] == undefined) {
              item.adjustRatio[q] = 0;
            }
          }
        });
        this.formData.adjustRatio = this.formData.adjustRatio
          ? this.formData.adjustRatio
          : [];
        this.formData.adjustRatio.length = this.months.length;
        for (var q = 0; q < this.formData.adjustRatio.length; q++) {
          if (this.formData.adjustRatio[q] == undefined) {
            this.formData.adjustRatio[q] = 0;
          }
        }
        //年物业费调整设默认值0
         this.moneyform.adjustRatio.length = this.months.length;
        for (var q = 0; q < this.moneyform.adjustRatio.length; q++) {
          if (this.moneyform.adjustRatio[q] == undefined) {
            this.moneyform.adjustRatio[q] = 0;
          }
        }
        let formData = JSON.parse(JSON.stringify(this.formData));
        formData.months = this.months;
        this.setFormData(formData);
        this.setRentInfo(rentInfo);
      } else {
        let rentInfo = JSON.parse(JSON.stringify(this.rentInfo));
        rentInfo.map((item, index) => {
          item.adjustRatio = [];
        });
        let formData = JSON.parse(JSON.stringify(this.formData));
        formData.months = this.months;
        this.setFormData(formData);
        this.setRentInfo(rentInfo);
        this.months = [];
      }
    },
    comperData() {
      if (this.form.startDate && this.form.rentalStartDate) {
        let startDate = this.form.startDate;
        let rentalStartDate = this.form.rentalStartDate;
        //计租开始问题
        startDate = moment(startDate).format("YYYY-MM-DD");
        //租赁开始日期
        rentalStartDate = moment(rentalStartDate).format("YYYY-MM-DD");
        if (moment(startDate).isBefore(rentalStartDate)) {
          this.$message.error("计租开始日期不能早于租赁开始日期");
          return;
        } else {
          this.form.startDate = moment(this.form.startDate).valueOf();
          this.form.rentalStartDate = moment(
            this.form.rentalStartDate
          ).valueOf();
        }
      }
    },
    //初始化物业费调整比例
    getadjustRatioInit(lease, adjustRatio) {
      let datalength = Math.ceil(lease / 12) - 1;
      this.moneyform.adjustRatio = adjustRatio ? adjustRatio : [];
      this.months = [];
      for (let i = 0; i < datalength; i++) {
        if (!adjustRatio) {
          this.moneyform.adjustRatio.push(0);
        }
        this.months.push(i);
      }
    },
    /* getTenementContract(id) {
      this.getFetch("/api/wxPropertyContract/getMerchantList?shopType=1")
        .then(d => {
          d.data.map(item => {
            if (item.merchantId == id) {
              console.log(item)
            }
          })
        })
        .catch(err => {
          this.$message.error(err.data);
        });
    }, */
    changeContract(index) {
      console.log(index);
      let d = {};
      d.data = {};
      d.data.rent = this.curContractList[index];
      d.data.rent.wxRentContract.adjustRatio = JSON.parse(d.data.rent.wxRentContract.adjustRatio);
          this.form = Object.assign(this.form, d.data.rent.wxRentContract);
          if (this.showContractTable) {
            //租赁开始日期和计租开始日期：上次合同结束日期+1
            this.form.rentalStartDate = this.form.rentalEndDate+24*3600*1000;
            this.form.rentalEndDate = '';
            this.form.startDate = this.form.rentalStartDate;
            this.form.signDate = '';
            this.curRentInfo = JSON.parse(d.data.wxRentContract.rentInfo);
            this.form.contractNumber = moment(new Date()).format("YYYYMMDDhhmmss");
          }
          this.form.price = Number(d.data.rent.wxRentContract.price) / 100;
          let adjustRatio = [];
          d.data.rent.wxRentContract.adjustRatio.forEach(
            (item, index) => {
              let a = item / 100;
              adjustRatio.push(a);
            }
          );
          let formData = {
            adjustRatio,
            type: d.data.rent.wxRentContract.type,
            revenue: Number(d.data.rent.wxRentContract.revenue) / 100,
            payRatio: Number(d.data.rent.wxRentContract.payRatio) / 100,
            receivePeriod: d.data.rent.wxRentContract.receivePeriod,
            adjustPeriod: d.data.rent.wxRentContract.adjustPeriod,
            priceUnit: d.data.rent.wxRentContract.priceUnit,
            deposit: Number(d.data.rent.wxRentContract.deposit) / 100,
            price: Number(d.data.rent.wxRentContract.price) / 100,
            rentPrice: Number(d.data.rent.wxRentContract.rentPrice),
            adjustRatioWay: Number(d.data.rent.wxRentContract.adjustRatioWay),
            rentInputWay: Number(d.data.rent.wxRentContract.rentInputWay),
            latePayRatio: Number(d.data.rent.wxRentContract.latePayRatio),
            latePayDay: Number(d.data.rent.wxRentContract.latePayDay),
            
            busDiscountRatio:d.data.rent.wxRentContract.busDiscountRatio,
            busDiscountTime:Number(d.data.rent.wxRentContract.busDiscountTime),
          };
          
          this.setFormData(formData);
          console.log(formData)
          let rentInfo = JSON.parse(d.data.rent.wxRentContract.rentInfo);
          this.setRentInfo(rentInfo);
          this.form.deposit = Number(d.data.rent.wxRentContract.deposit) / 100;
          this.form.revenue = Number(d.data.rent.wxRentContract.revenue) / 100;
          this.form.rentalStartDate = moment(this.form.rentalStartDate).format(
            "YYYY-MM-DD"
          );
          if (!this.showContractTable) {
            this.form.rentalEndDate = moment(this.form.rentalEndDate).format(
              "YYYY-MM-DD"
            );
            this.getDateDiff(this.form.rentalStartDate, this.form.rentalEndDate);
          }
          Vue.set(this.form, "fixDate", [
            d.data.rent.wxRentContract.fixStartDate,
            d.data.rent.wxRentContract.fixEndDate
          ]);
          if (d.data.rent.wxRentContract.payRatio == undefined) {
            this.form.payRatio = 0;
          } else {
            this.form.payRatio =
              Number(d.data.rent.wxRentContract.payRatio) / 100;
          }
          this.fileNames = JSON.parse(d.data.rent.wxRentContract.fileNames);
          //根据总租期限时调整比例
          if (this.form.totalPeriodMonth > 12) {
            let j = this.form.totalPeriodMonth / 12;
            if (j % 1 === 0) {
              //判断是不是整数
              j = j - 1;
            } else {
              j = Math.floor(j);
            }
            for (var i = 0; i < j; i++) {
              this.months.push(i);
            }
            formData.months = this.months;
            this.setFormData(formData);
          } else {
            this.months = [];
            formData.months = this.months;
            this.setFormData(formData);
          }
          //如果没有设置物业信息不走下面的语句
          if (!d.data.property) {
            return;
          }
          this.moneyform = Object.assign(this.moneyform, d.data.property);
          d.data.property.adjustRatio = JSON.parse(d.data.property.adjustRatio);
          let adjustRatio02 = d.data.property.adjustRatio.map(
            item => item / 100
          );
          this.moneyform.adjustRatio = adjustRatio02;
          this.getadjustRatioInit(d.data.property.lease, adjustRatio02);
          this.moneyform.price = d.data.property.price / 100;
          this.moneyform.deposit = d.data.property.deposit / 100;
          this.moneyform.rentPrice = d.data.property.rentPrice / 100;
          this.moneyform.receivePeriod = d.data.property.receivePeriod;
          this.moneyform.payAccount = d.data.property.payAccount;
          this.moneyform.brand = d.data.property.brand;
          this.moneyform.adjustPeriod = d.data.property.adjustPeriod;
           this.moneyform.adjustRatioWay = d.data.property.adjustRatioWay;
    },
    getDetailData(id) {
      let url = ContractUrl.rentPropertyContractFindById + "?id=" + this.$route.query.id;
      if (this.showContractTable) {
        url = `${ContractUrl.getContractInfo}?merchantId=${id}`;
        //wkx
        // this.getTenementContract(id);
      }
      this.getFetch(url)
        .then(d => {
          //续租处理
          console.log(d)
          /* if (this.showContractTable) {
            d.data.rent = {};
            d.data.rent.wxRentContract = d.data.wxRentContract;
          } */
          this.curContractList = d.data;
        })
        .catch(err => {
          this.$message.error(err.data);
        });
    },
    /**
     * 获取默认收银信息
     */
    getPayAccountInfo() {
      this.getFetch(ContractUrl.getPayAccountInfo)
        .then(d => {
          this.form.payAccount = d.data.bankCardId;
          this.form.bankName = d.data.bankAccountName;
          this.moneyform.payAccount = d.data.bankCardId;
        })
        .catch(err => {
          this.$message.error(err.data);
        });
    },
    /**
     * 根据业务查询模板
     */
    getModelBybusiness() {
      this.getFetch(`${promissionUrl.getModelBybusiness}?flowType=17`)
        .then(d => {
          if (d.data.length > 0) {
            this.processData = JSON.parse(d.data[0].flow).lists;
          }
        })
        .catch(err => {
          this.$message.error(err.data);
        });
    },
    changeMerchantName(id) {
      console.log(id)
      this.merchantIdFromSearch  = id;
      // this.getContractInfo(id)
      if (this.showContractTable) {
        console.log(id)
        this.getDetailData(id);
      } else {
        this.getMerchantDetail(id);
      }
      

    },
    getMerchantDetail(curMerchantId) {
      this.getFetch('/api/wxMerchant/findById?id='+curMerchantId)
        .then(res=>{
          this.curContractId = d.data.wxRentContract.id;
          let rentInfo = res.data.shoplist//gaidong
          this.setRentInfo(rentInfo);
          // 回显商户数据
          this.form.brand = res.data.brand?res.data.brand:'';
          this.form.businessId = res.data.businessId;
          this.form.shopType = res.data.shopType;
          this.form.linkPerson = res.data.linkPerson;
          this.form.linkPhone = res.data.linkPhone;
          this.form.businessId = res.data.businessId;
          this.form.merchantId = curMerchantId;
          this.getMerchantShops(curMerchantId);
        })
        .catch(err=>{
          this.$message.error(err.data);
        })
    },
    //wkx
    getMerchantShops(merchantId,contractId='') {
      let url = `${ContractUrl.getMerchantShops}?merchantId=${merchantId}&contractId=${contractId}`;
      this.getFetch(url)
        .then(d => {
          this.curRentInfo = d.data;
          let obj = deepcopy(d.data);
          this.setRentInfo(obj);
        })
    },
    /**
     * 获取模糊搜索的商户id list
     */
    getMerchantIdList() {
      this.getFetch(`${ContractUrl.getMerchantIdFromName}?merchantName=&shopType=1`)
        .then(res=>{
          this.merchantList = res.data;
        })
        .catch(err=>{
          this.$message.error(err.data);
        })
    },


  },
  mounted() {
    /* setInterval(()=>{
      console.log(this.formData)
    },2000) */
    let datastr = moment(new Date()).format("YYYYMMDDhhmmss");
    this.form.contractNumber = datastr;
    this.setNavData(["合同管理", "店铺", "租金+物业合同", "新建"]);
    this.formData.type = 1;
    //aaa receivePeriod 初步创建的时候是0
    this.formData.receivePeriod = '';
    this.formData.adjustPeriod = 2;
    this.formData.priceUnit = 2;
    this.formData.adjustRatio = [];
    this.formData.latePayRatio = '';
    this.formData.latePayDay = '';
    this.setFormData(this.formData);
    if (this.$route.query.id) {
      this.getDetailData();
      this.setNavData(["合同管理", "店铺", "租金+物业合同", "编辑"]);
    } else {
      this.getPayAccountInfo();
    }
    //wkx
    if (this.$route.query.Renew) {
      this.setNavData(["合同管理", "店铺", "租金+物业合同", "续签"]);
      this.showContractTable = true;
      this.options = [
        {
          value: 3,
          label: "续签合同"
        }
      ]
      
    }
    this.getMerchantIdList();
    this.getModelBybusiness();
    this.getFetch(ContractUrl.businessList)
      .then(d => {
        this.businessIds = d.data;
      })
      .catch(err => {
        this.$message.error(err.data);
      });
    //获取品牌列表
    this.getFetch("/api/wxBrand/queryBrand")
      .then(d => {
        this.brands = d.data;
      })
      .catch(err => {
        this.$message.error(err.data);
      });
  },
  created(){
    if (this.$route.query.from != undefined) {
      this.formData.rentInputWay = 1;
      this.setFormData(this.formData)
      this.merchentEditIf = true;
      this.showShopStatus = true;
      if (this.$route.query.from == 'investManage') {
        this.setNavData(["招商管理", "招商任务", "租金+物业合同", "新建"]);
      } else if (this.$route.query.from == 'addCustomer') {
        this.setNavData(["招商管理", "编辑客户", "租金+物业合同", "新建"]);
        console.log(this.rentInfo)
        this.form.brand = this.rentInfo[0].brandIdStr;
        this.form.businessId = this.rentInfo[0].businessIdStr;
        this.form.linkPerson = this.rentInfo[0].linkPersonStr;
        this.form.linkPhone = this.rentInfo[0].linkPhoneStr;
        this.isEditOk = false;
      }
    }
  },
  beforeDestroy: function() {
    this.setRentInfo([]);
    this.setFormData({});
  }
};
</script>
<style>
input[type="file"] {
  display: none;
}

.el-table th > .cell {
  text-align: center !important;
}

.up > .el-form-item__error {
  margin-left: -130px !important;
}
.price-input .el-input__inner {
  border: 0 !important;
}
.per-list .el-form-item__content{
  margin-left: 0 !important;
  width: auto !important;
}
.per-list .el-form-item{
  width: auto !important;
  margin-right: 50px;
  margin-bottom: 40px;
}
.per-list{
  margin-left: 150px;
}
</style>

<style scoped>
.price-list {
  width: 100%;
  height: auto;
  overflow: hidden;
  padding-left: 130px;
  margin-bottom: 22px;
}
.p-list {
  width: auto;
  float: left;
  overflow: hidden;
  margin: 0 10px;
}
.price-items {
  float: left;
  height: 40px;
  overflow: hidden;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  margin: 10px;
}
.price-title {
  width: auto;
  padding: 0 10px;
  line-height: 40px;
  float: left;
  background: #f5f7fa;
  color: #909399;
  border-right: 1px solid #dcdfe6;
}
.price-unit {
  width: auto;
  /* padding: 0 10px; */
  line-height: 60px;
  float: left;
  color: #909399;
}
.price-input {
  float: left;
  width: 100px;
}
.el-step__title.is-success {
  color: #5976bf !important;
}

.fx_step .el-step.is-center .el-step__line {
  left: 0;
  right: -100%;
}

.layout-content {
  width: 100%;
  background: #141e29;
  height: auto;
  /* min-height: 300px; */
  padding: 0 20px;
  overflow: hidden;
  text-align: left;
}

form {
  text-align: left;
  width: 100%;
}

.shopBox {
  width: 100%;
  background: #3fc496;
  height: 40px;
  overflow: hidden;
  border-bottom-left-radius: 2px;
  border-top-left-radius: 2px;
}

.shopBox .shopBtn {
  width: 110px;
  height: 40px;
  float: left;
  text-align: center;
  line-height: 40px;
  color: #fefefe;
  font-size: 14px;
  cursor: pointer;
  background: RGBA(63, 196, 150, 1);
}

.shopBox .shopBtn:hover {
  background: RGBA(63, 196, 150, 0.88);
}

.shopBox .shopContent {
  width: calc(100% - 110px);
  background: #ffffff;
  position: relative;
  float: right;
  height: 40px;
  border-top: 5px solid #3fc496;
  border-bottom: 5px solid #3fc496;
  border-right: 5px solid #3fc496;
  padding-right: 10px;
}

.shoplist div {
  width: 18%;
  float: left;
  text-align: center;
  line-height: 30px;
  color: #555;
  font-size: 14px;
}

.iconBox {
  font-size: 18px !important;
  color: #3fc496 !important;
  margin-right: 6px !important;
}

.jiaojiao {
  width: 27px;
  position: absolute;
  right: 5px;
}

.public_part {
  background: #fff;
  margin-top: 20px;
}

.public_part_title {
  height: 40px;
  padding: 11px 0 11px 21px;
  background: #5976bf;
  font-size: 14px;
  color: #fff;
}

.public_part_Box {
  padding: 30px;
}

.baocun {
  background: #5976bf;
  border: 0;
}

.baocun:hover {
  background: #7a6ce1;
}

.download-file {
  position: relative;
  overflow: hidden;
  text-align: center;
  display: inline-block;
  width: 120px;
  border: 1px #dcdfe6 solid;
  background-color: #409eff;
  border-radius: 4px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: normal;
  line-height: 24px;
  color: #fff;
  text-decoration: none;
}

.el-form-item .el-form-item__content,
.el-form-item .el-form-item__content .el-date-editor,
.el-form-item .el-form-item__content .el-date-editor .el-input__inner {
  width: 211px;
}

.fx_send .el-form-item__content .el-select {
  width: 211px !important;
}

.fx_title .el-input {
  width: 211px;
}

/* 按钮处理 */
.group-btn {
  margin: 20px 0;
  text-align: center;
}

.group-btn .quxiaoBtn,
.group-btn .baocunBtn,
.group-btn .nextBtn {
  height: 40px;
  font-size: 14px;
  border-radius: 3px;
  border: 0;
}

.group-btn .quxiaoBtn {
  /* width:83px; */
  color: #555;
  margin-right: 9px;
  background: RGBA(255, 255, 255, 1);
}

.group-btn .baocunBtn {
  /* width:130px; */
  color: #ffffff;
  margin-left: 9px;
  background: RGBA(89, 118, 191, 1);
}

.group-btn .nextBtn {
  width: 84px;
  color: #ffffff;
  margin-left: 9px;
  background: RGBA(89, 118, 191, 1);
}

.group-btn .quxiaoBtn:hover {
  background: rgba(255, 255, 255, 0.88);
}

.group-btn .baocunBtn:hover,
.group-btn .nextBtn:hover {
  background: RGBA(89, 118, 191, 0.88);
}

.innerinput {
  width: 120px;
}
</style>