<template>
  <div :class="['code-wrap', theme]">
    <div class="code-header">
      <div class="code-header-logo">
        <router-link to="/">
          <img src="@/assets/images/theme.svg" />
          <h1>{{ brandName }}</h1>
        </router-link>
        <span v-if="themeName" class="theme-name"> / {{ themeName }}</span>
      </div>

      <div class="code-header-right" style="display: block">
        <span style="margin-left: 10px; color: #fff; font-size: 14px"
          >警告：模板编辑需要专业技术人员，请修改前做好模板备份。因操作不当导致数据丢失，责任自负。</span
        >
      </div>
    </div>
    <transition>
      <router-view />
    </transition>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import config from "@/config";
import { getBrandApi } from "@/api/code";

export default {
  data() {
    return {
      themeArr: config.themeList,
      themeFilterArr: [],
      themeSearch: "",
      themeName: "",
      brandName: "",
    };
  },
  created() {
    this.themeName = this.$route.params.theme;
    this.getBrandInfo();
  },
  computed: {
    ...mapGetters(["theme"]),
  },
  watch: {
    themeSearch(v) {
      this.filterThemeArr(v);
    },
    $route(v) {
      this.themeName = v.params.theme;
    },
  },
  mounted() {
    window.addEventListener("keydown", this.escKeydown);
    this.filterThemeArr();
  },
  destroyed() {
    window.removeEventListener("keydown", this.escKeydown);
  },
  methods: {
    async getBrandInfo() {
      const res = await getBrandApi();
      if (res.status === "success") {
        this.brandName = res.data;
      }
    },
    escKeydown(e) {
      if (e.keyCode === 27) this.themeDialog = false;
    },
    filterThemeArr(v) {
      if (!v) {
        this.themeFilterArr = this.$_.cloneDeep(this.themeArr);
        return;
      }
      this.themeFilterArr = this.themeArr.filter(
        (item) => item.title.indexOf(v) > -1
      );
    },
    chooseTheme(v) {
      this.$store.commit("SET_THEME", v);
      this.themeDialog = false;
    },
  },
};
</script>

<style></style>
