<template>
  <div class="display-detail">
    <BlueStyle
      v-if="displayDetail.themeType == '1'"
      :displayDetail="displayDetail"
      :dicts="dicts"
      @reload="loadDetail"
    />
    <ChStyle
      v-if="displayDetail.themeType == '2'"
      :displayDetail="displayDetail"
      :dicts="dicts"
      @reload="loadDetail"
    />
    <RedStyle
      v-if="displayDetail.themeType == '3'"
      :displayDetail="displayDetail"
      :dicts="dicts"
      @reload="loadDetail"
    />
  </div>
</template>

<script>
import BlueStyle from "./components/BlueStyle.vue";
// import NormalStyle from "./components/NormalStyle.vue";
import ChStyle from "./components/ChStyle.vue";
import RedStyle from "./components/RedStyle.vue";
import { getDisplayById } from "@/api/display";
import { mapGetters } from "vuex";
export default {
  components: {
    BlueStyle,
    ChStyle,
    RedStyle,
  },

  data() {
    return {
      displayDetail: {},
    };
  },
  computed: {
    ...mapGetters(["dicts"]),
  },
  async mounted() {
    await this.$store.dispatch("dict/getDictList", [
      "displayType",
      "displayCharacter",
    ]);
    this.loadDetail();
  },

  methods: {
    async loadDetail() {
      const { exhibitionId } = this.$route.params;
      console.log(exhibitionId);
      if (exhibitionId) {
        let res = await getDisplayById({ exhibitionId });
        if (res.code == 0) {
          this.displayDetail = res.data;
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>