<template>
  <div class="success-container">
    <div class="content">
      <div class="img">
        <img :src="stagesSuccess" alt="" />
      </div>
      <p class="success-text">分期成功</p>
      <div class="item">
        <span class="title">分期金额</span>
        <span class="text"> {{ installmentAmount }}元 </span>
      </div>
      <div class="item">
        <span class="title">还款日</span>
        <span class="text"> {{ repayDayText }} </span>
      </div>
    </div>
    <div class="item item-border">
      <span class="title">本期还款金额</span>
      <span class="text"> {{ awaitRepayAmount }}元 </span>
    </div>
    <div class="content">
      <cr-button class="button" type="primary" @click="handleToImmediately">立即还款</cr-button>
    </div>
  </div>
</template>
<script>
import stagesSuccess from '@/assets/images/bill/stages_success.png';
export default {
  components: {},
  data() {
    return {
      stagesSuccess,
      awaitRepayAmount: '',
      installmentAmount: '',
      repayDayText: '',
      repayUrl: ''
    };
  },
  computed: {},
  mounted() {
    const { awaitRepayAmount, installmentAmount, repayDayText, repayUrl } = this.$route.params;
    this.awaitRepayAmount = awaitRepayAmount;
    this.installmentAmount = installmentAmount;
    this.repayDayText = repayDayText;
    this.repayUrl = repayUrl;
  },
  methods: {
    handleToImmediately() {
      window.location.href = this.repayUrl;
    }
  }
};
</script>
<style lang="less" scoped>
.content {
  box-sizing: border-box;
  padding: 0 20px;
}
.success-container {
  min-height: 100%;
  background: #fff;
}
.success-text {
  text-align: center;
  width: 100%;
  font-size: 16px;
  color: #333333;
}
.item {
  height: 53px;
  line-height: 53px;
  display: flex;
  border-bottom: 1px solid #f0f2f5;
  justify-content: space-between;
  span {
    display: block;
    font-size: 14px;
    color: #999999;
  }
  .text {
    color: #333333;
  }
}
.item-border {
  padding: 0 20px;
  border-top: 10px solid #f8f8f8;
  border-bottom: none;
  margin-top: -1px;
}
.img {
  padding-top: 34px;
  margin-bottom: 20px;
  margin: 0 auto;
  width: 87px;
  img {
    width: 100%;
    display: block;
  }
}
.button {
  width: 100%;
  height: 38px;
  border-radius: 20px;
}
</style>
