<style lang="scss" scoped>
    .qg-layout-placeholder {
        width: 320px;
        border: 2px solid #d2d2d2;
        cursor: pointer;
        border-radius: 10px;

        &:hover {
            box-shadow: 0 0 12px 3px #eaeaea;
        }

        &.current {
            border-color: $primary;
        }

        ~ .qg-layout-placeholder {
            margin-left: 20px;;
        }
    }

    .qg-setting-color {
        display: inline-block;
        width: 40px;
        height: 40px;
        border-radius: 8px;
        position: relative;
        opacity: 0.5;

        &:hover {
            opacity: 1;
        }

        ~ .qg-setting-color {
            margin-left: 10px;
        }

        &.active {
            opacity: 1;

            &:before, &:after {
                content: '️';
                display: inline-block;
                width: 10px;
                height: 2px;
                background-color: #fff;
                position: absolute;
                border-radius: 2px;
            }

            &:before {
                transform: rotate(51deg);
                top: 21px;
                left: 10px;
            }

            &:after {
                width: 18px;
                transform: rotate(-51deg);
                top: 18px;
                left: 14px;
            }
        }
    }
</style>

<template>
    <div class="app-container ">
        <section class="qg-container">
            <h4 class="qg-container__title">系统设置</h4>
            <el-form ref="postForm" class="qg-container" :inline="true" :model="postForm" label-width="100px">
                <el-form-item label="初始密码">
                    <el-input v-model.trim="postForm.initPassword" placeholder="输入密码" max-length="20"/>
                </el-form-item>
                <el-form-item label="">
                    <el-button
                        size="small"
                        type="primary"
                        @click="handleOk"
                    >保存
                    </el-button>
                </el-form-item>
            </el-form>
        </section>
    </div>
</template>

<script>
    import {getInitPassword, addInitPassword, editInitPassword} from '@/api/moudles/uc/system.js';

    export default {
        name: 'System',
        data() {
            return {
                postForm: {
                    id: null,
                    initPassword: ''
                },
                colorForm: {},
                isInitial: false
            };
        },
        created() {
            this.getInitPassword();
        },
        methods: {
            getInitPassword() {
                getInitPassword().then((res) => {
                    if (!res.data) {
                        this.isInitial = true;
                    } else {
                        this.isInitial = false;
                        this.postForm.initPassword = res.data.initPassword;
                        this.postForm.id = res.data.id;
                    }
                });
            },
            handleOk() {
                let request = null;
                if (this.isInitial) {
                    request = addInitPassword(this.postForm);
                } else {
                    request = editInitPassword(this.postForm);
                }
                request.then(res => {
                    if (!res.success) {
                        this.$message.error(res.msg || '保存失败');
                        return;
                    }
                    this.$message.success(res.msg || '保存成功');
                    this.getInitPassword();
                });
            }
        }
    };
</script>