<!-- // 添加家庭成员 -->
<template>
    <div class="main">
        <!-- 成员信息 -->
        <div class="common">
            <div>
                <span class="bolder">关系</span>
                <van-dropdown-menu class="select" :overlay="false" direction="down">
                    <van-dropdown-item v-model="patientInfo.relation" :options="Relation" />
                </van-dropdown-menu>
            </div>

            <div>
                <span class="bolder">姓名</span>
                <input
                    type="text"
                    v-model.trim="patientInfo.name"
                    placeholder="请输入姓名"
                    maxlength="10"
                />
            </div>
            <div>
                <span class="bolder">生日</span>
                <span
                    v-if="patientInfo.birthday"
                    @click="dateShow=true"
                >{{patientInfo.birthday | filterTime}}</span>
                <span v-else @click="dateShow=true" style="color:#7f7f7f">选择出生日期</span>
            </div>

            <div>
                <span class="bolder">性别</span>
                <van-dropdown-menu class="select" :overlay="false" direction="down">
                    <van-dropdown-item v-model="patientInfo.sex" :options="Sex" />
                </van-dropdown-menu>
            </div>
        </div>

        <!-- 更多信息（选填） -->
        <div class="moreInfo">
            <div class="title">更多信息（选填）</div>
            <div class="content-other">
                <div>
                    <span class="bolder">手机</span>
                    <input
                        type="tel"
                        v-model.trim="patientInfo.phone"
                        placeholder="请输入手机号"
                        maxlength="11"
                    />
                </div>

                <div>
                    <span class="bolder">头像</span>
                    <!-- 2097152  2M图片  :max-size="2097152" -->

                    <!-- 使用其他插件裁剪 -->
                    <van-uploader
                        :after-read="afterRead"
                        v-model="patientInfo.avatar"
                        :max-count="1"
                        @oversize="oversize"
                        preview-size=".8rem"
                        class="upload"
                    />
                </div>
            </div>
        </div>

        <!-- btn -->
        <div class="button" @click="handleSave">保存</div>

        <!-- 日期选择 -->
        <van-popup v-model="dateShow" position="bottom" round>
            <van-datetime-picker
                v-model="currentTime"
                type="date"
                :max-date="MaxDate"
                :min-date="MinDate"
                :formatter="formatterDate"
                @confirm="confirmDate"
                @cancel="dateShow=false"
            />
        </van-popup>

        <Cropper
            :show="fileOption.show"
            :imgUrl="fileOption.img"
            @cancel="cancelUpLoad"
            @confirm="confirmUpLoad"
        ></Cropper>
    </div>
</template>
<script>
    import Cropper from "@/components/Cropper.vue"; //裁剪组件
    export default {
        name: "addFamilyMember",
        data() {
            return {
                MaxDate:new Date(),
                MinDate:new Date(1900,0,1),
                // 个人信息
                patientInfo: {
                    name: "",
                    relation: 0,
                    birthday: "",
                    sex: 0, // 性别     0 请选择性别  1 => 男 2 => 女
                    phone: "",
                    avatar: [],
                    id: ""
                },

                /** 日期选择参数 on */
                dateShow: false, //是否显示
                currentTime: new Date(),
                /** 日期选择参数 off */

                /** 图片上传 on */
                fileList: [
                    // { url: "https://img.yzcdn.cn/vant/cat.jpeg" } // Uploader 根据文件后缀来判断是否为图片文件
                    // { url: "https://cloud-image", isImage: true }
                    // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
                ],
                /** 图片上传 off*/

                /** 图片预览参数 on */

                fileOption: {
                    img: "",
                    show: false
                },
                /** 图片预览参数 off */

                // 下拉框选择on
                // 性别
                Sex: [
                    { text: "请选择性别", value: 0 },
                    { text: "男", value: 1 },
                    { text: "女", value: 2 }
                ],
                // 关系表
                Relation: [
                    { text: "请选择关系", value: 0 },
                    { text: "本人", value: 1 },
                    { text: "父母", value: 2 },
                    { text: "夫妻", value: 3 },
                    { text: "儿女", value: 4 },
                    { text: "其他", value: 5 }
                ]
                // 下拉框选择end
            };
        },
        methods: {
            init() {
                if (this.$route.query.add) {
                    /** 添加成员标题 */
                    document.title = "添加成员";
                }
                if (Object.keys(this.$route.params).length !== 0) {
                    let {
                        Birthday,
                        FamilyMemberName,
                        Gender,
                        HeadImg,
                        ID,
                        Mobile,
                        UserRelationship
                    } = this.$route.params;
                    this.patientInfo = {
                        name: FamilyMemberName,
                        relation: UserRelationship,
                        birthday: Birthday,
                        sex: Gender, // 性别  1 男       2 女
                        phone: Mobile,
                        avatar: HeadImg ? [{ url: HeadImg }] : [],
                        id: ID
                    };
                }
            },
            // 日期格式化
            formatterDate(type, value) {
                if (type === "year") {
                    return `${value}年`;
                } else if (type === "month") {
                    return `${value}月`;
                }
                return `${value}日`;
            },
            // 确认日期
            confirmDate(date) {
                this.dateShow = false;
                var str = date.getFullYear()+'/'+(date.getMonth()+1) + '/'+date.getDate();
                this.$set(this.patientInfo, "birthday",  str);
            },
            // 保存病历
            handleSave() {
                if (this.checkRequired()) {
                    this.AddOrUpdateFamilyMember();
                }
            },
            // 上传文件读取完成
            afterRead(file, detail) {
                // console.log(file, detail);
                this.fileOption.img = file.content;
                this.fileOption.show = true;

                let data = new FormData();
                data.append("file", file.file);
            },
            // 图片上传超过尺寸
            oversize(file, detail) {
                // console.log(file, detail);
                this.$toast("图片尺寸过大，请选择低于2M的图片");
            },
            // 检查必填项目
            checkRequired() {
                if (!this.patientInfo.relation) {
                    this.$toast("请选择关系");
                    return false;
                }

                if (!this.patientInfo.name) {
                    this.$toast("请输入姓名");
                    return false;
                }

                if (!this.patientInfo.birthday) {
                    this.$toast("请选择出生日期");
                    return false;
                }

                if (!this.patientInfo.sex) {
                    this.$toast("请选择性别");
                    return false;
                }

                var MobileReg = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/; // 手机号码正则

                if (
                    !MobileReg.test(this.patientInfo.phone) &&
                    this.patientInfo.phone
                ) {
                    this.$toast("请输入正确的手机号");
                    return false;
                }

                return true;
            },
            // 添加  修改成员信息
            AddOrUpdateFamilyMember() {
                let {
                    name,
                    relation,
                    birthday,
                    sex,
                    phone,
                    avatar,
                    id
                } = this.patientInfo;
                let img = avatar[0]
                    ? avatar[0].content
                        ? avatar[0].content
                        : avatar[0].url
                    : "";

                let obj = {
                    Id: id,
                    UserRelationship: relation, //关系
                    FamilyMemberName: name, //姓名
                    Birthday: birthday, //生日
                    Gender: sex, //性别
                    Mobile: phone, //手机号码
                    HeadImg: img //头像
                };

                // 加载中
                this.$toast.loading({
                    duration: 0, //持续展示
                    forbidClick: true, //禁用背景点击
                    message: "保存中...",
                    mask: true //背景遮罩
                });

                this.$http.AddOrUpdateFamilyMember(obj).then(
                    ({ data }) => {
                        this.$toast.clear();
                        if (data.IsSuccess) {
                            // 成功
                            this.$toast.success("保存成功");
                            sessionStorage.removeItem("FamilyMember");

                            setTimeout(() => {
                                this.$router.go(-1);
                            }, 1000);
                        } else {
                            // 失败
                            this.$toast.fail("保存失败");
                        }
                    },
                    () => {
                        this.$toast.clear();
                        this.$toast.fail("网络错误");
                    }
                );
            },
            // 上传图片  暂时没用
            upLoad(dataFile) {
                // 上传图片
                this.$http.UploadFile(dataFile).then(({ data }) => {
                    // console.log(data);
                    if (data.IsSuccess) {
                        // 成功
                        // 图片地址
                        // this.patientInfo.avatar = [
                        //   { content: data.ResultObject[0].AccessoryUrl }
                        // ];
                    } else {
                        // 失败
                        this.$toast.fail(data.ResultMsg);
                    }
                });
            },
            // 取消上传头像插件
            cancelUpLoad() {
                this.fileOption.show = false;
                // 清空图片
                this.patientInfo.avatar = [];
            },
            // 点击按钮确认上传头像   上传成功触发事件
            confirmUpLoad(obj) {
                this.fileOption.show = false;
                // 更换图片
                this.patientInfo.avatar = [obj];
            }
        },
        components: {
            Cropper
        },
        created() {
            this.init();
        }
    };
