<template>
    <div id="edit-member-form-box">
        <el-dialog title="编辑会员" :visible.sync="editMemberFormVisible" 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-select
                                v-model="form.province_id"
                                style="width:32%"
                                placeholder="选择地址"
                                @change="changeProvince">
                                <el-option
                                v-for="item in provinceOptions"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                                </el-option>
                            </el-select>
                            
                            <el-select
                                v-model="form.city_id"
                                style="width:32%"
                                placeholder="选择地址"
                                @change="changeCity"
                                v-show="cityOptions.length>0"
                                >
                                <el-option
                                v-for="item in cityOptions"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                                </el-option>
                            </el-select>
                            
                            <el-select
                                v-model="form.district_id"
                                style="width:32%"
                                placeholder="选择地址"
                                v-show="distictOptions.length>0"
                                >
                                <el-option
                                v-for="item in distictOptions"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                                </el-option>
                            </el-select>
                            <!-- <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="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="editMemberFormVisible = 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, uParseTime} from "@/utils/tools";
import {EditMember} from "@/api/member/member";

export default {
    name:'EditMemberForm',
    props:{
        illnessOptions:{
            type: Array,
            default: function () {
                return [];
            }
        },
        treatTypeOptions:{
            type: Object,
            default: function () {
                return {};
            }
        },
        levelCards:{
            type: Array,
            default: function () {
                return [];
            }
        },
        membersData:{
            type: Array,
            default: function () {
                return [];
            }
        },
        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,
        },
        memberIndex:{
            type:Number,
            default:-1,
        },
    },
    data(){
        var checkMobileRule = (rule, value, callback) => {
            if (!checkMobile(value)) {
                callback(new Error('请填写正确的手机号'));
            }else {
               callback(); 
            }
        };
        return {
            editMemberFormVisible: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:'女'},
            ],
            provinceOptions:[],
            cityOptions:[],
            distictOptions:[],
            illnessMap:{},

        }
    },
    methods:{
        open:function(){
            this.GetProvince(0);
            if (this.form.province_id>0) {
                this.GetCity(this.form.province_id);
            }
            if (this.form.city_id>0) {
                this.GetDistrict(this.form.city_id);
            }
            this.form.birthday = this.form.birthday?this.form.birthday:'';
            this.form.ill_date = this.form.ill_date?this.form.ill_date:'';
            this.form.treat_type = this.form.treat_type?this.form.treat_type:'';
            this.form.gender = this.form.gender?this.form.gender:'';
            for (const index in this.illnessOptions) {
                this.illnessMap[this.illnessOptions[index].id] = 1;
            }
            var illness = this.form.illness;
            this.form.illness = [];
            for (const index in illness) {
                if (illness[index] in this.illnessMap) {
                    this.form.illness.push(illness[index]);
                }
            }

            this.editMemberFormVisible = 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) {
                    if (this.form.district_id == '') {
                        this.form.district_id = this.form.city_id;
                    }
                    EditMember(this.form.id, this.form).then(response=>{
                        var res = response.data;
                        if(res.state === 1) {
                            var member = res.data.member;
                            console.log("member是什么?",member)
                            this.membersData[this.memberIndex].name = member.name;
                            this.membersData[this.memberIndex].avatar = member.avatar;
                            this.membersData[this.memberIndex].mobile = member.mobile;
                            this.membersData[this.memberIndex].gender = member.gender;
                            this.membersData[this.memberIndex].birthday = member.birthday;
                            this.membersData[this.memberIndex].province_id = member.province_id;
                            this.membersData[this.memberIndex].city_id = member.city_id;
                            this.membersData[this.memberIndex].district_id = member.district_id;
                            this.$set(this.membersData[this.memberIndex],'illness', member.illness);
                            this.membersData[this.memberIndex].ill_date = member.ill_date;
                            this.membersData[this.memberIndex].treat_type = member.treat_type;
                            this.membersData[this.memberIndex].remark = member.remark;
                            this.membersData[this.memberIndex].updated_time = member.updated_time;
                            // this.resetForm("memberForm");
                            this.editMemberFormVisible = 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';
            }
        },
        changeProvince(id) {
            this.form.city_id = '';
            this.form.district_id = '';
            this.GetCity(id);
            this.distictOptions = [];
        },
        changeCity(id){
            this.form.district_id = '';
            this.GetDistrict(id);
        },
        GetProvince:function(id) {  
            GetDistrictsByUpid({id:id}).then(response=>{
                var res = response.data;
                if (res.state===1) {
                    this.provinceOptions = res.data.citys;
                }else {
                    this.$message.error(res.msg);
                }
            }).catch(e=>{
            });
        },
        GetCity:function(id) {  
            GetDistrictsByUpid({id:id}).then(response=>{
                var res = response.data;
                if (res.state===1) {
                    this.cityOptions = res.data.citys;
                }else {
                    this.$message.error(res.msg);
                }
            }).catch(e=>{
            });
        },
        GetDistrict:function(id) {  
            GetDistrictsByUpid({id:id}).then(response=>{
                var res = response.data;
                if (res.state===1) {
                    this.distictOptions = res.data.citys;
                }else {
                    this.$message.error(res.msg);
                }
            }).catch(e=>{
            });
        },
    }
}
</script>

