<!--医生查看用户档案病例-->
<template>
    <div class="container">
            <header>
                <van-image
                        round
                        fit="cover"
                        width="1.3rem"
                        height="1.3rem"
                        :src="UserData.HeadImg">
                    <template v-slot:loading>
                        <van-loading type="spinner" size="20" />
                    </template>
                </van-image>
                <div style="margin-left: .2rem;text-align: left;line-height: 1.5;">
                    <h3>{{UserData.FamilyMemberName}}</h3>
                    <p>{{UserData.Gender | filterSex}} {{UserData.Birthday | getAge}}岁</p>
                    <p>{{UserData.Mobile}}</p>
                </div>
            </header>
            <main>
                <div class="tab">
                    <div @click="TabType = 0" :class="TabType == 0?'ActiveTab':''"><span></span>病历</div>
                    <div @click="TabType = 1" :class="TabType == 1?'ActiveTab':''"><span></span>档案</div>
                </div>
                <div>

                    <!--病例列表-->
                    <div class="caseCtn" v-if="TabType == 0">
                        <div v-if="medicalFileList.length == 0" style="line-height: 2rem;min-height: 2rem;">
                            暂无病例
                        </div>
                        <div v-if="medicalFileList.length > 0">
                            <router-link
                                    v-for="item in medicalFileList"
                                    :to="{name:'medicalHistoryDetail',query:{pageType:0,id:item.ID,isDoctor:true}}"
                                    class="caseItem"
                            >
                                <div>
                                    <van-image
                                            round
                                            fit="cover"
                                            width=".8rem"
                                            height=".8rem"
                                            :src="UserData.HeadImg"
                                            style="margin-right: .2rem;"
                                    >
                                        <template v-slot:loading>
                                            <van-loading type="spinner" size="20" />
                                        </template>
                                    </van-image>
                                    <div>
                                        <h3>{{item.DiagnosisResult}}</h3>
                                        <p>{{item.DiagnosisDate | filterTime}}</p>
                                    </div>
                                </div>
                                <van-icon name="arrow" />
                            </router-link>
                        </div>
                    </div>

                    <!--患者档案-->
                    <div class="archivesCtn" v-if="TabType == 1">
                        <div>
                            <p>
                                <span>身高</span>
                                <span>{{healthFile.Stature || '未设置'}}</span>
                            </p>
                            <span>
                                厘米
                            </span>
                        </div>
                        <div>
                            <p>
                                <span>体重</span>
                                <span>{{healthFile.Weight || '未设置'}}</span>
                            </p>
                            <span>
                                公斤
                            </span>
                        </div>
                        <div>
                            <p>
                                <span>血型</span>
                                <span>{{healthFile.Blood || '未设置'}}</span>
                            </p>
                            <span>
                                型
                            </span>
                        </div>
                        <div>
                            <p>
                                <span>病史</span>
                                <span>{{healthFile.MedicalHistory || '未设置'}}</span>
                            </p>
                            <span>
                            </span>
                        </div>
                        <div>
                            <p>
                                <span>过敏史</span>
                                <span>{{healthFile.AllergyHistory || '未设置'}}</span>
                            </p>
                            <span>
                            </span>
                        </div>
                        <div>
                            <p>
                                <span>历史用药</span>
                                <span>{{healthFile.DrugHistory || '未设置'}}</span>
                            </p>
                            <span>
                            </span>
                        </div>
                    </div>

                </div>
            </main>
        </div>
</template>

<script>
    export default {
        name: "DoctorPatientInfo",
        data(){
            return {
                TabType:0,  // 切换tab 0 = 展示病例; 1= 展示患者档案
                userId:'',
                UserData:{},
                healthFile:{}, //保存用户档案
                medicalFileList:[], //保存用户病例列表
            }
        },
        created(){
            this.userId = this.$route.query.id;
            // this.userId = '63f31491-03b2-4ef0-99b3-6e9fba0689c9';
            this.GetFamilyMemberDTODoctor()
        },
        methods:{

            // 获得档案病例信息
            GetFamilyMemberDTODoctor(){
                this.$http.GetFamilyMemberDTODoctor(this.userId).then(res=>{
                    if(res.data.IsSuccess){
                        var data = res.data.ResultObject || {};
                        this.UserData =data.familyMember || {};  // 用户信息
                        this.healthFile = data.healthFile || {}; // 用户档案
                        this.medicalFileList = this.medicalFileList.concat(data.medicalFileList || []); // 用户病例列表
                    }else{
                        this.$toast(res.data.ResultMsg)
                    }
                })
            },

        }
    }
</script>

<style scoped lang="less">
    .container{
        padding: .2rem .3rem;
        >header{
            height: 1.8rem;
            background-color: #fff;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            border-radius: 10px;
            box-sizing: border-box;
            padding: .2rem;
            justify-content: flex-start;
            align-items: center;
            box-shadow: 0 0 7px 0px #ccc;
        }
        >main{
            margin-top: .3rem;
            border-radius: 10px;
            box-shadow: 0 0 7px 0px #ccc;
            overflow: hidden;
            .tab{
                height: .86rem;
                display: flex;
                align-items: center;
                justify-content: center;
                >div{
                    background-color: #fff;
                    width: 50%;
                    height: 100%;
                    line-height: .86rem;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    transition: all .1s ease;
                }
                >div:nth-child(1){
                    >span{
                        line-height: .86rem;
                        display: inline-block;
                            width: .5rem;
                        height: .49rem;
                        background: url("../../assets/Spirit.png") no-repeat -1.78rem -.49rem;
                        -webkit-background-size: 4.16rem 5.88rem;
                        background-size: 4.16rem 5.88rem;
                        margin-right: .1rem;
                    }
                }
                >div:nth-child(2){
                    >span{
                        line-height: .86rem;
                        display: inline-block;
                        width: .47rem;
                        height: .39rem;
                        background: url("../../assets/Spirit.png") no-repeat -1.31rem -.39rem;
                        -webkit-background-size: 4.16rem 5.88rem;
                        background-size: 4.16rem 5.88rem;
                        margin-right: .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: .2rem .3rem;
        background-color: #fff;
        transition: all .2s ease;
        height: auto;
        .caseItem{
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 1.2rem;
            >div{
                text-align: left;
                display: flex;
                align-items: center;
                >div:nth-child(2){
                    width: 5rem;
                }
                h3{
                    font-size: .28rem;
                    color: #333333;
                    margin-bottom: .1rem;
                    .overflow;
                }
                p{
                    font-size: .22rem;
                    color: #848484;
                    .overflow;
                }
            }
        }
    }
    .archivesCtn{
        padding: .2rem .3rem;
        background-color: #fff;
        transition: all .2s ease;
        height: auto;
        >div{
            height: auto;
            min-height: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: .2rem;
            >span:nth-child(1),>p>span:nth-child(1){
                display: inline-block;
                text-align: left;
                min-width: 1.5rem;
                font-size: .3rem;
                color: #333333;
            }
            >p>span:nth-child(2){
                width: 4rem;
                display: inline-block;
                text-align: left;
                line-height: 1.4;
                font-size: .26rem;
                color: #A3A3A3;
                vertical-align: middle;
            }

        }
    }
</style>
