<template>
    <div class="custome-theme" style="">
        <el-tabs type="border-card" v-model="activeTabName">
            <el-tab-pane label="设计" name="design">
                <el-form :model="form" label-width="150px" label-position="top">
                    <el-form-item :label="item" v-for="(item , i) in Object.keys(form)" :key="i">
                        <el-autocomplete maxlength="20" v-model="form[item]" :fetch-suggestions="querySearch"
                            @input="handleView" />
                        <div class="padding-lr">
                            <el-color-picker v-model="form[item]" :predefine="values" @change="handleView" show-alpha
                                color-format="hex" />
                        </div>
                        <div :style="`background-color:${form[item]};color:${form[item]};width:100px;`"
                            class="padding-lr solid text-cut">{{"#"+form[item]}}</div>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleSave">保存</el-button>
                        <el-button @click="handleReset">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="代码" name="code">
                <code v-copy="code">{{code}}</code>
                <!-- <textarea rows="60" style="width:100%">{{code}}</textarea> -->
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import { camelTo, setThemeColor } from "@/utils/index";
const store = useStore();
const { proxy } = getCurrentInstance();


let defaultValues = {
    "elColorPrimary": "",
    "mixColor": "",
    "elMenuBgColor": "",
    "elMenuTextColor": "",
    "backgroundColor": "",
    "elBgColorPage": "",
    "elBgColor": "",
    "elBgColorOverlay": "",
    "elFillColorDarker": "",
    "elFillColorDark": "",
    "elFillColor": "",
    "elFillColorLight": "",
    "elFillColorLighter": "",
    "elFillColorExtraLight": "",
    "elFillColorBlank": "",
    "elMaskColorExtraLight": "",
    "elTextColorPrimary": "",
    "elTextColorRegular": "",
    "elTextColorSecondary": "",
    "elTextColorPlaceholder": "",
    "elTextColorDisabled": "",
    "elBorderColorDarker": "",
    "elBorderColorDark": "",
    "elBorderColor": "",
    "elBorderColorLight": "",
    "elBorderColorLighter": "",
    "elBorderColorExtraLight": "",
}

const predefineColors = ref([
    // "#409EFF",
	"#20A884",
    "#ff4500",
    "#ff8c00",
    "#ffd700",
    "#90ee90",
    "#00ced1",
    "#1e90ff",
    "#c71585",
]);

const form = ref({});
const activeTabName = ref('design');

watch(() => store.state.settings.theme, (newValue) => {
   // console.log(newValue)
    form.value["elColorPrimary"] = newValue;
})


const values = computed(() =>
    Array.from(new Set(Object.values(form.value)))
)

const code = computed(() =>
    Object.keys(form.value).map(item => {
        let key = camelTo(item, "-")
        let value = (form.value[item] + '').trim();
        return value == 'null' || value == '' ? `` : `el.style.setProperty("--${key}", "${value}");\n`
        // el.style.setProperty("--" + key, value);
    }).join("")
    + (form.value['backgroundColor'] == 'null' || form.value['backgroundColor'] == '' ? `` : `el.style.setProperty("background-color", "${form.value['backgroundColor']}");\n`)
    + (form.value['elColorPrimary'] == 'null' || form.value['elColorPrimary'] == '' ? `` : `store.dispatch("settings/changeSetting", { key: "theme", value: "${form.value['elColorPrimary']}",});\n`)
    + (form.value['elColorPrimary'] == 'null' || form.value['elColorPrimary'] == '' ? `` : `setThemeColor("${form.value['elColorPrimary']}", "${form.value['mixColor']}");\n`)
    // + `localStorage.setItem("color-setting", '${JSON.stringify(form.value)}');`
)

const handleView = () => {
    const el = document.documentElement;
    let keys = Object.keys(form.value);
    //// console.log(keys)
    keys.map(item => {
        let key = camelTo(item, "-")
        let value = form.value[item]
        el.style.setProperty("--" + key, value);
    })
    el.style.setProperty("background-color", form.value["backgroundColor"]);
    if (form.value["elColorPrimary"] != null) {
        store.dispatch("settings/changeSetting", {
            key: "theme",
            value: form.value["elColorPrimary"],
        });
        if (form.value["mixColor"] != null && (form.value["mixColor"] + "").trim().length != 0) {
            setThemeColor(form.value["elColorPrimary"], form.value["mixColor"]);
        } else {
            setThemeColor(form.value["elColorPrimary"]);
        }
    }
}

const handleSave = () => {
    localStorage.setItem("color-setting", JSON.stringify(form.value));
    proxy.$modal.success("保存成功")
}

const handleCancle = () => {
   // console.log(defaultValues)
    form.value = defaultValues;
    handleView();
}

const handleReset = () => {
    form.value = JSON.parse(JSON.stringify(defaultValues));
    form.value["elColorPrimary"] = "#20A884";
    form.value["elMenuBgColor"] = "#20A884",
    form.value["elMenuTextColor"] = "#bfcbd9";
    handleView();
}

const querySearch = (queryString, cb) => {
   // console.log(queryString)
   // console.log(values.value)
    const results = queryString != 'null'
        ? values.value.filter(item => typeof item.value == 'string' && item.indexOf(queryString) != -1)
        : values.value
   // console.log(results)
    cb(results)
}

const initialData = () => {
    const el = document.documentElement;
    let keys = Object.keys(defaultValues);
    keys.map(item => {
        let key = camelTo(item, "-")
        let value = el.style.getPropertyValue("--" + key)
        form.value[item] = value
    })
    form.value["backgroundColor"] = el.style.getPropertyValue("background-color");
}


onActivated(() => {
   // console.log("results")
})

initialData();
</script>

