<template>
    <div id="create-tag-form-box">
        <el-dialog title="添加标签" :visible.sync="createTagFormVisible" width="700px" >
            <el-form ref="tagForm" :rules="tagRules" :model="form" label-width="60px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="标签:" required prop="tag_name">
                        <el-input v-model="form.tag_name"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="createTagFormVisible = false">取消</el-button>
                <el-button
                type="primary"
                @click="submitForm('tagForm')"
                >保 存
                </el-button>
            </div>
        </el-dialog>  
    </div>
</template>

<script>
import {CreateTag} from "@/api/member/member";

export default {
    name:'CreateTagForm',
    props:{
        tagsData:{
            type: Array,
            default: function () {
                return [];
            }
        },
    },
    data(){
        return {
            createTagFormVisible:false,
            
            tagRules: {
                tag_name: [{required: true, message: "请填写标签",},],
                
            },
            form:{
                tag_name:'',
            },
            
        }
    },
    methods:{
        open:function(){
            this.resetForm("tagForm");
            this.createTagFormVisible = true;
        },
        resetForm(formName) {
            if (typeof(this.$refs[formName]) !='undefined') {
                this.$refs[formName].resetFields();
            }
        },
        submitForm(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    CreateTag(this.form).then(response=>{
                        var res = response.data;
                        if(res.state === 1) {
                            var tag = res.data.tag;
                            tag["member_count"] = 0;
                            this.tagsData.unshift(tag);
                            this.resetForm("tagForm");
                            this.createTagFormVisible = false;
                            this.$message.success("添加标签成功");
                        }else {
                            this.$message.error(res.msg);
                        }
                    }).catch(e=>{});

                } else {
                    return false;
                }
            });
        },
    }
}
</script>

