<template>
    <el-dialog
            title="系统配置"
            :visible.sync="dialogStatus"
            :close-on-click-modal="false"
            :modal="false"
            @close="configThemeClose"
            class="response-tip-dialog"
            center>
        <div class="config-dialog-body">
            <div>
                <span>基准字号：</span>
                <el-select v-model="fontValue" placeholder="请选择" @change="fontSizeChange">
                    <el-option
                            v-for="item in fontArr"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div>
                <span>基准颜色：</span>
                <el-select v-model="colorValue" placeholder="请选择" @change="colorChange">
                    <el-option
                            v-for="item in colorArr"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
<!--        <el-button @click="dialogStatus = false">取 消</el-button>-->
            <!--        <el-button type="primary" @click="saveConfigTheme">确 定</el-button>-->
      </span>
    </el-dialog>
</template>

<script>
    /**
     * @Time 20191029
     * @Author Wxy
     * @Description 修正主题设置说明：
     * 1. 修改`主题数据配置`
     * 2. 设定`默认主题`
     * 3. data 中增加类似结构
     * 4. initSystemThemeControl函数中更新调整主题风格
     * 5. initdefaultThemeByProject 初始化是需要设置风格
     */
    import { handleLocalstorgeData, checkLocalKeyGetDataOrFalse } from '@/utils/theme';
    import { mapActions }                                         from 'vuex';
    import { initThemeColor }                                     from '@/utils/theme';

    /**
     * 主题数据配置
     */
    const AframeOpt = {
        font:  [
            {
                value: 'nor-small',
                label: '普通小号',
            }, {
                value: 'nor-middle',
                label: '普通标准',
            }, {
                value: 'nor-big',
                label: '普通大号',
            },
            {
                value: 'ali-small',
                label: '阿里小号',
            }, {
                value: 'ali-middle',
                label: '阿里标准',
            }, {
                value: 'ali-big',
                label: '阿里大号',
            },
        ],
        color: [
            {
                value: 'blue',
                label: '蓝色',
            },
            {
                value: 'red',
                label: '红色',
            },
            {
                value: 'purple',
                label: '紫色',
            },
            {
                value: 'green',
                label: '绿色',
            },
        ],
    };
    /**
     * saas 主题默认
     */
    const defaultTheme = {
        font:  'nor-middle',
        color: 'blue',
    };

    export default {
        name:    'SystemConfig',
        props:   {
            show: {
                type:     Boolean,
                required: true,
            },
        },
        data() {
            return {
                dialogStatus: this.show,
                fontArr:      AframeOpt.font,
                colorArr:     AframeOpt.color,
                fontValue:    null,
                fontConfig:   {
                    text:     'themeFont',
                    attrText: 'data-fontsize',
                },
                colorValue:   null,
                colorConfig:  {
                    text:     'themeColor',
                    attrText: 'data-theme',
                },

            };
        },
        watch:   {
            show(newVal, oldVal) {
                this.dialogStatus = newVal;
            },
        },
        methods: {
            /**
             * 保存更改主题设置
             */
            /*saveConfigTheme() {

            },*/
            /**
             * 关闭主题设置弹窗回调函数
             */
            configThemeClose() {
                this.$emit('close', this.dialogStatus);
            },
            /**
             * 字体大小切换触发回调
             * @param value
             */
            fontSizeChange(value) {
                handleLocalstorgeData(this.fontConfig.text, this.fontConfig.attrText, value);
            },
            /**
             * 字体大小切换触发回调
             * @param value
             */
            colorChange(value) {
                handleLocalstorgeData(this.colorConfig.text, this.colorConfig.attrText, value);

                this.setThemeColorObj = value;
                initThemeColor();
            },
            /**
             * 初始化需要本地化的系统配置
             * @param data 指定数据结构对象 {text,attrText} text:localstorage 的key， attrText：html的自定义属性配合scss更改系统
             * @param code 指定初始化系统内容 目前值为 `font` , `color`,
             */
            initSystemThemeControl(code) {
                let data = {};

                if (code === 'font') {
                    data = this.fontConfig;
                } else if (code === 'color') {
                    data = this.colorConfig;
                } else {
                    throw new Error('未找到需要设置的主题内容');
                }

                if (checkLocalKeyGetDataOrFalse(data.text)) {
                    const c = handleLocalstorgeData(data.text, data.attrText, checkLocalKeyGetDataOrFalse(data.text));
                    // 设置字体大小
                    switch (code) {
                        case 'font':
                            this.fontValue = c;
                            break;
                        case 'color':
                            this.colorValue = c;
                            break;
                    }

                } else {

                    switch (code) {
                        case 'font':
                            /**
                             * 字体默认情况
                             */
                            this.fontSizeChange(this.fontValue);
                            break;
                        case 'color':
                            /**
                             * 颜色默认情况
                             */
                            this.colorChange(this.colorValue);
                            break;

                    }

                }
            },
            initdefaultThemeByProject() {
                let data = {
                    font:  null,
                    color: null,
                };
                data = defaultTheme;
                this.fontValue = data.font;
                this.colorValue = data.color;
            },
            ...mapActions(['setThemeColorObj']),
        },
        created() {

            // 设置默认值
            this.initdefaultThemeByProject();

            // 初始化系统主题控制
            this.initSystemThemeControl('font');

            this.initSystemThemeControl('color');


        },
    };
</script>

