<template>
    <!--咨询-->
    <view class="choose-doctor" :style="{height: 'calc(100vh - '+ height +'px)', overflow: 'auto' }">
        <view class=" choose-doctor-header" v-if="entrance !== '4'">
            <image class="wp-100" v-if="flag" :src="imgHost +'/images/icon/choose-doctor.png'" />
            <image class="wp-100" v-if="!flag && entrance !== '4'" :src="imgHost +'/images/icon/choose-doctor-video.png'" />
            <!-- <view class="choose-doctor-header-content" style="background: url(imgHost +'/images/icon/graphic-consultation-head-contentbg.png') no-repeat;background-size: 100% auto ;background-position: center top;">
          <view class="cdhc-text" style="padding: {{flag ? '28rpx 34rpx' : '6rpx 34rpx 0 34rpx'}}">{{ dataObj.title_text }}</view>
          <view class="cdhc-steps">
            <view v-for="{{steps}}" v-key="index" class="cdhc-steps-content">
              <text class="after" v-if="{{index === 1}}"></text>
              <image :src="{{item.img}}" class="cdhc-steps-image"></image>
              <text>{{item.text}}</text>
              <text class="before" v-if="{{index === 1}}"></text>
            </view>
          </view>
        </view> -->
        </view>
        <view class="choose-doctor-tabs">
            <view class="sticky">
                <view class="cdt-header border-bottom-after">{{schDate}}</view>
                <view class="choose-doctor-tabs-header">
                    <view v-for="(item,index) in dateList" :key="index" :class="'choose-doctor-tabs-header-content '+ (schDate === item.date ? 'active-tabs' : '')" @tap="onChange" :data-page="item">
                        <view class="cdthc-week">{{item.showWeek}}</view>
                        <view class="cdthc-title">{{item.showTitle}}</view>
                        <view :class="item.type === 'A' ? 'cdthc-number' : 'cdthc-no-number'">{{item.status}}</view>
                    </view>
                </view>
            </view>
            <!-- <van-tabs active="{{ schDate}}" bind:change="onChange" sticky swipeable >
            <block v-for="{{dateList}}" v-key="index">
              <van-tab title="{{item.currentFlag=='Y'?'今天':item.title}}" name="{{item.date}}"/>
            </block>
          </van-tabs> -->
            <view>
                <van-dropdown-menu custom-style="background-color:#f5f4f4;" postion="left">
                    <van-dropdown-item :title="locDesc" id="LocList" ref="LocList">
                        <van-tree-select style="overflow: auto" v-if="locList" :items="locList" :main-active-index="mainActiveIndex" :active-id="locID" @click-nav="onClickNav"
                            @click-item="onClickItem" />
                    </van-dropdown-item>
                </van-dropdown-menu>
            </view>
        </view>
        <view class="choose-doctor-list">
            <view v-for="(item,index) in doctorList" :key="index" class="doctor-list">
                <view @tap.stop="doctorDetail" :myMark="item.doctorID" :data-page="item">
                    <view class="doctor-list-header">
                        <view class="dlh-head-portrait" onerror="imageError"
                            :style="{ background: 'url('+ (item.image ? item.image : 'https://api.daidr.me/apis/imgholder/74x95.png?text=医生') +') no-repeat', backgroundSize: '100%', float: 'left', marginBottom: '50rpx' }" />
                        <view class="dlh-right">
                            <view class="dlh-right-top">
                                <text class="dlhrt-doctor-name">{{item.doctorName}}</text>
                                <text class="dlhrt-title">{{item.title}}</text>
                                <text class="dlhrt-loc-desc">{{item.locDesc}}</text>
                            </view>
                            <!-- <van-rate :value="item.score" :size="14" allow-half void-icon="star" readonly color="#FA541C" void-color="#fff" /> -->
                            <uni-rate :value="item.score || 0" :size="14" allow-half void-icon="star" readonly active-color="#FA541C" />
                            <view class="dlh-right-bottom">
                                咨询量：<text class="dlh-right-bottom-num">{{item.totalNum}}</text>
                                <text v-if="item.resTime"><text class="dlh-right-bottom-num">{{item.resTime}}</text>响应</text>
                            </view>
                            <view class="dlh-right-bottom">
                                <text class="dlh-right-bottom-num" style="font-weight: bold;">专长：</text>
                                <text>{{item.experise ? item.experise : '暂未维护专长项目'}}</text>
                            </view>
                        </view>
                    </view>
                    <view class="doctor-list-introduce border-bottom-after">
                        <text>{{item.introduce || '暂无该医生描述。'}}</text>
                    </view>
                </view>
                <view class="doctor-list-btn">
                    <view></view>
                    <view class="doctor-list-btn-r">
                        <text class="doctor-list-btn-unit" v-if="flag">￥</text>
                        <text class="doctor-list-btn-money" v-if="flag">{{item.imagePrice}}</text>
                        <text class="doctor-list-btn-unit" v-if="!flag">￥</text>
                        <text class="doctor-list-btn-money" v-if="!flag">{{entrance === '4'?item.opPrice:item.videoPrice}}</text>
                        <button class="button-css" @tap="turn" :data-page="item" :data-locid="locID"
                            style="width: 160rpx;height: 60rpx;line-height:60rpx;background: #FFEAC8;border-radius: 30rpx;color: #CC6600;text-align: center;padding: 0;font-size: 26rpx;">{{flag ? "立即问诊" : (entrance === '4' ? "挂号" : "预约看诊")}}</button>
                    </view>
                </view>
            </view>
        </view>
        <van-divider contentPosition="center">数据已加载完成</van-divider>
    </view>
