/**
* @Author Sean
* @Date 2019/4/19
*/
<template>
  <div class="resultDetail">
    <div class="has-header">
      <list-item>
        <item :proportion="[5,1]" :item-height="47" class="total">
          <div slot="name"><span>融资额:</span><span>￥&nbsp;{{ contract.finance_amount | currency }}</span></div>
        </item>
        <item :proportion="[5,1]" class="times">
          <div slot="name">还款明细&nbsp;&nbsp;<span>（共{{ contract.lease_times }}期）</span></div>
        </item>
      </list-item>
      <div v-for="list in cashflows" class="general">
        <div class="time">
          {{ list.times }} 期
        </div>
        <div class="right">
          <list-item>
            <item :proportion="[2,3]">
              <div slot="name"><span>租金:</span><span style="color:#FF777C;">&nbsp;{{ list.due_amount | currency }}</span></div>
              <div slot="content"><span>本金:</span><span>&nbsp;{{ list.principal | currency }}</span></div>
            </item>
            <item :proportion="[2,3]">
              <div slot="name"><span>利息:</span><span>&nbsp;{{ list.interest | currency }}</span></div>
              <div slot="content"><span>剩余本金:</span><span>&nbsp;{{ list.outstanding_principal | currency }}</span></div>
            </item>
          </list-item>
        </div>
      </div>
    </div>
  </div>
</template>

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

<style scoped lang="less" rel="stylesheet">
.resultDetail{
  .hls-list-item{
    .hls-item{
      .add-name{
        color: #555B70;
      }
      .add-content{
        color: #555B70;
      }
    }
    .total .add-name{
      font-size: 20px;
      color: #555B70;
      line-height: 0.56rem;
      font-weight: 500;
    }
    .times .add-name{
      font-size: 16px;
      color: #535D7F;
      line-height: 22px;
      font-weight: bold;
      padding:5px 0;
      span{
        font-size: 13px;
        color: rgba(85,91,112,0.60);
        line-height: 18px;
        font-weight: normal;
      }
    }
  }
  .general{
    display:flex;
    align-items: center;
    width: 100%;
    height: 80px; /*no*/
    margin-bottom:15px;
    .time{
      width: 14%;
      padding-left: 15px;
      color: #555B70;
      font-size:@font-size-middle;
    }
    .right{
      background-color: #ffffff;
      margin-left:2.7%;
      width: 88%;
      height: 100%;
      border-radius: 5px;
      .hls-list-item{
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        .hls-item{
          padding:  0 0 0 10px;
        }
      }
    }
  }
}
.platform-ios {
  .resultDetail{
    margin-bottom: 42px;
  }
}
// iPhoneX适配
@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
  .platform-ios {
    .resultDetail{
      margin-bottom: 42px;
    }
  }
}
// iPhoneXR适配
@media (device-width: 414px) and (device-height: 896px) {
  .platform-ios {
    .resultDetail{
      margin-bottom: 42px;
    }
  }
}
</style>