<template>
    <nav-bar :navbar-data="navbarData" />
    <view class="mine" :style="{ paddingTop: height +'px', height: 'calc(100vh - ' + height + 'px)' }">
        <view class="mine-head">
            <view class="mine-head-content"
                :style="{ background: 'url(' + imgHost + '/images/icon/mine-background@2x.png) no-repeat', backgroundSize: '100% 300rpx' }">
                <view class="img-position">
                    <view class="pat-per">
                        <view class="pat-bg-photo">
                            <image class="head-image" :src="userData && userData.patSexDesc === '男' ? genderMale : userData.patSexDesc === '女' ? genderFemale : unknownGender" alt="" />
                        </view>
                        <view style="margin-left: 20rpx">
                            <view class="pat-bg-intr">
                                <view class="font-text1" v-if="userData && userData.patDesc" style="font-size: 32rpx">
                                    <text>{{ userData.patDesc || '' }}</text>
                                    <text style="margin-left: 20rpx">{{ userData.patSexDesc || '' }}</text>
                                </view>
                            </view>
                            <view class="font-text1" style="font-size: 30rpx">
                                <text>{{ userData.mobile || '请选择就诊人' }}</text>
                            </view>
                        </view>
                    </view>
                    <view class="per-center" @tap="turnPer">
                        <view style="margin-right: 10rpx">个人中心</view>
                        <uni-icons type="forward" size="15" color="#ffffff" />
                    </view>
                </view>
            </view>
            <view class="mine-head-func">
                <view></view>
                <view class="mine-head-ic">
                    <view @tap="inquirtNav" class="mine-head-func-item">
                        <image :src="imgHost + '/images/icon/yiwancheng@2x.png'" alt=""></image>
                        <view class="mine-head-func-item-title">就诊记录</view>
                        <!-- 我的咨询 -->
                        <view class="mine-head-func-item-desc">
                            <text>{{ userInfo.consultNum || 0 }}</text>
                            次
                        </view>
                    </view>
                    <view @tap="prescriptiontNav" class="mine-head-func-item">
                        <image :src="imgHost + '/images/icon/Myprescription@2x.png'" alt=""></image>
                        <view class="mine-head-func-item-title">我的处方</view>
                        <view class="mine-head-func-item-desc">
                            <text>{{ userInfo.prescNum || 0 }}</text>
                            张
                        </view>
                    </view>
                    <!-- <view @tap="recordtNav" class="mine-head-func-item">
                        <image :src="imgHost + '/images/icon/Medicalrecords@2x.png'" alt=""></image>
                        <view class="mine-head-func-item-title">诊疗记录</view>
                        <view class="mine-head-func-item-desc">
                            <text>{{ userInfo.admNum || 0 }}</text>
                            条
                        </view>
                    </view> -->
                    <view @tap="visitHistoryNav" class="mine-head-func-item">
                        <image :src="imgHost + '/images/icon/Medicalrecords@2x.png'" alt=""></image>
                        <view class="mine-head-func-item-title">就诊历程</view>
                        <view class="mine-head-func-item-desc">
                            <text>{{ userInfo.consultNum || 0 }}</text>
                            次
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="mine-list">
            <van-cell custom-class="first-cell" title="添加就诊人" :icon="imgHost + '/images/icon/Patients@2x.png'" is-link @tap="addCardNav" />
            <van-cell title="收货地址" :icon="imgHost + '/images/icon/Shippingaddress@2x.png'" is-link @tap="receiptNav" />
            <van-cell title="我的评价" :icon="imgHost + '/images/icon/mycomment@2x.png'" is-link @tap="turnType" />
            <van-cell v-if="platform == 'weixin'" title="消息订阅" :icon="imgHost + '/images/icon/Newssubscription@2x.png'" is-link @tap="messageSubscriptionNav" />
            <!-- <van-cell custom-class="last-cell" title="检查预约" icon="imgHost +'/images/icon/me_icon_patients.png" is-link @tap="checkAppointment" />
	        <van-cell custom-class="last-cell" title="预约治疗" icon="imgHost +'/images/icon/me_icon_patients.png" is-link @tap="treatment" /> -->
            <van-cell custom-class="last-cell" title="帮助和反馈" :icon="imgHost + '/images/icon/Helpandfeedback@2x.png'" @tap="helptNav" is-link />
            <van-cell custom-class="last-cell" title="关于" :icon="imgHost + '/images/icon/on@2x.png'" is-link @tap="checkAbout" />
            <!-- <view class="mine-btn" @tap="quitNav">退出登录</view> -->
			<van-cell custom-class="last-cell" title="清除本地缓存" is-link @tap="onClearStorage">
			    <view slot="icon" class="iconfont icon-clear1" style="margin-right: 10rpx; color: #58b1ea;"></view>
			</van-cell>
        </view>
        <van-dialog id="van-dialog" ref="van-dialog" :closeable="false" />
    </view>
