<!--
 * @Author: your name
 * @Date: 2019-10-31 09:49:57
 * @LastEditTime: 2019-11-01 09:36:50
 * @LastEditors: Please set LastEditors
 * @Description: 还款
 * @FilePath:
 -->
<template>
  <h-view id="repay-plan" class="public-style">
    <transition name="trans">
      <div v-show="show" class="modal-show" @click="show=false">
        <div class="down">
          <table>
            <tr>
              <th>款项</th>
              <th>应还金额</th>
              <th>还款金额</th>
              <th>支付方式</th>
            </tr>
            <tr>
              <td>本金</td>
              <td>{{ pop.principal|currency }}</td>
              <td>{{ pop.received_principal|currency }}</td>
              <td>{{ pop.pay_method }}</td>
            </tr>
            <tr>
              <td>利息</td>
              <td>{{ pop.interest|currency }}</td>
              <td>{{ pop.received_interest|currency }}</td>
              <td>{{ pop.pay_method }}</td>
            </tr>
          </table>
        </div>
      </div>
    </transition>
    <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>
    <div class="center">
      <div class="plan-name">
        <div class="header">还款计划</div>
      </div>
    </div>
    <h-content id="content" class="plan-content">
      <!-- 已结清 black , 逾期 orange , 还款中 blue , 未还款 green -->

      <div
        v-for="(item,index) in lists"
        :key="index"
        :class="{'plan-list':true,'or':statu==='orange','bl':statu==='blue','gr':statu==='green'}"
        @click="showModel(item)"
      >
        <div
          :class="{'period':true,'orange':statu==='orange','blue':statu==='blue','green':statu==='green'}"
        >{{ item.times }}期</div>
        <img v-if="statu === 'black'" src="@/assets/contractInquire/black.png" alt class="left" >
        <img v-if="statu === 'orange'" src="@/assets/contractInquire/orange.png" alt class="left" >
        <img v-if="statu === 'blue'" src="@/assets/contractInquire/blue.png" alt class="left" >
        <img v-if="statu === 'green'" src="@/assets/contractInquire/green.png" alt class="left" >
        <div class="time">
          <p>{{ selectYear(item.repayment_date) }}</p>
          <span>{{ selectMonth(item.repayment_date) }}</span>
        </div>
        <div class="message">
          <div class="name">
            <p>
              现金流项目
              <span>支付方式</span>
            </p>
            <p>
              {{ item.cf_item_name }}
              <span>{{ item.pay_method }}</span>
            </p>
          </div>
          <div class="name">
            <p>
              应还金额
              <span>已还金额</span>
            </p>
            <p>
              {{ parseFloat(item.due_amount).toFixed(2)|currency }}
              <span
                :class="{'orang':statu==='orange','blu':statu==='blue','gree':statu==='green'}"
              >{{ item.received_amount|currency }}</span>
            </p>
          </div>
        </div>

        <img v-if="statu === 'black'" src="@/assets/contractInquire/done.png" alt class="status" >
        <img v-if="statu === 'orange'" src="@/assets/contractInquire/prompt.png" alt class="status" >
      </div>
    </h-content>
  </h-view>
</template>

