<template>
    <div id="create-member-form-box">
        <el-dialog title="添加会员" :visible.sync="createMemberFormVisible" width="800px" >
            <el-form ref="memberForm" :rules="memberRules" :model="form" label-width="90px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="姓名:" required prop="name">
                        <el-input v-model="form.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="手机号:" required prop="mobile">
                        <el-input v-model="form.mobile"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="性别:" required prop="gender">
                            <el-radio-group v-model="form.gender" @change="selectGender">
                                <el-radio :label="gender.id" :value="gender.id" v-for="(gender, index) in genderOptions" :key="index">{{gender.name}}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="生日:" required prop="birthday">
                            <el-date-picker v-model="form.birthday" prefix-icon="el-icon-date" :editable="false" style="width: 100%;" type="date" placeholder="请选择日期" align="right" format="yyyy-MM-dd" value-format="yyyy-MM-dd" ></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="城市:" required prop="city">
                            <el-cascader
                                v-model="form.city"
                                :options="cityOptions"
                                @active-item-change="handleChangeCity"
                                @change="handleSelectedCity"
                                style="width: 100%;" 
                                :props="{
                                    value: 'id',
                                    label: 'name',
                                    children: 'cities'
                                }"
                            ></el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="病种:" required prop="illness">
                            <el-select
                                v-model="form.illness"
                                multiple
                                collapse-tags
                                style="width:100%"
                                placeholder="请选择病种">
                                <el-option
                                v-for="item in illnessOptions"
                                :key="item.id"
                                :label="item.illness_name"
                                :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="患病时间:" required prop="ill_date">
                            <el-date-picker v-model="form.ill_date" prefix-icon="el-icon-date" :editable="false" style="width: 100%;" type="date" placeholder="请选择日期" align="right" format="yyyy-MM-dd" value-format="yyyy-MM-dd" ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="治疗方式:" required prop="treat_type">
                            <el-select
                                v-model="form.treat_type"
                                style="width:100%"
                                placeholder="请选择治疗方式">
                                <el-option
                                v-for="item in treatTypeOptions"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <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-row>
                    <el-col :span="24">
                        <el-form-item label="备注:"  prop="remark">
                            <el-input type="textarea" :rows="2" placeholder="请输入备注" v-model="form.remark">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="createMemberFormVisible = false">取消</el-button>
                <el-button
                type="primary"
                @click="submitForm('memberForm')"
                >保 存
                </el-button>
            </div>
        </el-dialog>  
    </div>
</template>

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

