<template>
  <h-view id="create-rent-info" class="public-style">
    <transition name="trans">
      <div v-show="downNum" class="modal-show">
        <div class="down">
          <div class="title">
            录入产品信息
            <!-- <img src="@/assets/intoApproval/close.png"  > -->
            <span @click="downNum=false">x</span>
          </div>
          <div class="down-content">
            <span>请上传照片</span>
            <div v-if="!isReadOnly" class="photo" @click="pickMethod()">
              <img v-if="vehicleImg" :src="vehicleImg" alt="">
            </div>
            <div v-if="isReadOnly" class="photo">
              <img :src="vehicleImg" @click="showBigPicture(vehicleImg)">
            </div>
          </div>
          <list-item :item-height="44">
            <item>
              <div slot="name" class="required">车架号</div>
              <input
                slot="content"
                v-model="rentInfo.frame_number"
                :readonly="isReadOnly"
                placeholder="自动识别车架号"
              >
            </item>
            <item>
              <div slot="name" class="required">发动机号</div>
              <input slot="content" v-model="rentInfo.engine" :readonly="isReadOnly" placeholder="自动识别发动机号" >
            </item>
            <item>
              <div slot="name" class="required">车辆型号</div>
              <input
                slot="content"
                v-model="rentInfo.vehicle_model"
                :readonly="isReadOnly"
                placeholder="自动识别车辆型号"
              >
            </item>
            <item>
              <div slot="name" class="required">合格证编号</div>
              <input
                slot="content"
                v-model="rentInfo.certificate_number"
                :readonly="isReadOnly"
                placeholder="自动识别合格证编号"
              >
            </item>
            <item v-if="isReadOnly" class="date-check">
              <div slot="name" class="required">发车日期</div>
              <input slot="content" v-model="rentInfo.departure_date" readonly placeholder="请选择发车日期" >
            </item>
            <item v-if="!isReadOnly" class="date-check" @click.native="showTime1('YYYY-MM-DD')">
              <div slot="name" class="required">发车日期</div>
              <input slot="content" v-model="rentInfo.departure_date" readonly placeholder="请选择发车日期" >
            </item>
            <item v-if="isReadOnly" class="date-check">
              <div slot="name" class="required">开票日期</div>
              <input slot="content" v-model="rentInfo.invoice_date" readonly placeholder="请选择开票日期" >
            </item>
            <item v-if="!isReadOnly" class="date-check" @click.native="showTime2('YYYY-MM-DD')">
              <div slot="name" class="required">开票日期</div>
              <input slot="content" v-model="rentInfo.invoice_date" readonly placeholder="请选择开票日期" >
            </item>
            <button v-if="!isReadOnly" class="type-save" @click="saveRent()">保存</button>
          </list-item>
        </div>
      </div>
    </transition>
    <h-header :proportion="[5,1,1]" class="bar-custom">
      <div slot="left" class="h-header-btn">
        <img src="@/assets/userBind/arrow.png" @click="routeGoCustomClick()">
        <span>租赁信息</span>
      </div>
    </h-header>
    <h-content>
      <div v-if="!isReadOnly" class="top">
        <div class="item">
          <img src="@/assets/contractCreate/finished.png">
          <p>基本信息</p>
        </div>
        <span class="line"/>
        <div class="item">
          <span>2</span>
          <p style="color: #383F45;">租赁信息</p>
        </div>
        <span class="line"/>
        <div class="item">
          <span>3</span>
          <p>附件信息</p>
        </div>
      </div>
      <div v-if="isReadOnly" class="top">
        <div class="item">
          <img src="@/assets/contractCreate/finished.png">
          <p>基本信息</p>
        </div>
        <span class="line"/>
        <div class="item">
          <img src="@/assets/contractCreate/finished.png">
          <p style="color: #383F45;">租赁信息</p>
        </div>
        <span class="line"/>
        <div class="item">
          <img src="@/assets/contractCreate/finished.png">
          <p>附件信息</p>
        </div>
      </div>
      <div class="userInfo">租赁产品</div>
      <list-item :item-height="44">
        <item v-if="!isReadOnly" :showArrow="true" @click.native="selectProductLine">
          <div slot="name" class="required">产品线</div>
          <input slot="content" v-model="saveInfo.division_n" readonly placeholder="请选择">
        </item>
        <item v-if="isReadOnly">
          <div slot="name" class="required">产品线</div>
          <input slot="content" v-model="saveInfo.division_n" readonly>
        </item>
        <item v-if="!isReadOnly" :showArrow="true" @click.native="getProduct">
          <div slot="name" class="required">产品型号</div>
          <input slot="content" v-model="saveInfo.product_id_n" readonly placeholder="请选择">
        </item>
        <item v-if="isReadOnly">
          <div slot="name" class="required">产品型号</div>
          <input slot="content" v-model="saveInfo.product_id_n" readonly>
        </item>
        <item>
          <div slot="name" class="required">产品数量</div>
          <input slot="content" v-model="saveInfo.product_num" :readonly="isReadOnly" placeholder="请输入产品数量">
        </item>
      </list-item>
      <div class="userInfo">
        <span>融资信息</span>
        <span v-if="nowPolicy.calc_type && nowPolicy.calc_type === 'FREE_CF'" class="fei-button" @click="showFeiInfo">非标报价商务信息</span>
      </div>
      <div v-if="showHideOnBlur">
        <x-dialog v-model="showHideOnBlur" hide-on-blur :dialog-style="{'min-height': '100px', 'padding': '5px'}" >
         <div class="feibox">
            <p>非标报价商务信息</p>

            <div>
              <span style="text-align: left; min-width: 80px;">报价模式</span>
              <span class="gray" style="text-align: right;">{{nowPolicy.price_list_n}}</span>
            </div>

            <div v-if=" ['XCMG_FIRST_N_NO_INTEREST','XCMG_FIRST_N_INTEREST'].includes(nowPolicy.price_list)">
              <span>首X期-期数</span>
              <span class="gray">{{nowPolicy.lease_times_x}}</span>
            </div>

          <template v-if="nowPolicy.fallow_x_flag === 'Y'">
            <div>
              <span>冬歇/雨歇起止日期</span>
            </div>
            <div style="justify-content: space-around;">
                <span class="gray">{{nowPolicy.fallow_date_f.slice(0, 10)}}</span>
                <span>-</span>
                <span class="gray">{{nowPolicy.fallow_date_t.slice(0, 10)}}</span>
            </div>
          </template>

        </div>
        </x-dialog>
      </div>

      <div class="hint-info">
        <img src="@/assets/contractCreate/hint.png">提示 以下为单个设备商务政策
      </div>
      <list-item :item-height="44">
        <item v-if="!isReadOnly" :showArrow="true" @click.native="pagenumPolicy=1;getBusinessPolicy();showModalBusiness=true">
          <div slot="name" class="required">商务政策</div>
          <input slot="content" v-model="saveInfo.product_plan_name" readonly placeholder="请选择">
        </item>
        <item v-if="isReadOnly">
          <div slot="name" class="required">商务政策</div>
          <input slot="content" v-model="saveInfo.product_plan_name" readonly placeholder="请选择">
        </item>
        <item v-if="!isReadOnly">
          <div slot="name" class="required">设备单价</div>
          <CurrencyInput
            slot="content"
            :check = "saveInfo.equip_price" v-model="saveInfo.equip_price"
            placeholder="请输入设备单价"/>
        </item>
        <item v-if="isReadOnly">
          <div slot="name" class="required">设备单价</div>
          <span slot="content">{{ saveInfo.equip_price|currency }}</span>
        </item>
        <item v-if="!isReadOnly">
          <div slot="name" class="required">融资金额</div>
          <CurrencyInput slot="content" v-model="finance_amount" placeholder="请输入融资信息"/>
        </item>
        <item v-if="isReadOnly">
          <div slot="name" class="required">融资金额</div>
          <span slot="content">{{ finance_amount|currency }}</span>
        </item>
        <item>
          <div slot="name" class="required">首付比例</div>
          <RateInput
            v-if="!isReadOnly" slot="content" v-model="saveInfo.down_payment_ratio_n"
            placeholder="%"/>
          <span v-if="isReadOnly" slot="content">{{ saveInfo.down_payment_ratio_n }}%</span>
        </item>
        <item v-if="!isReadOnly">
          <div slot="name" class="required">首付款</div>
          <CurrencyInput
            slot="content" v-model="saveInfo.down_payment" placeholder="请输入首付款"
            @input="changeRatio"/>
        </item>
        <item v-if="isReadOnly">
          <div slot="name" class="required">首付款</div>
          <span slot="content">{{ saveInfo.down_payment|currency }}</span>
        </item>
        <item>
          <div slot="name" class="required">保证金比例</div>
          <RateInput
            v-if="!isReadOnly" slot="content" v-model="saveInfo.deposit_ratio_n"
            placeholder="%"/>
          <span v-if="isReadOnly" slot="content">{{ saveInfo.deposit_ratio_n }}%</span>
        </item>
        <item v-if="!isReadOnly">
          <div slot="name" class="required">保证金</div>
          <CurrencyInput
            slot="content" v-model="saveInfo.deposit" placeholder="请输入保证金"
            @input="changeDeposit"/>
        </item>
        <item v-if="isReadOnly">
          <div slot="name" class="required">保证金</div>
          <span slot="content">{{ saveInfo.deposit|currency }}</span>
        </item>
        <item v-if="!isReadOnly" :showArrow="true" @click.native="selectDepositDeductionLine">
          <div slot="name" class="required">保证金抵扣方式</div>
          <input slot="content" v-model="saveInfo.deposit_deduction_n" readonly placeholder="请选择">
        </item>
        <item v-if="isReadOnly">
          <div slot="name" class="required">保证金抵扣方式</div>
          <input slot="content" v-model="saveInfo.handling_policy_n" readonly>
        </item>
        <item v-if="!isReadOnly" :showArrow="true" @click.native="selectHandlingPolicyLine">
          <div slot="name" class="required">手续费政策</div>
          <input slot="content" v-model="saveInfo.handling_policy_n" readonly placeholder="请选择">
        </item>
        <item v-if="isReadOnly">
          <div slot="name" class="required">手续费政策</div>
          <input slot="content" v-model="saveInfo.handling_policy_n" readonly>
        </item>
        <item>
          <div slot="name" class="required">手续费比例</div>
          <RateInput
            v-if="!isReadOnly" slot="content" v-model="saveInfo.lease_charge_ratio_n"
            placeholder="%"/>
          <span v-if="isReadOnly" slot="content">{{ saveInfo.lease_charge_ratio_n }}%</span>
        </item>
        <item v-if="!isReadOnly">
          <div slot="name" class="required">手续费</div>
          <CurrencyInput
            slot="content" v-model="saveInfo.lease_charge" placeholder="请输入手续费"
            @input="changeLeaseCharge"/>
        </item>
        <item v-if="isReadOnly">
          <div slot="name" class="required">手续费</div>
          <span slot="content">{{ saveInfo.lease_charge|currency }}</span>
        </item>
        <item v-if="!isReadOnly">
          <div slot="name" class="required">GPS费用</div>
          <CurrencyInput slot="content" v-model="saveInfo.gps_fee" placeholder="请输入GPS费用"/>
        </item>
        <item v-if="isReadOnly">
          <div slot="name" class="required">GPS费用</div>
          <span slot="content">{{ saveInfo.gps_fee|currency }}</span>
        </item>
        <item v-if="!isReadOnly">
          <div slot="name" class="required">保险押金</div>
          <CurrencyInput slot="content" v-model="saveInfo.insurance_fee" placeholder="请输入保险押金"/>
        </item>
        <item v-if="isReadOnly">
          <div slot="name" class="required">保险押金</div>
          <span slot="content">{{ saveInfo.insurance_fee|currency }}</span>
        </item>
        <item v-if="!isReadOnly">
          <div slot="name" class="required">管理费</div>
          <CurrencyInput slot="content" v-model="saveInfo.management_money" placeholder="请输入管理费"/>
        </item>
        <item v-if="isReadOnly">
          <div slot="name" class="required">管理费</div>
          <span slot="content">{{ saveInfo.management_money|currency }}</span>
        </item>
        <item v-if="!isReadOnly" class="date-check" @click.native="showTime('YYYY-MM-DD')">
          <div slot="name" class="required">预计付款日</div>
          <input slot="content" v-model="saveInfo.lease_start_date" readonly placeholder="请选择日期 ">
        </item>
        <item v-if="isReadOnly" class="date-check">
          <div slot="name" class="required">预计付款日</div>
          <input slot="content" v-model="saveInfo.lease_start_date" readonly>
        </item>
        <item v-if="!isReadOnly" :showArrow="true" @click.native="periodPull">
          <div slot="name" class="required">还款周期</div>
          <input slot="content" v-model="saveInfo.annual_pay_times_n" readonly placeholder="请选择">
        </item>
        <item v-if="isReadOnly">
          <div slot="name" class="required">还款周期</div>
          <input slot="content" v-model="saveInfo.annual_pay_times_n" readonly placeholder="请选择">
        </item>
        <item>
          <div slot="name" class="required">租赁期数</div>
          <input
            slot="content" v-model="saveInfo.lease_times" :readonly="isReadOnly" type="number"
            placeholder="请输入租赁期数">
        </item>
        <item>
          <div slot="name" class="required">年利率</div>
          <RateInput
            v-if="!isReadOnly" slot="content" v-model="saveInfo.int_rate_n"
            placeholder="%"/>
          <span v-if="isReadOnly" slot="content">{{ saveInfo.int_rate_n }}</span>
        </item>
        <item v-if="!isReadOnly" :showArrow="true" @click.native="selectPayWay">
          <div slot="name" class="required">支付方式</div>
          <input slot="content" v-model="saveInfo.pay_type_n" readonly placeholder="请选择">
        </item>
        <item v-if="isReadOnly">
          <div slot="name" class="required">支付方式</div>
          <input slot="content" v-model="saveInfo.pay_type_n" readonly placeholder="请选择">
        </item>
        <item>
          <div slot="name" class="required">逾期日利率</div>
          <input slot="content" v-model="saveInfo.penalty_rate_n" readonly placeholder="%">
        </item>
        <item v-if="!isReadOnly">
          <div slot="name" class="required">留购价</div>
          <CurrencyInput slot="content" v-model="saveInfo.residual_value" placeholder="请输入留购价"/>
        </item>
        <item v-if="isReadOnly">
          <div slot="name" class="required">留购价</div>
          <span slot="content">{{ saveInfo.residual_value|currency }}</span>
        </item>
        <item :showArrow="true" @click.native="goPlan">
          <div slot="name">查看还款计划</div>
          <input slot="content" readonly>
        </item>
      </list-item>
    </h-content>
    <bottom-tab class="add-box">
      <tab-button v-if="!isReadOnly && !calculeFlag" class="before" @click.native="save">计算</tab-button>
      <tab-button v-if="!isReadOnly && calculeFlag" class="before" @click.native="save">重新计算</tab-button>
      <tab-button v-if="isReadOnly" class="before" @click.native="$routeGo()">上一步</tab-button>
      <tab-button class="next" @click.native="next">下一步</tab-button>
    </bottom-tab>
    <SelectProduct
      ref="product"
      :bp_agent_id="bp_agent_id"
      :division="saveInfo.division" @selectedProduct="selectedProduct" />
    <!-- <h-modal ref="modal" v-model="showModalValue" class="flow" position="bottom">
      <h-view id="product-list">
        <h-header :proportion="[1,4,1]" class="bar-custom">
          <span slot="center" style="color:#fff">选择产品</span>
          <span slot="right" style="color:#fff" @click="showModalValue=false">取消</span>
        </h-header>
        <h-content>
          <div class="search has-header">
            <input v-model="keyWordProduct" placeholder="请输入产品名称">
          </div>
          <div class="division-box">
            <scroll ref="scroll" :updateData="[divisionLists]" :pullUp="true" @pullingUp="loadMoreProduct">
              <list-item v-for="(item,index) in divisionLists" :key="index">
                <item
                  :proportion="[1,4]"
                  @click.native="selectProduct(item)"
                >
                  <div slot="name" class="item-pic">
                    <img :src="item.url">
                  </div>
                  <div slot="content" class="item-content">
                    <div class="pro-name">
                      <p>{{ item.product_name }}</p>
                    </div>
                    <div class="centers">
                      <p class="firsts1">{{ item.bp_type_n }}</p>
                      <p class="seconds1">{{ item.bp_name }}</p>
                    </div>
                    <div class="centers">
                      <p class="firsts1">产品型号</p>
                      <p class="seconds1">{{ item.product_code }}</p>
                    </div>
                  </div>
                </item>
              </list-item>
            </scroll>
          </div>
        </h-content>
      </h-view>
    </h-modal> -->
    <h-modal ref="modal" v-model="showModalBusiness " class="flow" position="bottom">
      <h-view id="businuss-list">
        <h-header :proportion="[1,4,1]" class="bar-custom">
          <span slot="center" style="color:#fff">选择商务政策</span>
          <span slot="right" style="color:#fff" @click="showModalBusiness=false">取消</span>
        </h-header>
        <h-content>
          <div class="search has-header">
            <input v-model="policyKeyWord" placeholder="请输入商务政策名称">
          </div>
          <scroll ref="scroll" :updateData="[businessLists]" :pullUp="true" @pullingUp="loadMorePolicy">

            <div class="division-box">
              <section v-for="(item,index) in businessLists" :key="index" @click="selectBusinessPolicy(item)">
                <div class="descript">
                  <img src="@/assets/trial/product.png" alt>
                  <p class="produc">{{ item.product_plan_name }}</p>
                </div>
                <div class="tario">
                  <div class="wrap">
                    <p class="ratio">
                      <span>保证金比例</span>
                      <span>{{ item.deposit_ratio_n }}</span>
                    </p>
                    <p>
                      <span>手续费比例</span>
                      <span>{{ item.lease_charge_ratio_n }}</span>
                    </p>
                  </div>
                  <div class="wrap">
                    <p>
                      <span>年利率</span>
                      <span>{{ item.int_rate_n }}</span>
                    </p>
                    <p>
                      <span>首付款比例</span>
                      <span>{{ item.down_payment_ratio_n }}</span>
                    </p>
                  </div>
                </div>
              </section>
            </div>
          </scroll>
        </h-content>
      </h-view>
    </h-modal>
  </h-view>
