<template>
  <drawer v-if="!hideSetting" v-model="showSetting" placement="right">
    <div slot="handler" class="setting">
      <a-icon :type="showSetting ? 'close' : 'setting'" />
    </div>
    <setting />
  </drawer>
</template>

<script>
import { mapState } from "vuex";
import Drawer from "@/components/tool/Drawer";
import Setting from "./ThemeSetting";

export default {
  components: { Setting, Drawer },
  inject: ["defaultLayout"],
  data() {
    return {
      showSetting: false,
    };
  },
  computed: {
    ...mapState("setting", [
      "isMobile",
      "theme",
      "layout",
      "fixedHeader",
      "fixedSideBar",
      "fixedTabs",
      "hideSetting",
      "multiPage",
    ]),
  },
};
</script>

<style lang="less" scoped>
@import (optional, once) "@/theme";
.app {
  .setting {
    background-color: @primary-color;
    color: @base-bg-color;
    border-radius: 5px 0 0 5px;
    line-height: 40px;
    font-size: 22px;
    width: 40px;
    height: 40px;
    box-shadow: -2px 0 8px @shadow-color;
  }
}
</style>
