<template>
  <h-view class="public-style resultDetail" title="试算结果">
    <!--<h-header :has-border="false" class="bar-custom">
      <div slot="left" class="h-header-btn" @click="$routeGo()">
        <i class="ion-ios-arrow-back"/>
      </div>
      <div slot="center">试算结果</div>
    </h-header>-->
    <h-content class="">
      <list-item>
        <item :proportion="[5,1]" :item-height="47" class="total">
          <div slot="name"><span>融资额:</span><span>￥&nbsp;\{{ detailInfo.finance_amount | currency }}</span></div>
        </item>
        <item :proportion="[5,1]" class="times">
          <div slot="name">还款明细&nbsp;&nbsp;<span>（共 \{{ detailInfo.times_from }}期）</span></div>
        </item>
      </list-item>
      <div v-for="(list,index) in detailInfo.cash_flows" v-show="index>0" :key="index" class="general">
        <div class="time">
          \{{ list.time }} 期
        </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>

    </h-content>
  </h-view>
</template>

<script>
import calService from './calculateService'
export default {
  name: 'ResultDetail',
  data () {
    return {
      detailInfo: calService.getResult(),
    }
  },
  methods: {

  },
}
</script>

<style lang="less">
  .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;
          }
        }
      }
    }

  }
  // iPhoneX适配
  @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
    .platform-ios {
      .resultDetail {
          padding-bottom: @bottomSafeArea;
      }
    }
  }

  // iPhoneX Max适配
  @media (device-width: 414px) and (device-height: 896px) {
    .platform-ios {
        .h-view{
          padding-bottom: @bottomSafeArea;
        }
    }
  }

</style>
