<template>
    <section class="u-skins">
        <el-dropdown>
            <div class="u-skins__base">
                <i class="u-skins__base-icon"></i>
                <span class="u-skins__base-name">换肤</span>
            </div>
            <el-dropdown-menu slot="dropdown">
                <ul class="u-skins__list" :style="skinStyle">
                    <li
                        class="u-skins__item"
                        v-for="(item, index) in options"
                        :key="index"
                        :class="[themeSkin === item.fileName ? 'is-active' : '']"
                        @click="changeStyleSheetByTheme(item.fileName)"
                    >
                        <i class="el-icon-bank-card"></i>
                        <span>{{ item.name }}</span>
                    </li>
                </ul>
            </el-dropdown-menu>
        </el-dropdown>
    </section>
</template>

<script>
// Cookie Function
import Cookie from "js-cookie";

export default {
    name: "DuiSkins",
    props: {
        options: {
            // 皮肤样式列表
            type: Array,
            default() {
                return [
                    {
                        name: "深蓝色",
                        fileName: "theme-dark",
                        background: "#002946"
                    },
                    {
                        name: "浅蓝色",
                        fileName: "theme-blue",
                        background: "#2991d9"
                    },
                    {
                        name: "浅绿色",
                        fileName: "theme-green",
                        background: "#40a1c3"
                    }
                ];
            }
        },
        currentSkin: {
            // 默认皮肤样式 [compare to the options's param -> fileName]
            type: String,
            default: "theme-blue",
            required: false
        },
        isCookie: {
            // 开启记录 Cookie
            type: Boolean,
            default: false,
            required: false
        },
        cookieOption: {
            // Cookie 配置
            type: Object,
            default() {
                return {
                    name: "uiSkinName", // Cookie 名称
                    expires: 1, // Cookie 过期时间（单位：天）
                    path: "/", // Cookie 路径
                    domain: "", // 域名
                    secure: false // 安全性验证
                };
            },
            required: false
        },
        defaultUrl: {
            // 默认文件路径
            type: String,
            default: "./static/themes/style/",
            required: false
        }
    },
    data() {
        return {
            checkedCookieConfig: {
                // 检测后的配置值
                name: "uiSkinName", // Cookie 名称
                expires: 1, // Cookie 过期时间（单位：天）
                path: "/", // Cookie 路径
                domain: "", // 域名
                secure: true // 安全性验证
            },
            themeSkin: ""
        };
    },
    computed: {
        skinStyle() {
            return {
                width: this.options.length * 50 + "px"
            };
        }
    },
    methods: {
        // 初始化皮肤样式表
        initStyleSheetTheme() {
            // 初始化当前的皮肤
            this.themeSkin = this.currentSkin;

            // 检测是否开启 Cookie 值判断
            if (this.isCookie) {
                // 检测 Cookie 的配置值
                this.checkCookieConfig();

                // 读取 Cookie 值
                let _cookieValue = Cookie.get(this.checkedCookieConfig.name);

                // 检测是否有取到 Cookie 值
                if (_cookieValue) {
                    // 更迭皮肤样式表
                    this.changeStyleSheetByTheme(_cookieValue);

                    // 记录 Cookie
                    this.recordCookie(_cookieValue);
                } else {
                    // 更迭皮肤样式表
                    this.changeStyleSheetByTheme(this.currentSkin);

                    // 记录 Cookie
                    this.recordCookie(this.currentSkin);
                }
            } else {
                // 更迭皮肤样式表
                this.changeStyleSheetByTheme(this.currentSkin);
            }
        },
        // 更迭皮肤样式表
        changeStyleSheetByTheme(_theme) {
            // 样式文件路径
            const newSheetPath = this.defaultUrl + _theme + ".css";

            // 构建样式表
            let addSheet = window.document.createElement("link");
            addSheet.setAttribute("rel", "stylesheet");
            addSheet.setAttribute("href", newSheetPath);

            // 动态追加样式表
            window.document.head.appendChild(addSheet);

            // 删除前面的主题元素，只保留两个，后期看是否可一个TODO
            let els = window.document.head.querySelectorAll("[href*='theme']");
            for (let i = 0; i < els.length - 2; i++) {
                els[i].remove();
            }

            // 记录 Cookie
            this.recordCookie(_theme);

            // 更换当前变量
            this.themeSkin = _theme;
        },
        // 检测 Cookie 配置值
        checkCookieConfig() {
            // 检测 Cookie 名称
            this.checkedCookieConfig.name = this.cookieOption.name ? this.cookieOption.name : "uiSkinName";

            // 检测 Cookie 过期天数
            this.checkedCookieConfig.expires = this.cookieOption.expires ? this.cookieOption.expires : 1;

            // 检测 Cookie 路径
            this.checkedCookieConfig.path = this.cookieOption.path ? this.cookieOption.path : "/";

            // 检测 Cookie 域名
            this.checkedCookieConfig.domain = this.cookieOption.domain;

            // 检测 Cookie 安全性
            this.checkedCookieConfig.secure = this.cookieOption.secure;
        },
        // 记录 Cookie
        recordCookie(_value) {
            // 检测是否开启 Cookie 值判断
            if (this.isCookie) {
                // 保存 Cookie 值
                Cookie.set(this.checkedCookieConfig.name, _value, {
                    expires: this.checkedCookieConfig.expires,
                    path: this.checkedCookieConfig.path,
                    domain: this.checkedCookieConfig.domain,
                    secure: this.checkedCookieConfig.secure
                });
            }
        },
        // 删除 Cookie
        deleteCookie() {
            // 检测是否开启 Cookie 值判断
            if (this.isCookie) {
                // 删除 Cookie 值
                Cookie.remove(this.checkedCookieConfig.name);
            }
        }
    },
    mounted() {
        // 初始化皮肤样式表
        this.initStyleSheetTheme();
    }
};
</script>
