<template>
    <div class="theme-box bg-white rounded light-shadow">
        <div class="q-pa-md row items-center">
            <div class="text-h6 col">选择预设样式</div>
            <el-button link type="primary" @click="()=>closeHandler()">
                <el-icon style="margin-right: 5px;font-size: 16px;"><Close /></el-icon>
            </el-button>
        </div>
        <el-scrollbar class="q-pa-md full-width" max-height="50vh">
            <div class="theme-items rounded q-mb-md" v-for="x in themes">
                <img :src="x.url" />
                <div class="overlayer column flex-center items-center">
                    <div class="pingfangr text-center" style="font-size: 28px;color: #f5f5f5;">{{ x.label }}</div>
                    <el-button type="primary q-mt-md" @click="()=>setThemeHandler(x.style?x.style:null)">使用这个主题</el-button>
                </div>
            </div>
        </el-scrollbar>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import UseThemeConfig from './UseThemeConfig'
import { Close } from '@element-plus/icons-vue'

const emit = defineEmits<{
  (event: 'close'): void,
  (event: 'change',playload:any): void
}>()

const {themes,setTheme } = UseThemeConfig();

const setThemeHandler = (t:any)=>{
    setTheme(t)
    emit('change',t)
}

const closeHandler = ()=>{
    emit('close')
}
</script>
<style>
.theme-box {
    position: absolute;
    z-index: 9;
    top: 5px;
    right: 5px;
    width: 480px;
    max-height: 80vh;
    overflow-y: auto;
}
.theme-box .theme-items{
    overflow: hidden;
    position: relative;
}
.theme-box .theme-items .overlayer{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    display: none;
}
.theme-box .theme-items:hover .overlayer{
    display: flex;
}
.theme-box .theme-items img{
    width: 100%;
    height: auto;
}
</style>