<!--
 * @Description: 修改参数项
 * @Author: your name
 * @Date: 2019-09-25 10:20:35
 * @LastEditTime: 2019-10-10 10:42:10
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div id="rentInfo">
    <list-item :item-height="44" style="margin-bottom:0px;">
      <item>
        <div slot="name">商务政策</div>
        <input slot="content" v-model="rentInfo.product_plan_id_n" readonly>
      </item>
      <item>
        <div slot="name">设备总价</div>
        <span slot="content">{{ rentInfo.equip_price * rentInfo.product_num |currency }}</span>
      </item>
      <item>
        <div slot="name">融资金额</div>
        <span slot="content">{{ rentInfo.finance_amount * rentInfo.product_num |currency }}</span>
      </item>
      <item>
        <div slot="name">首付款</div>
        <span slot="content">{{ rentInfo.down_payment * rentInfo.product_num |currency }}</span>
      </item>
      <item>
        <div slot="name">保证金比例</div>
        <input slot="content" v-model="rentInfo.deposit_ratio_n" readonly>
      </item>
      <item>
        <div slot="name">保证金</div>
        <span slot="content">{{ rentInfo.deposit * rentInfo.product_num |currency }}</span>
      </item>
      <item>
        <div slot="name">手续费比例</div>
        <input slot="content" v-model="rentInfo.lease_charge_ratio_n" readonly>
      </item>
      <item>
        <div slot="name">手续费</div>
        <span slot="content">{{ parseFloat(rentInfo.lease_charge * rentInfo.product_num).toFixed(2) |currency }}</span>
      </item>
      <item>
        <div slot="name">保险押金</div>
        <span slot="content">{{ rentInfo.insurance_fee * rentInfo.product_num | currency }}</span>
      </item>
      <item>
        <div slot="name">GPS费用</div>
        <span slot="content">{{ rentInfo.gps_fee * rentInfo.product_num | currency }}</span>
      </item>
      <item>
        <div slot="name">首次付款合计</div>
        <span slot="content">{{ parseFloat(rentInfo.first_pay).toFixed(2) |currency }}</span>
      </item>
      <item>
        <div slot="name">预计付款日</div>
        <span slot="content">{{ rentInfo.lease_start_date|timeFormat }}</span>
      </item>
      <item>
        <div slot="name">还款周期</div>
        <input slot="content" v-model="rentInfo.annual_pay_times_n" readonly>
      </item>
      <item>
        <div slot="name">租赁期数</div>
        <input slot="content" v-model="rentInfo.lease_times" readonly>
      </item>
      <item>
        <div slot="name">年利率</div>
        <input slot="content" v-model="rentInfo.int_rate_n" readonly>
      </item>
    </list-item>
    <div class="top-userInfo"><span @click="changeRefund">查看还款计划</span></div>
    <div class="equipment-list-fund">
      <span/>
      <p>设备清单</p>
    </div>
    <list-item>
      <item>
        <div slot="name">设备识别号</div>
        <input slot="content" v-model="rentInfo.product_code" readonly>
      </item>
      <item>
        <div slot="name">产品线</div>
        <input slot="content" v-model="rentInfo.product_name" readonly>
      </item>
      <item>
        <div slot="name">产品数量</div>
        <input slot="content" v-model="rentInfo.product_num" readonly>
      </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">绑定成功后，您即可使用APP中合同查询、还款查询等功能。
        <span>为了确保您的权益，请查看全部</span></p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  filters: {
    timeFormat: function (time) {
      var date = new Date(time)
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      var d = date.getDate()
      if (m < 10) {
        m = `0${m}`
      }
      if (d < 10) {
        d = `0${d}`
      }
      return `${y}-${m}-${d}`
    },
  },
  props: {
    confirm_status: {
      type: String,
      default: '',
    },
  },
  data () {
    return {
      rentInfo: {
        finance_amount: '',
        lease_charge: '',
        annual_pay_times: '',
        deposit_ratio_n: ' ',
        lease_charge_ratio_n: '   ',
        product_plan_id: '',
        equip_price: '',
        lease_charge_ratio: '',
        int_rate_n: ' ',
        product_num: '',
        down_payment: '',
        deposit_ratio: '',
        division: '',
        lease_times: '',
        pre_pay_date: '',
        product_id: '',
        deposit: '',
        int_rate: '',
        product_plan_id_n: '',
      },
    }
  },
  created () {
    this.getRent()
  },
  methods: {
    changeRefund () {
      this.$router.push({
        name: 'Refund',
        params: {
          confirm_status: this.confirm_status,
          product_num: this.rentInfo.product_num,
        },
      })
    },
    getRent () {
      let vm = this
      let url = process.env.basePath + 'prj_lease_query'
      let param = {
        project_id: window.localStorage.project_id,
      }
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          Object.assign(vm.rentInfo, res.info)
        }
      })
    },
  },
}

</script>
<style lang="less" scoped>
  #rentInfo {
    .top-userInfo {
      height: 44px;
      width: 100%;
      background: #F2F2F2;

      span {
        font-family: PingFangSC-Semibold;
        font-size: 14px;
        color: #00469C;
        letter-spacing: 0;
        height: 44px;
        width: 84px;
        line-height: 44px;
        font-weight: bold;
        text-decoration: underline;
        margin-left: 16px;
      }
    }

    .equipment-list-fund {
      height: 40px;
      line-height: 40px;
      background-color: #fafafa;
      display: flex;
      align-items: center;
      color: #00469c;
      font-size: 15px;
      position: relative;
      margin-top: -10px;

      span {
        width: 4px;
        height: 20px;
        background: #00469c;
      }

      p {
        padding-left: 10px;
      }
    }

    .alert {
      height: 100px;
      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-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;
    }
  }
</style>
