<template>
  <!--  -->
  <div v-if="!isPaidOff" class="button-group">
    <!-- 逾期 -->
    <cr-button v-if="isOverdue" class="button" type="primary" @click="handleToImmediate"
      >立即还款</cr-button
    >
    <!-- 单按钮 -->
    <template v-if="!isOverdue && !isStages">
      <cr-button
        v-if="billActive === shouldBill || isOverdue"
        :disabled="isPayInProgress"
        class="button"
        type="primary"
        @click="handleToImmediate"
        >立即还款</cr-button
      >
      <cr-button
        v-else
        :disabled="isPayInProgress"
        class="button"
        type="primary"
        @click="handleToAdvance"
        >{{ billHead.forwardName }}</cr-button
      >
    </template>
    <!-- 双按钮 -->
    <template v-if="!isOverdue && isStages">
      <div v-if="billActive === shouldBill" class="advance-stages">
        <cr-button
          :disabled="isPayInProgress"
          class="button"
          color="#faab0c"
          @click="handleToImmediate"
          >立即还款</cr-button
        >
        <cr-button
          :disabled="isPayInProgress"
          class="button stages-btn"
          type="primary"
          @click="handleToStages"
          >{{ billHead.installmentName }}</cr-button
        >
      </div>
      <div v-else class="stages">
        <cr-button
          :disabled="isPayInProgress"
          class="button"
          color="#faab0c"
          @click="handleToAdvance"
          >{{ billHead.forwardName }}</cr-button
        >
        <cr-button
          :disabled="isPayInProgress"
          class="button stages-btn"
          type="primary"
          @click="handleToStages"
          >{{ billHead.installmentName }}</cr-button
        >
      </div>
    </template>
  </div>
</template>
<script>
import localStorage from '@/service/localStorage.service';
import { PAY_BACK, OVERDUE, PAY_COMPLETE } from '@/constants/bill';
export default {
  components: {},
  props: {
    billHead: {
      type: Object,
      default: () => {}
    },
    // 已还清0/应还1/还款中2/逾期3
    selectStatus: {
      type: [String, Number],
      default: ''
    },
    // 0 应还   1 待还
    billActive: {
      type: [String, Number],
      default: ''
    },
    balanceAmount: {
      type: [String, Number],
      default: ''
    },
    billNo: {
      type: [String, Number],
      default: ''
    },
    addPrice: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      shouldBill: 0,
      awaitBill: 1
    };
  },
  computed: {
    isPayInProgress() {
      return this.selectStatus === PAY_BACK;
    },
    isStages() {
      return (
        this.billHead.installmentUrl &&
        this.billHead.installmentUrl !== '' &&
        this.billActive === this.shouldBill
      );
    },
    isForwardUrl() {
      return this.billHead.forwardUrl && this.billHead.forwardUrl !== '';
    },
    isOverdue() {
      return this.selectStatus === OVERDUE;
    },
    isPaidOff() {
      return this.selectStatus === PAY_COMPLETE;
    },
    // isOverdueAwait() {
    //   return this.isOverdue && this.billActive === this.awaitBill;
    // },
    repaymentUrl() {
      return `${this.formatUrl(
        this.billHead.forwardUrl
      )}&repayFinishedForwardSfqUrl=${encodeURIComponent(window.location.href)}`;
    }
  },
  methods: {
    handleToImmediate() {
      window.location.href = this.repaymentUrl;
    },
    handleToAdvance() {
      window.location.href = this.repaymentUrl;
    },
    handleToStages() {
      this.$router.push({
        name: 'stages',
        query: {
          billNo: this.billNo
        }
      });
    },
    formatUrl(url) {
      return url
        ?.replace(/\{billNumber\}/g, this.billNo)
        ?.replace(/\{itemPrice\}/g, this.balanceAmount)
        ?.replace(/\{isBothBtn\}/g, this.getBothBtn())
        ?.replace(/\{addPrice\}/g, this.billActive && this.addPrice)
        .replace(/\{token\}/g, localStorage.get('vccToken'));
    },

    getBothBtn() {
      let isBothBtn = true;
      if (this.isOverdue || !this.isStages) {
        isBothBtn = false;
      }
      return isBothBtn;
    }
  }
};
</script>
<style lang="less" scoped>
.button-group {
  position: fixed;
  bottom: 0px;
  left: 0;
  right: 0;
  height: 50px;
  background: @white;
  padding: 5px 16px;
  box-sizing: border-box;
  display: flex;
  .advance-stages,
  .stages {
    width: 100%;
    display: flex;
  }
  .button {
    border-radius: 20px;
    width: 100%;
    display: block;
    height: 40px;
  }
  .advance-stages {
    .button {
      width: 50%;
      border-radius: 0;
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
    }
    .stages-btn {
      border-radius: 0;
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
      width: 50%;
    }
  }
  .stages {
    .button {
      border-radius: 0;
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
      width: 50%;
    }
    .stages-btn {
      border-radius: 0;
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
    }
  }
}
</style>
