<template>
    <div id="add-members-tags-form-box">
        <el-dialog title="添加标签" :visible.sync="addMembersTagFormVisible" width="800px" >
            <el-form ref="memberTagForm" :rules="tagsRules" :model="form" label-width="90px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="标签:"  prop="tags">
                            <el-select
                                v-model="form.tags"
                                multiple
                                style="width:100%"
                                placeholder="请选择标签">
                                <el-option
                                v-for="item in tagOptions"
                                :key="item.id"
                                :label="item.tag_name"
                                :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addMembersTagFormVisible = false">取消</el-button>
                <el-button
                type="primary"
                @click="submitForm('memberTagForm')"
                >保 存
                </el-button>
            </div>
        </el-dialog>  
    </div>
</template>

<script>

import {AddMembersTags} from "@/api/member/member";

export default {
    name:'AddMembersTagsForm',
    props:{
        tagOptions:{
            type: Array,
            default: function () {
                return [];
            }
        },
        form:{
            tags:[],
            ids:[],
        },
        membersData:{
            type: Array,
            default: function () {
                return [];
            }
        },
    },
    data(){
        return {
            addMembersTagFormVisible:false,
            
            tagsRules: {
                tags: [{required: true, message: "请选择标签",},],
            },
        }
    },
    methods:{
        open:function(){
            this.addMembersTagFormVisible = true;
        },
        resetForm(formName) {
            if (typeof(this.$refs[formName]) !='undefined') {
                this.$refs[formName].resetFields();
            }
        },
        submitForm(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    AddMembersTags({ids:this.form.ids, tags:this.form.tags}).then(response=>{
                        var res = response.data;
                        if(res.state === 1) {
                            var idsMap = {};
                            for (const index in this.form.ids) {
                                idsMap[this.form.ids[index]] = this.form.ids[index];
                            }
                            for (const memberIndex in this.membersData) {
                                if (this.membersData[memberIndex].id in idsMap) {
                                    var tagsMap = {};
                                    for (const index in this.form.tags) {
                                        tagsMap[this.form.tags[index]] = this.form.tags[index];
                                    }
                                    var tags = this.membersData[memberIndex].tags;
                                    if (tags) {
                                        for (const index in tags) {
                                            if(tags[index].id in tagsMap) {
                                                continue;
                                            }
                                            tagsMap[tags[index].id] = tags[index].id;
                                        }
                                    }
                                    var memberTags = [];
                                    for (const index in this.tagOptions) {
                                        if(this.tagOptions[index].id in tagsMap) {
                                            memberTags.push(this.tagOptions[index]);
                                        }
                                    }
                                    this.$set(this.membersData[memberIndex], 'tags', memberTags);
                                }
                            }
                            this.resetForm("memberTagForm");
                            this.addMembersTagFormVisible = false;
                            this.$message.success("编辑会员标签成功");
                        }else {
                            this.$message.error(res.msg);
                        }
                    }).catch(e=>{});

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

