<!-- // 成员档案 -->
<template>
    <div>
        <van-skeleton title avatar :row="3" :loading="loading">
            <div class="container">
                <header>
                    <van-image
                        round
                        fit="cover"
                        width="1.3rem"
                        height="1.3rem"
                        :src="memberInfo.HeadImg?memberInfo.HeadImg:require('@/assets/images/default.png')"
                        style="border:1px solid #ccc"
                    />
                    <div
                        style="margin-left: .2rem;text-align: left;line-height: 1.5;font-size:.22rem;"
                    >
                        <h3>
                            {{memberInfo.FamilyMemberName}}
                            <span
                                class="relation"
                            >{{memberInfo.UserRelationship|filterRelation}}</span>
                        </h3>
                        <p>{{memberInfo.Gender | filterSex}} {{memberInfo.Birthday | getAge}} 岁</p>
                        <p v-if="memberInfo.Mobile">{{memberInfo.Mobile|filterMobile}}</p>
                    </div>
                    <span class="tag" @click="toUpdate">修改</span>
                </header>
                <main>
                    <div class="tab">
                        <div @click="SwitchTab(0)" :class="TabType == 0?'ActiveTab':''">
                            <span></span>病历
                        </div>
                        <div @click="SwitchTab(1)" :class="TabType == 1?'ActiveTab':''">
                            <span></span>档案
                        </div>
                    </div>
                    <div>
                        <!--病例列表-->
                        <div
                            class="caseCtn"
                            v-if="TabType == 0"
                            :class="{'padding-0':!medicalFileList.length}"
                        >
                            <div
                                @click="jump(item)"
                                class="caseItem"
                                v-for="(item,index) in medicalFileList"
                                :key="index"
                            >
                                <div>
                                    <van-image
                                        round
                                        fit="cover"
                                        width=".8rem"
                                        height=".8rem"
                                        :src="memberInfo.HeadImg?memberInfo.HeadImg:require('@/assets/images/default.png')"
                                        style="margin-right: .2rem;border:1px solid #ccc"
                                    />
                                    <div>
                                        <h3>{{item.DiagnosisResult}}</h3>
                                        <p>{{item.DiagnosisDate | filterTime}}</p>
                                    </div>
                                </div>
                                <van-icon name="arrow" />
                            </div>
                        </div>

                        <!--患者档案-->
                        <div class="archivesCtn" v-if="TabType == 1">
                            <div>
                                <p>
                                    <span>身高</span>
                                    <span>{{Case.Height || '未设置'}}</span>
                                </p>
                                <span>
                                    厘米
                                    <van-icon
                                        class="IconEdit"
                                        @click="EditAlertShow($event)"
                                        data-title="身高"
                                        name="edit"
                                    />
                                </span>
                            </div>
                            <div>
                                <p>
                                    <span>体重</span>
                                    <span>{{Case.Weight || '未设置'}}</span>
                                </p>
                                <span>
                                    公斤
                                    <van-icon
                                        class="IconEdit"
                                        @click="EditAlertShow($event)"
                                        data-title="体重"
                                        name="edit"
                                    />
                                </span>
                            </div>
                            <div>
                                <p>
                                    <span>血型</span>
                                    <span>{{Case.BloodType || '未设置'}}</span>
                                </p>
                                <span>
                                    型
                                    <van-icon
                                        class="IconEdit"
                                        @click="EditAlertShow($event)"
                                        data-title="血型"
                                        name="edit"
                                    />
                                </span>
                            </div>
                            <div>
                                <p>
                                    <span>病史</span>
                                    <span>{{Case.MedicalistoryH || '未设置'}}</span>
                                </p>
                                <span>
                                    <van-icon
                                        class="IconEdit"
                                        @click="EditAlertShow($event)"
                                        data-title="病史"
                                        name="edit"
                                    />
                                </span>
                            </div>
                            <div>
                                <p>
                                    <span>过敏史</span>
                                    <span>{{Case.AllergyHistory || '未设置'}}</span>
                                </p>
                                <span>
                                    <van-icon
                                        class="IconEdit"
                                        @click="EditAlertShow($event)"
                                        data-title="过敏史"
                                        name="edit"
                                    />
                                </span>
                            </div>
                            <div>
                                <p>
                                    <span>历史用药</span>
                                    <span>{{Case.HistoricalMedication || '未设置'}}</span>
                                </p>
                                <span>
                                    <van-icon
                                        class="IconEdit"
                                        @click="EditAlertShow($event)"
                                        data-title="历史用药"
                                        name="edit"
                                    />
                                </span>
                            </div>
                        </div>
                    </div>
                </main>

                <router-link
                    v-if="TabType == 0"
                    class="button"
                    :to="{name:'alterAddMedicalHistory',query:{
                name:memberInfo.FamilyMemberName,//姓名
                relation:memberInfo.UserRelationship,//关系
                headImg:memberInfo.HeadImg,//头像
                familyMemberID:id,// 家庭成员id
                id:''//病历id
           }}"
                >添加病历</router-link>

                <div class="button" v-if="TabType == 1" @click="saveCase">保存</div>

                <!--编辑档案弹窗-->
                <van-dialog
                    v-model.trim="vanDialog"
                    :title="vanDialogTitle"
                    show-cancel-button
                    class="vanDialog"
                    lock-scroll
                    :beforeClose="chargeBtn"
                >
                    <textarea v-model="textarea" name id cols="30" rows="10"></textarea>
                </van-dialog>
            </div>
        </van-skeleton>
        <van-skeleton title :row="10" :loading="loading"></van-skeleton>
        <van-skeleton title :row="5" :loading="loading"></van-skeleton>
    </div>
