<template>
  <div>
    <cii-detail v-if="detailType === 'cii'" />
    <mi-detail v-if="detailType === 'mi'" />
    <ai-detail v-if="detailType === 'ai'" />
    <li-detail v-if="detailType === 'li'" />
    <advisor-rec-dialog :value="showRec" @close="pageBack" />
  </div>
</template>

<script>
import ciiDetail from "./CIIDetail";
import miDetail from "./MIDetail";
import liDetail from "./LIDetail";
import aiDetail from "./AIDetail";
import AdvisorRecDialog from "./modules/AdvisorRecDialog";
import { getCulOrder } from "@/api/consultant";
import localStorage from "@/service/localStorage";
import { isXyqb } from "@/service/validation";
import { mapActions, mapState } from "vuex";

export default {
  name: "GoodsDetail",
  components: {
    ciiDetail,
    miDetail,
    aiDetail,
    liDetail,
    AdvisorRecDialog
  },
  data() {
    return {
      detailType: "",
      showRec: false,
      noOrder: true,
      userClickState: false,
      userBackState: false
    };
  },
  beforeRouteLeave(to, from, next) {
    const blackList = ["Goods", "Home", "Detail", "ConsultantPlan", "User"];
    if (isXyqb && this.showAuthXyqb == 2) {
      next(false);
      return;
    }
    if (this.noOrder && !this.userClickState && blackList.includes(to.name)) {
      this.showRec = true;
      next(false);
    } else {
      next();
    }
  },
  mounted() {
    this.getOrderInfo();
    this.detailType = this.$route.query.type;
  },
  computed: {
    ...mapState(["showAuthXyqb"])
  },
  methods: {
    ...mapActions(["setAuthXyqb"]),
    async getOrderInfo() {
      const isLogin = localStorage.get("mongoToken");
      if (!isLogin) {
        this.noOrder = true;
        return;
      }
      const res = await getCulOrder();
      this.noOrder = res[0] && res[0].state && res[0].state <= 2;
    },
    pageBack(e) {
      this.showRec = false;
      this.userClickState = true;
      if (e === 2) {
        this.$router.replace({ path: "/consultant" });
      }
    }
  }
};
</script>
