<template>
  <el-divider content-position="left">界面显示</el-divider>
  <div class="flex-between">
    <div>侧边栏 Logo</div>
    <div>
      <el-switch
        v-model="themeConfig.isShowLogo"
        @change="handleInterfaceAppearsChange"
      ></el-switch>
    </div>
  </div>
  <div class="flex-between">
    <div>开启 Breadcrumb</div>
    <div>
      <el-switch
        v-model="themeConfig.isBreadcrumb"
        @change="handleInterfaceAppearsChange"
      ></el-switch>
    </div>
  </div>
  <div class="flex-between">
    <div>开启 Breadcrumb 图标</div>
    <div>
      <el-switch
        v-model="themeConfig.isBreadcrumbIcon"
        @change="handleInterfaceAppearsChange"
      ></el-switch>
    </div>
  </div>
  <div class="flex-between">
    <div>开启 Tagsview</div>
    <div>
      <el-switch
        v-model="themeConfig.isTagsview"
        @change="handleInterfaceAppearsChange"
      ></el-switch>
    </div>
  </div>
  <div class="flex-between">
    <div>开启 Tagsview 图标</div>
    <div>
      <el-switch
        v-model="themeConfig.isTagsviewIcon"
        @change="handleInterfaceAppearsChange"
      ></el-switch>
    </div>
  </div>
  <div class="flex-between">
    <div>开启 TagsView 缓存</div>
    <div>
      <el-switch
        v-model="themeConfig.isCacheTagsView"
        @change="handleInterfaceAppearsChange"
      ></el-switch>
    </div>
  </div>
  <div class="flex-between">
    <div>开启 TagsView 拖拽</div>
    <div>
      <el-switch
        v-model="themeConfig.isSortableTagsView"
        @change="handleInterfaceAppearsChange"
      ></el-switch>
    </div>
  </div>
  <div class="flex-between">
    <div>开启 Footer</div>
    <div>
      <el-switch
        v-model="themeConfig.isFooter"
        @change="handleInterfaceAppearsChange"
      ></el-switch>
    </div>
  </div>
  <div class="flex-between">
    <div>灰色模式</div>
    <div>
      <el-switch
        v-model="themeConfig.isGrayscale"
        @change="handleAddFilterChange('grayscale')"
      ></el-switch>
    </div>
  </div>
  <div class="flex-between">
    <div>色弱模式</div>
    <div>
      <el-switch
        v-model="themeConfig.isInvert"
        @change="handleAddFilterChange('invert')"
      ></el-switch>
    </div>
  </div>
  <div class="flex-between">
    <div>开启水印</div>
    <div>
      <el-switch
        v-model="themeConfig.isWartermark"
        @change="handleWartermarkChange"
      ></el-switch>
    </div>
  </div>
  <div class="flex-between">
    <div>水印文案</div>
    <div>
      <el-input
        v-model="themeConfig.wartermarkText"
        size="mini"
        style="width: 90px"
        @change="handleWartermarkTextInput"
      ></el-input>
    </div>
  </div>
</template>

script
<script lang="ts">
import { defineComponent, computed } from "vue";
import { useStore } from "@/hooks/useStore";
import { setLocalThemeConfig } from "@/utils/theme";
import watermask from "@/utils/watermask";
import { verifyAndSpace } from "@/utils/toolsValidate";

export default defineComponent({
  name: "interface-appears",

  setup() {
    const store = useStore();
    const themeConfig = computed(() => {
      return store.state.themeConfig;
    });
    /**
     * 本地保留界面显示设置
     */
    const handleInterfaceAppearsChange = () => {
      setLocalThemeConfig(themeConfig.value);
    };

    /**
     * 设置灰色模式/色弱模式
     * @param attr 模式名称
     */
    const handleAddFilterChange = (attr: string) => {
      if (attr === "grayscale") {
        if (themeConfig.value.isGrayscale) themeConfig.value.isInvert = false;
      } else {
        if (themeConfig.value.isInvert) themeConfig.value.isGrayscale = false;
      }
      const cssAttr =
        attr === "grayscale"
          ? `grayscale(${themeConfig.value.isGrayscale ? 1 : 0})`
          : `invert(${themeConfig.value.isInvert ? "80%" : "0%"})`;
      const appEle: any = document.body;
      appEle.setAttribute("style", `filter: ${cssAttr}`);
      handleInterfaceAppearsChange();
    };
    /**
     * 是否开启水印
     */
    const handleWartermarkChange = () => {
      themeConfig.value.isWartermark
        ? watermask.set(themeConfig.value.wartermarkText)
        : watermask.del();
      handleInterfaceAppearsChange();
    };
    /**
     * 设置水印文案
     */
    const handleWartermarkTextInput = (val: string) => {
      themeConfig.value.wartermarkText = verifyAndSpace(val);
      if (themeConfig.value.wartermarkText === "") return false;
      if (themeConfig.value.isWartermark)
        watermask.set(themeConfig.value.wartermarkText);
      handleInterfaceAppearsChange();
    };

    return {
      themeConfig,
      handleInterfaceAppearsChange,
      handleAddFilterChange,
      handleWartermarkChange,
      handleWartermarkTextInput,
    };
  },
});
</script>

<style lang="scss" scoped>
.flex-between {
  display: flex;
  justify-content: space-between;
  margin: 15px 0;
}
</style>