</template>

<script>
    export default {
        name: "memberFile",
        data() {
            return {
                vanDialog: false,
                vanDialogTitle: "身高",
                textarea: "", //弹窗输入的内容
                TabType: 0, // 切换tab 0 = 展示病例; 1= 展示患者档案
                loading: true, //加载中

                Case: {
                    Height: "", //身高
                    Weight: "", // 体重
                    BloodType: "", //血型
                    MedicalistoryH: "", // 病史
                    AllergyHistory: "", // 过敏史
                    HistoricalMedication: "" // 历史用药
                },
                // 家庭成员基本信息
                memberInfo: {
                    // UserID (string, optional): 用户id ,
                    // FamilyMemberName (string, optional): 成员名称 ,
                    // Gender (integer, optional),1 =>男  2 =>女
                    // Birthday (string, optional): 出生日期 ,
                    // Mobile (string, optional): 手机号码 ,
                    // UserRelationship (integer, optional): 本人 = 1,
                    // CreateTime (string, optional): 创建时间 ,
                    // UpdateTime (string, optional): 修改时间 ,
                    // IsDelete (boolean, optional): 是否删除 ,
                    // HeadImg (string, optional): 头像 ,
                    // ID (string, optional): 实体标识
                },
                medicalFileList: [
                    // {DoctorsAdvice (string, optional): 医嘱 ,
                    // CaseDetails (string, optional): 病例详情 ,
                    // MedicalCode (integer, optional): 病例代码 ,
                    // DiagnosisResult (string, optional): 诊断结果 ,
                    // DiagnosisDate (string, optional): 诊断时间 ,
                    // DiagnosisDoctor (string, optional): 诊断医生 ,
                    // DoctorAlias (integer, optional): 医生职称 ,
                    // DiagnosisDepartment (integer, optional): 诊断科室 ,
                    // DiagnosisHospital (string, optional): 诊断医院 ,
                    // UserID (string, optional): 用户id ,
                    // FamilyMemberID (string, optional): 家庭成员id ,
                    // CreateTime (string, optional): 创建时间 ,
                    // UpdateTime (string, optional): 修改时间 ,
                    // IsDelete (boolean, optional): 是否删除 ,
                    // ID (string, optional): 实体标识
                    // }
                ], //病历列表信息
                id: this.$route.query.id, // 家庭成员id
                fileId: "", // 档案id
                isSelectCase: this.$route.query.isSelectCase || 0 // 是否选择了病历 1 =>选择了病历 0 => 没选择
            };
        },
        created() {
            if (!this.$route.query.id) {
                return this.$router.back();
            }
            this.init();
        },
        methods: {
            init() {
                this.GetFamilyMemberDTO();
            },
            // 切换tab
            SwitchTab(e) {
                this.TabType = e;
            },

            // 跳转修改个人资料页面
            toUpdate() {
                this.$router.push({
                    name: "addFamilyMember",
                    params: this.memberInfo
                });
            },

            // 编辑档案
            EditAlertShow(e) {
                this.vanDialogTitle = e.target.dataset.title;
                this.vanDialog = true;
                switch (this.vanDialogTitle) {
                    case "身高":
                        this.textarea = this.Case.Height;
                        break;
                    case "体重":
                        this.textarea = this.Case.Weight;
                        break;
                    case "血型":
                        this.textarea = this.Case.BloodType;
                        break;
                    case "病史":
                        this.textarea = this.Case.MedicalistoryH;
                        break;
                    case "过敏史":
                        this.textarea = this.Case.AllergyHistory;
                        break;
                    case "历史用药":
                        this.textarea = this.Case.HistoricalMedication;
                        break;
                }
            },

            //弹窗关闭前
            chargeBtn(action, done) {
                if (action == "cancel") {
                    done();
                    return;
                }
                var numReg = /^\d{1,14}(\.\d{1,2})?$/;
                var BloodTypeReg = /^[a-zA-Z]$/;
                switch (this.vanDialogTitle) {
                    case "身高":
                        if (!numReg.test(this.textarea)) {
                            this.$toast("请输入数字");
                            done(false);
                            return;
                        }
                        this.Case.Height = this.textarea;
                        done();
                        break;
                    case "体重":
                        if (!numReg.test(this.textarea)) {
                            this.$toast("请输入数字");
                            done(false);
                            return;
                        }
                        this.Case.Weight = this.textarea.trim();
                        done();
                        break;
                    case "血型":
                        this.Case.BloodType = this.textarea.trim();
                        done();
                        break;
                    case "病史":
                        this.Case.MedicalistoryH = this.textarea.trim();
                        done();
                        break;
                    case "过敏史":
                        this.Case.AllergyHistory = this.textarea.trim();
                        done();
                        break;
                    case "历史用药":
                        this.Case.HistoricalMedication = this.textarea.trim();
                        done();
                        break;
                }
            },
            //   根据id获取家庭成员信息
            GetFamilyMemberDTO() {
                this.$http.GetFamilyMemberDTO(this.id).then(
                    ({ data }) => {
                        // console.log(data);
                        this.loading = false;
                        if (data.IsSuccess) {
                            // 成功
                            this.memberInfo = data.ResultObject.familyMember;
                            this.medicalFileList =
                                data.ResultObject.medicalFileList || [];
                            if (data.ResultObject.healthFile) {
                                let {
                                    Blood,
                                    Weight,
                                    Stature,
                                    MedicalHistory,
                                    AllergyHistory,
                                    DrugHistory,
                                    ID
                                } = data.ResultObject.healthFile;
                                this.Case = {
                                    Height: Stature, //身高
                                    Weight: Weight, // 体重
                                    BloodType: Blood, //血型
                                    MedicalistoryH: MedicalHistory, // 病史
                                    AllergyHistory: AllergyHistory, // 过敏史
                                    HistoricalMedication: DrugHistory // 历史用药
                                };
                                this.fileId = ID;
                            }

                            //  Case: {
                            //     Height: "180.00", //身高
                            //     Weight: "50", // 体重
                            //     BloodType: "AB", //血型
                            //     MedicalistoryH: "", // 病史
                            //     AllergyHistory: "", // 过敏史
                            //     HistoricalMedication: "" // 历史用药
                            //   },
                        } else {
                            // 失败
                            this.$toast("网络错误");
                        }
                    },
                    () => this.$toast("网络错误")
                );
            },
            //新增或修改档案
            AddHealthFile() {
                let {
                    Height,
                    Weight,
                    BloodType,
                    MedicalistoryH,
                    AllergyHistory,
                    HistoricalMedication
                } = this.Case;
                let obj = {
                    Id: this.fileId, //如果是新增，传默认值guid，否则是修改 ,
                    FamilyMemberID: this.id, // 家庭成员id,
                    Stature: Height, //  身高,
                    Weight: Weight, //  体重,
                    Blood: BloodType, //  血型,
                    MedicalHistory: MedicalistoryH, //  病史,
                    AllergyHistory: AllergyHistory, // 过敏史,
                    DrugHistory: HistoricalMedication //  历史用药
                };
                this.$http.AddHealthFile(obj).then(
                    ({ data }) => {
                        if (data.IsSuccess) {
                            this.$toast("保存成功");
                            // 成功
                        } else {
                            // 失败
                            this.$toast(data.ResultMsg);
                        }
                    },
                    () => this.$toast("网络错误")
                );
            },
            //保存档案
            saveCase() {
                this.AddHealthFile();
            },
            jump(item) {
                if (this.isSelectCase == 1) {
                    // 设置本地手术病历存储
                    sessionStorage.setItem("caseHistoryInfo", JSON.stringify(item));
                    this.$router.replace({ name: "surgery" });
                } else {
                    // 跳转到详情页
                    this.$router.push({
                        name: "medicalHistoryDetail",
                        query: { pageType: 1, id: item.ID, familyMemberID: this.id }
                    });
                }
            }
        }
    };
