<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" />
    <instruction-modal v-model="showInstruction" :items="items" />
  </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";
import InstructionModal from "./modules/InstructionModal";
import goodsList from "@/api/goodsList.mock";
import { isBack } from "@/service/routerStorage";

const items = [
  { title: "投保操作记录", content: "方便回溯管理让用户更放心" },
  { title: "保险条款阅读", content: "请仔细阅读保险条款与" },
  { title: "合作公司披露", content: "" }
];

export default {
  name: "GoodsDetail",
  components: {
    ciiDetail,
    miDetail,
    aiDetail,
    liDetail,
    AdvisorRecDialog,
    InstructionModal
  },
  data() {
    return {
      detailType: "",
      showRec: false,
      noOrder: true,
      userClickState: false,
      userBackState: false,
      showInstruction: true,
      items
    };
  },
  created() {
    this.items[2].content =
      goodsList.find(goods => goods.id === this.$route.query.id)?.company_name || "";
    if (isBack("/goods/customer-notification")) this.showInstruction = false;
  },
  computed: {
    ...mapState(["showAuthXyqb"])
  },
  beforeRouteLeave(to, from, next) {
    const blackList = ["Goods", "Home", "Detail", "ConsultantPlan", "User"];
    this.showInstruction = false;
    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.setDetailType();
  },
  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" });
      }
    },
    setDetailType() {
      const _id = this.$route.query.id;
      let detailType = "";
      switch (_id) {
        case "HTDQZJX001":
          detailType = "cii";
          break;
        case "TKYLX001":
          detailType = "mi";
          break;
        case "ZAYWX001":
          detailType = "ai";
          break;
        case "HGSX001":
          detailType = "li";
          break;
        default:
          break;
      }
      this.detailType = detailType;
    }
  }
};
</script>