</template>

<script>
    import VanDropdownMenu from '@/components/dropdown-menu/index'
    import VanDropdownItem from '@/components/dropdown-item/index'
    import VanTreeSelect from '@/components/tree-select/index.vue'
    import VanDivider from '@/components/divider/index'
    import VanButton from '@/components/button/index'
    import VanSticky from '@/components/sticky/index'
    import Util from '@/utils/utils';
    import $http from '@/utils/https';
    import httpConfig from '@/utils/httpConfig';
    const app = getApp()
    export default {
        components: {
            'van-tree-select': VanTreeSelect,
            'van-dropdown-menu': VanDropdownMenu,
            'van-dropdown-item': VanDropdownItem,
            'van-divider': VanDivider,
            'van-button': VanButton,
            'van-sticky': VanSticky
        },
        props: {
            dataObj: {
                type: Object,
                default: {}
            },
            path: {
                type: String,
                default: ''
            },
            flag: {
                type: Boolean,
                default: null
            } ///true:图文咨询  false:视频咨询
        },
        data() {
            return {
                windowHost: httpConfig && httpConfig.ipDeault,
                imgHost: httpConfig && httpConfig.imgHost,
                mainActiveIndex: 0,
                locID: 0,
                locDesc: "",
                hisHospID: "",
                locList: null,
                dateList: [],
                doctorList: [],
                schDate: "",
                active: 0,
                height: app.globalData.height,
                entrance: ""
            }
        },
        mounted: function(params) {
            const userData = this.$cache.get('userData')
            this.setData({
                hisHospID: userData.hisHospID,
                locID: app.globalData.locObj.locID,
                locDesc: app.globalData.locObj.locDesc,
                entrance: app.globalData.reservationEntrance
            }, () => {
                this.getSevenDate();
                this.getLocList();
            });
            app.globalData.writeObj.fileList = []
            app.globalData.writeObj.disesNote = ""
            app.globalData.writeObj.disesTime = ""
        },
        methods: {
            onClickNav(e) {
                this.setData({
                    mainActiveIndex: e.index || 0
                });
            },

            onConfirm: function() {
                // this.selectComponent('#LocList').toggle();
                this.$refs.LocList.toggle();
            },

            ///变更科室
            onClickItem(e) {
                this.setData({
                    locID: e.id,
                    locDesc: e.text
                }, () => {
                    app.globalData.locObj = {
                        locID: e.id,
                        locDesc: e.text
                    };
                    this.getSevenDate();
                    this.getDoctorList();
                    this.onConfirm();
                });
            },

            ///日期tab变更
            onChange(event) {
                let active = event.currentTarget.dataset.page.date;
                this.setData({
                    schDate: active
                }, () => {
                    app.globalData.schDate = active
                    uni.showLoading({
                        mask: true
                    })
                    this.getDoctorList();
                });
            },
            //图片加载出错，替换为默认图片
            imageError(e) {
                let {
                    doctorList
                } = this.doctorList;
                var index = e.target.dataset.index;
                doctorList[index].image = "https://api.daidr.me/apis/imgholder/74x95.png?text=推荐医生";
                this.setData({
                    doctorList: doctorList
                });
            },

            ///查看医生主页
            doctorDetail: Util.debounce(function(e) {
                let docObj = e.currentTarget.dataset.page
                app.globalData.docObj = docObj;
                uni.navigateTo({
                    url: '../../doctorInfo/doctorInfo',
                })
            }),

            ///调接口获取7天日期
            getSevenDate: function() {
                let entrance = app.globalData.reservationEntrance;
                let data = {
                    params: [{
                        hospID: this.hisHospID,
                        locID: this.locID,
                        imageFlag: this.flag && entrance === '2' ? "Y" : undefined,
                        videoFlag: !this.flag && entrance === '3' ? "Y" : undefined,
                        freeFlag: entrance === '1' ? "Y" : undefined,
                        opFlag: entrance === '4' ? "Y" : undefined,
                    }]
                }
                uni.showLoading({
                    mask: true
                })
                $http.post("urlS", this, {
                    namespace: "Y",
                    code: "99070002",
                    data: data,
                    success: function(res) {
                        if (+res.errorCode === 0) {
                            for (let i = 0; i < res.result.length; i++) {
                                res.result[i].showWeek = res.result[i].dataIndex ? Util
                                    .digitalConversionWeek(+res.result[i].dataIndex) : '';
                                res.result[i].showTitle = res.result[i].currentFlag === 'Y' ? '今天' : res
                                    .result[i].title.slice(3);
                            }
                            this.setData({
                                dateList: res.result,
                                schDate: res.result.length > 0 ? res.result[0].date : ""
                            }, () => {
                                app.globalData.schDate = this.schDate;
                                this.getDoctorList();
                            });
                        } else {
                            uni.hideLoading();
                            this.setData({
                                dateList: []
                            });
                        }
                    }
                });
            },

            ///调接口获取科室列表
            getLocList: function() {
                const self = this
                return new Promise((resolve, reject) => {
                    let entrance = app.globalData.reservationEntrance;
                    let data = {
                        params: [{
                            hospCode: self.hisHospID,
                            imageFlag: self.flag && entrance === '2' ? "Y" : undefined,
                            videoFlag: !self.flag && entrance === '3' ? "Y" : undefined,
                            freeFlag: entrance === '1' ? "Y" : undefined,
                            opFlag: entrance === '4' ? "Y" : undefined,
                        }]
                    }
                    $http.post("urlS", self, {
                        namespace: "Y",
                        code: "03100037",
                        data: data,
                        success: function(res) {
                            if (+res.errorCode === 0) {
                                const resData = res.result.data && res.result.data.map(item => {
                                    item['disabled'] = false
                                    return item
                                })
                                self.setData({
                                    locList: resData
                                }, () => {
                                    resolve()
                                });
                            } else {
                                self.setData({
                                    locList: null
                                });
                            }
                        }
                    });
                })
            },

            ///查询科室医生列表
            getDoctorList: function() {
                let entrance = app.globalData.reservationEntrance;
                let data = {
                    params: [{
                        hospCode: this.hisHospID,
                        locID: this.locID,
                        userID: "",
                        imageFlag: this.flag && entrance === '2' ? "Y" : undefined,
                        videoFlag: !this.flag && entrance === '3' ? "Y" : undefined,
                        freeFlag: entrance === '1' ? "Y" : undefined,
                        opFlag: entrance === '4' ? "Y" : undefined,
                        date: this.schDate
                    }]
                }
                $http.post("urlS", this, {
                    namespace: "Y",
                    code: "03100038",
                    data: data,
                    success: function(res) {
                        uni.hideLoading();
                        if (+res.errorCode === 0) {
                            let doctorList = res.result && res.result.data ? res.result.data : [];
                            for (var i = 0; i < doctorList.length; i++) {
                                let url = doctorList[i] && doctorList[i].image ? doctorList[i].image :
                                    "";
                                doctorList[i].image = url.indexOf("http") !== -1 ? url : this
                                    .windowHost + url;
                            }
                            this.setData({
                                doctorList
                            });
                        } else {
                            this.setData({
                                doctorList: []
                            });
                        }
                    }
                });
            },

            ///预约看诊跳转
            turn: Util.debounce(function(e) {
                console.log(e)
                let docObj = e.currentTarget.dataset.page
                app.globalData.docObj = docObj;
                uni.navigateTo({
                    url: this.path,
                })
            })
        },
    }