</template>

<script>
import navBar from '@/components/navBar/index.vue';
import vanDivider from '@/components/divider/index.vue';
import vanCell from '@/components/cell/index.vue';
import vanDialog from '@/components/dialog/index.vue';
import $http from '@/utils/https';
import Util from '@/utils/utils';
import httpConfig from '@/utils/httpConfig';
import Dialog from '@/components/dialog/dialog';
const app = getApp();

export default {
    components: {
        'nav-bar': navBar,
        'van-divider': vanDivider,
        'van-cell': vanCell,
        'van-dialog': vanDialog
    },
    data() {
        return {
            platform: app.globalData.platform, // 平台
            imgHost: httpConfig && httpConfig.imgHost,
            userData: {},
            navbarData: {
                background: httpConfig.imgHost + '/images/icon/mine-background@2x.png',
                title: '我的' //导航栏 中间的标题
            },
            height: app.globalData.height,
            genderMale: httpConfig.imgHost + '/images/icon/gender-male.png', // 男
            genderFemale: httpConfig.imgHost + '/images/icon/gender-female.png', // 女
            unknownGender: httpConfig.imgHost + '/images/icon/unknown-gender.png', // 未知性别
            userInfo: {}
        };
    },
    onLoad: function () { 
        //#ifdef MP-ALIPAY
		my.setNavigationBar({
			frontColor: "#ffffff",
			backgroundColor: '#000000',
			success(res) {
				console.log('setNavigationBar success', res)
			},
			fail(err){
				console.log('setNavigationBar fail ',err)
			}
		})
		//#endif
    },
    onShow: function () {
        this.upDateUserData();
        if (typeof this.getTabBar === 'function' && this.getTabBar()) {
            this.getTabBar().setData({
                selected: 3
            });
        }
    },
    methods: {
		//清除本地缓存
		onClearStorage() {
		    uni.clearStorage({
		      success() {
		        uni.showToast({
		          icon: 'success',
		          title: '缓存清除成功',
		        })
		        // loginFun(this, app.globalData) // 微信登录获取Openid
		      }
		    })
		},
		
        checkAbout: function () {
            // let aboutData = uni.getSystemInfoSync().SDKVersion ? uni.getSystemInfoSync().SDKVersion : '' ;
            let accountInfo = uni.getAccountInfoSync();
            let version = accountInfo.miniProgram.version ? accountInfo.miniProgram.version : '';
            Dialog.alert({
                context: this,
                title: '关于',
                message: '当前版本号：' + version
            }).then(() => {
                // on close
            });
        },

        initData: function () {
            let { userData } = this;
            let data = {
                params: [
                    {
                        patID: userData.hisPatID || '',
                        hospCode: userData.hisHospID || ''
                    }
                ]
            };
            $http.post('urlS', this, {
                code: '02090011',
                data: data,
                namespace: 'Y',
                success: function (res) {
                    if (+res.errorCode === 0) {
                        this.setData({
                            userInfo: res.result
                        });
                    }
                }
            });
        },

        inquirtNav: function () {
            uni.navigateTo({
                url: '/pages/mine/myConsultation/myConsultation'
            });
        },

        prescriptiontNav: function () {
            uni.navigateTo({
                url: '/pages/mine/myPrescription/prescriptionList/prescription'
            });
        },

        recordtNav: function () {
            uni.navigateTo({
                url: '/pages/mine/medical/medicalRecords/medicalRecords'
            });
        },
        visitHistoryNav: function () {
            uni.navigateTo({
                url: '/pages/mine/medical/visitHistory/visitHistory'
            });
        },

        addCardNav: function () {
            uni.navigateTo({
                url: '/pages/mine/addCard/addAVisitor/addAVisitor'
            });
        },

        receiptNav: function () {
            uni.navigateTo({
                url: '/pages/mine/addressManagement/addressManagement'
            });
        },

        // 消息订阅
        messageSubscriptionNav() {
            uni.navigateTo({
                url: '/pages/mine/pages/messageSubscription/messageSubscription'
            });
        },

        helptNav: function () {
            uni.navigateTo({
                url: '/pages/mine/commonQuestion/question/question'
            });
        },

        // 检查预约
        checkAppointment: function () {
            uni.navigateTo({
                url: '/pages/mine/checkAppointment/checkAppointment'
            });
        },
        turnFace: function () {
            uni.navigateTo({
                url: '/pages/mine/faceRecognition/faceRecognitionList/faceRecognitionList'
            });
        },

        // 预约治疗
        treatment: function () {
            let { userData } = this;
            if (userData.patID == null || userData.patID == undefined || userData.patID == '') {
                uni.showToast({
                    icon: 'none',
                    title: '请选择就诊人'
                });
                return;
            }
            uni.navigateTo({
                url: '/pages/mine/treatment/treatment'
            });
        },

        quitNav: function () {
            console.log('tuichu');
        },

        // 更新userData数据
        upDateUserData() {
            let newUserData = this.$cache.get('userData');
            if (newUserData && newUserData.mobile) {
                newUserData.mobile = newUserData.mobile && newUserData.mobile.length === 11 ? Util.phoneNumberEncryption(newUserData.mobile) : '';
            }
            if (!(this.userData && this.userData.hisPatID === newUserData.hisPatID)) {
                this.setData({
                    userData: newUserData
                },() => {
                    this.initData();
                })
            } else {
                this.initData();
            }
        },
        turnPer() {
            let userData = this.$cache.get('userData');
            uni.navigateTo({
                url: '/pages/mine/addCard/cardDetail/cardDetail?id=' + userData.patID
            });
        },
        //跳转问诊、评论的消息页面
        turnType: Util.debounce(function () {
            uni.navigateTo({
                url: '/pages/message/pages/messageDetail/messageDetail?messageTypeCode=2006'
            });
        })
    }
};
</script>

