<template>
  <h-view class="public-style prj-quotion" title="报价信息">
    <h-content class="has-footer">
      <swipe :index.sync="slideIndex" :auto="false" :show-indicators="false">
        <swipe-item>
          <list-item :item-height="40">
            <item>
              <img slot="left-icon" src="@/assets/image/projectCreate/leasing@2x.png" class="left-icon">
              <div slot="name">融资信息</div>
            </item>
            <item :show-arrow="true">
              <div slot="name" class="required">产品名称</div>
              <input
                slot="content"
                v-model="lease.product_name_write" type="text" placeholder="请选择" readonly
                @click="selectPrice()">
            </item>
            <item>
              <div slot="name" class="required">首付款比例</div>
              <input slot="content" v-model.number="lease.down_payment_ratio" type="number" placeholder="请输入">
              <section slot="right-icon">%</section>
            </item>
            <item>
              <div slot="name" class="required">保证金比例</div>
              <input slot="content" v-model.number="lease.deposit_ratio" type="number" placeholder="请输入">
              <section slot="right-icon">%</section>
            </item>
            <item>
              <div slot="name" class="required">尾付款比例</div>
              <input slot="content" v-model.number="lease.balloon_ratio" type="number" placeholder="请输入">
              <section slot="right-icon">%</section>
            </item>
            <item :show-arrow="true">
              <div slot="name" class="required">还款频率</div>
              <input
                slot="content"
                v-model="lease.annual_pay_times_n" type="text" placeholder="请选择" readonly
                @click="selectPayTimes()">
            </item>
            <item>
              <div slot="name" class="required">还款期数</div>
              <input
                slot="content"
                v-model.number="lease.lease_times" type="number" min="0" inputmode="numeric"
                pattern="[0-9]*"
                placeholder="请输入">
            </item>
          </list-item>
          <list-item :item-height="40">
            <item :proportion="[1,1]">
              <img slot="left-icon" src="@/assets/image/projectCreate/others@2x.png" class="left-icon">
              <div slot="name">其他融资费用</div>
            </item>
            <item>
              <div slot="name" class="required">手续费</div>
              <input slot="content" v-model.number="lease.lease_charge" type="number" placeholder="请输入">
            </item>
            <item>
              <div slot="name" class="required">保险费</div>
              <input slot="content" v-model.number="lease.insurance_price" type="number" placeholder="请输入">
            </item>
            <item>
              <div slot="name" class="required">GPS费</div>
              <input slot="content" v-model.number="lease.gps_amount" type="number" placeholder="请输入">
            </item>
            <item>
              <div slot="name" class="required">车船税</div>
              <input slot="content" v-model.number="lease.travel_tax" type="number" placeholder="请输入">
            </item>
            <item>
              <div slot="name" class="required">购置税</div>
              <input slot="content" v-model.number="lease.purchase_tax" type="number" placeholder="请输入">
            </item>
          </list-item>
          <section class="save-button">

            <h-button @click.native="save">保存</h-button>

          </section>
        </swipe-item>
        <swipe-item>
          <div class="top">
            <div class="top-content">
              <div class="leasing">融资额（元）</div>
              <div class="amount">\{{ lease.finance_amount | currency }}</div>
              <div class="bottom-row">
                <div class="installment vue-1px-r">
                  <div>月供(元)</div>
                  <div>\{{ lease.mouth_rental  | currency }}</div>
                </div>
                <div class="installment vue-1px-r">
                  <div>首次支付(元)</div>
                  <div>\{{ lease.first_amount | currency  }}</div>
                </div>
                <div class="installment ">
                  <div>合同期数</div>
                  <div>\{{ lease.lease_times | currency }}</div>
                </div>
              </div>
            </div>
          </div>
          <list-item :item-height="40" >
            <item>
              <div slot="name">首付款（元）</div>
              <div slot="content">\{{ lease.down_payment | currency  }}</div>
            </item>
            <item>
              <div slot="name">保证金（元）</div>
              <div slot="content">\{{ lease.deposit | currency  }}</div>
            </item>
            <item>
              <div slot="name">手续费（元）</div>
              <div slot="content">\{{ lease.lease_charge | currency  }}</div>
            </item>
            <item>
              <div slot="name">尾付款（元）</div>
              <div slot="content">\{{ lease.balloon | currency  }}</div>
            </item>
          </list-item><!--<section class="save-button">

            <h-button @click.native="save">保存</h-button>

          </section>-->

        </swipe-item>
      </swipe>
    </h-content>
    <bottom-tab :show-divider="false">
      <div :class="{'bg-white':slideIndex,'bg-blue':!slideIndex}" class="tip" @click="pageOne()">1</div>
      <div :class="{'bg-white':!slideIndex,'bg-blue':slideIndex}" class="tip" @click="pageTwo()">2</div>

    </bottom-tab>
  </h-view>
</template>

<script>
import projectService from './projectService'

