<!-- 病历详情 -->
<template>
    <van-skeleton title avatar :row="10" :loading="loading">
        <div class="medicalHistory">
            <!-- 个人信息 -->
            <div class="patientInfo">
                <van-image
                    :src="patientInfo.avatorImg?patientInfo.avatorImg:require('@/assets/images/default.png')"
                    width="1rem"
                    height="1rem"
                    fit="cover"
                    round
                    class="img"
                />

                <div class="name-info">
                    <span class="name">{{patientInfo.name}}</span>
                    <van-tag
                        type="danger"
                        v-if="pageType == 1"
                        style="font-size:.22rem;"
                        text-color="white"
                    >{{patientInfo.UserRelationship|filterRelation}}</van-tag>
                    <span
                        v-else
                        class="sex"
                    >{{patientInfo.gender| filterSex}} {{patientInfo.birthday |getAge }}岁</span>
                </div>

                <div class="amend">
                    <van-tag plain type="primary" v-if="pageType == 1" @click="handleAmend">修改</van-tag>
                </div>
            </div>

            <!-- 诊断结果 -->
            <div class="medicalResult mt-3">
                <div style="height:auto;">
                    <span class="bolder">诊断结果</span>
                    <span class="auto">{{patientInfo.result}}</span>
                </div>

                <div>
                    <span class="bolder">诊断时间</span>
                    <span>{{patientInfo.time|filterTime}}</span>
                </div>
            </div>
            <!-- 医生诊断 -->
            <div class="medicalResult mt-3">
                <div style="height:auto;">
                    <span class="bolder">医嘱</span>
                    <span class="auto">{{patientInfo.DoctorsAdvice}}</span>
                </div>

                <div style="height:auto;">
                    <span class="bolder">病情描述</span>
                    <span class="auto">{{patientInfo.CaseDetails}}</span>
                </div>
            </div>
            <!-- 诊断医生 -->
            <div class="medicalDoctor mt-3">
                <div>
                    <span class="bolder">诊断医生</span>
                    <span>{{patientInfo.doctor}}</span>
                </div>

                <div>
                    <span class="bolder">医生职称</span>
                    <span>{{doctorTitles}}</span>
                </div>

                <div>
                    <span class="bolder">诊断科室</span>
                    <span>{{departmentText}}</span>
                </div>

                <div>
                    <span class="bolder">诊断医院</span>
                    <span>{{patientInfo.hospital}}</span>
                </div>
            </div>
            <!-- 附件 -->
            <div class="enclosure">
                <div class="title">
                    附件
                    <span v-if="patientInfo.medicalHistoryImg.length">（点击放大查看）</span>
                    <span v-else>（无）</span>
                </div>

                <div class="content-img" v-if="patientInfo.medicalHistoryImg.length">
                    <van-image
                        v-for="(item,index) in patientInfo.medicalHistoryImg"
                        :key="index"
                        width="0.8rem"
                        height="0.8rem"
                        fit="cover"
                        :src="item"
                        class="content-img-item"
                        @click="imagePreview(index)"
                    />
                </div>
            </div>
            <!-- btn -->
            <div class="button" @click="dialogShow=true" v-if="pageType == 1">删除</div>

            <!-- 图片预览 -->
            <van-image-preview
                v-model="show"
                :images="patientInfo.medicalHistoryImg"
                :startPosition="startPosition"
                :show-indicators="true"
                :close-on-popstate="true"
            ></van-image-preview>

            <!-- 确认框 -->
            <van-dialog
                v-model="dialogShow"
                title="是否确认删除病历？"
                show-cancel-button
                @confirm="confirmDelete"
            ></van-dialog>
        </div>
    </van-skeleton>
