<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"
      :payInfo="payInfo"
    ></pay-cost>
    <insurance-card
      :productNo="data.productNo"
      :policySecId="data.policySecId"
      :autoRenewPolicy="data.autoRenewPolicy"
      :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 detailPayMixin from "@/views/Policy/mixin/orderInfo.mixin";
import { parseTime } from "@/service/utils";
import _ from "lodash";

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";
import biDetail from "@/api/detail.bainian.zhongshen";

export default {
  name: "Guarantee",
  mixins: [detailPayMixin],
  components: {
    InsuranceRecommend,
    InsuranceCard,
    SecurityContent,
    InsuranceService,
    PayCost,
    StatusDesc,
    CustomerService
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      productInfo: {}
    };
  },
  watch: {
    data: {
      immediate: true,
      deep: true,
      handler() {
        this.setProductInfoByNo();
      }
    }
  },
  computed: {
    showPayCost() {
      return ["2", "4"].includes(this.data?.cardConfig?.key);
    },
    planDetail() {
      const {
        type,
        planCellInfo,
        securityContent,
        termOptions,
        benefitOptions,
        paywayOptions
      } = this.productInfo;
      let info = [];
      if (["HTDQZJX001", "ZAYWX001"].includes(this.data.productNo)) {
        info = [
          ...planCellInfo[this.data?.productItem?.amountInsured],
          ...[
            { title: "生效日期", value: this.EffectiveDate },
            { title: "终止日期", value: this.EndDate }
          ]
        ];
      } else if (["HGSX001", "BNZJX001"].includes(this.data.productNo)) {
        info = [
          ...securityContent,
          ...[
            {
              title: "保障期限",
              value: termOptions[this.data?.productItem?.policyPeriod - 1].label
            },
            { title: "生效日期", value: this.EffectiveDate },
            { title: "受益人", value: "法定" },
            {
              title: "交费年限",
              value: benefitOptions[this.data?.productItem?.payPeriod - 1].label.slice(1)
            },
            { title: "交费方式", value: paywayOptions[this.data?.productItem?.payType - 1].label }
          ]
        ];
      } else if (this.data.productNo === "TKYLX001") {
        info = [
          ...planCellInfo,
          ...[
            { title: "生效日期", value: this.EffectiveDate },
            { title: "终止日期", value: this.EndDate }
          ]
        ];
      }

      return { type, planCellInfo: info };
    },
    qaDetail() {
      const { qaInfo, protocolData, popupArray } = this.productInfo;
      return { qaInfo, protocolData, popupArray };
    },
    EffectiveDate() {
      return parseTime(this.data.policyEffectiveDate, "{y}.{m}.{d}");
    },
    EndDate() {
      return parseTime(this.data.policyEndDate, "{y}.{m}.{d}");
    }
  },
  methods: {
    // TODO 需要剔除无用的详情输入
    setProductInfoByNo() {
      const { productNo } = this.data;
      switch (productNo) {
        case "TKYLX001":
          this.productInfo = _.cloneDeep(miDetail);
          break;
        case "HTDQZJX001":
          this.productInfo = _.cloneDeep(ciiDetail);
          break;
        case "BNZJX001":
          this.productInfo = _.cloneDeep(biDetail);
          break;
        case "ZAYWX001":
          this.productInfo = _.cloneDeep(aiDetail);
          break;
        case "HGSX001":
          this.productInfo = _.cloneDeep(liDetail);
          break;
        default:
          break;
      }
    }
  }
};
</script>
<style lang="less" src="../index.less" scoped></style>