<style lang="scss" scoped>
.mine {
    overflow: auto;
}

.mine {
    &-head {
        height: 380rpx;
        position: relative;

        &-content {
            width: 100%;
            height: 300rpx;
            box-sizing: border-box;
            display: flex;

            .image {
                width: 146rpx;
                height: 146rpx;
                margin-right: 23rpx;
            }

            &-title {
                display: flex;
                flex-direction: column;
                height: 146rpx;
                justify-content: center;
                font-size: 36rpx;
                color: #fff;

                text {
                    margin-top: 16rpx;
                }
            }
        }

        &-func {
            position: absolute;
            bottom: -40rpx;
            left: 30rpx;
            right: 30rpx;
            box-sizing: border-box;
            background: #ffffff;
            box-shadow: 0rpx 4rpx 38rpx 0rpx rgba(211, 211, 211, 0.32);
            border-radius: 8rpx;

            &-item {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                image {
                    width: 80rpx;
                    height: 80rpx;
                }

                &-title {
                    font-size: 32rpx;
                    color: #333;
                    margin: 12rpx 0;
                    font-weight: 600;
                }

                &-desc {
                    font-size: 28rpx;
                    color: #999;

                    text {
                        color: #1890ff;
                        margin-right: 4rpx;
                    }
                }
            }
        }

        &-img {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        &-text {
            margin-top: 77rpx;
            font-size: 34rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 48rpx;
            display: flex;
            justify-content: center;
            align-items: center;

            text {
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #666666;
                line-height: 40rpx;
                margin-top: 8rpx;
                margin-left: 14rpx;
            }
        }

        &-ic {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 30rpx 0;
        }
    }
}

.head-image {
    width: 120rpx;
    height: 120rpx;
}

.mine-list {
    margin: 60rpx 30rpx 30rpx 30rpx;

    .van-cell {
        height: 110rpx;
        display: flex;
        align-items: center;

        &.first-cell {
            border-radius: 10rpx 10rpx 0 0;
        }

        &.last-cell {
            border-radius: 0 0 10rpx 10rpx;
        }
    }

    &.van-icon__image,
    &.van-icon--image {
        width: 32rpx;
        height: 32rpx;
    }

    .van-cell__title {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
        margin-left: 10rpx;
    }

    .mine-btn {
        width: 100%;
        height: 120rpx;
        text-align: center;
        line-height: 120rpx;
        background: #fff;
        margin-top: 80rpx;
        font-size: 32rpx;
        color: #333;
        font-weight: 500;
        border-radius: 12rpx;
    }
}

.img-position {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: -150rpx;
}

.pat-per {
    display: flex;
    align-items: center;
    margin-left: 20rpx;
    color: #fffdfb;
}

.pat-bg-photo {
    width: 120rpx;
    height: 120rpx;
    margin-right: 20rpx;
}

.font {
    &-text1 {
        margin-top: 6rpx;
        font-size: 32rpx;
    }

    &-text2 {
        font-size: 30rpx;
        line-height: 32rpx;
        margin-left: 8rpx;
    }
}

.per-center {
    color: #fffdfb;
    background-color: #4dadf0;
    padding: 20rpx 20rpx 20rpx 40rpx;
    border-top-left-radius: 50rpx;
    border-bottom-left-radius: 50rpx;
    font-size: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}</style>
