<template>
    <div class="index">
        <el-form :model="formData"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <a-collapse v-model="activeKey">
                <a-collapse-panel key="0" header="主题">
                    <styles-theme :form.sync="formData.theme"></styles-theme>
                </a-collapse-panel>
                <a-collapse-panel key="1" header="标题">
                    <styles-title :form.sync="formData.title"></styles-title>
                </a-collapse-panel>
                <a-collapse-panel key="2" header="菜单">
                    <styles-menu :form.sync="formData.menu"></styles-menu>
                </a-collapse-panel>
            </a-collapse>
            <el-form-item>
                <span style="float: right">
                <a-button type="primary" @click="handleSubmit()" style="margin-right: 10px">
                    保存
                </a-button>
                <a-button type="info" @click="init()">
                    重置
                </a-button>
                </span>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import StylesTitle from "./StylesTitle";
import StylesMenu from "./StylesMenu";
import StylesTheme from "./StylesTheme";

export default {
    name: "index",
    components: {StylesTheme, StylesMenu, StylesTitle},
    props: {},
    computed: {
        ...mapGetters(['styles']),
        watchStyles() {
            return JSON.stringify(this.styles);
        }
    },
    watch: {
        watchStyles() {
            this.init()
        }
    },
    data() {
        return {
            activeKey: ['0', '1', '2'],
            formData: {},
        }
    },
    mounted() {
    },
    created() {
        console.log(this.styles);
        this.init();
    },
    destroyed() {
    },
    methods: {
        ...mapActions(['updateStyles']),
        init() {
            console.log('init');
            this.formData = JSON.parse(JSON.stringify(this.styles));
        },
        // 提交
        handleSubmit() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.updateStyles(this.formData);
                    this.$message.success('刷新后生效')
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    }
}
</script>

<style scoped lang="scss">
.index /deep/{
    width: 70%;
    margin: auto;
    .ant-form-item {
        margin-bottom: 10px;
    }
    .jsoneditor-menu {
        display: none;
    }
}
</style>