</script>

<style scoped lang="less">
    .tag {
        position: absolute;
        width: 0.8rem;
        font-size: 0.24rem;
        height: 0.4rem;
        line-height: 0.4rem;
        color: #00a0e9;
        border-radius: 0.1rem;
        border: 0.01rem solid #00a0e9;
        right: 0.6rem;
    }
    .vanDialog {
        width: 5rem;
        border-radius: 5px;
        box-sizing: border-box;
        textarea {
            width: 80%;
            margin: 0 auto;
            border: 1px solid #d0d0d0;
            border-radius: 3px;
        }
        .van-dialog__header {
            padding-top: 0;
        }
    }
    .IconEdit {
        font-size: 0.42rem;
        vertical-align: sub;
    }
    .container {
        padding: 0.2rem 0.3rem;
        > header {
            height: 1.8rem;
            background-color: #fff;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            border-radius: 10px;
            box-sizing: border-box;
            padding: 0.2rem;
            justify-content: flex-start;
            align-items: center;
            box-shadow: 0 0 7px 0px #ccc;

            .relation {
                display: inline-block;
                font-size: 0.22rem;
                width: 0.78rem;
                height: 0.3rem;
                background-color: #fd5b5b;
                color: #fff;
                text-align: center;
                line-height: 0.3rem;
                border-radius: 0.05rem;
            }
        }
        > main {
            margin-top: 0.3rem;
            border-radius: 10px;
            box-shadow: 0 0 7px 0px #ccc;
            overflow: hidden;
            .tab {
                height: 0.86rem;
                display: flex;
                align-items: center;
                justify-content: center;
                > div {
                    background-color: #fff;
                    width: 50%;
                    height: 100%;
                    line-height: 0.86rem;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    transition: all 0.1s ease;
                }
                > div:nth-child(1) {
                    > span {
                        line-height: 0.86rem;
                        display: inline-block;
                        width: 0.5rem;
                        height: 0.49rem;
                        background: url("../../../assets/Spirit.png") no-repeat -1.78rem -0.49rem;
                        -webkit-background-size: 4.16rem 5.88rem;
                        background-size: 4.16rem 5.88rem;
                        margin-right: 0.1rem;
                    }
                }
                > div:nth-child(2) {
                    > span {
                        line-height: 0.86rem;
                        display: inline-block;
                        width: 0.47rem;
                        height: 0.39rem;
                        background: url("../../../assets/Spirit.png") no-repeat -1.31rem -0.39rem;
                        -webkit-background-size: 4.16rem 5.88rem;
                        background-size: 4.16rem 5.88rem;
                        margin-right: 0.1rem;
                    }
                }
                > .ActiveTab:nth-child(1) {
                    > span {
                        background: url("../../../assets/Spirit.png") no-repeat -1.78rem
                            0;
                        background-size: 4.16rem 5.88rem;
                    }
                }
                > .ActiveTab:nth-child(2) {
                    > span {
                        background: url("../../../assets/Spirit.png") no-repeat -1.31rem
                            0;
                        background-size: 4.16rem 5.88rem;
                    }
                }
            }
        }
    }
    .ActiveTab {
        background-color: #00abff !important;
        color: #fff !important;
    }
    .overflow {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .caseCtn {
        padding: 0.2rem 0.3rem;
        background-color: #fff;
        transition: all 0.2s ease;
        height: auto;
        &.padding-0 {
            padding: 0;
        }
        .caseItem {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 1.2rem;
            line-height: 1.5;
            > div {
                text-align: left;
                display: flex;
                align-items: center;
                > div:nth-child(2) {
                    width: 5rem;
                }
                h3 {
                    font-size: 0.28rem;
                    color: #333333;
                    margin-bottom: 0.1rem;
                    .overflow;
                }
                p {
                    font-size: 0.22rem;
                    color: #848484;
                    .overflow;
                }
            }
        }
    }
    .archivesCtn {
        padding: 0.2rem 0.3rem;
        background-color: #fff;
        transition: all 0.2s ease;
        height: auto;
        > div {
            height: auto;
            min-height: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            > span:nth-child(1),
            > p > span:nth-child(1) {
                display: inline-block;
                text-align: left;
                min-width: 1.5rem;
                font-size: 0.3rem;
                color: #333333;
            }
            > p > span:nth-child(2) {
                width: 3.5rem;
                display: inline-block;
                text-align: left;
                vertical-align: top;
                line-height: 1.4;
                font-size: 0.26rem;
                color: #a3a3a3;
            }
        }
    }
</style>
