<!--
   * @Descrip""/>User Settings Edit
 * @Author: your name
 * @Date: 2019-09-29 20:31:00
 * @LastEditTime: 2019-12-09 13:57:18
 * @LastEditors: Please set LastEditors
   -->
<template>
  <h-view id="details1" class="public-style">
    <h-header :proportion="[5,1,1]" class="bar-custom">
      <div slot="left" class="h-header-btn">
        <img src="@/assets/userBind/arrow.png" @click="$routeGo()">
        <span>融资明细</span>
      </div>
    </h-header>
    <h-content>
      <list-item :item-height="44" class="second-part">
        <item>
          <div slot="name" class="font-color">商务政策</div>
          <span slot="content">{{ info.product_plan_name }}</span>
        </item>
        <item>
          <div slot="name" class="font-color">设备总价</div>
          <CurrencyInput slot="content" v-model="equip_price" placeholder="请输入设备总价" />
        </item>
        <item>
          <div slot="name" class="font-color">融资金额</div>
          <span v-if="!equip_price" slot="content" class="autoColor">融资金额自动填充</span>
          <span v-if="equip_price" slot="content">¥{{ parseFloat(equip_price - equip_price*info.down_payment_ratio_n.replace("%","")/100).toFixed(2) | currency }}</span>
        </item>
        <item>
          <div slot="name" class="font-color">首付款比例</div>
          <input slot="content" v-model="info.down_payment_ratio_n" placeholder="请输入首付款比例">
        </item>
        <item>
          <div slot="name" class="font-color">首付款</div>
          <span v-if="!equip_price" slot="content" class="autoColor">首付款金额自动填充</span>
          <span v-if="equip_price" slot="content">¥{{ equip_price*info.down_payment_ratio_n.replace("%","")/100 | currency }}</span>
        </item>
        <item>
          <div slot="name" class="font-color">保证金比例</div>
          <input slot="content" v-model="info.deposit_ratio_n" placeholder="请输入保证金比例">
        </item>
        <item>
          <div slot="name" class="font-color">保证金</div>
          <span v-if="!equip_price" slot="content" class="autoColor">保证金额自动填充</span>
          <span
            v-if="equip_price"
            slot="content">¥{{ equip_price*info.deposit_ratio_n.replace("%","")/100 | currency }}</span>
        </item>
        <item>
          <div slot="name" class="font-color">手续费比例</div>
          <input slot="content" v-model="info.lease_charge_ratio_n" placeholder="请输入手续费比例">
        </item>
        <item>
          <div slot="name" class="font-color">手续费</div>
          <span v-if="!equip_price" slot="content" class="autoColor">手续费金额自动填充</span>
          <span v-if="equip_price" slot="content">¥{{ parseFloat((equip_price - equip_price*info.down_payment_ratio_n.replace("%","")/100)*(info.lease_charge_ratio_n.replace("%","")/100)).toFixed(2) | currency }}</span>
        </item>
        <item>
          <div slot="name" class="font-color">保险押金</div>
        <CurrencyInput slot="content" v-model="insurance_fee" placeholder="请输入保险押金"/></item>
        <item>
          <div slot="name" class="font-color">GPS费用</div>
        <CurrencyInput slot="content" v-model="gps_fee" placeholder="请输入GPS费用"/></item>
        <item>
          <div slot="name" class="font-color">首次付款合计</div>
          <span v-if="!equip_price" slot="content" class="autoColor">首次付款合计金额自动填充</span>
          <!-- 合计 = 首付款+保证金+手续费+GPS费用+保险押金  -->
          <span v-if="equip_price" slot="content">¥{{ parseFloat(equip_price*info.down_payment_ratio_n.replace("%","")/100 + equip_price*info.deposit_ratio_n.replace("%","")/100 + (equip_price - equip_price*info.down_payment_ratio_n.replace("%","")/100)*(info.lease_charge_ratio_n.replace("%","")/100) + Number(gps_fee) + Number(insurance_fee)).toFixed(2) | currency }}</span>
        </item>
        <item @click.native="showTime('YYYY-MM-DD')">
          <div slot="name" class="fo             nt-color">预计付款日</div>
          <div slot="content" class="autoColor">{{ price_date_to }}</div>
          <img src="@/assets/trial/date.png" alt="" class="date-pic">
        </item>
        <item :show-arrow="true" @click.native="periodPull">
          <div slot="name" class="font-color">还款周期</div>
          <span slot="content">{{ info.annual_pay_times_n }}</span>
          <!-- <input slot="content" v-model="info.annual_pay_times_n" placeholder="月"> -->
        </item>
        <item>
          <div slot="name" class="font-color">租赁期数</div>
          <input slot="content" v-model="info.lease_times" placeholder="请输入租赁期数">
        </item>
        <item>
          <div slot="name" class="font-color">年利率</div>
          <span slot="content">{{ info.int_rate_n }}</span>
        </item>
        <!-- <item>
          <div slot="name" class="font-color">产品数量</div>
          <input slot="content" v-model="product_num" placeholder="请输入产品数量" >
        </item> -->
        <item :showArrow="true" @click.native="goRepay">
          <div slot="name" class="font-color">查看还款计划</div>
        </item>
      </list-item>
      <div class="alert">
        <div class="alert-content">
          <div class="title">
            <img src="@/assets/intoApproval/info.png">
            <span class="info-word">提示</span>
          </div>
          <p class="top-info">具体请以实际合同发生情况为准,谢谢!</p>
        </div>
      </div>
    </h-content>
    <bottom-tab class="footer-button">
      <tab-button class="approve" @click.native="calculationSave">
        试算
      </tab-button>
    </bottom-tab>
  </h-view>
