/**
* @Author Sean
* @Date 2019/4/19
*/
<template>
  <div>
    <list-item :item-height="45">
      <div class="item-bord">
        <div class="info-board">
          <div class="board-line1">融资额(元)</div>
          <div class="board-line2">{{ contract.finance_amount | currency }}</div>
          <div class="board-line3">
            <div class="board-block">
              <div>月供(元)</div>
              <div>{{ contract.pmt | currency }}</div>
            </div>
            <div class="board-block-divider"/>
            <div class="board-block">
              <div>还款频率</div>
              <div>{{ contract.annual_pay_times_n }}</div>
            </div>
            <div class="board-block-divider"/>
            <div class="board-block">
              <div>合同期数</div>
              <div>{{ contract.lease_times }}</div>
            </div>
          </div>
        </div>
      </div>
      <item>
        <div slot="name">价目表</div>
        <div slot="content">{{ contract.price_list_n }}</div>
      </item>
      <item>
        <div slot="name">租赁物总价款(元)</div>
        <div slot="content">{{ contract.lease_item_amount | currency }}</div>
      </item>
      <item>
        <div slot="name">租金总额(元)</div>
        <div slot="content">{{ contract.net_lease_item_amount | currency }}</div>
      </item>
      <item>
        <div slot="name">租赁年限(年)</div>
        <div slot="content">{{ contract.lease_term }}</div>
      </item>
      <item>
        <div slot="name">首付款比例/金额</div>
        <div slot="content">{{ contract.down_payment_ratio_together }}</div>
      </item>
      <item>
        <div slot="name">保证金比例/金额</div>
        <div slot="content">{{ contract.deposit_ratio_together }}</div>
      </item>
      <item>
        <div slot="name">手续费比例/金额</div>
        <div slot="content">{{ contract.lease_charge_ratio_together }}</div>
      </item>
    </list-item>
  </div>
</template>

<script>
export default {
  props: {
    contract: Object,
  },
  data () {
    return {}
  },
  created: function () {
  },
  mounted: function () {
  },
  updated: function () {
  },
  methods: {},
}
</script>

<style scoped lang="less" rel="stylesheet">
  .hls-list-item{
    padding-top: 40px;
    .item-bord {
      height: 160px !important;
      margin-top: -30px;
      padding: 0 15px;
      .info-board {
        width: 100%;
        height: 100%;
        padding: 15px 15px 0 15px;
        background-color: @activated-color;
        color: white;
        -webkit-border-radius: 5px;
        border-radius: 5px;

        .board-line1 {
          font-size: 15px;
        }

        .board-line2 {
          font-size: 22px;
          margin-top: 15px;
          margin-bottom: 29px;
        }

        .board-line3 {
          height: 50px;
          display: -webkit-flex;
          display: flex;
          justify-content: space-between;
          align-items: center;
          -webkit-justify-content: space-between;
          -webkit-align-items: center;
          padding: 0 10px;

          .board-block {
            margin-top: 10px;
            //width: 100%;
            height: 100%;
            padding-left: 5px;
            display: -webkit-flex;
            display: flex;
            align-items: center;
            -webkit-align-items: center;
            flex-direction: column;
            justify-content: space-between;
            -webkit-flex-direction: column;
            -webkit-justify-content: space-between;
            font-size: 14px;

            div {
              height: 50%;
            }

            div:first-child {
              line-height: 7px;
            }

            div:last-child {
              line-height: 10px;
            }
          }

          .board-block:first-child {
            padding-left: 0
          }

          .board-block-divider {
            width: 1px;
            height: 100%;
            background-color: white;
          }
        }
      }
    }
  }
</style>