export default {
    name:'CreateMemberForm',
    props:{
        illnessOptions:{
            type: Array,
            default: function () {
                return [];
            }
        },
        treatTypeOptions:{
            type: Object,
            default: function () {
                return {};
            }
        },
        tagOptions:{
            type: Array,
            default: function () {
                return [];
            }
        },
        levelCards:{
            type: Array,
            default: function () {
                return [];
            }
        },
        membersData:{
            type: Array,
            default: function () {
                return [];
            }
        },
    },
    data(){
        var checkMobileRule = (rule, value, callback) => {
            if (!checkMobile(value)) {
                callback(new Error('请填写正确的手机号'));
            }else {
               callback(); 
            }
        };
        return {
            createMemberFormVisible:false,
            
            memberRules: {
                name: [{required: true, message: "请填写姓名",},],
                mobile: [{required: true, message: "请填写手机号",},{ validator: checkMobileRule}],
                gender: [{required: true, message: "请选择性别",},],
                birthday: [{required: true, message: "请选择生日",},],
                city: [{required: true, message: "请选择城市",},],
                illness: [{required: true, message: "请选择病种",},],
                ill_date: [{required: true, message: "请选择患病时间",},],
                treat_type: [{required: true, message: "请选择治疗方式",},],
                
            },
            genderOptions:[
                {id:1, name:'男'},
                {id:2, name:'女'},
            ],
            cityOptions:[],
            form:{
                name:'',
                mobile:'',
                gender:0,
                birthday:'',
                city:[],
                province_id:0,
                city_id:0,
                district_id:0,
                illness:[],
                ill_date:'',
                treat_type:'',
                tags:[],
                remark:'',
                card:null,
                avatar:'',
            },
            
        }
    },
    methods:{
        open:function(){
            this.GetDistrictsByUpid();
            this.resetForm("memberForm");
            this.createMemberFormVisible = true;
        },
        resetForm(formName) {
            if (typeof(this.$refs[formName]) !='undefined') {
                this.$refs[formName].resetFields();
            }
        },
        submitForm(formName){
            // if (this.levelCards.length>0) {
            //     this.form.card = this.levelCards[0];
            // }
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    CreateMember(this.form).then(response=>{
                        var res = response.data;
                        if(res.state === 1) {
                            var member = res.data.member;
                            if(member.user_tags) {
                                member.tags = [];
                                var userTagsMap = {};
                                for (const index in member.user_tags) {
                                    userTagsMap[member.user_tags[index].tag_id] = 1;
                                }
                                for (const index in this.tagOptions) {
                                    if(this.tagOptions[index].id in userTagsMap) {
                                        member.tags.push(this.tagOptions[index]);
                                    }
                                }
                            }
                            this.membersData.unshift(member);
                            this.resetForm("memberForm");
                            this.createMemberFormVisible = false;
                            this.$message.success("添加会员成功");
                        }else {
                            this.$message.error(res.msg);
                        }
                    }).catch(e=>{});

                } else {
                    return false;
                }
            });
        },
        selectGender:function(gender) {
            if(gender == 2) {
                this.form.avatar = 'https://images.shengws.com/201809182128222.png';
            }else {
                this.form.avatar = 'https://images.shengws.com/201809182128111.png';
            }
        },
        handleChangeCity:function(val) {
            this.GetDistrictsByUpid(val);
        },
        handleSelectedCity:function(val) {
            this.form.province_id = val[0];
            this.form.city_id = val[1];
            this.form.district_id = val[2];
        },
        GetDistrictsByUpid:function(val) {  
            let idArea
            let sizeArea
            if (!val) {
                idArea = 0
                sizeArea = 0
            } else if (val.length === 1) {
                idArea = val[0]
                sizeArea = val.length // 3:一级 4:二级 6:三级
            } else if (val.length === 2) {
                idArea = val[1]
                sizeArea = val.length // 3:一级 4:二级 6:三级
            }
            
            GetDistrictsByUpid({id:idArea}).then(response=>{
                var res = response.data;
                if (res.state===1) {
                    var citys = res.data.citys;
                    if (sizeArea === 0) { // 初始化 加载一级 省
                        this.cityOptions = citys.map((value, i) => {
                            return {
                                id: value.id,
                                name: value.name,
                                cities: []
                            }
                        })
                    } else if (sizeArea === 1) { // 点击一级 加载二级 市
                        this.cityOptions.map((value, i) => {
                            if (value.id === val[0]) {
                                if (!value.cities.length) {
                                    value.cities = citys.map((value, i) => {
                                        return {
                                            id: value.id,
                                            name: value.name,
                                            cities: []
                                        }
                                    })
                                }
                            }
                        })
                    } else if (sizeArea === 2) { // 点击二级 加载三级 区
                        this.cityOptions.map((value, i) => {
                            if (value.id === val[0]) {
                                value.cities.map((value, i) => {
                                    if (value.id === val[1]) {
                                        if (!value.cities.length) {
                                            if (citys.length) {
                                                value.cities = citys.map((value, i) => {
                                                    return {
                                                        id: value.id,
                                                        name: value.name
                                                    }
                                                })
                                            }else {
                                                value.cities = [
                                                    {id:value.id, name:value.name}
                                                ];
                                            }
                                            
                                        }
                                    }
                                })
                            }
                        })
                    }
                }else {
                    this.$message.error(res.msg);
                }
            }).catch(e=>{});
        },
    }
}
</script>

