<template>
    <div>
        <el-dialog title="样式设置" :visible.sync="styleVisible" width="600px" :append-to-body="true" :close-on-click-modal="false">
            <div>
                <el-form :model="form" label-position="right" label-width="100px">
                    <el-form-item label="字体大小：">
                        <el-input-number v-model="form.size" controls-position="right" size="small" :min="12" ></el-input-number>
                    </el-form-item>
                    <el-form-item label="行间距：">
                        <el-input-number v-model="form.lineHeight" controls-position="right" size="small" :min="1" :step="0.1" :precision="1"></el-input-number>
                    </el-form-item>
                    <el-form-item label="边距：" >
                        <div style="display:flex">
                           <p style="margin:0"><span>上：</span><span><el-input-number v-model="form.padding[0]" controls-position="right" size="small" :min="0" style="width:80px"></el-input-number></span></p>
                            <p style="margin:0"><span>下：</span><span><el-input-number v-model="form.padding[2]" controls-position="right" size="small" :min="0" style="width:80px"></el-input-number></span></p>
                            <p style="margin:0"><span>左：</span><span><el-input-number v-model="form.padding[3]" controls-position="right" size="small" :min="0" style="width:80px"></el-input-number></span></p>
                            <p style="margin:0"><span>右：</span><span><el-input-number v-model="form.padding[1]" controls-position="right" size="small" :min="0" style="width:80px"></el-input-number></span></p> 
                        </div>
                    </el-form-item>
                </el-form>
                <div style="margin:15px 0">
                    <el-divider content-position="left">预览</el-divider>
                    <div style="border:1px solid black;width:500px;margin:15px auto;" :style="{'font-size':form.size+'px','line-height':form.lineHeight,padding:form.padding[0]+'px '+form.padding[1]+'px '+form.padding[2]+'px '+form.padding[3]+'px',}">
                        本系统为用户提供了一种知识产权风控体系和组织记忆的操作思路和方法，通过解决企业具体问题场景的方式，为用户提供了具有可操作性的参考，并由此协助企业形成自主知识传承、叠加、不断衍化提升并且能够重复再应用的核心智谋知识系统。
                    </div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="styleVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            styleVisible:false,
            form:{
                size:16,
                lineHeight:1.8,
                padding:[5,5,5,5]
            }
        }
    },
    computed:{
    },
    mounted() {
        if(localStorage.style){
            this.form = JSON.parse(localStorage.style)
        }
        this.$store.commit('SET_PATENT_STYLE', JSON.parse(JSON.stringify(this.form)))
    },
    methods:{
        submit(){
            localStorage.style = JSON.stringify(this.form)
            this.$store.commit('SET_PATENT_STYLE',JSON.parse(JSON.stringify(this.form)))
            this.styleVisible = false
        },
        open(){
            if(localStorage.style){
                this.form = JSON.parse(localStorage.style)
            }
            this.styleVisible = true
        }
    }
}
</script>