<template>
    <nav-bar :navbar-data="navbarData"></nav-bar>
    <view class="container" :class="pageLoading ? 'none' : ''" :style="{ marginTop: height + 'px' }">
        <!-- 头部基础信息 -->
        <view class="baseinfo-top"
            :style="'background: url(' + imgHost + '/images/icon/' + (userData && userData.patSexDesc == '男' ? 'vison-bg' : 'vesion-bg-famale') + '.png) no-repeat center center/cover;'">
            <view class="baseinfo-data-wrap">
                <view class="baseinfo-data">
                    <text class="baseinfo-name">{{ userData && userData.patDesc }}</text>
                    <image class="baseinfo-sex"
                        :src="imgHost + '/images/icon/' + (userData && userData.patSexDesc == '男' ? 'vison-male' : 'vision-famale') + '.png'" />
                    {{ userData && userData.age }}岁
                </view>
                <view class="baseinfo-code">{{ userData && userData.hisPatNo }}</view>
            </view>
            <view v-if="admRecordData.length > 0" class="vision-top-btn" @tap="jumpLink('/pages/index/pages/visonArchives/visonChart/visonChart')">
                视力健康趋势分析
                <image class="image-arrow" :src="imgHost + '/images/icon/vison-arrow-rigint.png'"></image>
            </view>
        </view>
        <!-- 导航 -->
        <van-tabs :tabs="['全部', '检查', '病历']" :active="active" @change="onTabChange" color="#007FCC"
            title-active-color="#007FCC"></van-tabs>
        <!-- 查询的详细数据 -->
        <view class="check-list" :class="admRecordData.length == 0 ? 'min-height-200 flex-center' : ''">
            <view v-if="admRecordData.length > 0">
                <view class="check-tips">
                    <view class="check-tips-l">距离上次检查已过去<text class="check-tips-day">{{ sinceLastDay }}天</text></view>
                    <van-button round size="small" type="primary" :color="greenColor"
                        custom-class="check-appoint-btn green-btn"
                        @tap="jumpLink('/pages/index/pages/videoConsultation/videoConsultation',4)">预约挂号</van-button>
                </view>
                <view class="check-item" v-for="(item, index) in admRecordData" :key="index">
                    <view class="check-item-top">
                        <view class="check-date">{{ item.checkYear }}<view class="check-day">{{ item.checkMonth + '-' +
                            item.checkDay }}</view>
                        </view>
                        <view class="check-detail">
                            <view class="item">接诊医生:
                                <text class="check-detail-content">{{ item.recDoctor }}</text>
                            </view>
                            <view class="item">接诊验光师:
                                <text class="check-detail-content">{{ item.recOptometrist }}</text>
                            </view>
                            <view class="item" v-if="checkType != 2">检查项目:
                                <text class="check-detail-content">{{ item.checkList }}</text>
                            </view>
                            <view class="item" v-if="checkType != 1">治疗建议:
                                <text class="check-detail-content">{{ item.diagAdvice }}</text>
                            </view>
                        </view>
                    </view>
                    <view class="check-item-btns">
                        <van-button v-if="checkType != 1" round size="small" type="primary" :color="greenColor" custom-class="jump-btn"
                            @tap="jumpLink('/pages/index/pages/visonArchives/medicalRecord/medicalRecord?admID=' + item.admID)">病历</van-button>
                        <van-button v-if="checkType != 2" round size="small" type="primary" :color="blueColor" custom-class="jump-btn"
                            @tap="jumpLink('/pages/index/pages/visonArchives/visonReport/visonReport?admID=' + item.admID)">检查</van-button>
                    </view>
                </view>
                <van-divider contentPosition="center">数据已加载完成</van-divider>
            </view>
            <view v-else>
                <view class="no-data">
                    <image :src="imgHost + '/images/icon/no-data.png'" mode="aspectFit" />
                    <text>暂无数据</text>
                </view>
            </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 VanButton from '@/components/button/index'
