<template>
    <div id="edit-member-card-form-box">
        <el-dialog title="会员卡设置" :visible.sync="editMemberCardFormVisible" width="700px" >
            <el-form ref="memberCardForm"  :model="form" label-width="60px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="会员卡:"  prop="card_id">
                            <el-select
                                v-model="form.card_id"
                                style="width:100%"
                                placeholder="请选择会员卡">
                                 <el-option-group label="无卡">
                                    <el-option
                                        label="普通会员"
                                        value="">
                                    </el-option>
                                </el-option-group>
                                <el-option-group label="选择会员卡">
                                    <el-option
                                        v-for="item in cardOptions"
                                        :key="item.id"
                                        :label="item.card_name"
                                        :value="item.id">
                                    </el-option>
                                </el-option-group>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editMemberCardFormVisible = false">取消</el-button>
                <el-button
                type="primary"
                @click="submitForm('memberCardForm')"
                >保 存
                </el-button>
            </div>
        </el-dialog>  
    </div>
</template>

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

export default {
    name:'EditMemberCardForm',
    props:{
        cardOptions:{
            type: Array,
            default: function () {
                return [];
            }
        },
        memberIndex:{
            type:Number,
            default:-1,
        },
        form:{
            id:0,
            card_id:'',
        },
        membersData:{
            type: Array,
            default: function () {
                return [];
            }
        },
    },
    data(){
        return {
            editMemberCardFormVisible:false,
            cardMap: {},
            oldCardId:0,
        }
    },
    methods:{
        open:function(){
            this.oldCardId = this.form.card_id;
            for (const index in this.cardOptions) {
                this.cardMap[this.cardOptions[index].id] = this.cardOptions[index];
            }
            this.editMemberCardFormVisible = true;
        },
        resetForm(formName) {
            if (typeof(this.$refs[formName]) !='undefined') {
                this.$refs[formName].resetFields();
            }
        },
        submitForm(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.oldCardId == this.form.card_id) {
                        this.$message.success("会员卡未变化");
                        this.editMemberCardFormVisible = false;
                        return false;
                    }
                    var card_id = parseInt(this.form.card_id);
                    if (isNaN(card_id) || card_id <0) {
                        card_id = 0;
                    }
                    var form = {id:this.form.id, card_id:card_id};
                    EditMemberCard(form).then(response=>{
                        var res = response.data;
                        if(res.state === 1) {
                            var user_card = res.data.user_card;
                            if (user_card) {
                                user_card["card"] = this.cardMap[card_id];
                            }
                            // this.membersData[this.memberIndex].user_card = user_card; 
                            this.$set(this.membersData[this.memberIndex], 'user_card', user_card);
                            this.resetForm("memberCardForm");
                            this.editMemberCardFormVisible = false;
                            this.$message.success("会员卡设置成功");
                        }else {
                            this.$message.error(res.msg);
                        }
                    }).catch(e=>{});

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