</script>
<style lang='less' scoped>
    .bolder {
        font-size: 0.28rem;
        font-weight: 600;
    }
    // 阴影
    .shadow(@color: rgba(153, 153, 153, 0.2)) {
        box-shadow: 0rem 0.05rem 0.14rem 0rem @color;
    }

    .main {
        padding: 0.24rem 0.24rem 0.5rem;

        .common,
        .content-other {
            background-color: #ffffff;
            .shadow();
            border-radius: 0.1rem;
            padding: 0 0.22rem;

            > div {
                display: flex;
                height: 1.07rem;
                line-height: 1.07rem;
                font-size: 0.3rem;
                text-align: left;
                box-sizing: border-box;
                border-bottom: 0.02rem solid #f2f2f2;
                &:nth-last-of-type(1) {
                    border-bottom: none;
                }

                span {
                    display: block;
                    width: 1.2rem;
                    color: #000;
                    margin-right: 0.26rem;
                    flex-shrink: 0;
                    &:nth-of-type(2) {
                        flex: 1;
                        // color: #7f7f7f;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
                input {
                    flex: 1;
                    width: 100%;
                    // color: #7f7f7f;
                    color: #000;
                }
            }
        }

        // 附件
        .moreInfo {
            background-color: transparent;
            box-shadow: none;

            .title {
                font-size: 0.3rem;
                height: 0.72rem;
                line-height: 0.72rem;
                color: #787878;
                text-align: left;
                padding-left: 0.24rem;
            }
            .content-img {
                .common();
                padding: 0.3rem 0 0.3rem 0.24rem;
                display: flex;
                flex-wrap: wrap;
            }
        }

        .button {
            width: 4rem;
            height: 0.8rem;
            background-image: linear-gradient(#00a0e9, #00a0e9),
                linear-gradient(#3d9cff, #3d9cff);
            background-blend-mode: normal, normal;
            box-shadow: 0rem 0.04rem 0.12rem 0rem rgba(0, 110, 233, 0.44);
            border-radius: 0.4rem;
        }

        // 选择
        /deep/ .select {
            width: 100%;
            height: 100%;

            &::after {
                display: none;
            }
            .van-dropdown-menu__title {
                width: 100%;
                padding: 0;
                font-size: 0.3rem;
                &::after {
                    right: 0.1rem;
                }
            }
            .van-dropdown-item {
                width: 5.8rem;
                left: auto;
                right: 0.2rem;
            }
        }

        //上传文件
        /deep/ .upload.van-uploader {
            display: flex;
            align-items: center;
            .van-uploader__upload {
                margin: 0;
            }
        }
    }
</style>
