<template>
  <div>
    <buy v-if="orderState <= 2" :state="orderState" />
    <success v-if="orderState === 3 && isLogin && !showQuestion" />
    <exclusive
      v-if="(orderState === 4 || orderState === 5) && isLogin"
      :has-suggestion="orderState === 5"
    />
    <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: 0
        }
      ]
    };
  },
  computed: {
    orderState() {
      return this.orderInfo[0] ? this.orderInfo[0].state : 0;
    },
    ...mapState(["isShowLogin"])
  },
  watch: {
    isShowLogin(val) {
      if (!val) {
        this.isLogin = localStorage.get("mongoToken");
        this.getOrderInfo();
      }
    }
  },
  mounted() {
    this.getOrderInfo();
  },
  methods: {
    // 1-待支付,3-支付成功,4-问卷收集完成，方案配置中,5-方案配置完成,  -1 -支付失败订单关闭,-2 -支付超过1小时订单关闭,-3 -订单关闭
    async getOrderInfo() {
      if (!this.isLogin) return;
      this.showQuestion = false;
      const res = await getCulOrder();
      if (res) {
        this.orderInfo = res;
        this.$forceUpdate();
      }
    },
    changeQuestion() {
      this.showQuestion = true;
    }
  }
};
</script>