<script>
export default {
  components: {},
  data () {
    return {
      //  已结清 black , 逾期 orange , 还款中 blue , 未还款 green
      statu: 'blue',
      show: false,
      pop: {},
      info: {},
      lists: [],
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.show = false
      vm.getRefund()
    })
  },
  methods: {
    showModel (e) {
      if (e.cf_item_name === '租金') {
        this.show = true
        this.pop = e
      }
    },
    selectMonth (e) {
      return e.substring(5, 10)
    },
    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 {
  .trans-enter-active,
  .trans-leave-active {
    transition: opacity 0.5s;
  }
  .trans-enter,
  .trans-leave-active {
    opacity: 0;
  }
  .modal-show {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 666;
    background-color: rgba(56, 63, 69, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    .down {
      position: relative;
      width: 314px;
      height: 119px;
      z-index: 999;
      background-size: 301px 24.7px;
      background-color: #fff;
      table {
        width: 100%;
        text-align: center;
        text-indent: 10px;
        tr:first-child {
          height: 46px;
          line-height: 46px;
          font-family: PingFangSC-Semibold;
          font-size: 14px;
          color: #1d3fff;
          font-weight: 600;
          border-bottom: 1px solid #d9dbdf;
        }
        tr {
          width: 100%;
          height: 36px;
          line-height: 36px;
          text-align: center;
        }
        td {
          font-family: PingFangSC-Regular;
          font-size: 13px;
          color: #4b4a4b;
        }
      }
    }
  }
  .plan-name {
    position: relative;
    background-color: #1d3fff;
    width: 100%;
    img {
      position: absolute;
      right: 30px;
      top: 12px;
      height: 20px;
      transition: 0s;
    }

    .rotate {
      transform: rotate(180deg);
    }

    .header {
      position: relative;
      height: 48px;
      line-height: 48px;
      background-color: #fff;
      font-family: PingFangSC-Semibold;
      font-size: 14px;
      color: #21254c;
      font-weight: 700;
      text-indent: 2em;
      border-radius: 24px 0 0 0;

      &:before {
        content: "";
        position: absolute;
        top: 16px;
        left: 15px;
        width: 4px;
        height: 16px;
        background: #1d3fff;
      }
    }
  }

  .plan-content {
    background-color: #fff;
    // padding: 0px 11px;
    .plan-list {
      position: relative;
      background-color: #f7f7f7;
      box-shadow: 0 0 15px #ccc;
      width:349px;
      margin:0 auto;
      //height: 126px;
      display: flex;
      padding-right: 20px;
      padding-left: 10px;
      padding-top: 16px;
      margin-bottom: 10px;
      padding-bottom: 20px;
      .message {
        flex: 12;
        //height: 85%;
        display: flex;
        justify-content: space-between;
      }
      .left {
        height: 30px;
        position: absolute;
        left: -8px;
        top: 44px;
      }

      .status {
        position: absolute;
        width: 18px;
        right: -3px;
        top: -5px;
      }

      .period {
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(75, 74, 75, 0.5);
        border-radius: 4px 0 4px 0;
        width: 30px;
        height: 15px;
        color: #fff;
        font-family: PingFangSC-Semibold;
        font-size: 12px;
        letter-spacing: 1.09px;
        line-height: 15px;
        text-align: center;
      }

      .orange {
        background: rgba(253, 182, 47, 0.5);
      }

      .blue {
        background-color: rgba(29, 63, 255, 0.5);
      }

      .green {
        background-color: rgba(27, 162, 97, 0.5);
      }
      // .top {
      //   font-family: PingFangSC-Regular;
      //   font-size: 13px;
      //   color: rgba(56, 63, 69, 0.6);
      //   letter-spacing: 0;
      //   display: flex;
      //   justify-content: space-between;
      //   span {
      //     // margin-left: 20px;
      //     font-family: PingFangSC-Regular;
      //     font-size: 13px;
      //     color: #4b4a4b;
      //     letter-spacing: 0;
      //   }
      // }
      .time {
        flex: 3;
        height: 85%;
        p {
          font-family: DIN-Regular;
          font-size: 12px;
          color: rgba(56, 63, 69, 0.6);
          margin-bottom: 4px;
          margin-top: 5px;
        }

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

      .name {
        opacity: 0.6;
        font-family: PingFangSC-Regular;
        font-size: 13px;
        color: #4b4a4b;
        display: flex;
        justify-content: space-between;
        p:nth-of-type(2){
          padding-left:10px;
        }
        p {
          span {
            display: block;
            margin-top: 18px;
          }
          span.orang {
            color: rgb(253, 182, 47);
            font-weight: 700;
            font-family: PingFangSC-Semibold;
          }
          span.blu {
            color: #1d3fff;
            font-weight: 700;
            font-family: PingFangSC-Semibold;
          }
          span.gree {
            color: #1ba261;
          }
        }
      }
    }

    .or {
      background-color: rgba(253, 182, 47, 0.05);
    }

    .bl,
    .gr {
      background: #ffffff;
      box-shadow: 0 1px 5px 0 rgba(219, 219, 219, 0.69);
    }
  }
}
</style>