</template>
<script>
import CurrencyInput from '../../components/currencyInput'
import RateInput from '@/components/rateInput'
import SelectProduct from './select-product'
import {XDialog} from 'vux'

export default {
  components: {
    CurrencyInput,
    RateInput,
    SelectProduct,
    XDialog
  },
  data () {
    return {
      showHideOnBlur: false,

      downNum: false,
      calculeFlag: false,
      salesEnter: '', // 页面进入标识，该字段作用：第一次创建时即从销售页面进入进本信息、租赁信息、附件信息。用于判断后面页面录入数据后未保存则点击上一步，再次进入该页面数据丢失问题
      saveTed: false, // 本页面数据是否保存标识
      showModalValue: false,
      showModalBusiness: false,
      isComputed: false,
      fromPage: window.localStorage.fromPage,
      keyWordProduct: '',
      policyKeyWord: '',
      isReadOnly: false, // 是否只读
      fromPutted: false,
      isClick: false, // false:右滑返回；true:点击按钮返回
      fromList: false, // 判断是否从列表过来
      pagenum: 1, // 产品型号页码
      pagenumSearch: 1, // 产品型号查询时的页码
      pagenumPolicy: 1, // 商务政策没有查询时的页码
      pagenumSearchPolicy: 1, // 商务政策查询时的页码
      businessLists: [], // 商务政策
      periodLists: [], // 还款周期
      paywayLists: [], // 支付方式
      divisionLists: [],
      productLine: [], // 产品线
      depositDeductionLine: [], //保证金抵扣方式
      handlingPolicyLine: [], //手续费政策
      factory_ocr_type: '',
      certificationType: '',
      uploadList: [], // 附件上传
      rentInfo: {
        project_lease_item_id: '',
        frame_number: '',
        engine: '',
        vehicle_model: '',
        certificate_number: '',
        departure_date: '',
        invoice_date: '',
      },
      vehicleImg: '',
      /* productInfo: {
           project_id: window.localStorage.project_id,
           product_id: '',
           product_id_n: '',
           product_num: '',
         }, */
      leaseList: [],
      saveInfo: {
        project_id: window.localStorage.project_id,
        business_type: '',
        bp_name: '',
        if_sent_car: 'N',
        product_id: '',
        product_id_n: '',
        product_num: '',
        product_plan_id: '',
        product_plan_name: '',
        equip_price: '',
        int_rate: '',
        int_rate_n: '',
        penalty_rate_n: '',
        annual_pay_times: '',
        annual_pay_times_n: '',
        lease_times: '',
        down_payment_ratio: '',
        down_payment_ratio_n: '',
        down_payment: '',
        deposit_ratio: '',
        deposit_ratio_n: '',
        deposit_deduction: '',
        deposit_deduction_n: '',
        handling_policy: '',
        handling_policy_n: '',
        deposit: '',
        lease_charge_ratio: '',
        lease_charge_ratio_n: '',
        lease_charge: '',
        lease_start_date: '',
        gps_fee: '',
        insurance_fee: '',
        management_money: '',
        pay_type: '',
        pay_type_n: '',
        residual_value: '',
        division_n: '',
        division: '',
        finance_amount: '',
        credit_id: window.localStorage.credit_id,
      },
      nowPolicy: {},
      isComputedSuccess: {
        status: false,
        msg: ''
      },
    }
  },
  computed: {
    'finance_amount' () { // 融资金额
      return parseFloat(this.saveInfo.equip_price - this.saveInfo.equip_price * this.saveInfo.down_payment_ratio_n.replace('%', '') / 100).toFixed(2)
    },
    // isReadOnly () {
    //   if (window.localStorage.contractReadonly === 'true' && this.fromPage === 'list') {
    //     debugger
    //     return true
    //   } else {
    //     debugger
    //     return false
    //   }
    // },
  },
  watch: {
    $route (to, from) {
      if (to.name === 'CreateBaseInfo' && from.name === 'CreateRentInfo') {
        if (!this.isClick && this.fromPage === 'sale') {
          this.routeGoCustom()
        }
      }
    },
    policyKeyWord (newVal, oldVal) {
      this.searchBusinessPolicy()
    },
    keyWordProduct (newVal, oldVal) {
      this.searchProduct()
    },
    showModalBusiness (newVal, oldVal){
      if (!this.showModalBusiness){
        this.businessLists = []
        this.pagenumSearchPolicy = 1
      }
    },
    'saveInfo.equip_price' () {
      this.saveInfo.down_payment = (this.saveInfo.equip_price * this.saveInfo.down_payment_ratio_n.replace('%', '') / 100).toFixed(2)
      this.saveInfo.deposit = (this.saveInfo.equip_price * this.saveInfo.deposit_ratio_n.replace('%', '') / 100).toFixed(2)
      this.saveInfo.lease_charge = parseFloat((this.saveInfo.equip_price - this.saveInfo.equip_price * this.saveInfo.down_payment_ratio_n.replace('%', '') / 100) * (this.saveInfo.lease_charge_ratio_n.replace('%', '') / 100)).toFixed(2)
    },
    'saveInfo.deposit_ratio_n' (newVal, oldVal) {
      this.saveInfo.deposit = (this.saveInfo.equip_price * newVal.replace('%', '') / 100).toFixed(2)
    },
    'saveInfo.down_payment_ratio_n' (newVal, oldVal) {
      this.saveInfo.down_payment = (this.saveInfo.equip_price * newVal.replace('%', '') / 100).toFixed(2)
    },
    // 'saveInfo.down_payment' (newVal, oldVal) {
    //   this.saveInfo.down_payment_ratio_n = `${(newVal / this.saveInfo.equip_price * 100).toFixed(2)}%`
    // },
    // 'saveInfo.lease_charge_ratio_n' (newVal, oldVal) {
    //   this.saveInfo.lease_charge = parseFloat((this.saveInfo.equip_price - this.saveInfo.equip_price * this.saveInfo.down_payment_ratio_n.replace('%', '') / 100) * (this.saveInfo.lease_charge_ratio_n.replace('%', '') / 100)).toFixed(2)
    // },
    'downNum' (newVal, oldVal) {
      if (!newVal) {
        this.vehicleImg = ''
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.showModalBusiness = false
      vm.showModalValue = false
      vm.pagenumSearch = 1
      vm.pagenumSearchPolicy = 1
      vm.policyKeyWord = ''
      vm.keyWordProduct = ''
      vm.saveInfo.lease_start_date = ''
      vm.businessLists = []
      vm.divisionLists = []
      // vm.nowPolicy = {}
      vm.pagenum = 1
      vm.pagenumPolicy = 1
      vm.downNum = false
      vm.setTime()
      vm.fromPage = window.localStorage.fromPage
      vm.saveInfo.project_id = window.localStorage.project_id // 重新赋值，防止缓存
      // vm.productInfo['project_id'] = window.localStorage.project_id // 重新赋值，防止缓存
      if (from.name === 'CreateBaseInfo') {
        vm.isComputed = false
        vm.calculeFlag = false
        vm.salesEnter = vm.$route.params.salesEnter
        vm.bp_agent_id = vm.$route.params.bp_agent_id
        vm.saveInfo.bp_name = window.localStorage.bp_name_tenant
        vm.saveTed = false
        vm.isClick = false
        if (vm.fromPage === 'sale') {
          vm.fromList = false
          vm.isReadOnly = false
          vm.leaseList = []
          vm.rentInfoQuery()
          vm.rentList()
        } else if (vm.fromPage === 'list') {
          if (window.localStorage.contractReadonly === 'true') {
            vm.isReadOnly = true
          } else {
            vm.isReadOnly = false
          }
          vm.fromList = true
          vm.rentInfoQuery()
          vm.rentList()
        }
        Object.keys(vm.saveInfo).forEach(i => { // 置空saveInfo
          if (i !== 'project_id' && i !== 'bp_name' && i !== 'lease_start_date') {
            vm.saveInfo[i] = ''
          }
        })
        /* console.log('@@@@@@@@@@@@@@@@@@'+JSON.stringify(vm.saveInfo))
           Object.keys(vm.productInfo).forEach(i => { // 置空productInfo
             if (i !== 'project_id') {
               vm.productInfo[i] = ''
             }
           }) */
        setTimeout(() => {
          vm.getProductLine() // 产品线查询
          vm.repayPeriod()// 还款周期查询
          vm.getPayWay()// 支付方式查询
          vm.getDepositDeduction()// 保证金抵扣方式
          vm.getHandlingPolicy()// 手续费政策
        }, 0)
        console.log(vm.factory_ocr_type)
      }
    })
  },
  methods: {
    // 非标价商务信息
    showFeiInfo() {
      this.showHideOnBlur = true
    },

    // 查看大图
    showBigPicture (pic) {
      let vm = this
      vm.hlsPopup.showBigPicture({
        imgUrl: pic,
        width: '100%',
      })
    },
    saveRent () {
      let url = process.env.basePath + 'prj_leases_info_save'
      if (this.rentInfo.frame_number === '') {
        hlsPopup.showLongCenter('车架号不能为空！')
      } else if (this.rentInfo.engine === '') {
        hlsPopup.showLongCenter('发动机号不能为空！')
      } else if (this.rentInfo.vehicle_model === '') {
        hlsPopup.showLongCenter('车辆型号不能为空！')
      } else if (this.rentInfo.certificate_number === '') {
        hlsPopup.showLongCenter('合格证编号不能为空！')
      } else if (this.rentInfo.departure_date === '') {
        hlsPopup.showLongCenter('发车日期不能为空！')
      } else if (this.rentInfo.invoice_date === '') {
        hlsPopup.showLongCenter('开票日期不能为空！')
      } else {
        let param = {
          master: {
            project_lease_item_id: this.rentInfo.project_lease_item_id,
            project_id: window.localStorage.project_id,
            frame_number: this.rentInfo.frame_number,
            engine: this.rentInfo.engine,
            vehicle_model: this.rentInfo.vehicle_model,
            certificate_number: this.rentInfo.certificate_number,
            departure_date: this.rentInfo.departure_date,
            invoice_date: this.rentInfo.invoice_date,
          },
        }
        this.$post(url, param).then((res) => {
          this.hlsPopup.hideLoading()
          if (res.result === 'S') {
            hlsPopup.showLongCenter('保存成功')
            this.downNum = false
            this.rentInfo.project_lease_item_id = res.master.project_lease_item_id
            if (this.uploadList.length > 0) {
              this.uploadList[0].pkvalue = this.rentInfo.project_lease_item_id
            }
            this.savePicture(this.uploadList)
            let ifPush = true
            this.leaseList.forEach(item => {
              if (item.project_lease_item_id === res.master.project_lease_item_id) {
                ifPush = false
              }
            })
            if (ifPush) {
              this.leaseList.push(this.rentInfo)
            }
          } else {
            hlsPopup.showLongCenter(res.message)
          }
        })
      }
    },
    // 选择识别类型
    pickMethod () {
      let vm = this
      hlsPopup.showActionSheet({
        titleText: '请选择证件类型',
        buttonArray: ['重型合格证', '车辆登记证', '出厂合格证'],
        callback: index => {
          if (index === 0) {
            vm.certificationType = 'NORMAL'
            vm.ocrShow()
          } else if (index === 1) {
            vm.certificationType = 'DAOLU'
            vm.ocrShow()
          } else if (index === 2) {
            vm.certificationType = 'CHANYUN'
            vm.ocrShow()
          }
        },
      })
    },
    // ocr识别入口
    ocrShow () {
      let vm = this
      hlsPopup.showActionSheet({
        titleText: '请选择照片',
        buttonArray: ['拍照', '从相册取'],
        callback: index => {
          if (index === 0) {
            vm.openCamera()
          } else {
            vm.takePicture()
          }
        },
      })
    },
    openCamera () {
      let vm = this
      let cameraoptions = {
        quality: 60,
        width: 1843,
        height: 1382,
      }
      let obj = {
        pkvalue: '',
        source_type: 'PRJ_PROJECT_LEASE_ITEM',
        filePath: '',
        attachment_id: '',
        user_id: 1,
        fileName: '合格证',
      }
      let success = function (imgdata) {
        if (!imgdata) {
          hlsPopup.showLongCenter('请拍照')
        } else {
          vm.isUpload = true
          vm.vehicleImg = hlsUtil.convertImageUrl(imgdata)
          vm.vehicleIdentify(imgdata)
          obj.filePath = imgdata
          vm.uploadList = []
          vm.uploadList.push(imgdata)
        }
      }
      let error = function () {
        hlsPopup.showLongCenter(error)
      }
      hlsUtil.openCamera(cameraoptions, success, error)
    },
    takePicture () {
      let vm = this
      var cameraoptions = {
        quality: 70,
        width: 1843,
        height: 1382,
        maxCount: 1,
      }
      let obj = {
        pkvalue: '',
        source_type: 'PRJ_PROJECT_LEASE_ITEM',
        filePath: '',
        attachment_id: '',
        user_id: 1,
        fileName: '合格证',
      }
      let success = function (imgUrl) {
        if (imgUrl.length === 0) {
          hlsPopup.showLongCenter('请选择一张图片')
        } else {
          vm.isUpload = true
          vm.vehicleImg = hlsUtil.convertImageUrl(imgUrl[0])
          obj.filePath = imgUrl[0]
          vm.vehicleIdentify(imgUrl[0])
          vm.uploadList = []
          vm.uploadList.push(obj)
        }
      }
      let error = function () {
        hlsPopup.showLongCenter(error)
      }
      vm.hlsUtil.takePicture(cameraoptions, success, error)
    },
    // 合格证识别
    vehicleIdentify (fileUrl) {
      let vm = this
      hlsPopup.showLoading('正在识别...')
      let url
      if (vm.certificationType === 'NORMAL') {
        url = process.env.ocrPath + '/baidu/ocr/vehicle_certificate'
      } else if (vm.certificationType === 'CHANYUN') {
        url = process.env.ocrPath + '/baidu/ocr/chanyun'
      } else if (vm.certificationType === 'DAOLU') {
        url = process.env.ocrPath + '/baidu/ocr/daolu'
      }
      console.log('OCR识别URL：' + url)
      hlsUtil.baiduOcr(fileUrl, url, function (res) {
        hlsPopup.hideLoading()
        console.log('OCR识别结果：' + JSON.stringify(res))
        if (vm.certificationType === 'NORMAL') {
          let result = res.result.words_result
          vm.rentInfo.frame_number = result.VinNo // 车架号
          vm.rentInfo.engine = result.EngineNo // 发动机号
          vm.rentInfo.vehicle_model = result.CarModel // 车辆型号
          vm.rentInfo.certificate_number = result.CertificationNo // 合格证编号
        } else if (vm.certificationType === 'DAOLU') {
          let result = res.result.data
          vm.rentInfo.frame_number = result.vehicle_number.word // 车架号
          vm.rentInfo.engine = result.engine_number.word // 发动机号
          vm.rentInfo.vehicle_model = result.car_model.word // 车辆型号
          vm.rentInfo.certificate_number = ''
        } else if (vm.certificationType === 'CHANYUN') {
          let result = res.result.data
          vm.rentInfo.frame_number = result.vehicle_number.word // 车架号
          vm.rentInfo.engine = result.engine_number.word // 发动机号
          vm.rentInfo.vehicle_model = result.car_type.word // 车辆型号
          vm.rentInfo.certificate_number = result.vechicle_ok_no.word
        }
        vm.rentInfo.project_lease_item_id = ''
        vm.rentInfo.departure_date = ''
        vm.rentInfo.invoice_date = ''
      })
    },
    // 图片保存
    savePicture (list) {
      // let vm = this
      if (list.length) {
        // hlsPopup.showLoading('图片上传请稍候')
        var alreadyUploadNum = 0
        var attLength = 0
        var recordUploadInterval = setInterval(function () {
          if (alreadyUploadNum === attLength) {
            clearInterval(recordUploadInterval)
            hlsPopup.hideLoading()
            // hlsPopup.showLongCenter('图片上传成功')
          }
        }, 500)
        for (var i = 0; i < list.length; i++) {
          let uploadSuccess = function (res) {
            if (res.result === 'S') {
              alreadyUploadNum++
              for (var j = 0; j < list.length; j++) {
                if (list[j].filePath === res.response.filePath) {
                  list[j].attachment_id = res.response.attachment_id
                  break
                }
              }
            } else {
              hlsPopup.hideLoading()
            }
          }
          if (!list[i].attachment_id) {
            attLength++
            hlsUtil.fileUploadSvc(list[i], uploadSuccess)
          }
        }
      } else {
        hlsPopup.hideLoading()
      }
    },
    getImg (id) {
      // 获取合格证
      let vm = this
      let randomString = Math.floor(Math.random() * 21)
      let url =
        process.env.basePath +
        'app_attment_query' +
        '&index' +
        `'${randomString}'`
      let param = {
        master: {
          source_type: 'PRJ_PROJECT_LEASE_ITEM',
          pkvalue: id,
        },
      }
      vm.$post(url, param).then(function (res) {
        if (res.result === 'S') {
          if (res.info) {
            vm.vehicleImg =
              process.env.filePath +
              'attachment_id=' +
              res.info.attachment_id +
              '&access_token=' +
              window.localStorage.access_token
          }
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    getProduct () {
      this.$refs.product.init()
      this.$refs.product.getProduct()
      this.$refs.product.show()
    },
    selectedProduct (e) {
      this.saveInfo.product_id = e.product_id
      this.saveInfo.product_id_n = e.product_id_n
    },
    check (e) {
      if (e < 1000) {
        hlsPopup.showLongCenter('设备单价不能小于1000元!')
      }
    },
    routeGoCustomClick () {
      if (this.fromPage === 'sale') {
        this.isClick = true
        this.routeGoCustom()
      } else {
        this.$routeGo()
      }
    },
    // 自定义返回逻辑：第一次新建时返回判断是否保存数据，未保存提示保存
  routeGoCustom () {
      let vm = this
      if (vm.fromPage === 'sale' && !vm.saveTed) {
        hlsPopup.showConfirm({
          title: '提示',
          content: '当前页面数据未保存，返回会导致数据丢失，是否保存？',
          onConfirm: function (index) {
            if (index === 1) {
              vm.saveBack()
            } else {
              vm.$routeGo()
            }
          },
        })
      } else {
        vm.$routeGo()
      }
    },
    changeRatio () {
      this.saveInfo.down_payment_ratio_n = `${(this.saveInfo.down_payment / this.saveInfo.equip_price).toFixed(2) * 100}`
    },
    changeDeposit () {
      this.saveInfo.deposit_ratio_n = `${(this.saveInfo.deposit / this.saveInfo.equip_price).toFixed(2) * 100}`
    },
    changeLeaseCharge () {
      let vm = this
      if(!this.saveInfo.equip_price || this.saveInfo.equip_price === '' || this.saveInfo.equip_price === 0 || this.saveInfo.equip_price === 0.00){
        hlsPopup.showPopup({
          title: "提示",
          content: '请先输入设备单价',
          onConfirm: function () {
            vm.saveInfo.lease_charge = 0
          }
        })
      }else{
        this.saveInfo.lease_charge_ratio_n = `${((this.saveInfo.lease_charge / (this.saveInfo.equip_price - this.saveInfo.equip_price * this.saveInfo.down_payment_ratio_n.replace('%', '') / 100)) * 100).toFixed(6)}`
      }
    },
    // 租赁物列表
    rentList () {
      this.leaseList = []
      let url = process.env.basePath + 'prj_leases_info_list'
      let param = {
        project_id: window.localStorage.project_id,
      }
      hlsPopup.showLoading('请稍候')
      this.$post(url, param).then((res) => {
        this.hlsPopup.hideLoading()
        if (res.result === 'S') {
          this.leaseList = res.lists
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    rentInfoQuery () { // 租赁信息查询
      let vm = this
      let url = process.env.basePath + 'prj_lease_query'
      let param = {
        project_id: window.localStorage.project_id,
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          if (res.info !== undefined) {
            Object.assign(vm.saveInfo, res.info)
            vm.saveInfo.product_plan_name = res.info.product_plan_id_n
            vm.factory_ocr_type = res.info.factory_ocr_type
            vm.saveInfo.division_n = res.info.product_name
            vm.saveInfo.down_payment = res.info.down_payment

            vm.nowPolicy = res.info;
            console.log('复现的nowPolicy：', vm.nowPolicy);
          }
          vm.saveInfo.int_rate_n = vm.saveInfo.int_rate_n.replace('%', '')
          vm.saveInfo.down_payment_ratio_n = vm.saveInfo.down_payment_ratio_n.replace('%', '')
          vm.saveInfo.deposit_ratio_n = vm.saveInfo.deposit_ratio_n.replace('%', '')
          vm.saveInfo.lease_charge_ratio_n = vm.saveInfo.lease_charge_ratio_n.replace('%', '')
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    selectBusinessPolicy (e) {
      let vm = this
      vm.nowPolicy = e; // 保存目前的政策
      vm.saveInfo.product_plan_id = e.product_plan_id
      vm.saveInfo.product_plan_name = e.product_plan_name
      vm.saveInfo.down_payment_ratio = e.down_payment_ratio
      vm.saveInfo.down_payment_ratio_n = e.down_payment_ratio_n.replace('%', '')
      vm.saveInfo.lease_charge_ratio = e.lease_charge_ratio
      vm.saveInfo.lease_charge_ratio_n = e.lease_charge_ratio_n.replace('%', '')
      vm.saveInfo.int_rate = e.int_rate
      vm.saveInfo.int_rate_n = e.int_rate_n.replace('%', '')
      vm.saveInfo.penalty_rate_n = e.penalty_rate_n
      vm.saveInfo.penalty_rate = e.penalty_rate
      vm.saveInfo.deposit_ratio = e.deposit_ratio
      vm.saveInfo.deposit_ratio_n = e.deposit_ratio_n.replace('%', '')

      // vm.saveInfo.lease_times = e.lease_times
      vm.saveInfo.lease_times = ''
      setTimeout(() => {
        vm.showModalBusiness = false
      }, 100)
    },
    calculateBack () {
      let vm = this
      let url = process.env.basePath + 'prj_lease_info_save'
      vm.saveInfo.down_payment_ratio = (vm.saveInfo.down_payment_ratio_n.replace('%', '') / 100).toFixed(2)
      vm.saveInfo.lease_charge_ratio = (vm.saveInfo.lease_charge_ratio_n.replace('%', '') / 100).toFixed(8)
      vm.saveInfo.deposit_ratio = (vm.saveInfo.deposit_ratio_n.replace('%', '') / 100).toFixed(2)
      vm.saveInfo.finance_amount = vm.finance_amount
      let param = {
        master: vm.saveInfo,
      }
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          // vm.isComputed = true
          vm.isComputedSuccess.status = true;
        } else {
          hlsPopup.showLongCenter(res.message)
           vm.isComputedSuccess = {status: false, msg: res.message};
        }
      })
    },
    save () {
      let vm = this
      if (!vm.saveInfo.division_n) {
        hlsPopup.showLongCenter('产品线不能为空!')
      } else if (!vm.saveInfo.product_id_n) {
        hlsPopup.showLongCenter('产品型号不能为空!')
      } else if (!vm.saveInfo.product_num) {
        hlsPopup.showLongCenter('产品数量不能为空!')
      } else if (!vm.saveInfo.product_plan_name) {
        hlsPopup.showLongCenter('商务政策不能为空!')
      } else if (!vm.saveInfo.equip_price) {
        hlsPopup.showLongCenter('设备单价不能为空!')
      } else if (!vm.saveInfo.down_payment_ratio_n) {
        hlsPopup.showLongCenter('首付比例不能为空!')
      } else if (!vm.saveInfo.down_payment) {
        hlsPopup.showLongCenter('首付款不能为空!')
      } else if (!vm.saveInfo.deposit_ratio_n) {
        hlsPopup.showLongCenter('保证金比例不能为空!')
      } else if (!vm.saveInfo.deposit) {
        hlsPopup.showLongCenter('保证金不能为空!')
      } else if (!vm.saveInfo.lease_charge_ratio_n) {
        hlsPopup.showLongCenter('手续费比例不能为空!')
      } else if (!vm.saveInfo.lease_charge) {
        hlsPopup.showLongCenter('手续费不能为空!')
      } else if (!vm.saveInfo.gps_fee) {
        hlsPopup.showLongCenter('GPS费用不能为空!')
      } else if (!vm.saveInfo.insurance_fee) {
        hlsPopup.showLongCenter('保险押金不能为空!')
      } else if (!vm.saveInfo.lease_start_date) {
        hlsPopup.showLongCenter('预计付款日不能为空!')
      } else if (!vm.saveInfo.annual_pay_times_n) {
        hlsPopup.showLongCenter('还款周期不能为空!')
      } else if (!vm.saveInfo.lease_times) {
        hlsPopup.showLongCenter('租赁期数不能为空!')
      } else if (!vm.saveInfo.pay_type_n) {
        hlsPopup.showLongCenter('支付方式不能为空!')
      } else if (!vm.saveInfo.residual_value) {
        hlsPopup.showLongCenter('留购价不能为空!')
      } else if (vm.saveInfo.equip_price < 1000) {
        hlsPopup.showLongCenter('设备单价不能小于1000元!')
      } else {
        let url = process.env.basePath + 'prj_lease_info_save'
        vm.saveInfo.down_payment_ratio = (vm.saveInfo.down_payment_ratio_n.replace('%', '') / 100).toFixed(2)
        vm.saveInfo.lease_charge_ratio = (vm.saveInfo.lease_charge_ratio_n.replace('%', '') / 100).toFixed(8)
        vm.saveInfo.deposit_ratio = (vm.saveInfo.deposit_ratio_n.replace('%', '') / 100).toFixed(2)
        vm.saveInfo.int_rate = (vm.saveInfo.int_rate_n.replace('%', '') / 100)
        vm.saveInfo.finance_amount = vm.finance_amount
        vm.saveInfo.credit_id = window.localStorage.credit_id
        let param = {
          master: JSON.parse(JSON.stringify(vm.saveInfo)),
        }
        hlsPopup.showLoading('请稍候')
        vm.$post(url, param).then(function (res) {
          if (res.result === 'S') {
            vm.hlsPopup.hideLoading()
            vm.isComputed = true
            vm.calculeFlag = true
            vm.saveTed = true
            vm.isComputedSuccess.status = true;
            hlsPopup.showLongCenter('计算成功')
            vm.goPlan()
          } else {
            vm.isComputedSuccess = {status: false, msg: res.message};
            vm.hlsPopup.hideLoading()
            hlsPopup.showLongCenter(res.message)
          }
        })
      }
    },
    saveBack () {
      let vm = this
      if (!vm.saveInfo.division_n) {
        hlsPopup.showLongCenter('产品线不能为空!')
      } else if (!vm.saveInfo.product_id_n) {
        hlsPopup.showLongCenter('产品型号不能为空!')
      } else if (!vm.saveInfo.product_num) {
        hlsPopup.showLongCenter('产品数量不能为空!')
      } else if (!vm.saveInfo.product_plan_name) {
        hlsPopup.showLongCenter('商务政策不能为空!')
      } else if (!vm.saveInfo.equip_price) {
        hlsPopup.showLongCenter('设备单价不能为空!')
      } else if (!vm.saveInfo.down_payment_ratio_n) {
        hlsPopup.showLongCenter('首付比例不能为空!')
      } else if (!vm.saveInfo.down_payment) {
        hlsPopup.showLongCenter('首付款不能为空!')
      } else if (!vm.saveInfo.deposit_ratio_n) {
        hlsPopup.showLongCenter('保证金比例不能为空!')
      } else if (!vm.saveInfo.deposit) {
        hlsPopup.showLongCenter('保证金不能为空!')
      } else if (!vm.saveInfo.deposit_deduction) {
        hlsPopup.showLongCenter('保证金抵扣方式不能为空!')
      } else if (!vm.saveInfo.handling_policy) {
        hlsPopup.showLongCenter('手续费政策不能为空!')
      } else if (!vm.saveInfo.lease_charge_ratio_n) {
        hlsPopup.showLongCenter('手续费比例不能为空!')
      } else if (!vm.saveInfo.lease_charge) {
        hlsPopup.showLongCenter('手续费不能为空!')
      } else if (!vm.saveInfo.gps_fee) {
        hlsPopup.showLongCenter('GPS费用不能为空!')
      } else if (!vm.saveInfo.insurance_fee) {
        hlsPopup.showLongCenter('保险押金不能为空!')
      } else if (!vm.saveInfo.lease_start_date) {
        hlsPopup.showLongCenter('预计付款日不能为空!')
      } else if (!vm.saveInfo.annual_pay_times_n) {
        hlsPopup.showLongCenter('还款周期不能为空!')
      } else if (!vm.saveInfo.lease_times) {
        hlsPopup.showLongCenter('租赁期数不能为空!')
      } else if (!vm.saveInfo.pay_type_n) {
        hlsPopup.showLongCenter('支付方式不能为空!')
      } else if (!vm.saveInfo.residual_value) {
        hlsPopup.showLongCenter('留购价不能为空!')
      } else if (!vm.saveInfo.int_rate_n) {
        hlsPopup.showLongCenter('年利率不能为空!')
      } else {
        let url = process.env.basePath + 'prj_lease_info_save'
        vm.saveInfo.down_payment_ratio = (vm.saveInfo.down_payment_ratio_n.replace('%', '') / 100).toFixed(2)
        vm.saveInfo.lease_charge_ratio = (vm.saveInfo.lease_charge_ratio_n.replace('%', '') / 100).toFixed(8)
        vm.saveInfo.deposit_ratio = (vm.saveInfo.deposit_ratio_n.replace('%', '') / 100).toFixed(2)
        vm.saveInfo.finance_amount = vm.finance_amount
        let param = {
          master: vm.saveInfo,
        }
        hlsPopup.showLoading('请稍候')
        vm.$post(url, param).then(function (res) {
          vm.hlsPopup.hideLoading()
          if (res.result === 'S') {
            hlsPopup.showLongCenter('保存成功')
            vm.isComputedSuccess.status = true;;
            vm.$routeGo()
          } else {
            vm.isComputedSuccess = {status: false, msg: res.message};
            hlsPopup.showLongCenter(res.message)
          }
        })
      }
    },
    async isComputedCheck () {
      let vm = this
      let url = process.env.basePath + 'prj_product_cal_status'
      let param = {
        project_id: vm.saveInfo.project_id,
      }
      hlsPopup.showLoading('请稍候')
      let res = await vm.$post(url, param)
      vm.hlsPopup.hideLoading()
      if (res.result === 'S') {
        if (res.info.success_flag === 'Y') {
          return true
        } else {
          return false
        }
      } else {
        hlsPopup.showLongCenter(res.message)
      }
    },
    async next () {
      let vm = this
      if(!vm.isComputedSuccess.status && vm.isComputedSuccess.msg) {
        hlsPopup.showLongCenter(vm.isComputedSuccess.msg);
        return
      }
      vm.isComputed = await vm.isComputedCheck()
      if (vm.isReadOnly) {
        vm.$router.push({
          name: 'CreateEnclosureInfo',
        })
      } else {
        if (vm.isComputed) {
          vm.$router.push({
            name: 'CreateEnclosureInfo',
          })
        } else {
          hlsPopup.showLongCenter('请先进行计算')
        }
      }
    },
    // next () {
    //         let vm = this
    //         if (vm.isReadOnly) {
    //           vm.$router.push({
    //             name: 'CreateEnclosureInfo',
    //             // vm.$router.push({
    //             //   name: 'CreateEnclosureInfo',
    //             // })
    //           })
    //         } else {
    //           if (vm.isComputed) {
    //             let url = process.env.basePath + 'prj_product_info_save'
    //             let param = {
    //               master: {
    //                 division_n: vm.saveInfo.division_n,
    //                 bp_name: vm.$route.params.bp_name,
    //                 ...vm.productInfo,
    //               },
    //             }
    //             hlsPopup.showLoading('请稍候')
    //             vm.$post(url, param).then(function (res) {
    //               vm.hlsPopup.hideLoading()
    //               if (res.result === 'S') {
    //                 vm.saveTed = true
    //                 vm.$router.push({
    //                   name: 'CreateEnclosureInfo',
    //                 })
    //               } else {
    //                 hlsPopup.showLongCenter(res.message)
    //               }
    //             })
    //           } else {
    //             hlsPopup.showLongCenter('请先进行计算')
    //           }
    //         }
    //       },
    /* next () {
             let vm = this
             if (vm.isReadOnly) {
               vm.$router.push({
                 name: 'CreateEnclosureInfo',
                 // vm.$router.push({
                 //   name: 'CreateEnclosureInfo',
                 // })
               })
             } else {
               if (vm.isComputed) {
                 let url = process.env.basePath + 'prj_product_info_save'
                 let param = {
                   master: {
                     division_n: vm.saveInfo.division_n,
                     bp_name: vm.$route.params.bp_name,
                     ...vm.productInfo,
                   },
                 }
                 hlsPopup.showLoading('请稍候')
                 vm.$post(url, param).then(function (res) {
                   vm.hlsPopup.hideLoading()
                   if (res.result === 'S') {
                     vm.saveTed = true
                     vm.$router.push({
                       name: 'CreateEnclosureInfo',
                     })
                   } else {
                     hlsPopup.showLongCenter(res.message)
                   }
                 })
               } else {
                 hlsPopup.showLongCenter('请先进行计算')
               }
             }
           }, */
    setTime () {
      if (!this.saveInfo.lease_start_date) {
        let date = window.localStorage.getItem('signDate').replace(/-/g, '/')
        let signDate = new Date(date)
        let iToDay = signDate.getDate()
        let iToMon = signDate.getMonth()
        let iToYear = signDate.getFullYear()
        let newDay = new Date(iToYear, iToMon, (iToDay + 30))
        this.saveInfo.lease_start_date = `${newDay.getFullYear()}-${(newDay.getMonth() + 1).toString().length === 2 ? newDay.getMonth() + 1 : '0' + (newDay.getMonth() + 1)}-${(newDay.getDate()).toString().length === 2 ? newDay.getDate() : '0' + newDay.getDate()}`
      }
    },
    showTime (format) { // 预计付款日
      let vm = this
      let date = window.localStorage.getItem('signDate').replace(/-/g, '/')
      let signDate = new Date(date)
      let iToDay = signDate.getDate()
      let iToMon = signDate.getMonth()
      let iToYear = signDate.getFullYear()
      let newDay = new Date(iToYear, iToMon, (iToDay + 30))
      hlsPopup.showTime({
        // nowDate: newDay.format('yyyy-MM-dd'),
        nowDate: (new Date(iToYear, iToMon, (iToDay + 30))).format('yyyy-MM-dd'),
        format: format,
        callback: (date) => {
          if (date >= (new Date()).format('yyyy-MM-dd')) {
            vm.saveInfo.lease_start_date = date
          } else {
            hlsPopup.showLongCenter(`预计付款日期不能小于当天${(new Date()).format('yyyy-MM-dd')}`)
          }
        },
      })
    },
    showTime1 (format) { // 预计付款日
      let vm = this
      let date = window.localStorage.getItem('signDate').replace(/-/g, '/')
      let signDate = new Date(date)
      let iToDay = signDate.getDate()
      let iToMon = signDate.getMonth()
      let iToYear = signDate.getFullYear()
      let newDay = new Date(iToYear, iToMon, (iToDay + 30))
      hlsPopup.showTime({
        // nowDate: newDay.format('yyyy-MM-dd'),
        nowDate: (new Date(iToYear, iToMon, (iToDay + 30))).format('yyyy-MM-dd'),
        format: format,
        callback: (date) => {
          vm.rentInfo.departure_date = date
        },
      })
    },
    showTime2 (format) { // 预计付款日
      let vm = this
      let date = window.localStorage.getItem('signDate').replace(/-/g, '/')
      let signDate = new Date(date)
      let iToDay = signDate.getDate()
      let iToMon = signDate.getMonth()
      let iToYear = signDate.getFullYear()
      let newDay = new Date(iToYear, iToMon, (iToDay + 30))
      hlsPopup.showTime({
        // nowDate: newDay.format('yyyy-MM-dd'),
        nowDate: (new Date(iToYear, iToMon, (iToDay + 30))).format('yyyy-MM-dd'),
        format: format,
        callback: (date) => {
          vm.rentInfo.invoice_date = date
        },
      })
    },
    getPayWay () { // 支付方式查询
      let vm = this
      let url = $config.basePath + 'prj_pay_type_query'
      let param = {}
      vm.hlsPopup.showLoading('数据加载中')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.paywayLists = res.lists.map(item => {
            return {
              code: item.pay_type,
              code_name: item.pay_type_n,
            }
          })
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    // 支付方式选择
    selectPayWay () {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.paywayLists, // 下拉列表
        code: 'bp_type',
        object: {},
        returnItem: function (index, obj) {
          vm.saveInfo.pay_type_n = obj.bp_type_n
          vm.saveInfo.pay_type = obj.bp_type
        },
      })
    },
    repayPeriod () { // 还款周期查询
      let vm = this
      let url = $config.basePath + 'annual_pay_times_query'
      let param = {}
      vm.hlsPopup.showLoading('数据加载中')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.periodLists = res.lists.map(item => {
            return {
              code: item.annual_pay_times,
              code_name: item.annual_pay_times_n,
            }
          })
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    // 还款周期选择
    periodPull () {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.periodLists, // 下拉列表
        code: 'bp_type',
        object: {},
        returnItem: function (index, obj) {
          vm.saveInfo.annual_pay_times_n = obj.bp_type_n
          vm.saveInfo.annual_pay_times = obj.bp_type
        },
      })
    },
    loadMorePolicy () {
      if (this.policyKeyWord) {
        this.searchBusinessPolicy()
      } else {
        this.getBusinessPolicy()
      }
    },
    searchBusinessPolicy () {
      let vm = this
      // vm.businessLists = []
      // vm.pagenumSearchPolicy = 1
      let randomString = Math.floor(Math.random() * 21)
      let url =
          process.env.basePath +
          'prj_product_plan_query' +
          '&index' +
          `'${randomString}'`
      let param = {
        bp_agent_id: vm.bp_agent_id,
        pagesize: 10,
        pagenum: vm.pagenumSearchPolicy,
        searchInput: vm.policyKeyWord,
        division: vm.saveInfo.division,
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          let returnData = []
          returnData = res.lists
          if (returnData.length === 0) {
            vm.businessLists = returnData
            vm.$refs.scroll.update(true)
          } else if (returnData.length > 0 && returnData.length < 10) {
            // vm.businessLists = returnData
            vum.forEach(returnData, function (data, index, array) {
              vm.businessLists.push(array[index])
            })
            vm.$refs.scroll.update(true)
          } else if (returnData.length === 10) {
            vum.forEach(returnData, function (data, index, array) {
              vm.businessLists.push(array[index])
            })
            vm.pagenumSearchPolicy++
            vm.$refs.scroll.update(false)
          }
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    getBusinessPolicy () {
      let vm = this
      // vm.businessLists = []
      // vm.pagenumPolicy = 1
      let randomString = Math.floor(Math.random() * 21)
      let url =
          process.env.basePath +
          'prj_product_plan_query' +
          '&index' +
          `'${randomString}'`
      let param = {
        bp_agent_id: vm.bp_agent_id,
        pagesize: 10,
        pagenum: vm.pagenumPolicy,
        searchInput: vm.policyKeyWord,
        division: vm.saveInfo.division,
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          let returnData = []
          returnData = res.lists
          if (returnData.length === 0) {
            vm.$refs.scroll.update(true)
          } else if (returnData.length > 0 && returnData.length < 10) {
            vum.forEach(returnData, function (data, index, array) {
              vm.businessLists.push(array[index])
            })
            // vm.pagenumPolicy++
            vm.$refs.scroll.update(true)
          } else if (returnData.length === 10) {
            vum.forEach(returnData, function (data, index, array) {
              vm.businessLists.push(array[index])
            })
            vm.pagenumPolicy++
            vm.$refs.scroll.update(false)
          }
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    // selectProduct (e) {
    //   let vm = this
    //   this.saveInfo.product_id_n = e.product_name
    //   this.saveInfo.product_id = e.product_id
    //   setTimeout(() => {
    //     vm.showModalValue = false
    //   }, 100)
    // },
    // loadMoreProduct () {
    //   if (this.keyWordProduct) {
    //     this.searchProduct()
    //   } else {
    //     this.getProduct()
    //   }
    // },
    // searchProduct () {
    //   let vm = this
    //   vm.divisionLists = []
    //   vm.pagenumSearch = 1
    //   let randomString = Math.floor(Math.random() * 21)
    //   let url =
    //       process.env.basePath +
    //       'prj_product_list' +
    //       '&index' +
    //       `'${randomString}'`
    //   let param = {
    //     bp_agent_id: vm.bp_agent_id,
    //     division: vm.saveInfo.division,
    //     user_phone: window.localStorage.getItem('user_phone'),
    //     pagesize: 10,
    //     pagenum: vm.pagenumSearch,
    //     searchInput: vm.keyWordProduct,
    //   }
    //   hlsPopup.showLoading('请稍候')
    //   vm.$post(url, param).then(function (res) {
    //     vm.hlsPopup.hideLoading()
    //     if (res.result === 'S') {
    //       let returnData = []
    //       returnData = res.lists
    //       if (returnData.length === 0) {
    //         vm.divisionLists = returnData
    //       } else if (returnData.length > 0 && returnData.length < 10) {
    //         vm.divisionLists = returnData
    //         vm.$refs.scroll.update(true)
    //       } else if (returnData.length === 10) {
    //         vum.forEach(returnData, function (data, index, array) {
    //           vm.divisionLists.push(array[index])
    //         })
    //         vm.pagenumSearch++
    //         vm.$refs.scroll.update(false)
    //       }
    //       vm.divisionLists.forEach(item => {
    //         item['url'] = process.env.filePath + 'attachment_id=' + item.product_attachment_id + '&access_token=' + window.localStorage.access_token
    //       })
    //     } else {
    //       hlsPopup.showLongCenter(res.message)
    //     }
    //   })
    // },
    // getProduct () {
    //   let vm = this
    //   vm.divisionLists = []
    //   vm.pagenum = 1
    //   vm.showModalValue = true
    //   let randomString = Math.floor(Math.random() * 21)
    //   let url =
    //       process.env.basePath +
    //       'prj_product_list' +
    //       '&index' +
    //       `'${randomString}'`
    //   let param = {
    //     bp_agent_id: vm.bp_agent_id,
    //     division: vm.saveInfo.division,
    //     user_phone: window.localStorage.getItem('user_phone'),
    //     pagesize: 10,
    //     pagenum: vm.pagenum,
    //     searchInput: vm.keyWordProduct,
    //   }
    //   hlsPopup.showLoading('请稍候')
    //   vm.$post(url, param).then(function (res) {
    //     vm.hlsPopup.hideLoading()
    //     if (res.result === 'S') {
    //       let returnData = []
    //       returnData = res.lists
    //       if (returnData.length === 0) {
    //         vm.$refs.scroll.update(true)
    //       } else if (returnData.length > 0 && returnData.length < 10) {
    //         vum.forEach(returnData, function (data, index, array) {
    //           vm.divisionLists.push(array[index])
    //         })
    //         vm.pagenum++
    //         vm.$refs.scroll.update(true)
    //       } else if (returnData.length === 10) {
    //         vum.forEach(returnData, function (data, index, array) {
    //           vm.divisionLists.push(array[index])
    //         })
    //         vm.pagenum++
    //         vm.$refs.scroll.update(false)
    //       }
    //       vm.divisionLists.forEach(item => {
    //         item['url'] = process.env.filePath + 'attachment_id=' + item.product_attachment_id + '&access_token=' + window.localStorage.access_token
    //       })
    //     } else {
    //       hlsPopup.showLongCenter(res.message)
    //     }
    //   })
    // },
    selectProductLine (e) {
      let vm = this
      vm.saveInfo.product_id = ''
      vm.saveInfo.product_id_n = ''
      vm.hlsPopup.selectList({
        list: vm.productLine,
        code: 'bp_type',
        object: {},
        returnItem: function (index, obj) {
          vm.saveInfo.division = obj.bp_type
          vm.saveInfo.division_n = obj.bp_type_n
          vm.factory_ocr_type = obj.factory_ocr_type
        },
      })
    },
    selectDepositDeductionLine (e) {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.depositDeductionLine,
        code: 'deposit_deduction',
        object: {},
        returnItem: function (index, obj) {
          vm.saveInfo.deposit_deduction = obj.deposit_deduction
          vm.saveInfo.deposit_deduction_n = obj.deposit_deduction_n
        },
      })
    },
    getDepositDeduction () {
      let vm = this
      let url = process.env.basePath + 'prj_deposit_deduction'
      let param = {}
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.depositDeductionLine = res.lists.map(item => {
            return {
              code: item.deposit_deduction,
              code_name: item.deposit_deduction_n,
            }
          })
        }
      })
    },
    selectHandlingPolicyLine (e) {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.handlingPolicyLine,
        code: 'handling_policy',
        object: {},
        returnItem: function (index, obj) {
          vm.saveInfo.handling_policy = obj.handling_policy
          vm.saveInfo.handling_policy_n = obj.handling_policy_n
        },
      })
    },
    getHandlingPolicy () {
      let vm = this
      let url = process.env.basePath + 'prj_handling_policy'
      let param = {}
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.handlingPolicyLine = res.lists.map(item => {
            return {
              code: item.handling_policy,
              code_name: item.handling_policy_n,
            }
          })
        }
      })
    },
    getProductLine () {
      let vm = this
      let url = process.env.basePath + 'prj_product_division'
      let param = {
        bp_agent_id: vm.bp_agent_id,
      }
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.productLine = res.lists.map(item => {
            return {
              code: item.division,
              code_name: item.division_n,
            }
          })
        }
      })
    },
    goPlan () {
      this.$router.push({
        name: 'ContractRepayPlan',
        params: {
          product_num: this.saveInfo.product_num,
          project_id: window.localStorage.project_id,
        },
      })
    },
    goRent () {
      this.$router.push({
        name: 'CreateEnclosureInfo',
      })
    },
  }
  ,
}
</script>
<style lang="less">
  .feibox {
     color: #333;
  }
  .feibox > p {
    color: #b3aeae;
    border-bottom: 1px solid #ccc;
    width: 85%;
    margin: 0 auto 10px;
    padding: 10px 0;
    font-size: 15px;
  }
  .feibox > div {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin: 15px 13px;
  }
  .gray {
    color: #b3aeae;
  }

  #create-rent-info {
    .swipeout-list .option-item .delete {
    background-color: rgba(249,98,104,0.5);
    background-image: url("../../assets/contractCreate/delete.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 30px 30px;
    height: 61px !important;
  }
  .swipeout-list .item .function {
    background: url("../../assets/contractCreate/delete.png") 45% 45% #fde5e8
      no-repeat;
    background-size: 20px 20px;
  }
    .check {
      span {
        width: 0.32rem;
        height: 0.32rem;
        border: 0.02rem solid #1d3fff;
        border-radius: 0.06rem;
      }
      img {
        width: 16px;
      }
    }
    .mySlider {
      height: 68px;
      padding: 0;
    }
    .addRentBtn {
      text-align: center;
      height: 40px;
      line-height: 40px;
      color: #1D3FFF;
    }
    input {
      color: #333;
    }

    input::placeholder {
      color: #666;
    }

    .flow {
      z-index: 999;
    }

    .hls-list-item {
      margin-bottom: 0px !important;
    }

    .h-header-right {
      display: flex;
      align-items: center;
    }
    .modal-show {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 900;
      background-color: rgba(56, 63, 69, 0.3);
      display: flex;
      justify-content: center;
      align-items: center;
      .type-save{
        color: #fff;
        width: 50%;
        height: 40px;
        font-size: 15px;
        margin: 20px 25% 0;
        border-radius: 5px;
        background-color: @headerColor;
      }
      .down {
        position: relative;
        width: 314px;
        height: 526px;
        background-size: 301px 24.7px;
        background-color: #fff;
      }
      .title {
        width: 100%;
        height: 44px;
        font-family: PingFangSC-Semibold;
        font-size: 16px;
        letter-spacing: 0;
        text-align: center;
        line-height: 44px;
        color: #fff;
        background: #0041c4;
        span {
          font-size: 24px;
          float: right;
          margin-right: 10px;
          font-family: YouYuan;
          // margin-left:100px;
        }
      }
      .down-content {
        margin-top: 8px;
        span:first-child {
          font-family: PingFangSC-Regular;
          font-size: 13px;
          color: #656464;
          letter-spacing: 0;
          margin-left: 15px;
        }
        .photo {
          width: 172px;
          height: 120px;
          border: 1px solid #dcdcdd;
          border-radius: 2px;
          margin: 0 auto;
          margin-top: 12px;
          background: url("../../assets/contractStart/photo.png") 70px no-repeat;
          background-size: 24px 20px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .equipment {
      width: 359px;
      height: 72px;
      background-color: #fff;
      margin: 0 auto;
      display: flex;
      .deleteBtn {
        color: #1D3FFF;
        flex: 1;
        display: flex;
        align-items: center;
        z-index: 100;
      }
      .left {
        flex: 1;
        box-align: center;
        align-items: center;
        padding: 15px 0;
        span {
          display: block;
          width: 30px;
          height: 30px;
          background-color: #e8e9ed;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 10px;
          margin-top: 8px;
          img {
            width: 11px;
            height: 14px;
          }
        }
      }
      .center {
        flex: 6;
        box-align: center;
        align-items: center;
        padding: 15px 0;
        overflow: hidden;
        span:first-child {
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #383f45;
          letter-spacing: 0.43px;
          margin-left: 10px;
          margin-top: 12px;
          overflow: hidden;
        }
        .status {
          display: inline-block;
          width: 46px;
          height: 16px;
          text-align: center;
          line-height: 16px;
          font-family: PingFangSC-Medium;
          font-size: 12px;
          color: #ffffff;
          letter-spacing: 0;
          margin-left: 21px;
          margin-top: 12px;
        }
        .unMantain {
          background-color: #1d3fff;
        }
        .mantain {
          background-color: #fff;
          border: 1px solid #1d3fff;
          color: #1d3fff;
        }
        p {
          font-family: PingFangSC-Regular;
          font-size: 13px;
          color: rgba(56, 63, 69, 0.6);
          letter-spacing: 0.4px;
          margin-left: 10px;
          margin-top: 10px;
          white-space: nowrap;
          overflow: hidden;
          span {
            font-family: Helvetica;
            font-size: 13px;
            color: rgba(56, 63, 69, 0.6);
            overflow: hidden;
          }
        }
      }
      .right {
        flex: 1;
        display: flex;
        align-items: center;
        img {
          width: 13px;
          height: 13px;
        }
      }
    }
    #businuss-list {
      .search {
        background-color: #fff;
        padding: 8px 12px;
        width: 100%;
        height: 1.02rem;
        z-index: 100;
        margin-bottom: 8px;

        input {
          background: url("../../assets/contractStart/search1.png") 320px no-repeat;
          background-size: 16px 16px;
          background-color: rgba(239, 239, 239, 0.55);
          padding-left: 12px;
          height: 36px;
          line-height: 36px;
          border-radius: 4px;
          width: 100%;
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #888c8f;
        }

        input::placeholder {
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #888c8f;
          letter-spacing: 0;
        }

        input:focus {
          background: url("../../assets/contractStart/search2.png") 320px no-repeat;
          background-size: 16px 16px;
          background-color: rgba(239, 239, 239, 0.55);
          border: 2px solid #bcc6ff;
        }
      }

      .descript {
        width: 100%;
        height: 44px;
        display: flex;
        flex-direction: row;
        background: #fff;

        img {
          width: 30px;
          height: 30px;
          margin-left: 10px;
          margin-top: 8px;
          // margin-right: 8px;
        }

        .linkPic {
          width: 16px;
          height: 16px;
          margin-top: 15px;
          margin-left: -7px;
          margin-right: 10px;
        }

        .produc {
          height: 44px;
          display: flex;
          flex: 1;
          font-size: 15px;
          color: #4b4a4b;
          line-height: 44px;
          font-weight: 500;
          letter-spacing: 0;
          margin-left: 10px;
          font-family: PingFangSC-Semibold;
          border-bottom: 1px solid #f3f3f7;
        }
      }

      .tario {
        width: 100%;
        height: 60px;
        position: relative;
        background: #fff;
        // margin-bottom: 8px;
        .wrap:nth-of-type(1) {
          height: 60px;
          position: absolute;
          left: 50px;
        }

        .wrap:nth-of-type(2) {
          height: 60px;
          position: absolute;
          right: 30px;
        }

        p {
          height: 30px;
          line-height: 30px;
          font-family: PingFangSC-Regular;
          font-size: 13px;
          color: rgba(56, 63, 69, 0.6);

          span:nth-of-type(2) {
            margin-left: 16px;
            color: rgb(56, 63, 69);
          }
        }
      }
    }

    .date-check {
      background: url("../../assets/trial/date.png") 350px no-repeat;
      background-size: 16px 16px;
      input{
        margin-right:16px;
      }
    }

    .hint-info {
      width: 100%;
      height: 36px;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #fcc800;
      letter-spacing: 0.5px;
      background-color: #faf5e0;
      display: flex;
      align-items: center;

      img {
        width: 16px;
        height: 16px;
        margin-left: 17px;
        margin-right: 17px;
      }
    }

    .add-box {
      .before {
        border: 1px solid #fdb62f;
        border-radius: 4px;
        color: #fdb62f;
      }

      .next {
        background: #1d3fff;
        border-radius: 4px;
        color: #fff;
      }
    }

    .userInfo：first-of-type {
      margin-top: 10px;
    }

    .userInfo {
      height: 40px;
      line-height: 40px;
      color: @headerColor;
      // margin-top: -10px;
      font-size: 15px;
      margin-left: 16px;
      position: relative;
      img:nth-of-type(1) {
        float: right;
        position: relative;
        top: 10px;
        width: 19px;
        margin-right: 10px;
      }
    }

    .userInfo > .fei-button {
      float: right;
      margin-right: 10px;
      margin-top: 7.5px;
      background-color: #1D3FFF;
      color: #fff;
      height: 25px;
      line-height: 25px;
      padding: 0 8px;
      border-radius: 15px;
      font-size: 13px;
    }

    .userInfo::before {
      content: "";
      display: block;
      width: 4px;
      height: 20px;
      background-color: @headerColor;
      position: absolute;
      left: -15px;
      top: 12px;
    }

    .top {
      width: 100%;
      height: 81px;
      background-color: #faf5e0;
      display: flex;
      justify-content: center;
      align-items: center;

      .line {
        display: inline-block;
        width: 78px;
        border-top: 1px solid #a4a4a4;
        margin-bottom: 18px;
      }

      .line:nth-of-type(1) {
        border-top: 1px solid #ffa000;
      }

      .item {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: column wrap;
        font-family: PingFangSC-Semibold;
        font-size: 12px;
        color: rgba(56, 63, 69, 0.5);
        letter-spacing: 0.43px;

        img {
          width: 18px;
        }

        span {
          display: block;
          text-align: center;
          line-height: 18px;
          border-radius: 50%;
          width: 18px;
          height: 18px;
          color: #fff;
          background: #a4a4a4;
        }

        p {
          margin-top: 10px;
        }
      }

      .item:not(:nth-of-type(3)) {
        font-family: PingFangSC-Semibold;
        font-size: 12px;
        color: rgba(56, 63, 69, 0.5);
        letter-spacing: 0.43px;

        span {
          background-color: #ffa000;
        }
      }
    }
  }
</style>