<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-29 10:02:11
 * @LastEditTime: 2019-09-29 10:02:11
 * @LastEditors: your name
 -->
<template>
  <h-view id="refund" class="public-style" title="还款计划">
    <div class="top">
      <h-header :proportion="[5,1,1]" class="header">
        <div slot="left" class="h-header-btn" @click="goBase">
          <img src="@/assets/intoApproval/arrow.png" >
          <span>还款计划</span>
        </div>
      </h-header>
      <img v-if="none" class="noData" src="@/assets/intoApproval/none.jpg" >
      <div v-if="dataNone" class="top-content">
        <span class="top-tittle">总租金</span>
        <span class="num">{{ info.total_rental_sum|currency }}</span>
        <div class="top-detail">
          <div class="left">
            <span class="line">保证金</span>
            <span>￥{{ info.deposit * product_num |currency }}</span>
          </div>
          <div class="right">
            <span class="line">首付款</span>
            <span>￥{{ info.down_payment * product_num |currency }}</span>
          </div>
        </div>
        <div class="clear" />
        <div class="top-detail">
          <div class="left">
            <span class="line">手续费</span>
            <span>￥{{ parseFloat(info.lease_charge * product_num).toFixed(2) |currency }}</span>
          </div>
          <div class="right">
            <span class="line date-sum">合同期数</span>
            <span>{{ info.lease_times }}</span>
          </div>
        </div>
      </div>
    </div>
    <h-content v-if="dataNone">
      <div class="header-top-bar">
        <span/>
        <span>日期</span>
        <span>现金流项目</span>
        <span>应还金额</span>
      </div>
      <table>
        <!-- <thead class="top-bar">
          <th />
          <th>日期</th>
          <th>现金流项目</th>
          <th>应还金额</th>
        </thead>-->
        <tr v-for="(item,index) in lists" :key="index">
          <td>{{ index+1 }}</td>
          <td>{{ item.due_date|timeFormat }}</td>
          <td>租金</td>
          <td>{{ item.rental * product_num |currency }}</td>
        </tr>
      </table>
    </h-content>
  </h-view>
</template>
<script>
export default {
  filters: {
    timeFormat: function (time) {
      var date = new Date(time)
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      var d = date.getDate()
      if (m < 10) {
        m = `0${m}`
      }
      if (d < 10) {
        d = `0${d}`
      }
      return `${y}-${m}-${d}`
    },
  },
  data () {
    return {
      confirm_status: this.$route.params.confirm_status,
      product_num: this.$route.params.product_num,
      info: {
        finance_amount: '',
        lease_charge: '',
        down_payment: '',
        lease_times: '',
        deposit: '',
      },
      lists: [],
      dataNone: false,
      none: false,
    }
  },
  created () {
    this.getInfo()
  },
  methods: {
    goBase () {
      let confirmStatus
      if (this.confirm_status !== 'APPROVED') {
        confirmStatus = true
      } else {
        confirmStatus = false
      }
      window.localStorage.setItem('hasButtom', confirmStatus)
      this.$router.replace({
        name: 'Base',
        params: {
          isConfirm: true,
          hasButtom: confirmStatus,
          confirm_status: this.$route.params.confirm_status,
        },
      })
      this.$router.go(-1)
    },
    getInfo () { // 获取还款计划信息
      let vm = this
      let url = process.env.basePath + 'prj_cashflow_query'
      let param = {
        project_id: window.localStorage.project_id,
      }
      vm.hlsPopup.showLoading('数据加载中!')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.lists = res.lists
          Object.assign(vm.info, res.info)
          if (!vm.lists.length) {
            vm.none = true
          } else {
            vm.dataNone = true
          }
          vm.lists.sort(vm.compare('due_date'))// 对于获取到的数据根据时间进行排序
        }
      })
    },
    compare (key) {
      return function (value1, value2) {
        var val1 = new Date(value1[key])
        var val2 = new Date(value2[key])
        return val1 < val2 ? -1 : 1
      }
    },
  },
}
</script>
<style lang="less" scoped>
#refund {
  .clear {
    clear: both;
  }
  .header {
    background-color: rgba(0, 0, 0, 0);
    .h-header-btn {
      img {
        width: 16px;
        height: 16px;
      }
      span {
        margin-left: 16px;
        font-family: PingFangSC-Semibold;
        font-size: 17px;
        color: #ffffff;
        letter-spacing: 0.61px;
      }
    }
  }
  .top {
    width: 100%;
    height: 285px;
    background: url("../../../assets/intoApproval/backtop.png") no-repeat;
    background-size: 100% 285px;
    .top-detail {
      margin-top: 12px;
      width: 260px;
      .line {
        font-family: PingFangSC-Regular;
        font-size: 12px;
        height: 12px;
        color: rgba(255, 255, 255, 0.6);
      }

      .line::before {
        content: "";
        display: inline-block;
        width: 2px;
        height: 12px;
        background-color: #ffffff;
        position: relative;
        left: -5px;
        top: 2px;
      }
      .left {
        float: left;
        span:last-child {
          display: block;
          font-family: PingFangSC-Semibold;
          font-size: 16px;
          color: #ffffff;
          letter-spacing: 0;
          margin-top: 8px;
        }
      }
      .right {
        padding-left:180px;
        span:last-child {
          display: block;
          font-family: PingFangSC-Semibold;
          font-size: 16px;
          color: #ffffff;
          letter-spacing: 0;
          margin-top: 8px;
        }
      }
    }
    .top-content {
      width: 300px;
      margin: 0 auto;
      .top-tittle {
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
        letter-spacing: 0;
      }
      .num {
        display: block;
        font-family: PingFangSC-Semibold;
        font-size: 32px;
        color: #ffffff;
        line-height: 44px;
        height: 44px;
        margin-bottom: 24px;
        margin-top: 8px;
      }
    }
  }
  table {
    width: 100%;
    text-align: center;
    margin-top: 44px;
    th {
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #d9dbdf;
      font-family: PingFangSC-Semibold;
      font-size: 14px;
      color: #383f45;
      letter-spacing: 0;
    }
    th:first-child {
      width: 15%;
    }
    td:first-child {
      font-family: PingFangSC-Semibold;
      font-size: 20px;
      color: #326aaf;
    }
    td:not(:first-child) {
      border-bottom: 1px solid #d9dbdf;
    }
    td:last-child {
      font-family: PingFangSC-Semibold;
      font-size: 18px;
      color: #336bb0;
      letter-spacing: 0;
    }
    td {
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #383f45;
      letter-spacing: 0;
    }
  }
  .noData {
    width: 100%;
  }
  .header-top-bar {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #fafafa;
    border-bottom: 1px solid #d9dbdf;
    position: fixed;
    span {
      display: inline-block;
      text-align: center;
      font-family: PingFangSC-Semibold;
      font-size: 14px;
      color: #383f45;
      letter-spacing: 0;
    }
     span:nth-of-type(1) {
     float:left;
    }
    span:nth-of-type(2) {
      margin-left: 45px;
    }

    span:nth-of-type(3) {
      margin-left: 31px;
    }
    span:nth-of-type(4) {
      float:right;
      margin-right: 61px;
    }
  }
}
</style>
