<template>
  <div class="Pdb-payment">
    <p v-if="showTips" class="Pdb-payment-title Pdb-payment-title_tips">
      {{ payCostConfig.title }}
    </p>
    <div v-else>
      <p class="Pdb-payment-title">{{ expiredDayText }}</p>
      <div class="Pdb-payment-content">
        <div class="Pdbp-content-item">
          <svg-icon class-name="Pdbpc-item-svg" icon-class="check-circle" />
          <span class="Pdbpc-item-text">无需次年自己手动操作续保</span>
        </div>
        <div class="Pdbp-content-item">
          <svg-icon class-name="Pdbpc-item-svg" icon-class="check-circle" />
          <span class="Pdbpc-item-text">本功能无额外费用，可随时取消</span>
        </div>
        <div class="Pdbp-content-item">
          <svg-icon class-name="Pdbpc-item-svg" icon-class="check-circle" />
          <span class="Pdbpc-item-text">续保保费按照续保应交保费，自动扣款</span>
        </div>
      </div>
    </div>
    <cr-button class="Pdb-payment-button" @click="goNext()">{{ payCostConfig.button }}</cr-button>
  </div>
</template>
<script>
import detailPayMixin from "@/views/Goods/Detail/modules/detailPay.mixin";
let timer = null;

export default {
  name: "PayCost",
  mixins: [detailPayMixin],
  inject: ["getPolicy"],
  props: {
    statusKey: {
      type: String,
      default: "2"
    },
    payCostConfig: {
      type: Object,
      default: () => ({
        title: "",
        button: "立即缴费"
      })
    },
    payInfo: {
      type: Object,
      default: () => ({
        payOrderNo: "",
        payType: "",
        orderNo: ""
      })
    },
    day: {
      type: String,
      default: ""
    }
  },
  computed: {
    showTips() {
      return ["4", "14", "13"].includes(this.statusKey);
    },
    expiredDayText() {
      return this.statusKey === "2" ? `保障将在${this.day}天后失效，请立即缴费` : "";
    }
  },
  watch: {
    statusKey: {
      immediate: true,
      handler(val) {
        if (["14", "13"].includes(val)) {
          timer = setInterval(this.getPolicy, 3000);
        }
      }
    }
  },
  beforeDestroy() {
    clearTimeout(timer);
  },
  methods: {
    goNext() {
      if (this.statusKey === "4") {
        this.orderInfo = this.payInfo;
        this.goPay();
      } else {
        this.getPolicy();
      }
    }
  }
};
</script>
<style lang="less" src="../index.less" scoped></style>