</template>
<script>
    export default {
        name: "medicalHistoryDetail",
        data() {
            return {
                // 个人信息
                patientInfo: {
                    avatorImg: "", //个人头像
                    name: "",
                    result: "",
                    time: "",
                    doctor: "",
                    titles: "",
                    departments: 0,
                    hospital: "",
                    birthday: "",
                    DoctorsAdvice: "", //医嘱
                    CaseDetails: "", //病情描述
                    UserRelationship: 0, //关系
                    /** 病历详情图片 */
                    medicalHistoryImg: []
                },
                id: null, //病历id
                familyMemberID: null, //家庭成员id
                /* 图片预览组件相关参数  on*/
                show: false,
                startPosition: 0, //初始位置索引
                // medicalHistoryImg:[]
                /* 图片预览组件相关参数 off */

                /** 确认框参数  on*/
                dialogShow: false,
                /** 确认框参数  off*/
                departmentList: [], //科室信息
                loading: true,
                pageType: 0, //页面类型 0= 医生查看患者资料只可展示; 1= 用户查看自己资料可修改
                isDoctor: false
            };
        },
        created() {
            if (!this.$route.query.id) {
                return this.$router.back();
            }
            this.pageType = this.$route.query.pageType;
            this.isDoctor = this.$route.query.isDoctor ? true : false;
            this.id = this.$route.query.id;
            this.familyMemberID = this.$route.query.familyMemberID;

            // 获取档案信息
            this.GetMedicalFile();

            //获取科室信息
            this.GetDepartmentList();
        },
        methods: {
            // 修改  到添加/修改病历页面   需要传入病例id
            handleAmend() {
                this.$router.push({
                    name: "alterAddMedicalHistory",
                    query: {
                        id: this.id, //病历id
                        name: this.patientInfo.name, //姓名
                        relation: this.patientInfo.UserRelationship, //关系
                        headImg: this.patientInfo.avatorImg, //头像
                        familyMemberID: this.familyMemberID // 家庭成员id
                    }
                }); // 病历id =>修改病历
            },
            // 图片预览
            imagePreview(index) {
                this.startPosition = index;
                this.show = true;
            },
            // 确认删除病历
            confirmDelete() {
                this.DeleteMedicalFile();
            },
            //删除病历api
            DeleteMedicalFile() {
                this.$http.DeleteMedicalFile(this.id).then(({ data }) => {
                    this.$toast(data.ResultMsg);
                    if (data.IsSuccess) {
                        //跳到家庭成员
                        this.$router.replace({ name: "familyMember" });
                    }
                });
            },

            // 根据病历id 获取病历信息
            GetMedicalFile() {
                var str = this.isDoctor ? "GetMedicalFileDoctor" : "GetMedicalFile";

                this.$http[str](this.id).then(
                    ({ data }) => {
                        this.loading = false;
                        if (data.IsSuccess) {
                            // 成功
                            this.filterInfo(data.ResultObject);
                        } else {
                            // 失败
                            this.$toast(data.ResultMsg);
                        }
                    },
                    () => this.$toast("网络错误")
                );
            },

            // 处理信息
            filterInfo(dataObj) {
                // Member (FamilyMember, optional): 成员信息 ,
                // FileList (Array[Accessory], optional): 附件列表 ,
                // Medical (MedicalFile, optional): 成员病例信息
                let { Member, FileList, Medical } = dataObj;
                let imgurl = []; // 附件地址
                FileList
                    ? FileList.map(v => {
                          imgurl.push(v.AccessoryUrl);
                      })
                    : "";

                this.patientInfo = {
                    avatorImg: Member.HeadImg, //头像
                    name: Member.FamilyMemberName, //家庭成员姓名
                    birthday: Member.Birthday, //生日
                    gender: Member.Gender, //性别
                    result: Medical.DiagnosisResult, //诊断结果
                    time: Medical.DiagnosisDate, //诊断时间
                    doctor: Medical.DiagnosisDoctor, //医生
                    titles: Medical.DoctorAlias, //医生职称
                    DoctorsAdvice: Medical.DoctorsAdvice, //医嘱
                    CaseDetails: Medical.CaseDetails, //病情描述
                    departments: Medical.DiagnosisDepartment, //科室
                    hospital: Medical.DiagnosisHospital, //医院
                    UserRelationship: Member.UserRelationship, //用户关系
                    medicalHistoryImg: imgurl //附件
                };
            },
            // 获取科室信息
            GetDepartmentList() {
                // 优先本地 获取科室信息
                if (!sessionStorage.getItem("DepartmentList")) {
                    this.$http.GetDepartmentList().then(({ data }) => {
                        if (data.IsSuccess) {
                            // 本地存储  科室信息
                            sessionStorage.setItem(
                                "DepartmentList",
                                JSON.stringify(data.ResultObject)
                            );
                            this.departmentList = data.ResultObject;
                        } else {
                            this.$toast(data.ResultMsg);
                        }
                    });
                } else {
                    this.departmentList = JSON.parse(
                        sessionStorage.getItem("DepartmentList")
                    );
                }
            }
        },
        computed: {
            // 职称
            doctorTitles() {
                let obj = {
                    0: "",
                    1: "主任医生",
                    2: "副主任医生",
                    3: "主治医生",
                    4: "医师"
                };
                return obj[this.patientInfo.titles];
            },
            // 选中科室的提示文字
            departmentText() {
                var text = "";
                this.departmentList.map((v, i) => {
                    v.DepartmentsList.map(value => {
                        if (this.patientInfo.departments == value.Id) {
                            text = value.DepartmentName;
                        }
                    });
                });
                return text;
            }
        }
    };
</script>
<style lang='less' scoped>
    // 阴影
    .shadow(@color: rgba(153, 153, 153, 0.2)) {
        box-shadow: 0rem 0.05rem 0.14rem 0rem @color;
    }

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

        .mt-3 {
            margin-top: 0.3rem;
        }

        .common {
            background-color: #ffffff;
            .shadow();
            border-radius: 0.1rem;
        }

        // 个人信息
        .patientInfo {
            .common();
            display: flex;
            padding: 0.4rem 0.3rem;

            .img {
                margin-right: 0.28rem;
            }

            .name-info {
                display: flex;
                flex-direction: column;
                justify-content: space-around;

                span {
                    font-size: 0.28rem;
                    line-height: 0.32rem;
                    color: #4c4c4c;
                    font-weight: 600;

                    &.sex {
                        font-size: 0.24rem;
                        color: #7f7f7f;
                    }
                }
            }

            .amend {
                flex: 1;
                text-align: right;
                line-height: 1rem;
            }
        }

        .medicalResult,
        .medicalDoctor {
            .common();
            padding: 0 0.22rem;

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

                span {
                    display: block;
                    &:nth-of-type(1) {
                        color: #999;
                        margin-right: 0.26rem;
                        flex-shrink: 0;
                    }
                    &.bolder {
                        width: 1.4rem;
                        color: #000;
                        font-size: 0.28rem;
                        font-weight: 600;
                    }

                    &:nth-of-type(2) {
                        color: #000;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    &.auto {
                        overflow: auto;
                        text-overflow: unset;
                        white-space: unset;
                        line-height: 1.5;
                        padding-top: 0.3rem;
                    }
                }
            }
        }

        // 附件
        .enclosure {
            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.24rem;
                display: flex;
                flex-wrap: wrap;
                .content-img-item {
                    flex-shrink: 0;
                    margin: 0 0.3rem 0.1rem 0;
                    &:nth-of-type(6n) {
                        margin-right: 0;
                    }
                }
            }
        }

        .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;
        }
    }
</style>
