<!--医生信息-->
<template>
    <div>
        <main>

            <div>
                <div class="avatar">
                    <span>头像</span>

                    <van-image width=".8rem" round height=".8rem" :src="UserData.HeadImg">
                        <template v-slot:loading>
                            <van-loading type="spinner" size="20" />
                        </template>
                    </van-image>

                </div>
            </div>

            <div>
                <div>
                    <span>姓名</span>
                    <p>{{UserData.DoctorName || '未知' }}</p>
                </div>
                <div>
                    <span>性别</span>
                    <p>{{UserData.Gender | filterSex}} </p>
                </div>
                <div>
                    <span>职称</span>
                    <p>{{UserData.PositionalTitles | filterDoctorTitles}}</p>
                </div>
                <div>
                    <span>科室</span>
                    <p>{{UserData.HospitalDepartments || '未知'}}</p>
                </div>
                <div>
                    <span>医院</span>
                    <p>{{UserData.HospitalName || '未知'}}</p>
                </div>
            </div>

            <p>附件（点击放大查看）</p>
            <div class="CertificateList">

                <p v-if="ListFile.length == 0">暂无附件</p>


                <van-image
                        fit="cover"
                        v-if="ListFile.length > 0"
                        v-for="(item,index) in ListFile"
                        :src="item"
                        @click="imagePreview(index)"
                        style="width: 1rem;height:1rem;display: inline-block;margin-right: .2rem;"
                >
                    <template v-slot:error>图片加载失败...</template>
                    <template v-slot:loading>
                        <van-loading type="spinner" size="40" />
                    </template>
                </van-image>

            </div>
            <p>如需修改认证资料，请在公众号联系客服修改</p>

        </main>
        <van-image-preview
                v-model="show"
                :images="ListFile"
                :startPosition="0"
                @change="onChange"
        />
    </div>


</template>

<script>
    export default {
        name: "DoctorInfo",
        data(){
            return{
                show:false,
                UserData:'',
                ListFile:[],
            }
        },
        created(){
            this.GetDoctorAuthentication();
        },
        methods:{
            imagePreview(index) {
                this.startPosition = index;
                this.show = true;
            },
            onChange(index) {
                this.index = index;
            },

            GetDoctorAuthentication(){
                this.$http.GetDoctorAuthentication().then(res=>{
                    if(res.data.IsSuccess){
                        this.UserData = res.data.ResultObject;
                        var arr = [];
                        res.data.ResultObject.ListFile.forEach((a)=>{
                            arr.push(a.AccessoryUrl)
                        })
                        this.ListFile =arr;
                    }else{
                        this.$toast(res.data.ResultMsg);
                    }
                })
            }

        }
    }
</script>

<style scoped lang="less">

    .avatar{
        height: 1.8rem;
        div{
            width: .8rem;
            height: .8rem;
            overflow: hidden;
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }

    main{
        background-color: #F1F1F1;
        padding-top: .2rem;
        min-height: 100vh;
        >p{
            font-size: .3rem;
            color: #999999;
            text-align: left;
            margin: .2rem 0;
            padding-left: .3rem;
        }
        >div{
            width: 7rem;
            background-color: #fff;
            border-radius: 5px;
            margin: 0 auto;
            box-shadow: 0 0 7px 0px #ccc;
            box-sizing: border-box;
            padding: 0 .2rem;
            margin-bottom: .2rem;
            >div{
                line-height: 1rem;
                display: flex;
                align-items: center;
                span{
                    display: inline-block;
                    min-width: 1.4rem;
                    font-size: .3rem;
                    color: #333333;
                }
                p{
                    font-size: .3rem;
                    color: #A3A3A3;
                    line-height: 1.4 !important;
                    text-align: left;
                }
            }
            >img{
                width: 1.2rem;
                margin-right: .1rem;
            }
        }

    }

    .CertificateList{
        padding: .3rem;
        text-align: left;

        img{
            width: .8rem;
            height: .8rem;
            object-fit: cover;
        }
    }
</style>
