<!-- // 家庭成员 -->
<template>
    <main>
        <div class="member">
            <div
                v-for="(item,index) in memberList"
                :key="index"
                class="member-item animated"
                :class="index%2==0?`slideInLeft`:`slideInRight`"
                @click="pageType == 1?SelectMember(item.ID):$router.push({name:'memberFile',query:{id:item.ID}})"
            >
                <van-swipe-cell style="width: 100%;">
                    <div style="display: flex;justify-content: space-between;align-items: center;">
                        <div class="info">
                            <!-- 用户头像 -->
                            <van-image
                                :src="item.HeadImg "
                                width="1.27rem"
                                height="1.27rem"
                                fit="cover"
                                round
                                class="img"
                            >
                                <template v-slot:error>
                                    <img
                                        :src="require('@/assets/images/default.png')"
                                        style="width:100%"
                                    />
                                </template>
                            </van-image>
                            <div>
                                <span
                                    style="margin-right:.2rem;font-size:.3rem;"
                                >{{item.FamilyMemberName }}</span>
                                <van-tag
                                    type="danger"
                                    size="medium"
                                >{{item.UserRelationship|filterRelation}}</van-tag>
                                <div style="margin-top:.2rem; font-size:.26rem;">{{item.Mobile}}</div>
                            </div>
                        </div>
                        <van-icon name="arrow" v-if="pageType == 0" />
                    </div>

                    <template slot="right">
                        <van-button
                            style="height: 100%;"
                            @click.stop="openDialog(item.ID)"
                            square
                            type="danger"
                            text="删除"
                        />
                    </template>
                </van-swipe-cell>
            </div>
        </div>

        <div class="button" @click="$router.push({name:'addFamilyMember',query:{add:1}})">添加</div>
        <!-- 确认框 -->
        <van-dialog
            v-model="dialogShow"
            title="是否确认删除成员？"
            show-cancel-button
            @confirm="confirmDelete"
        ></van-dialog>
    </main>
</template>
<script>
    export default {
        name: "familyMember",
        data() {
            return {
                memberList: [], //成员列表
                pageType: 0, // 页面类型  1=用户报名坐诊选择一位家庭成员为就诊人并带参数返回上一页 0= 查看家庭成员
                dialogShow: false, //确认框
                deleteFamilyMemberId: "" //删除成员id
            };
        },
        destroyed() {
            this.$toast.clear();
        },
        created() {
            this.init();
            this.pageType = this.$route.query.pageType || 0;
        },
        methods: {
            // 删除家庭成员
            DeleteMember(familyMemberId) {
                this.$http.DeleteFamilyMember(familyMemberId).then(res => {
                    if (res.data.IsSuccess) {
                        // 成功
                        this.$toast("删除成功");
                        this.memberList = this.memberList.filter(
                            v => v.ID !== this.deleteFamilyMemberId
                        );
                    } else {
                        //
                        this.$toast(res.data.ResultMsg);
                    }
                });
            },
            init() {
                this.GetMemberList();
            },
            // 获取家庭成员列表
            GetMemberList() {
                /**  获取本地数据   FamilyMember=>家庭成员列表 */

                let familyMember = JSON.parse(
                    sessionStorage.getItem("FamilyMember")
                );

                if (familyMember) {
                    return (this.memberList = familyMember);
                }
                /**  获取本地数据   FamilyMember=>家庭成员列表 */

                this.$toast.loading({
                    duration: 0, //持续展示
                    forbidClick: true, //禁用背景点击
                    message: "加载中...",
                    mask: true //背景遮罩
                });
                this.$http.GetMemberList().then(
                    ({ data }) => {
                        this.$toast.clear();
                        if (data.IsSuccess) {
                            // 成功
                            this.memberList = data.ResultObject;
                            sessionStorage.setItem(
                                "FamilyMember",
                                JSON.stringify(this.memberList)
                            );
                            /**
                                                                                 *  [{
                                                                                            UserID (string): 用户id ,
                                                                                            FamilyMemberName (string): 成员名称 ,
                                                                                            Gender (integer) 1=>男  2 =>女,
                                                                                            Birthday (string): 出生日期 ,
                                                                                            Mobile (string): 手机号码 ,
                                                                                            UserRelationship (integer): 本人 = 1,父母 = 2,夫妻=3,儿女=4,其他=5 ,
                                                                                            CreateTime (string): 创建时间 ,
                                                                                            UpdateTime (string): 修改时间 ,
                                                                                            IsDelete (boolean): 是否删除 ,
                                                                                            HeadImg (string): 头像 ,
                                                                                            ID (string): 实体标识
                                                                                            }]
                                                                                    *
                                                                                    */
                        } else {
                            // 失败
                            this.$toast.fail("获取数据失败");
                        }
                    },
                    () => {
                        this.$toast.clear();
                        this.$toast.fail("网络错误");
                    }
                );
            },

            // 选择家庭成员为就诊人
            SelectMember(e) {
                var FamilyMemberData = this.memberList.filter(a => a.ID == e)[0];
                sessionStorage.setItem(
                    "FamilyMemberData",
                    JSON.stringify(FamilyMemberData)
                );
                this.$router.go(-1);
            },
            // 确认删除
            confirmDelete() {
                this.DeleteMember(this.deleteFamilyMemberId);
            },
            openDialog(id) {
                // 打开确认框
                this.dialogShow = true;
                this.deleteFamilyMemberId = id;
            }
        }
    };
</script>
<style lang='less' scoped>
    main {
        width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
        padding: 0.2rem 0.24rem;

        .member {
            background-color: #ffffff;
            box-shadow: 0rem 0.05rem 0.14rem 0rem rgba(153, 153, 153, 0.2);
            border-radius: 0.1rem;

            .member-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0.1rem 0.1rem 0.1rem 0.38rem;

                &:not(:nth-last-child(1)) {
                    border-bottom: 0.02rem solid #f2f2f2;
                }

                .info {
                    display: flex;
                    text-align: left;
                    align-items: center;

                    .img {
                        margin-right: 0.2rem;
                    }
                }
            }
        }
    }
</style>
