<template>
  <div class="Pdb-insurance">
    <p class="Pdb-insurance-name">{{ productTitle }}</p>
    <p class="Pdb-insurance-no">NO.{{ policyNo }}<br />由{{ productCompany }}承保</p>
    <div class="Pdb-insurance-operation">
      <cr-button class="Pdbi-operation-button" @click="goNext">{{ buttonText }}</cr-button>
      <cr-button class="Pdbi-operation-button">申请理赔</cr-button>
    </div>
  </div>
</template>
<script>
import GOODS_LIST from "@/api/goodsList.mock";

export default {
  name: "InsuranceCard",
  props: {
    productNo: {
      type: [Number, String],
      default: 1
    },
    autoRenewPremium: {
      type: Boolean,
      default: false
    },
    policyNo: {
      type: String,
      default: ""
    },
    orderNo: {
      type: String,
      default: ""
    },
    policySecId: {
      type: String,
      default: ""
    }
  },
  data() {
    return {};
  },
  computed: {
    productTitle() {
      return GOODS_LIST.find(v => v.id === this.productNo)?.title || "";
    },
    productCompany() {
      return GOODS_LIST.find(v => v.id === this.productNo)?.company || "";
    },
    buttonText() {
      return this.autoRenewPremium ? "已开通次年续保" : "已关闭次年续保";
    }
  },
  methods: {
    goNext() {
      this.$router.push(`/policy/renewal/${this.orderNo}/${this.policySecId}`);
    }
  }
};
</script>
<style lang="less" src="../index.less" scoped></style>
