<template>
    <div id="edit-tag-form-box">
        <el-dialog title="编辑标签" :visible.sync="editTagFormVisible" 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="editTagFormVisible = false">取消</el-button>
                <el-button
                type="primary"
                @click="submitForm('tagForm')"
                >保 存
                </el-button>
            </div>
        </el-dialog>  
    </div>
</template>

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

export default {
    name:'EditTagForm',
    props:{
        tagsData:{
            type: Array,
            default: function () {
                return [];
            }
        },
        form:{
            tag_name:'',
            id:0,
        },
        tagIndex:{
            type:Number,
            default:-1,
        },
    },
    data(){
        return {
            editTagFormVisible:false,
            tagRules: {
                tag_name: [{required: true, message: "请填写标签",},],
            },
            oldTagName:'',
        }
    },
    methods:{
        open:function(){
            this.oldTagName = this.form.tag_name;
            this.editTagFormVisible = true;
        },
        resetForm(formName) {
            if (typeof(this.$refs[formName]) !='undefined') {
                this.$refs[formName].resetFields();
            }
        },
        submitForm(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if(this.oldTagName == this.form.tag_name) {
                        this.$message.success("标签名未变化");
                        this.editTagFormVisible = false;
                        return false;
                    }
                    EditTag(this.form.id, this.form).then(response=>{
                        var res = response.data;
                        if(res.state === 1) {
                            var tag = res.data.tag;
                            this.tagsData[this.tagIndex].tag_name = tag.tag_name;
                            this.resetForm("tagForm");
                            this.editTagFormVisible = false;
                            this.$message.success("编辑标签成功");
                        }else {
                            this.$message.error(res.msg);
                        }
                    }).catch(e=>{});

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

