<template>
  <el-divider content-position="left">其它设置</el-divider>
  <div class="flex-between">
    <div>Tagsview 风格</div>
    <div>
      <el-select
        v-model="themeConfig.tagsStyle"
        placeholder="请选择"
        size="mini"
        style="width: 90px"
        @change="handleThemeConfigChange"
      >
        <el-option label="风格1" value="tags-style-one"></el-option>
        <el-option label="风格2" value="tags-style-two"></el-option>
        <el-option label="风格3" value="tags-style-three"></el-option>
        <el-option label="风格4" value="tags-style-four"></el-option>
      </el-select>
    </div>
  </div>
  <div class="flex-between">
    <div>主页面切换动画</div>
    <div>
      <el-select
        v-model="themeConfig.animation"
        placeholder="请选择"
        size="mini"
        style="width: 90px"
        @change="handleThemeConfigChange"
      >
        <el-option label="slide-right" value="slide-right"></el-option>
        <el-option label="slide-left" value="slide-left"></el-option>
        <el-option label="opacitys" value="opacitys"></el-option>
      </el-select>
    </div>
  </div>
  <div class="flex-between">
    <div>分栏高亮风格</div>
    <div>
      <el-select
        v-model="themeConfig.columnsAsideStyle"
        placeholder="请选择"
        size="mini"
        style="width: 90px"
        @change="handleThemeConfigChange"
      >
        <el-option label="圆角" value="columns-round"></el-option>
        <el-option label="卡片" value="columns-card"></el-option>
      </el-select>
    </div>
  </div>
  <div class="flex-between">
    <div>分栏布局风格</div>
    <div>
      <el-select
        placeholder="请选择"
        size="mini"
        style="width: 90px"
        v-model="themeConfig.columnsAsideLayout"
        @change="handleThemeConfigChange"
      >
        <el-option label="水平" value="columns-horizontal"></el-option>
        <el-option label="垂直" value="columns-vertical"></el-option>
      </el-select>
    </div>
  </div>
</template>

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

export default defineComponent({
  name: "others-theme",

  setup: () => {
    const store = useStore();
    const themeConfig = computed(() => {
      return store.state.themeConfig;
    });

    const handleThemeConfigChange = () => {
      setLocalThemeConfig(themeConfig.value);
    };

    return {
      themeConfig,
      handleThemeConfigChange,
    };
  },
});
</script>

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