<template>
  <h-view id="create-rent-info">
    <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">融资信息</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="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>
          <div slot="name" class="required">设备单价</div>
          <CurrencyInput slot="content" v-model="saveInfo.equip_price" :readonly="isReadOnly" placeholder="请输入设备单价"/>
        </item>
        <item>
          <div slot="name" class="required">融资金额</div>
          <CurrencyInput slot="content" v-model="finance_amount" :readonly="isReadOnly" placeholder="请输入融资信息"/>
        </item>
        <item>
          <div slot="name" class="required">首付比例</div>
          <input slot="content" v-model="saveInfo.down_payment_ratio_n" :readonly="isReadOnly" placeholder="%">
        </item>
        <item>
          <div slot="name" class="required">首付款</div>
          <CurrencyInput
            slot="content" v-model="saveInfo.down_payment" :readonly="isReadOnly" placeholder="请输入首付款"
            @input="changeRatio"/>
        </item>
        <item>
          <div slot="name" class="required">保证金比例</div>
          <input slot="content" v-model="saveInfo.deposit_ratio_n" :readonly="isReadOnly" placeholder="%">
        </item>
        <item>
          <div slot="name" class="required">保证金</div>
          <CurrencyInput
            slot="content" v-model="saveInfo.deposit" :readonly="isReadOnly" placeholder="请输入保证金"
            @input="changeDeposit"/>
        </item>
        <item>
          <div slot="name" class="required">手续费比例</div>
          <input slot="content" v-model="saveInfo.lease_charge_ratio_n" :readonly="isReadOnly" placeholder="%">
        </item>
        <item>
          <div slot="name" class="required">手续费</div>
          <CurrencyInput
            slot="content" v-model="saveInfo.lease_charge" :readonly="isReadOnly" placeholder="请输入手续费"
            @input="changeLeaseCharge"/>
        </item>
        <item>
          <div slot="name" class="required">GPS费用</div>
          <CurrencyInput slot="content" v-model="saveInfo.gps_fee" :readonly="isReadOnly" placeholder="请输入GPS费用"/>
        </item>
        <item>
          <div slot="name" class="required">保险押金</div>
          <CurrencyInput slot="content" v-model="saveInfo.insurance_fee" :readonly="isReadOnly" placeholder="请输入保险押金"/>
        </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" placeholder="请输入租赁期数">
        </item>
        <item>
          <div slot="name" class="required">年利率</div>
          <input slot="content" v-model="saveInfo.int_rate_n" readonly placeholder="%">
        </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>
          <div slot="name" class="required">留购价</div>
          <CurrencyInput slot="content" v-model="saveInfo.residual_value" :readonly="isReadOnly" placeholder="请输入留购价"/>
        </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>
    <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>期&nbsp;&nbsp;&nbsp;限</span>
                      <span>{{ item.lease_times }}期</span>
                    </p>
                  </div>
                </div>
              </section>
            </div>
          </scroll>
        </h-content>
      </h-view>
    </h-modal>
  </h-view>
</template>
<script>
import CurrencyInput from '../../components/currencyInput'

