<template>
    <nav-bar :navbar-data="navbarData" />
    <view class="order" :style="{ marginTop: height +'px', height: 'calc(100vh - '+ height +'px)' }">
        <view style="overflow: hidden;">
            <view style="overflow: hidden;">
                <van-tabs :tabs="['关注的医生', '曾就诊的医生']" active="active" @change="onChange" sticky :offset-top="height - 2" tab-active-class="tabs-active" />
            </view>
            <view v-for="(item, index) in docList" :key="index">
                <doctorInfo :doctorInfo="item" path="../../pages/doctorInfo/doctorInfo" />
            </view>
        </view>
    </view>
</template>

<script>
import $http from "@/utils/https";
import Util from '@/utils/utils';
import httpConfig from '@/utils/httpConfig'
import navBar from '@/components/navBar/index'
import vanTabs from '@/components/tabs/tabs'
import doctorInfo from '../components/doctorInfo/doctorInfo'
const app = getApp()
export default {
    components: {
        'nav-bar': navBar,
        'doctorInfo': doctorInfo,
        'van-tabs': vanTabs
    },
    data() {
        return {
            height: app.globalData.height,
            windowHost: httpConfig && httpConfig.ipDeault,
            navbarData: {
                isGoHome: true,
                isGoBack: true,
                title: "我的医生"
            },
            active: 0,
            userData: null,
            docList: []
        }
    },
    onLoad() {
        const userData = this.$cache.get('userData')
        if (userData) this.userData = userData
        this.doctorQuery()
    },
    methods: {
        imageError(e) {
            let {
                docList
            } = this;
            var index = e.target.dataset.index;
            docList[index].image = "https://api.daidr.me/apis/imgholder/74x95.png?text=推荐医生";
            this.docList = docList
        },

        onChange(event) {
            this.setData({
                active: `${event.detail.name}`,
            }, () => {
                this.doctorQuery()
            });
        },

        ///查询我的医生列表
        doctorQuery: Util.debounce(function () {
            var doctorType = this.active
            let userData = this.$cache.get('userData');
            let data = {
                params: [{
                    openID: userData.openID || "",
                    patID: userData.hisPatID || "",
                    patNo: userData.hisPatNo || "",
                    hospCode: userData.hisHospID || "",
                    doctorType: doctorType + "",
                }]
            }
            uni.showLoading({
                mask: true
            })
            $http.post("urlS", this, {
                code: "03100113",
                data: data,
                namespace: "Y",
                success: function (res) {
                    uni.hideLoading();
                    if (+res.errorCode === 0) {
                        let docList = res.result && res.result.data ? res.result.data : [];
                        for (var i = 0; i < docList.length; i++) {
                            let url = docList[i] && docList[i].image ? docList[i].image : "";
                            docList[i].image = url.indexOf("http") !== -1 ? url : this.windowHost + url;
                        }
                        this.docList = docList
                    } else {
                        this.docList = []
                    }
                }
            });
        })
    }
}
</script>

<style>
.more-doctor {
    overflow: auto;
    position: relative;
    padding-top: 108rpx;
    box-sizing: border-box;
}

.more-doctor-search {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 108rpx;
}

.more-doctor-search .van-search__content {
    background: #fff;
}

.more-doctor-content {
    width: 100%;
    height: 100%;
}

.itdc-head {
    padding: 31rpx 24rpx 0 25rpx;
    background: rgba(255, 255, 255, 1);
    border-radius: 10rpx;
    margin: 0rpx 24rpx 8rpx 24rpx;
}

.itdc-head-portrait {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    margin-right: 24rpx;
}

.font-28 {
    font-size: 28rpx;
    font-family: PingFang SC;
    color: #666666FF
}

.font-26 {
    font-size: 26rpx;
    font-family: PingFang SC;
    color: #CC6600;
}

.font-36 {
    font-size: 36rpx;
    font-family: PingFang SC;
    color: rgba(51, 51, 51, 1);
}

.itdc-introduct {
    width: 100%;
    padding: 20rpx 53rpx 29rpx 25rpx;
    box-sizing: border-box;
}

.itdc-introduct text {
    overflow: hidden;
    line-height: 38rpx;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 28rpx;
    color: #999;
}

.itdc-introduct .itdc-introduct-text {
    color: #666;
}

.button-css {
    height: 60rpx !important;
    margin-left: 16rpx;
    min-width: 254rpx;
}

.itdc-head-content-top-text {
    font-size: 28rpx;
    color: #666;
}

.itdc-head-content-top-text text:nth-child(1) {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
}

.itdc-head-content-top-text text:nth-child(2) {
    margin: 0 16rpx;
}

.itdc-head-content-top .van-rate {
    border-radius: 10rpx;
    width: 240rpx;
    height: 40rpx;
    margin: 16rpx 0;
    line-height: 40rpx;
    background: #feeee8;
    display: flex;
    justify-content: space-between;
    padding: 0 12rpx;
    padding-bottom: 4rpx;
    align-items: center;
    box-sizing: border-box;
}

.order {
    box-sizing: border-box;
}

.order-content {
    width: 100%;
    height: 100%;
}

.order .van-tabs .van-tabs__scroll {
    background: #f5f4f4;
}
</style>