<template>
  <div>
    <buy v-if="orderState === 1" />
    <success v-if="orderState === 2 && isLogin && !showQuestion" />
    <exclusive
      v-if="(orderState === 3 || orderState === 4) && isLogin"
      :has-suggestion="orderState === 4"
    />
    <question v-if="showQuestion && isLogin" />
    <tabbar />
  </div>
</template>

<script>
import Tabbar from "@/components/Tabbar";

import Buy from "./Buy";
import Success from "./Success";
import Question from "./Question";
import Exclusive from "./Exclusive";
import { mapState } from "vuex";
import localStorage from "@/service/localStorage";
import { getCulOrder } from "@/api/consultant";
export default {
  name: "Consultant",
  components: {
    Tabbar,
    Buy,
    Success,
    Exclusive,
    Question
  },
  data() {
    return {
      isLogin: localStorage.get("mongoToken"),
      showQuestion: false,
      orderInfo: [
        {
          consultantOrderNo: "",
          state: 1
        }
      ]
    };
  },
  computed: {
    orderState() {
      return this.orderInfo[0].state;
    },
    ...mapState(["isShowLogin"])
  },
  watch: {
    isShowLogin(val) {
      if (!val) {
        this.isLogin = localStorage.get("mongoToken");
      }
    }
  },
  mounted() {
    this.getOrderInfo();
  },
  methods: {
    async getOrderInfo() {
      if (!this.isLogin) return;
      this.showQuestion = false;
      const res = await getCulOrder();
      if (res) {
        this.orderInfo = res;
      }
    },
    changeQuestion() {
      this.showQuestion = true;
    }
  }
};
</script>
