<template>
  <div class="policy-detail">
    <div class="policy-detail-body">
      <Component :is="policy.cardConfig.component" :data="policy"></Component>
    </div>
  </div>
</template>
<script>
import Guarantee from "./Types/Guarantee";
import Refund from "./Types/Refund";
import policyStatusMixin from "../mixin/policyStatus.mixin";
import { getPolicyDetail } from "@/api/policy";

let timer = null;

export default {
  name: "PolicyList",
  mixins: [policyStatusMixin],
  provide() {
    return {
      getPolicy: this.getPolicy
    };
  },
  components: {
    Guarantee,
    Refund
  },
  data() {
    return {
      policy: {
        cardConfig: {
          component: ""
        }
      }
    };
  },
  async created() {
    await this.getPolicy();
    if (this.$route?.query?.isWxH5 && this.policy?.cardConfig?.key === "4") {
      this.$dialog({
        message: "请确认是否已经完成了微信免密支付签约",
        onCancel: () => {
          timer = setInterval(this.getPolicy, 3000);
        },
        onConfirm: () => {
          timer = setInterval(this.getPolicy, 3000);
        }
      });
    }
  },
  methods: {
    async getPolicy() {
      const detail = await getPolicyDetail(this.$route.params.orderNo);
      this.policy = this.getData(detail);
    }
  },
  beforeDestroy() {
    clearTimeout(timer);
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