export default {
  name: 'PrjQuotionInfo',
  data () {
    return {
      slideIndex: 0,
      price_lists: [],
      annual_pay_times: [],
      lease: projectService.getLease(),
    }
  },
  created () {
  },
  mounted () {
    this.lease = projectService.getLease()
    this.loadQuoteInfo()
  },
  methods: {
    loadQuoteInfo () {
      let vm = this
      let url = $config.basePath + 'prj_quote_info_selected' // 报价信息下拉框
      let param = {}
      vm.hlsHttp.post(url, param).then(function (res) { // 报价信息下拉框初始化
        if (res.result === 'S') {
          vm.price_lists = res.product_name_list
          vm.annual_pay_times = res.annual_pay_times_list
        }
      })
    },
    isEmpty (obj) {
      if (typeof obj === 'undefined' || obj === null || obj === '') {
        return true
      } else {
        return false
      }
    },

    save () {
      let vm = this
      if (!vm.isEmpty(vm.lease.product_name_write) && !vm.isEmpty(vm.lease.down_payment_ratio) && !vm.isEmpty(vm.lease.deposit_ratio) && !vm.isEmpty(vm.lease.balloon_ratio) && !vm.isEmpty(vm.lease.annual_pay_times_n) && !vm.isEmpty(vm.lease.lease_charge) && !vm.isEmpty(vm.lease.insurance_price) && !vm.isEmpty(vm.lease.gps_amount) && !vm.isEmpty(vm.lease.travel_tax) && !vm.isEmpty(vm.lease.purchase_tax) && !vm.isEmpty(vm.lease.lease_times)) {
        vm.hlsPopup.showLongCenter('保存成功!')
        let result = projectService.calcQuotation(vm.lease.invoice_price, vm.lease.annual_pay_times, vm.lease.lease_times, (vm.lease.int_rate_display / 100), (vm.lease.down_payment_ratio / 100), (vm.lease.balloon_ratio / 100), (vm.lease.deposit_ratio / 100), vm.lease.lease_charge, vm.lease.insurance_price, vm.lease.gps_amount, vm.lease.travel_tax, vm.lease.purchase_tax, 0)
        vm.lease.down_payment = result.down_payment
        vm.lease.finance_amount = result.finance_amount
        vm.lease.balloon = result.balloon
        vm.lease.deposit = result.deposit
        vm.lease.mouth_rental = result.mouth_rental
        vm.lease.first_amount = result.first_amount
        projectService.setLease(vm.lease)
        projectService.setCashflows(result.cash_flows)
        projectService.setOfferFlag(1)
        // vm.$routeGo()
      } else {
        vm.hlsPopup.showLongCenter('请完成必填字段!')
      }
    },

    getRatio (object) {
      let vm = this
      vm.lease.down_payment_ratio = object.down_payment_ratio_from
      vm.lease.deposit_ratio = object.deposit_ratio_from
      vm.lease.balloon_ratio = object.balloon_ratio_from
      vm.lease.lease_times = object.times_from
      vm.lease.price_list = object.price_list
      vm.lease.product_type = object.product_type
      vm.lease.int_rate_display = object.customer_ratio
      vm.lease.lease_charge_ratio = object.lease_charge_ratio
    },

    pageOne () {
      let vm = this
      vm.slideIndex = 0
    },
    pageTwo () {
      let vm = this
      vm.slideIndex = 1
    },

    /**
    * 产品名称下拉框选择
    */
    selectPrice () {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.price_lists,
        code: 'product_plan_id',
        object: vm.lease,
        returnItem: function (index, result) {
          vm.lease = result
          vm.lease['product_name_write'] = result.product_plan_id_n
          vm.getRatio(vm.price_lists[index])
        },
      })
    },
    /**
    * 还款频率下拉框选择
    */
    selectPayTimes () {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.annual_pay_times,
        code: 'annual_pay_times',
        object: vm.lease,
        returnItem: function (index, result) {
          vm.lease = result
        },
      })
    },
  },
}
</script>

<style lang="less">
  @import '../../../styles/vue-1px';

  .prj-quotion{
    .hls-item .contents {
      .add-content .right-icon {
        width: 5px;
      }
    }
    .content{
      background-color: #eeeef1;
    }
    .top{
      width: 100%;
      height: 160px;
      background-color: #eeeef1;
      .top-content{
        width: 92%;
        height:150px;
        margin:15px 0 0 15px;
        background-color: @theme-color;
        border-radius:5px;
        .bottom-row{
          color:#fff;
          margin-top:18px;
          display: flex;
          display: -webkit-flex;
          justify-content: space-between;
          -webkit-justify-content: space-between;
          .installment{
            width: 33%;
            height:45px;
            margin-left:15px;
            font-size: 14px;
            line-height: 25px;
            //border-right:1px solid #FFF; /*no*/
            display: flex;
            flex-direction: column;
            &:after{
              .setRightLine(#fff)
            }
          }
        }
        .leasing{
          font-size: 15px;
          color: #FFFFFF;
          margin-left:15px;
          padding-top:20px;
        }
        .amount{
          font-size: 22px;
          color: #FFF;
          margin-left:15px;
          padding-top:15px;
        }
      }
    }
    .hls-swipe{
      height: 100%;
      overflow-x: hidden;
    }
    .h-bottom-tab{
      justify-content: center;
      background-color: #eeeef1;
      .tip{
        width: 20px;
        height:20px;
        border-radius: 50%;
        font-size: 10px;
        display: flex;
        display: -webkit-flex;
        justify-content: center;
        -webkit-justify-content: center;
        align-items: center;
        -webkit-align-items: center;
        margin-right: 10px;
      }
      .bg-blue{
        background-color: @headerColor;
        color: #FFFFFF;
      }
      .bg-white{
        background-color: #FFFFFF;
        color: @headerColor;
      }

    }
    .save-button{
      margin-top: 20px;
      width: 100%;
      display: flex;
      justify-content: center;
      margin-bottom: 40px;
      .hls-h-button{
        width: 200px;
        background: @headerColor;
        color: #fff;
        border: none;
        border-radius: 18px;
      }
    }
  }
</style>
