<template>
  <h-view id="repay-plan" 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 class="plan-content">
      <div class="header">还款计划</div>
      <div class="plan-list">
        <div v-for="(item,index) in lists" :key="index" class="plan-item">
          <div class="left">
            <p>{{ selectYear(item.repayment_date) }}</p>
            <span>{{ selectMonth(item.repayment_date) }}</span>
          </div>
          <div :class="{right:true,white:show!=='done'}">
            <div :class="{number:true,blue:show==='undone',orange:show==='doing'}">{{ index + 1 }}</div>
            <div class="top">
              <div><p>现金流项目</p><span :class="{black:show!=='done'}">{{ item.cf_item_name }}</span></div>
              <div><p>支付方式</p><span>{{ item.pay_method }}</span></div>
            </div>
            <div class="center"><p>应还金额</p><p :class="{bold:show==='undone'}">{{ item.due_amount|currency }}</p></div>
            <div class="center"><p>已还金额</p><p :class="{yellow:show==='doing'}">{{ item.received_amount|currency }}</p></div>
          </div>
        </div>
      </div>
    </h-content>
  </h-view>
</template>

<script>

export default {
  components: {
  },
  data () {
    return {
      // 状态 {已还全部 done}  {还一部分 doning} {没还 undone}
      show: 'doing',
      lists: [
        {
          'due_amount': '48800',
          'cf_item': '2',
          'cf_item_name': '首付款',
          'received_amount': '0',
          'pay_method': '自主还款',
          'repayment_date': '2019/10/17',
        },
        {
          'due_amount': '4000',
          'cf_item': '3',
          'cf_item_name': '手续费',
          'received_amount': '400',
          'pay_method': '代扣',
          'repayment_date': '2020/10/12',
        },
        {
          'due_amount': '400',
          'cf_item': '14',
          'cf_item_name': 'gps费用',
          'received_amount': '200',
          'pay_method': '自主还款',
          'repayment_date': '2021/10/19',
        },
      ],
    }
  },

  computed: {},
  watch: {},
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getRefund()
    })
  },
  methods: {
    selectMonth (e) {
      let arr = e.split('/')
      return `${arr[1]}-${arr[2]}`
    },
    selectYear (e) {
      return e.substring(0, 4)
    },
    getRefund () {
      let vm = this
      let url = process.env.basePath + 'con_equip_repayment_plan'
      let param = {
        contract_id: this.$route.params.contract_id,
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.lists = res.lists
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
  },
}
</script>
<style lang='less' >
#repay-plan {
  .h-header {
    background-color: @headerColor;
    .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;
      }
    }
  }

  .plan-content {
    background-color: #EFEFEF;
    padding-bottom: 10px;
    .header {
      position: relative;
      height: 40px;
      line-height: 40px;
      background-color: #fff;
      font-family: PingFangSC-Semibold;
      font-size: 14px;
      color: #21254C;
      font-weight: 700;
      text-indent: 1.5em;
      border-bottom: 1px solid #F1F0F5;

      &:before {
        content: "";
        position: absolute;
        top: 12px;
        left: 0;
        width: 4px;
        height: 16px;
        background: @headerColor;
      }

      &:after {
        position: absolute;
        bottom: 0px;
        left: 40px;
        content: "";
        width: 0;
        height: 0;
        border-width: 6px;
        border-style: solid;
        border-color:transparent transparent #EFEFEF transparent;
      }
    }

    .plan-list {
      .plan-item {
        display: flex;
        height: 120px;
        margin-top: 8px;
        padding-left: 8px;

        .left {
          position: relative;
          flex: 13;

          p {
            font-family: DIN-Regular;
            font-size: 12px;
            color: rgba(56,63,69,0.60);
            margin-bottom: 5px;
          }

          span {
            font-family: DIN-Bold;
            font-size: 14px;
            color: #21254C;
            font-weight: 700;
          }

          &:before {
            content: '';
            position: absolute;
            left: 20px;
            top: 36px;
            height: 82px;
            width: 5px;
            border-left: 2px dotted #21254C;
            opacity: 0.3;
          }
        }

        &:last-child {
          .left {
            &:before {
              content:'';
              border-left: 2px dotted transparent;
            }
          }
        }

        .right {
          padding-left: 28px;
          position: relative;
          flex:77;
          background-color: #f8f8f8;
          border-radius: 4px 0 0 4px;
          line-height: 40px;

          .number {
            position: absolute;
            left: 0px;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            background: rgba(75, 74, 75, .6);
            border-radius: 4px 0 4px 0;
            color: white;
          }

          .blue {
            background: #00469C;
          }

          .orange {
            background: #FDB62F;
          }

          .top {
            height: 40px;
            border-bottom: 1px solid #F1F0F5;
            display: flex;

            div {
              flex: 3;
              display: flex;
              padding-right: 15px;

              p {
                flex: 1;
                opacity: 0.6;
                font-family: PingFangSC-Regular;
                font-size: 13px;
                color: #4B4A4B;
              }

              span {
                flex:1;
                opacity: 0.8;
                font-family: PingFangSC-Medium;
                font-size: 13px;
                color: #4B4A4B;
                text-align: right;
              }

              span.black {
                  opacity: 1;
              }

              &:first-child {
                flex:4;
                span {
                  text-align: left;
                  text-indent: .5em;
                }
              }
            }
          }

          .center {
            border-bottom: 1px solid #F1F0F5;
            display: flex;
            padding-right: 15px;

            p {
              flex: 1;
              opacity: 0.6;
              font-family: Verdana;
              font-size: 13px;
              color: #4B4A4B;

              &:last-child {
                text-align: right;
              }
            }

            p.yellow {
              color: #FDB62F;
              font-style:italic;
              font-family: Verdana-BoldItalic;
              font-weight: 700;
              opacity: 1;
            }

            p.bold {
              font-family: Verdana-BoldItalic;
              font-weight: 700;
              opacity: 1;
            }
          }
        }

        .white {
          background: #fff;
        }
      }
    }
  }

}
</style>