</script>

<style lang="scss">
    @use '@/static/common.scss' as common;

    .wp-100 {
        width: 100%;
        height: 100%;
    }

    .choose-doctor-header {
        position: relative;
        height: 280rpx;
    }

    .choose-doctor-header-bg {
        height: 242rpx;
    }

    .choose-doctor-header-content {
        position: absolute;
        top: 10rpx;
        left: 24rpx;
        right: 24rpx;
        bottom: 0;
        height: 272rpx;
    }

    .choose-doctor-header-content .cdhc-text {
        width: 100%;
        box-sizing: border-box;
        font-size: 28rpx;
        color: #666;
    }

    .cdhc-steps {
        display: flex;
        justify-content: space-around;
        margin-top: 24rpx;
    }

    .cdhc-steps-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        min-width: 112rpx;
    }

    .cdhc-steps-content text {
        color: #666;
        font-size: 28rpx;
        font-weight: bold;
    }

    .cdthc-number {
        color: #1890FF;
    }

    .cdthc-no-number {
        color: #ccc
    }

    .active-tabs .cdthc-title,
    .active-tabs .cdthc-number,
    .active-tabs .cdthc-no-number {
        color: #fff;
    }

    .cdhc-steps-content:nth-child(1) text {
        color: #1890FF;
    }

    .cdhc-steps .cdhc-steps-image {
        width: 80rpx;
        height: 80rpx;
        margin-bottom: 12rpx;
    }

    .cdhc-steps-content .after,
    .cdhc-steps-content .before {
        position: absolute;
        width: 70%;
        height: 4rpx;
        background: #eee;
        top: 40rpx;
        right: 90%;
    }

    .cdhc-steps-content .before {
        left: 90%;
    }

    .choose-doctor-tabs {
        margin-top: 10rpx;
        top: 0rpx;
        position: -webkit-sticky;
        position: sticky;
        z-index: 99;
    }

    .cdt-header {
        text-align: center;
        background-color: #fff;
        height: 56rpx;
        line-height: 56rpx;
        font-size: 28rpx;
        color: #666;
        border-radius: 10rpx 10rpx 0 0;
    }

    .choose-doctor-tabs-header {
        display: flex;
        padding: 16rpx;
        box-sizing: border-box;
        justify-content: space-around;
        background: #fff;
        border-radius: 0 0 10rpx;
    }

    .choose-doctor-tabs-header-content {
        display: flex;
        flex-direction: column;
        width: 80rpx;
        height: 136rpx;
        color: #666;
        font-size: 28rpx;
        font-weight: bold;
        justify-content: center;
        align-items: center;
    }

    /* .active .cdthc-week {
    
    } */
    .cdthc-title {
        color: #333;
        font-size: 32rpx;
        margin: 6rpx 0;
    }

    .active-tabs {
        background: #1890FF;
        color: #fff;
    }

    .active-tabs .cdthc-title {
        color: #fff;
    }

    .sticky .van-sticky-wrap {
        width: 100%;
        padding: 0 24rpx;
        box-sizing: border-box;
    }

    .dropdown-menu .van-dropdown-menu {
        background: #f5f4f4;
    }

    .dropdown-menu .van-dropdown-menu__item {
        justify-content: left;
    }

    .choose-doctor-list {
        padding: 0 24rpx;
    }

    .doctor-list {
        background: #fff;
        border-radius: 10rpx;
        margin-bottom: 10rpx;
    }

    .doctor-list:last-child {
        margin-bottom: 0;
    }

    .doctor-list-header {
        display: flex;
        width: 100%;
        padding: 32rpx;
        padding-bottom: 20rpx;
        box-sizing: border-box;
    }

    .dlh-head-portrait {
        height: 120rpx;
        width: 120rpx;
        margin-right: 24rpx;
    }

    .dlh-right {
        font-size: 28rpx;
        color: #666;
    }

    .dlh-right .dlhrt-doctor-name {
        font-size: 36rpx;
        color: #333;
        font-weight: 600;
        margin-right: 16rpx;
    }

    .dlh-right .dlhrt-title {
        margin-right: 16rpx;
    }

    .dlh-right .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;
    }

    .dlh-right .van-rate .van-icon.van-icon-star {
        color: #fff;
    }

    .dlh-right-bottom .dlh-right-bottom-num {
        color: #13C2C2;
    }

    .dlh-right-bottom .dlh-right-bottom-num:nth-child(1) {
        margin-right: 18rpx;
    }

    .doctor-list-introduce {
        width: 100%;
        padding: 0 29rpx 24rpx 29rpx;
        box-sizing: border-box;
    }

    .doctor-list-introduce text {
        width: 100%;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        color: #666;
    }

    .doctor-list-btn {
        height: 109rpx;
        line-height: 109rpx;
        display: flex;
        padding: 0 16rpx;
        color: #666;
        font-size: 28rpx;
        justify-content: space-between;
    }

    .doctor-list-btn-r {
        display: flex;
        align-items: center;
    }

    .doctor-list-btn-unit {
        color: #999;
    }

    .doctor-list-btn-division {
        color: #999;
        margin: 0 12rpx;
    }

    .doctor-list-btn-money {
        color: #FA541C;
        margin-right: 20rpx;
    }

    .doctor-list-btn-float {
        font-size: 24rpx;
        color: #FA541C;
    }

    .choose-doctor-tabs .van-sticky-wrap--fixed {
        height: 242rpx;
        background: url("/images/icon/graphic-consultation-bg.png") no-repeat;
        background-size: 100% auto;
        padding-top: 10rpx;
    }
</style>