<!-- 全局设置：设置 theme 主题 -->
<template>
    <el-divider content-position="left">主题色调</el-divider>
    <div style="padding-top: 5px; padding-bottom: 20px">
        <el-tooltip
            v-for="item in state.themeList"
            :key="item.tcs"
            :content="item.name"
            :hide-after="0">
            <div
                class="theme-legend"
                :class="['theme-legend-' + item.tcs, (item.tcs === themeStore.theme ? 'theme-legend-active' : '')]"
                :style="{backgroundColor: item.legend}"
                @click="themeStore.theme = item.tcs">
                <el-icon><el-icon-Check /></el-icon>
            </div>
        </el-tooltip>
    </div>
</template>

<script setup name="com-setting-theme">
import {useThemeStore} from "../../../store/theme";
import {reactive} from "vue";

const themeStore = useThemeStore();

/* 所有主题
  {
    tcs: 'blue',  // 主题类
    legend: '#2d8cf0'   // 色块颜色
  },
 */
const state = reactive({
    themeList: [
        {tcs: 'blue', legend: '#2d8cf0', name: '蓝色'},
        {tcs: 'green', legend: '#009688', name: '绿色'},
        {tcs: 'red', legend: '#dd4949', name: '红色'},
        {tcs: 'purple', legend: '#A906B3', name: '紫色'},
        {tcs: 'tit', legend: '#805322', name: '钛合金'},
        {tcs: 'ash', legend: '#4e5465', name: '沉淀灰'},
        {tcs: 'dark-green', legend: '#73d13d', name: '简约草绿'},
        {tcs: 'white', legend: '#fff', name: '简约白'},
    ]
})


</script>

<style scoped lang="scss">

/* 主题色 */
.theme-legend{
  width: 18px;
  height: 18px;
  display: inline-block;
  border-radius: 1px;
  cursor: pointer;
  margin-right: 6px;
  margin-bottom: 6px;
  line-height: 23px;
  text-align: center;
  color: transparent;
  border: 1px transparent solid;
}
.theme-legend-active{
  color: #FFF;
  border: 1px #009688 solid !important;
}
// 白色主题调整一下色块显示，不然看不见
.theme-legend-white{border: 1px #ccc solid;}
.theme-legend-white.theme-legend-active{color: #009688}

</style>
