<template>
  <div>
    <status-desc :cardConfig="data.cardConfig" :policySecId="data.policySecId"></status-desc>
    <pay-cost
      v-if="showPayCost"
      :statusKey="data.cardConfig.key"
      :payCostConfig="data.cardConfig.payCostConfig"
      :day="data.payInfo && data.payInfo.expiredDay"
    ></pay-cost>
    <insurance-card
      :productNo="data.productNo"
      :policySecId="data.policySecId"
      :autoRenewPremium="data.autoRenewPremium"
      :policyNo="data.policyNo"
      :orderNo="data.orderNo"
    ></insurance-card>
    <security-content :data="data" :detail="planDetail"></security-content>
    <insurance-service :detail="qaDetail"></insurance-service>
    <customer-service></customer-service>
    <insurance-recommend class="Pdb-recommend" />
  </div>
</template>
<script>
import InsuranceRecommend from "../../modules/InsuranceRecommend";
import InsuranceCard from "../modules/InsuranceCard";
import SecurityContent from "../modules/SecurityContent";
import InsuranceService from "../modules/InsuranceService";
import PayCost from "../modules/PayCost";
import StatusDesc from "../modules/StatusDesc";
import CustomerService from "../modules/CustomerService";

import ciiDetail from "@/api/detail.huatai.zhongjixian";
import liDetail from "@/api/detail.huagui.shouxian";
import miDetail from "@/api/detail.taikang.yiliaobaozhang";
import aiDetail from "@/api/detail.zhongan.yiwai";

export default {
  name: "Guarantee",
  components: {
    InsuranceRecommend,
    InsuranceCard,
    SecurityContent,
    InsuranceService,
    PayCost,
    StatusDesc,
    CustomerService
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      productInfo: {}
    };
  },
  watch: {
    data: {
      deep: true,
      handler() {
        this.setProductInfoByNo();
      }
    }
  },
  computed: {
    showPayCost() {
      return ["2", "4"].includes(this.data?.cardConfig?.key);
    },
    planDetail() {
      const { type, planCellInfo: info } = this.productInfo;
      const { amountInsured } = this.data.productItem;
      const planCellInfo = amountInsured ? info[amountInsured] : info;
      return { type, planCellInfo: planCellInfo };
    },
    qaDetail() {
      const { qaInfo, protocolData, popupArray } = this.productInfo;
      return { qaInfo, protocolData, popupArray };
    }
  },
  methods: {
    // TODO 需要剔除无用的详情输入
    setProductInfoByNo() {
      const { productNo } = this.data;
      switch (productNo) {
        case "TKYLX001":
          this.productInfo = miDetail;
          break;
        case "HTDQZJX001":
          this.productInfo = ciiDetail;
          break;
        case "BNZJX001":
          break;
        case "ZAYWX001":
          this.productInfo = aiDetail;
          break;
        case "HGSX001":
          this.productInfo = liDetail;
          break;
        default:
          break;
      }
    }
  }
};
</script>
<style lang="less" src="../index.less" scoped></style>
