<template>
    <div id="edit-member-tags-form-box">
        <el-dialog title="编辑标签" :visible.sync="editMemberTagFormVisible" width="800px" >
            <el-form ref="memberTagForm"  :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="editMemberTagFormVisible = false">取消</el-button>
                <el-button
                type="primary"
                @click="submitForm('memberTagForm')"
                >保 存
                </el-button>
            </div>
        </el-dialog>  
    </div>
</template>

<script>
import {GetDistrictsByUpid} from  "@/api/district";
import {checkMobile} from "@/utils/tools";
import {EditMemberTags} from "@/api/member/member";

export default {
    name:'EditMberTagForm',
    props:{
        tagOptions:{
            type: Array,
            default: function () {
                return [];
            }
        },
        memberIndex:{
            type:Number,
            default:-1,
        },
        form:{
            name:'',
            mobile:'',
            gender:0,
            birthday:'',
            city:[],
            province_id:0,
            city_id:0,
            district_id:0,
            illness:[],
            ill_date:'',
            treat_type:'',
            tags:[],
            remark:'',
            avatar:'',
            id:0,
        },
        membersData:{
            type: Array,
            default: function () {
                return [];
            }
        },
    },
    data(){
        return {
            editMemberTagFormVisible:false,
        }
    },
    methods:{
        open:function(){
            this.editMemberTagFormVisible = true;
        },
        resetForm(formName) {
            if (typeof(this.$refs[formName]) !='undefined') {
                this.$refs[formName].resetFields();
            }
        },
        submitForm(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    EditMemberTags(this.form.id, {tags:this.form.tags}).then(response=>{
                        var res = response.data;
                        if(res.state === 1) {
                            var tags = res.data.tags;
                            var memberTags = [];
                            if(tags) {
                                var userTagsMap = {};
                                for (const index in tags) {
                                    userTagsMap[tags[index]] = 1;
                                }
                                for (const index in this.tagOptions) {
                                    if(this.tagOptions[index].id in userTagsMap) {
                                        memberTags.push(this.tagOptions[index]);
                                    }
                                }
                            }
                            this.$set(this.membersData[this.memberIndex], 'tags', memberTags);
                            this.resetForm("memberTagForm");
                            this.editMemberTagFormVisible = false;
                            this.$message.success("编辑会员标签成功");
                        }else {
                            this.$message.error(res.msg);
                        }
                    }).catch(e=>{});

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