</template>

<script>
import CurrencyInput from '@/components/currencyInput'
export default {
  name: 'FinancingDetails',
  components: {
    CurrencyInput,
  },
  data () {
    return {
      info: {},
      gps_fee: '', // gps费用
      insurance_fee: '', // 保险押金
      quotation_id: '', // 试算成功返回id
      trial_flag: false, // 检测是否通过试算
      equip_price: '', // 设备价格
      periodLists: [], // 还款周期
      product_num: '', // 产品数量
      price_date_to: '请选择时间', // 预计还款日
      product_plan_id: '', // 产品id
      annual_pay_times: '',
    }
  },
  computed: {},
  watch: {
    equip_price () {

    },
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (from.name === 'FinancingTrial') {
        console.log('ssssss', vm.$route.params.plan_price)
        vm.$route.params.plan_price ? vm.equip_price = Number(vm.$route.params.plan_price) : vm.equip_price = ''
        // 重置产品id、试算返回id、试算状态、保险押金、gps费用、预计还款日
        vm.product_plan_id = vm.$route.params.product_plan_id
        vm.quotation_id = ''
        vm.trial_flag = false
        vm.insurance_fee = ''
        vm.gps_fee = ''
        vm.price_date_to = '请选择时间'
        vm.detailsQuery()
        vm.repayPeriod()
      }
    })
    next()
  },
  created () {},
  methods:
    {
      getVal (val) {
        this.equip_price = val
      },
      // 还款计划
      goRepay () {
        if (this.trial_flag) {
          this.$router.push({
            name: 'TrialRepayPlan',
            params: {
              quotation_id: this.quotation_id,
            },
          })
        } else {
          hlsPopup.showLongCenter('您还未通过试算')
        }
      },

      // 时间选择
      showTime (format) {
        let vm = this
        hlsPopup.showTime({
          nowDate: (new Date()).format('yyyy-MM-dd'),
          format: format,
          callback: (date) => {
            vm.price_date_to = date
          },
        })
      },

      // 还款周期查询
      repayPeriod () {
        let vm = this
        let url = $config.basePath + 'annual_pay_times_query'
        let param = {
          product_plan_id: vm.product_plan_id,
        }
        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.info.annual_pay_times_n = obj.bp_type_n
            vm.annual_pay_times = obj.bp_type
          },
        })
      },

      // 试算明细查询
      detailsQuery () {
        let vm = this
        let url = $config.basePath + 'finance_detial'
        let param = {
          product_plan_id: vm.product_plan_id,
        }
        vm.hlsPopup.showLoading('数据加载中')
        vm.hlsHttp.post(url, param).then(function (res) {
          vm.hlsPopup.hideLoading()
          if (res.result === 'S') {
            vm.info = res.info
            vm.annual_pay_times = res.info.annual_pay_times
          } else {
            hlsPopup.showLongCenter(res.message)
          }
        })
      },
      // 试算保存
      calculationSave () {
        if (!this.equip_price) {
          hlsPopup.showLongCenter('请输入设备总价')
        } else if (!this.price_date_to) {
          hlsPopup.showLongCenter('请选择时间')
        } else if (!this.gps_fee) {
          hlsPopup.showLongCenter('请输入GPS费用')
        } else if (!this.insurance_fee) {
          hlsPopup.showLongCenter('请输入保险押金费用')
        } else {
          let vm = this
          let url = $config.basePath + 'prd_calculation_save'
          let param = {
            'master': {
              'product_plan_id': vm.info.product_plan_id,
              'equip_price': vm.equip_price,
              'down_payment': vm.equip_price * (vm.info.down_payment_ratio_n.replace('%', '') / 100),
              'deposit': vm.equip_price * (vm.info.deposit_ratio_n.replace('%', '') / 100),
              'lease_charge': (vm.equip_price - vm.equip_price * vm.info.down_payment_ratio_n.replace('%', '') / 100) * (vm.info.lease_charge_ratio_n.replace('%', '') / 100),
              'due_date': (vm.price_date_to).substr(0, 10),
              'lease_times': vm.info.lease_times,
              'insurance_fee': vm.insurance_fee,
              'gps_fee': vm.gps_fee,
              'annual_pay_times': vm.annual_pay_times,
            },
          }
          vm.hlsPopup.showLoading('试算中,请稍后')
          vm.hlsHttp.post(url, param).then(function (res) {
            vm.hlsPopup.hideLoading()
            if (res.result === 'S') {
              hlsPopup.showLongCenter('试算成功')
              vm.$router.push({
                name: 'TrialRepayPlan',
                params: {
                  quotation_id: res.quotation_id,
                },
              })
              vm.quotation_id = res.quotation_id
              vm.trial_flag = true
            } else {
              hlsPopup.showLongCenter(res.message)
            }
          })
        }
      },
    },
}
</script>
<style lang='less' scoped>
  #details1 {
    .date-pic {
      height: 17px;
      width: 17px;
      margin-top: 15px;
      margin-left: 6px;
    }

    .h-header-btn {
      img {
        width: 16px;
        height: 16px;
        margin-left: 4px;
      }

      span {
        font-family: PingFangSC-Semibold;
        margin-left: 16px;
        font-size: 17px;
        letter-spacing: 0.61px;
        line-height: 24px;
      }
    }

    .alert {
      margin-top: -10px;
      padding-bottom: 20px;
      width: 100%;
      //margin-top: -10px;
      background: #FbF2d2;
    }

    .alert-content {
      width: 334px;
      margin: 0 auto;
      padding-top: 16px;
    }

    .info-word {
      font-family: PingFangSC-Semibold;
      font-size: 14px;
      color: #fcc800;
      letter-spacing: 0.5px;
      margin-left: 8px;
    }

    .title {
      display: flex;
      align-items: center;
    }

    .top-word {
      p {
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #656464;
        letter-spacing: 0.37px;
        margin-top: 7px;
        line-height: 15px;
        text-indent: 16px;
        position: relative;
      }

      p::before {
        content: "";
        display: block;
        position: absolute;
        top: 5px;
        left: 0px;
        width: 4px;
        height: 4px;
        border-radius: 20px;
        background-color: #fcc800;
      }
    }

    .top-info {
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #656464;
      letter-spacing: 0.37px;
      margin-top: 7px;
      line-height: 15px;

      span {
        color: #fcc800;
      }
    }

    .alert img {
      width: 18px;
      height: 18px;
    }

    .font-color {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #656464;
      letter-spacing: 0;
    }

    .autoColor {
      font-family: PingFangSC-Regular;
      //font-size: 14px;
      color: #B4B4B5;
      letter-spacing: 0;
      // text-align: right;
      // line-height: 18px;
    }

    .footer-button {
      .approve {
        width: 96%;
        height: 44px;
        background: @headerColor;
        border-radius: 4px;
        color: #fff;
        font-family: PingFangSC-Semibold;
        font-size: 15px;
        line-height: 20px;
        letter-spacing: 10px;
        margin: 0 auto;
      }
    }
  }
</style>