<template>
  <h-view class="public-style calculate" title="融资试算">

    <!--<h-header :has-border="false" class="bar-custom">
      <div slot="left" class="h-header-btn" @click="$routeGo()">
        <i class="ion-ios-arrow-back"/>
      </div>
      <div slot="center">融资试算</div>
    </h-header>-->
    <h-content class=" has-footer">
      <list-item>
        <item :show-arrow="true">
          <div slot="name">方案名称</div>
          <input
            slot="content" v-model="calc.product_name_write" type="text" placeholder="方案名称"
            readonly>
        </item>
        <item>
          <div slot="name" class="required">汽车销售价</div>
          <input slot="content" v-model="calc.invoice_price" type="number" placeholder="请输入销售价">
        </item>
        <item>
          <div slot="name" class="required">首付款比例</div>
          <input
            slot="content" v-model="calc.down_payment_ratio_from" type="number" min="0.00"
            inputmode="numeric" pattern="[0-9]*" placeholder="请输入"><div slot="right-icon">%</div>
        </item>
        <item>
          <div slot="name" class="required">保证金比例</div>
          <input
            slot="content" v-model="calc.deposit_ratio_from" type="number" min="0.00"
            inputmode="numeric" pattern="[0-9]*" placeholder="请输入"><div slot="right-icon">%</div>
        </item>
        <item>
          <div slot="name" class="required">尾付款比例</div>
          <input
            slot="content" v-model="calc.balloon_ratio_from" type="number" min="0.00"
            inputmode="numeric" pattern="[0-9]*" placeholder="请输入"><div slot="right-icon">%</div>
        </item>
        <item :show-arrow="true">
          <div slot="name" class="required">还款频率</div>
          <input
            slot="content" v-model="calc.annual_pay_times_n" type="text" placeholder="请选择"
            readonly @click="selectAnnualPayTimes()">
        </item>
        <item>
          <div slot="name" class="required">还款期数</div>
          <input
            slot="content" v-model="calc.times_from" type="number" min="0.00"
            inputmode="numeric" pattern="[0-9]*"
            placeholder="请输入">
        </item>
      </list-item>
      <list-item>
        <item>
          <div slot="name" class="required">手续费</div>
          <input slot="content" v-model="calc.lease_charge" type="number" placeholder="请输入">
        </item>
        <item>
          <div slot="name" class="required">保险费</div>
          <input slot="content" v-model="calc.insurance_price" type="number" placeholder="请输入">
        </item>
        <item>
          <div slot="name" class="required">GPS费</div>
          <input slot="content" v-model="calc.gps_amount" type="number" placeholder="请输入">
        </item>
        <item>
          <div slot="name" class="required">车船税</div>
          <input slot="content" v-model="calc.travel_tax" type="number" placeholder="请输入">
        </item>
        <item>
          <div slot="name" class="required">购置税</div>
          <input slot="content" v-model="calc.purchase_tax" type="number" placeholder="请输入">
        </item>
      </list-item>
    </h-content>
    <bottom-tab :show-divider="false">
      <tab-button @click.native="calculate">计算</tab-button>
    </bottom-tab>
  </h-view>
</template>

<script>
import calService from './calculateService'
export default {
  name: 'CalculationMain',
  data () {
    return {
      calc: calService.getCalc(),
      payTimes: [{
        'code': '1',
        'code_name': '年',
      },
      {
        'code': '12',
        'code_name': '月',
      },
      {
        'code': '2',
        'code_name': '半年',
      },
      {
        'code': '4',
        'code_name': '季',
      }],
    }
  },
  methods: {

    /**
       * 还款频率
       */
    selectAnnualPayTimes () {
      let vm = this
      vm.hlsPopup.selectList({
        title: '还款频率',
        list: vm.payTimes,
        code: 'annual_pay_times',
        object: vm.calc,
        returnItem: function (index, obj) {
          vm.calc = obj
        },
      })
    },

    isEmpty (obj) {
      if (typeof obj === 'undefined' || obj === null || obj === '') {
        return true
      } else {
        return false
      }
    },

    /**
   * 融资试算
   */
    calculate () {
      let vm = this
      if (!vm.isEmpty(vm.calc.invoice_price) && !vm.isEmpty(vm.calc.down_payment_ratio_from) && !vm.isEmpty(vm.calc.deposit_ratio_from) && !vm.isEmpty(vm.calc.balloon_ratio_from) && !vm.isEmpty(vm.calc.annual_pay_times_n) && !vm.isEmpty(vm.calc.times_from) && !vm.isEmpty(vm.calc.lease_charge) && !vm.isEmpty(vm.calc.insurance_price) && !vm.isEmpty(vm.calc.gps_amount) && !vm.isEmpty(vm.calc.travel_tax) && !vm.isEmpty(vm.calc.purchase_tax)) {
        let result = calService.calcQuotation(vm.calc.invoice_price, Number(vm.calc.annual_pay_times), vm.calc.times_from, (vm.calc.customer_ratio / 100), (vm.calc.down_payment_ratio_from / 100), (vm.calc.balloon_ratio_from / 100), (vm.calc.deposit_ratio_from / 100), vm.calc.lease_charge, vm.calc.insurance_price, vm.calc.gps_amount, vm.calc.travel_tax, vm.calc.purchase_tax, 0)
        result.times_from = vm.calc.times_from
        calService.setResult(result)
        vm.$router.push({
          name: 'ResultMain',
        })
      } else {
        vm.hlsPopup.showLongBottom('必输字段不可为空')
      }
    },
  },
}
</script>

<style lang="less">
  .calculate{
    .hls-item .contents .add-content .right-icon{
      //width: 10px;
    }
  }
</style>
