<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"
        v-if="isShowRenewalButton"
        @click="goNext('renewal')"
      >
        {{ buttonText }}
      </cr-button>
      <cr-button
        class="Pdbi-operation-button"
        v-if="isShowClaimsButton"
        @click="showIframe(productNo)"
        >申请理赔</cr-button
      >
      <cr-button class="Pdbi-operation-button" v-if="isShowVisitButton" @click="goNext('visit')">
        {{ visitButtonText }}
      </cr-button>
    </div>
    <popup-with-iframe v-model="popupShow" title="理赔流程">
      <cps-process-detail :process-data="processDetail" />
    </popup-with-iframe>
  </div>
</template>
<script>
import GOODS_LIST from "@/api/goodsList.mock";
import { returnOnline } from "@/api/policy";
import applyClaimsMixin from "@/mixins/applyClaims.mixin";

export default {
  name: "InsuranceCard",
  mixins: [applyClaimsMixin],
  props: {
    productNo: {
      type: [Number, String],
      default: 1
    },
    autoRenewPolicy: {
      type: Boolean,
      default: false
    },
    policyNo: {
      type: String,
      default: ""
    },
    orderNo: {
      type: String,
      default: ""
    },
    policySecId: {
      type: String,
      default: ""
    },
    clientReview: {
      type: Boolean,
      default: false
    },
    statusKey: {
      type: String,
      default: ""
    }
  },
  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.autoRenewPolicy ? "已开通次年续保" : "已关闭次年续保";
    },
    visitButtonText() {
      return this.clientReview ? "已回访" : "去回访";
    },
    isShowRenewalButton() {
      return !["BNZJX001", "HGSX001"].includes(this.productNo);
    },
    isShowVisitButton() {
      return "HGSX001" === this.productNo;
    },
    isShowClaimsButton() {
      console.log("this.statusKey", this.statusKey);
      return ["1", "2"].includes(this.statusKey);
    }
  },
  methods: {
    async goNext(type) {
      if (type === "renewal") {
        this.$router.push(
          `/policy/renewal/${this.orderNo}/${encodeURIComponent(this.policySecId)}`
        );
      } else if (type === "visit") {
        const params = { contNo: this.policyNo, redirectUrl: window.location.href };
        const result = await returnOnline(params);
        window.location.href = result.url;
      }
    }
  }
};
</script>
<style lang="less" src="../index.less" scoped></style>
