<template>
    <scrollBar left="24px" top="10px" right="24px">
        <div class="pageStyle">
            <div class="row1">
                整体风格设置
            </div>
            <div class="stylPreview">
                <div class="item" @click="changeTheme(item.value)" :class="[`item_${item.id}`,{active:themeName == item.value}]" v-for="item,index in themeList" :key="item.id">
                    <div class="iconBox">
                        <el-icon><Check /></el-icon>
                    </div>
                </div>
            </div>
            <div class="row1 mar_t_10">
                主题色
            </div>
            <div class="themeColors">
                <el-tooltip  v-for="item,index in themeColorList" :key="item.id" :open-delay="200" effect="dark" :content="item.name" placement="top">
                    <div class="item" @click="changeThemeColor(item.value)" :class="{active:themeColor == item.value}" :style="`background-color:${item.color}`">
                        <div class="iconBox">
                            <el-icon><Check /></el-icon>
                        </div>
                    </div>
                </el-tooltip>
            </div>
            <el-divider></el-divider>
            <div class="row1 mar_t_10">
                内容区域
            </div>
            <!-- <div class="flex aic jcb pad_t_10 pad_b_10">
                <div>水印</div>
                <div>
                    <el-switch @change="(val)=>{themeStore.setTheme('watermarkShow',val)}" v-model="themeConfig.watermarkShow"></el-switch>
                </div>
            </div> -->
            <div class="flex aic jcb pad_t_10 pad_b_10">
                <div>面包屑</div>
                <div>
                    <el-switch  @change="(val)=>{themeStore.setTheme('breadcrumbShow',val)}" v-model="themeConfig.breadcrumbShow"></el-switch>
                </div>
            </div>
            <div class="flex aic jcb pad_t_10 pad_b_10">
                <div>页面选项卡</div>
                <div>
                    <el-switch v-model="routeTabsShow" @change="tabsChange"></el-switch>
                </div>
            </div>
        </div>
        
    </scrollBar>
</template>

<script>
import { useTheme } from "@/store/theme";
import { ElMessageBox } from 'element-plus'
    export default {
        props:['wrapStyle_dialog'],
        data(){
            return {
                themeList:[
                    {
                        name:"默认",
                        id:"1",
                        value:"default",
                        img:"pageStyle_1.png"
                    },
                    {
                        name:"深蓝",
                        id:"2",
                        value:"shenlan",
                        img:"pageStyle_2.png"
                    },
                    {
                        name:"海蓝",
                        id:"3",
                        value:"hailan",
                        img:"pageStyle_3.png"
                    },
                    // {
                    //     name:"绿",
                    //     id:"4",
                    //     value:"lv"
                    // },
                ],

                themeColorList:[
                    {
                        name:"拂晓蓝（默认）",
                        value:"lan",
                        id:1,
                        color:"#1890ff"
                    },
                    {
                        name:"薄暮",
                        value:"hong",
                        id:2,
                        color:"#f5222d"
                    },
                    {
                        name:"火山",
                        value:"cheng",
                        id:3,
                        color:"#fb551b"
                    },
                    {
                        name:"日暮",
                        value:"huang",
                        id:4,
                        color:"#fa8c16"
                    },
                    {
                        name:"明青",
                        value:"qing",
                        id:5,
                        color:"#15c3c1"
                    },
                    {
                        name:"极光绿",
                        value:"lv",
                        id:6,
                        color:"#52c41a"
                    },
                    {
                        name:"极客蓝",
                        value:"shenaln",
                        id:7,
                        color:"#2f54eb"
                    },
                    {
                        name:"酱紫",
                        value:"zi",
                        id:8,
                        color:"#722ed1"
                    },
                ],
                themeStore:{},
                themeConfig:{},

                routeTabsShow:false,
            }
        },
        created(){
            const themeStore = useTheme()
            this.themeStore = themeStore;
            this.themeConfig = themeStore.themeConfig;
            this.routeTabsShow = themeStore.themeConfig.routeTabsShow
            
        },
        computed:{
            themeName(){
                return this.themeConfig.themeName
            },
            themeColor(){
                return this.themeConfig.themeColor
            },
        },
        methods:{
            changeTheme(value){
                window.document.body.setAttribute('data-theme', value)
                this.themeStore.setTheme('themeName',value)
            },
            changeThemeColor(value){
                window.document.body.setAttribute('data-theme-color', value)
                this.themeStore.setTheme('themeColor',value)
            },
            tabsChange(val){
                ElMessageBox.confirm('修改后需要刷新浏览器，确定修改吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    window.location.reload()
                    this.themeStore.setTheme('routeTabsShow',val)

                }).catch(() => {
                    this.routeTabsShow = !val;
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
.pageStyle{
    position: relative;
    .row1{
        padding: 10px 0;
        // padding: 10px 0 5px 0;
        font-weight: bold;
    }
    .stylPreview{
        display: flex;
        padding: 10px 0;
        .item{
            position: relative;
            width: 64px;
            height: 48px;
            margin-right: 16px;
            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
            cursor: pointer;
            .iconBox{
                display: none;
                color: #1890ff ;
                font-size: 20px;
                width: 20px;
                height: 20px;
                position: absolute;
                left: 30px;
                top: 22px;
            }
            &.active .iconBox{
                display: block;
            }
            &.item_1{
                background-image: url("gy-webcode3/img/theme/pageStyle_2.png");
            }
            &.item_2{
                background-image: url("gy-webcode3/img/theme/pageStyle_1.png");
            }
            &.item_3{
                background-image: url("gy-webcode3/img/theme/pageStyle_3.png");
            }
        }
    }
    .themeColors{
        display: flex;
        padding: 10px 0;
        .item{
            width: 20px;
            height: 20px;
            background: #000;
            border-radius: 4px;
            margin-right: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            line-height: 20px;
            color: #fff;
            font-size: 12px;
            cursor: pointer;
            .iconBox{
                display: none;   
                
            }
            &.active .iconBox{
                // display: block;
                display: flex;
                align-items: center;
                justify-self: center;
            }
        }
    }

}
</style>