<template>
  <div class="stages-container">
    <div class="stages-money">
      <p class="text">可分期金额</p>
      <h4 class="money">{{ stages.installmentAmount }}</h4>
    </div>
    <div class="stages-trem">
      <cr-radio-group v-model="tremActive" direction="vertical">
        <cr-radio v-for="(item, idx) in stages.installmentList" :key="idx" class="item" :name="idx">
          <div class="content">
            <p class="trem">分{{ item.term }}期 每期{{ item.amount }}元</p>
            <p class="each">每期综合服务费{{ item.fee }}元</p>
          </div>
        </cr-radio>
      </cr-radio-group>
    </div>
    <div class="btn">
      <div class="is-agree">
        <cr-checkbox v-model="isAgree" shape="round">
          <span class="text"
            >勾选同意<i @click.stop="handleToContract">《分期服务确认书》</i></span
          ></cr-checkbox
        >
      </div>
      <cr-button class="button" type="primary" @click="handleStages">确认分期</cr-button>
    </div>
    <cr-popup v-model="isPop" class="pop" round closeable position="bottom">
      <h2 class="stages-title">确认分期</h2>
      <div class="pop-content">
        <div class="pop-item">
          <span class="title">分期金额</span>
          <span class="text">
            {{ stages.installmentAmount }}
          </span>
        </div>
        <div class="pop-item">
          <span class="title">分期期数</span>
          <span class="text"> {{ selectStages.term }}期 </span>
        </div>
        <div class="pop-item">
          <span class="title">每期应还</span>
          <div class="text-content">
            <span> {{ selectStages.amount }}元(含手续费{{ selectStages.fee }}元) </span>
            <p class="tip" @click="handleOpenFee">含综合服务费{{ selectStages.fee }}元</p>
          </div>
        </div>
        <div class="pop-item">
          <span class="title">年化利率</span>
          <span class="text">
            {{ selectStages.irr }}
          </span>
        </div>
        <div class="pop-item">
          <span class="title">还款日</span>
          <span class="text"> {{ selectStages.repayDay }} </span>
        </div>
      </div>
      <div class="pop-btn">
        <cr-button class="button" type="primary" @click="handleStagesSure">确认</cr-button>
      </div>
    </cr-popup>

    <div class="tip-block">
      <cr-dialog v-model="showDialog" confirm-button-text="知道了">
        <div slot="title" class="tip-title">
          费用说明
        </div>
        <div>
          综合服务费：包括依据用户与资金提供方以及相关担保方、保险方的约定，按期向资金提供方缴纳的利息、分期服务费等，以及向担保方缴纳的担保费、保险费等在内的全部资金成本。除还款本金以及该金额外用户无需就贷款事项支付其他任何费用。
        </div>
      </cr-dialog>
    </div>
  </div>
</template>
<script>
import { getAmortizeDetail, getAmortize } from '@/api/bill.api';
export default {
  components: {},
  data() {
    return {
      tremActive: 0,
      isPop: false,
      stages: {},
      billNo: '',
      isAgree: false,
      showDialog: false
    };
  },
  computed: {
    selectStages() {
      return this.stages.installmentList[this.tremActive];
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      const { billNo } = this.$route.query;
      this.billNo = billNo;
      const [res] = await getAmortizeDetail({ billNo });
      if (res) {
        this.stages = res || {};
      }
    },
    handleOpenFee() {
      this.showDialog = true;
      // this.$dialog({
      //   title: '',
      //   message:
      //     '综合服务费：包括依据用户与资金提供方以及相关担保方、保险方的约定，按期向资金提供方缴纳的利息、分期服务费等，以及向担保方缴纳的担保费、保险费等在内的全部资金成本。除还款本金以及该金额外用户无需就贷款事项支付其他任何费用。',
      //   showCancelButton: false,
      //   confirmButtonText: '知道了'
      // });
    },
    handleToContract() {
      window.location.href = this.selectStages?.contractList[0].url;
    },
    handleStages() {
      if (!this.isAgree) {
        this.$toast('请仔细阅读并同意相关协议');
        return;
      }
      this.isPop = true;
    },
    async handleStagesSure() {
      const [res] = await getAmortize({
        billNo: this.billNo,
        term: this.selectStages.term,
        signContract: true
      });
      if (res) {
        this.isPop = false;
        this.$router.replace({
          name: 'stagesSuccess',
          params: {
            ...res
          }
        });
        // this.$dialog({
        //   message: this.stages.text,
        //   showCancelButton: false,
        //   confirmButtonText: '知道了',
        //   onConfirm: () => {

        //   }
        // });
      }
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