export default {
  components: {
    CurrencyInput,
  },
  data () {
    return {
      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: [], // 产品线
      /* productInfo: {
           project_id: window.localStorage.project_id,
           product_id: '',
           product_id_n: '',
           product_num: '',
         }, */
      saveInfo: {
        project_id: window.localStorage.project_id,
        bp_name: '',
        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: '',
        lease_charge_ratio: '',
        lease_charge_ratio_n: '',
        lease_charge: '',
        lease_start_date: '',
        gps_fee: '',
        insurance_fee: '',
        pay_type: '',
        pay_type_n: '',
        residual_value: '',
        division_n: '',
        division: '',
        finance_amount: '',
      },
    }
  },
  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()
    },
    '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)
    },
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.showModalBusiness = false
      vm.showModalValue = false
      vm.pagenumSearch = 1
      vm.pagenumSearchPolicy = 1
      vm.policyKeyWord = ''
      vm.keyWordProduct = ''
      vm.businessLists = []
      vm.divisionLists = []
      vm.pagenum = 1
      vm.pagenumPolicy = 1
      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.rentInfoQuery()
        } else if (vm.fromPage === 'list') {
          if (window.localStorage.contractReadonly === 'true') {
            vm.isReadOnly = true
          } else {
            vm.isReadOnly = false
          }
          vm.fromList = true
          vm.rentInfoQuery()
        }
        Object.keys(vm.saveInfo).forEach(i => { // 置空saveInfo
          if (i !== 'project_id' && i !== 'bp_name') {
            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()// 支付方式查询
        }, 0)
      }
    })
  },
  methods: {
    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 () {
      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)).toFixed(2) * 100}%`
    },
    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') {
          Object.assign(vm.saveInfo, res.info)
          vm.saveInfo.product_plan_name = res.info.product_plan_id_n
          vm.saveInfo.division_n = res.info.product_name
          vm.saveInfo.down_payment = res.info.down_payment
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    selectBusinessPolicy (e) {
      let vm = this
      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
      vm.saveInfo.lease_charge_ratio = e.lease_charge_ratio
      vm.saveInfo.lease_charge_ratio_n = e.lease_charge_ratio_n
      vm.saveInfo.int_rate = e.int_rate
      vm.saveInfo.int_rate_n = e.int_rate_n
      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
      vm.saveInfo.lease_times = e.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(2)
      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
        } else {
          hlsPopup.showLongCenter(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 {
        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(2)
        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') {
            vm.isComputed = true
            vm.calculeFlag = true
            vm.saveTed = true
            hlsPopup.showLongCenter('计算成功')
            vm.goPlan()
          } else {
            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.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 {
        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(2)
        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.$routeGo()
          } else {
            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)
      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
      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('请先进行计算')
               }
             }
           }, */
    showTime (format) { // 预计付款日
      let vm = this
      hlsPopup.showTime({
        nowDate: (new Date()).format('yyyy-MM-dd'),
        format: format,
        callback: (date) => {
          vm.saveInfo.lease_start_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,
      }
      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
            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,
      }
      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 +
          'prd_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
        },
      })
    },
    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">
  #create-rent-info {
    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;
    }

    #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);
          }
        }
      }
    }

    #product-list {
      .hls-list-item {
        border-radius: 4px;
      }

      .item-pic {
        width: 100px;
        //height: 110px;
        img {
          width: 100%;
          height: 100%;
        }
      }

      .item-content {
        width: 100%;
        margin-left: 20px;

        .pro-name {
          height: 42px;
          width: 100%;
          position: relative;
          border-bottom: 1px solid #f3f3f7;

          .arrow {
            position: absolute;
            width: 16px;
            height: 16px;
            right: 0;
            top: 13px;
          }

          p {
            height: 42px;
            line-height: 42px;
            font-family: PingFangSC-Semibold;
            font-size: 15px;
            color: #4b4a4b;
            letter-spacing: 0;
            font-weight: 600;
          }
        }

        .centers {
          font-family: PingFangSC-Semibold;
          font-size: 13px;
          color: rgba(56, 63, 69, 0.6);
          letter-spacing: 0.5px;
          display: flex;
          flex-direction: row;
          margin-top: 8px;

          .firsts1 {
            width: 60px;
            height: 17px;
            font-family: PingFangSC-Regular;
            font-size: 13px;
            color: rgba(56, 63, 69, 0.6);
          }

          .seconds1 {
            width: 70%;
            margin-left: 16px;
            height: auto;
            font-family: PingFangSC-Regular;
            font-size: 13px;
            color: #4b4a4b;
          }
        }
      }

      .item {
        width: 359px;
        margin: 0 auto;
      }

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

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

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

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