import VanPopup from '@/components/popup/index'
import VanDivider from '@/components/divider/index'
import VanTabs from '@/components/tabs/tabs'
const app = getApp()
export default {
    components: {
        'nav-bar': navBar,
        'van-popup': VanPopup,
        'van-button': VanButton,
        'van-divider': VanDivider,
        'van-tabs': VanTabs,
    },
    data() {
        return {
            pageLoading: true, // 页面加载情况
            checkLoadStatus: [false],
            navbarData: {
                isGoHome: true,
                isGoBack: true,
                title: "眼视力健康档案"
            },
            height: app.globalData.height,
            imgHost: httpConfig && httpConfig.imgHost,
            greenColor: 'linear-gradient(0deg, #6EB92B, #A9D96A)',
            blueColor: 'linear-gradient(0deg, #007FCC, #58B1EA)',
            active: 0,
            sinceLastDay: 0,
            admRecordData: [],
            checkType: '',
            userData: null
        }
    },
    onLoad: function (options) {
        const self = this
        uni.showLoading({
            title: '页面加载中...',
        })
        self.setData({
            userData: this.$cache.get('userData')
        }, () => {
            self.init()
            self.getAmdPatient()
        })
    },
    methods: {
        init() {
            const self = this
            let {
                userData
            } = self
            userData['age'] = Util.calculateAge(userData.idCardNo)
            self.setData({
                userData
            })
        },

        // tab切换
        onTabChange(e) {
            const self = this
            self.setData({
                active: `${e.detail.name}`,
                checkType: e.detail.index == 0 ? '' : e.detail.index
            }, () => {
                self.getAmdPatient()
            });
        },

        // 查询检查和病历数据
        getAmdPatient() {
            const self = this
            const userData = this.$cache.get('userData')
            userData['hisPatNo'] = "0000358320"
            userData['hisPatID'] = "358352"
            userData['patDesc'] = "石红蓉"
            userData['imUserID'] = "patient358352"
            userData['patSexDesc'] = "女"
            this.$cache.set('userData', userData)

            let data = {
                params: [{
                    checkType: this.checkType
                }]
            }
            $http.post("urlS", self, {
                code: "17050008",
                data: data,
                namespace: "Y",
                success: function (res) {
                    Util.checkLoadStatusOpt(0, self)
                    if (+res.errorCode === 0 && res.result.data.length > 0) {
                        self.setData({
                            sinceLastDay: res.result.sinceLastDay,
                            admRecordData: res.result.data
                        })
                        app.globalData.admRecordData = res.result.data
                    }
                }
            });
        },
        // 页面跳转
        jumpLink(path,entertype) {
            Util.jumpLink(app,path,entertype);
        },
    }
}
</script>

<style>
.container {
    padding-bottom: calc(env(safe-area-inset-bottom) + 20px)
}

.baseinfo-top {
    height: 310rpx;
    padding: 0 25rpx;
}

.baseinfo-top .baseinfo-data-wrap {
    padding-top: 80rpx;
    margin-bottom: 25rpx;
    font-size: 24rpx;
    line-height: 24rpx;
    color: #666666;
}

.baseinfo-top .baseinfo-data-wrap .baseinfo-name {
    font-size: 36rpx;
    color: #333333;
}

.baseinfo-top .baseinfo-data-wrap .baseinfo-sex {
    margin: 0 4rpx 0 32rpx;
    width: 24rpx;
    height: 24rpx;
    position: relative;
    top: 2rpx;
}

.baseinfo-top .baseinfo-data-wrap .baseinfo-code {
    margin-top: 16rpx;
}

.baseinfo-top .vision-top-btn {
    box-sizing: border-box;
    padding: 16rpx 14rpx;
    line-height: 24rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: #258AF4;
    background-color: #fff;
    float: left;
    border-radius: 6rpx;
}

.baseinfo-top .vision-top-btn .image-arrow {
    width: 14rpx;
    height: 24rpx;
    position: relative;
    top: 3rpx;
}

.check-tips {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 24rpx;
    font-size: 24rpx;
    line-height: 50rpx;
    color: #666666;
}

.check-tips .check-appoint-btn {
    float: right;
    padding: 0 34rpx;
    height: 50rpx;
}

.check-tips .check-tips-day {
    color: #007FCC;
}

.check-list {
    padding-bottom: 20rpx;
}

.check-list.min-height-200 {
    min-height: 400rpx;
}

.check-list.flex-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.no-data {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.no-data image {
    width: 259rpx;
    height: 219rpx;
}

.no-data text {
    font-size: 28rpx;
    color: #9D9D9D;
    margin-top: 10rpx;
}

.check-item {
    margin: 0 24rpx 30rpx 24rpx;
    background-color: #fff;
    border-radius: 10rpx;
}

.check-item .check-item-top {
    border-bottom: 2rpx solid rgba(51, 51, 51, 0.1);
    width: 100%;
    box-sizing: border-box;
    padding: 18rpx;
    display: flex;
}

.check-item .check-item-top .check-date {
    flex: 0 0 140rpx;
    height: 140rpx;
    text-align: center;
    background: #F7F7F7;
    border-radius: 5rpx;
    box-sizing: border-box;
    padding: 24rpx;
    font-size: 36rpx;
    line-height: 36rpx;
    font-weight: bold;
    color: #007FCC;
}

.check-item .check-item-top .check-date .check-day {
    font-size: 28rpx;
    margin-top: 18rpx;
    letter-spacing: 3rpx;
}

.check-item .check-item-top .check-detail {
    flex: 1;
    margin-left: 20rpx;
    margin-top: 10rpx;
    overflow: hidden;
}

.check-item .check-item-top .check-detail .item {
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 20rpx;
    font-size: 24rpx;
    line-height: 24rpx;
    color: #666666;
}

.check-item .check-item-top .check-detail .item:last-child {
    border-bottom: 0;
}

.check-item .check-item-top .check-detail .check-detail-content {
    color: #333;
}

.check-item .check-item-btns {
    display: flex;
    justify-content: flex-end;
    padding: 12rpx 24rpx;
}

.check-item .check-item-btns .jump-btn {
    margin-left: 20rpx;
    height: 44rpx;
}</style>