<template>
    <!--    弹窗 编辑   -->
    <el-dialog
            title="编辑友情链接"
            :visible.sync="editorDialogVisit"
            width="30%"
            @close="handleEditorReset('editorForm')"
            @open="handleGetLinksInfo"
            center>
        <div class="add-dialog-content">
            <el-form :model="editorForm" :rules="editorRules" ref="editorForm" label-width="80px"
                     class="demo-ruleForm">
                <el-form-item label="名称:" prop="name">
                    <el-input v-model="editorForm.name"></el-input>
                </el-form-item>
                <el-form-item label="链接:" prop="url">
                    <el-input v-model="editorForm.url"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click="editorDialogVisit = false">取 消</el-button>
                <el-button size="mini" type="primary" @click="handleEditorLinks('editorForm')">确 定</el-button>
            </span>
    </el-dialog>
</template>

<script>
    export default {
        name: 'editorYouQingLink',
        data() {
            return {
                editorDialogVisit: false,
                editorForm:        {
                    name: '',
                    url:  '',
                },
                editorRules:       {
                    name: [
                        { required: true, message: '友情链接名称不能为空', trigger: 'blur' },
                    ],
                    url:  [
                        { required: true, message: '友情链接不能为空', trigger: 'blur' },
                    ],
                },
            }
        },
        methods: {
            handleEditorReset(formName) {
                this.$refs[formName].resetFields();
                this.addDialogVisit = false;
            },
            handleGetLinksInfo() {
                this.$emit('get-data')
            },
            handleEditorLinks(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.editorLinksFun();
                    } else {
                        return false;
                    }
                });
            },
            setInfoData(data) {
                this.editorForm.name = data.name;
                this.editorForm.url = data.url;
            },
            editorLinksFun() {
                this.$emit('editor-link', this.editorForm);
            }
        },
    };
</script>

<style scoped>

</style>