<template>
    <nav-bar :navbar-data="navbarData" />
    <view class="container" :class="pageLoading ? 'none' : ''"
        :style="{ marginTop: height +'px'}">
        <!-- 导航 -->
        <van-tabs :tabs="admRecordData" :active="active" :sticky="true" @change="onChange" :ellipsis="false" color="#007FCC"
            tab-active-class="tab-active-class" tab-class="tab-class-custom"></van-tabs>
        <view class="report-wrap">
            <view class="report-title">检查报告</view>
            <view class="report-content" v-if="checkReportData.optSheet">
                <view class="table-item table-title">
                    <text class="text-indent">项目</text>
                    <text>右眼（OD）</text>
                    <text>左眼（OS）</text>
                </view>
                <view class="table-item">
                    <text>裸眼视力</text>
                    <text>{{ (checkReportData && checkReportData.optSheet.nakedEyeR) || '-' }}</text>
                    <text>{{ (checkReportData && checkReportData.optSheet.nakedEyeL) || '-' }}</text>
                </view>
                <view class="table-item">
                    <text>矫正视力</text>
                    <text>{{ (checkReportData && checkReportData.optSheet.cr) || '-' }}</text>
                    <text>{{ (checkReportData && checkReportData.optSheet.cl) || '-' }}</text>
                </view>
                <view class="table-item">
                    <text>球镜度数(D)</text>
                    <text>{{ (checkReportData && checkReportData.optSheet.ballR) || '-' }}</text>
                    <text>{{ (checkReportData && checkReportData.optSheet.ballL) || '-' }}</text>
                </view>
                <view class="table-item">
                    <text>柱镜度数(D)</text>
                    <text>{{ (checkReportData && checkReportData.optSheet.colR) || '-' }}</text>
                    <text>{{ (checkReportData && checkReportData.optSheet.colL) || '-' }}</text>
                </view>
                <view class="table-item">
                    <text>轴位</text>
                    <text>{{ (checkReportData && checkReportData.optSheet.axisR) || '-' }}</text>
                    <text>{{ (checkReportData && checkReportData.optSheet.axisL) || '-' }}</text>
                </view>
                <view class="table-item">
                    <text>ADD</text>
                    <text class="flex2">{{ (checkReportData && checkReportData.optSheet.add) || '-' }}</text>
                </view>
                <view class="table-item">
                    <text>散瞳药物</text>
                    <text class="flex2">{{ (checkReportData && checkReportData.optSheet.mydDrugs) || '-' }}</text>
                </view>
                <view class="table-item">
                    <text>备注</text>
                    <text class="flex2">{{ (checkReportData && checkReportData.optSheet.notes) || '-' }}</text>
                </view>
                <!-- <view class="table-item">
                        <text>眼轴（mm）</text>
                        <text>12.1</text>
                        <text>12.5</text>
                    </view> 
                    <view class="table-item">
                        <text>角膜曲率（mm）</text>
                        <text>12.1</text>
                        <text>12.5</text>
                    </view>
                    <view class="table-item">
                        <text class="text-indent">平K（D）</text>
                        <text>12.1</text>
                        <text>12.5</text>
                    </view>
                    <view class="table-item">
                        <text class="text-indent">陡K（D）</text>
                        <text>12.1</text>
                        <text>12.5</text>
                    </view>
                    <view class="table-item">
                        <text class="text-indent">△K（D）</text>
                        <text>12.1</text>
                        <text>12.5</text>
                    </view>
                    <view class="table-item">
                        <text>球镜度数（D）</text>
                        <text>-.1</text>
                        <text>1.5</text>
                    </view>
                    <view class="table-item">
                        <text class="text-indent">柱镜度数（D）</text>
                        <text>12.1</text>
                        <text>12.5</text>
                    </view>
                    <view class="table-item">
                        <text class="text-indent">散光轴位（°））</text>
                        <text>12.1</text>
                        <text>12.5</text>
                    </view>
                    
                    <view class="table-item">
                        <text>棱镜度数（D）</text>
                        <text>-.1</text>
                        <text>1.5</text>
                    </view>
                    <view class="table-item">
                        <text>下加光（D）</text>
                        <text>-.1</text>
                        <text>1.5</text>
                    </view>
                -->
            </view>
            <!-- <view class="report-title">眼表检查</view>
            <view class="report-content">双眼结膜无充血、角膜透明、虹膜纹路清晰、瞳孔等大阿萨德硕大的撒。</view>
            <view class="report-title">眼底检查</view>
            <view class="report-content">双眼结膜无充血、角膜透明、虹膜纹路清晰、瞳孔等大阿萨德硕大的撒。</view>
            <view class="report-title">眼位检查</view>
            <view class="report-content">双眼结膜无充血、角膜透明、虹膜纹路清晰、瞳孔等大阿萨德硕大的撒。</view> -->
            <view class="report-title">治疗方案</view>
            <!-- <view class="report-content">双眼结膜无充血、角膜透明、虹膜纹路清晰、瞳孔等大阿萨德硕大的撒。</view> -->
            <view class="report-content" v-if="checkReportData && checkReportData.advice">
                <view class="table-item">
                    <text>折射率</text>
                    <text class="pr-48">{{ (checkReportData && checkReportData.advice.refIndex) || '-' }}</text>
                </view>
                <view class="table-item">
                    <text>其他要求</text>
                    <text class="pr-48">{{ (checkReportData && checkReportData.advice.otherQus) || '-' }}</text>
                </view>
                <view class="table-item">
                    <text>镜片设计</text>
                    <text class="pr-48">{{ (checkReportData && checkReportData.advice.lensDesign) || '-' }}</text>
                </view>
                <view class="table-item">
                    <text>视觉训练</text>
                    <text>{{ (checkReportData && checkReportData.advice.visualTraining) || '-' }}</text>
                </view>
                <view class="table-item">
                    <text>矫正方式</text>
                    <text>{{ (checkReportData && checkReportData.advice.correctionMethod) || '-' }}</text>
                </view>
                <view class="table-item">
                    <text>镜片类型</text>
                    <text>{{ (checkReportData && checkReportData.advice.lensType) || '-' }}</text>
                </view>
                <view class="table-item">
                    <text>曈高</text>
                    <text>{{ (checkReportData && checkReportData.advice.pupilHeight) || '-' }}</text>
                </view>
            </view>

            <view class="optometry-content">
                <view class="item">
                    <text class="label">验光方法：</text>
                    <text class="text">{{ (checkReportData && checkReportData.optSheet.optometryMethod) }}</text>
                </view>
                <view class="item">
                    <text class="label">验光类型：</text>
                    <text class="text">{{ (checkReportData && checkReportData.optSheet.optometryType) }}</text>
                </view>
                <view class="item">
                    <text class="label">验光日期：</text>
                    <text class="text">{{ (checkReportData && checkReportData.optSheet.checkDate) || '-' }}</text>
                </view>
                <view class="item">
                    <text class="label">验光师：</text>
                    <text class="text">{{ (checkReportData && checkReportData.optSheet.recOptometrist) || '-' }}</text>
                </view>
            </view>
        </view>

        <view class="jump-btn-wrap">
            <van-button size="large" type="primary" :color="blueColor" @tap="jumpLink('/pages/index/pages/videoConsultation/videoConsultation',4)" custom-class="jump-btn">预约挂号</van-button>
        </view>
    </view>
</template>
<script>
import $http from "@/utils/https"
import Util from '@/utils/utils'
import navBar from '@/components/navBar/index'
import VanButton from '@/components/button/index'
import VanPopup from '@/components/popup/index'
import VanDivider from '@/components/divider/index'
const app = getApp();
export default {
    components: {
        'nav-bar': navBar,
        'van-popup': VanPopup,
        'van-button': VanButton,
        'van-divider': VanDivider
    },
    data() {
        return {
            pageLoading: true,
            checkLoadStatus: [false],
            navbarData: {
                isGoHome: true,
                isGoBack: true,
                title: "视力检查报告"
            },
            height: app.globalData.height,
            blueColor: '#007FCC',
            active: 0,
            admID: null,
            checkReportData: null, // 报告数据
            admRecordData: []
        }
    },
    onLoad: function (options) {
        uni.showLoading({
            title: '页面加载中...',
        })
        if (options.hasOwnProperty('admID') && options.admID) {
            this.setData({
                admID: options.admID,
                admRecordData: app.globalData.admRecordData.map(item => item.checkDate)
            }, () => {
                this.orderQuery()
            })
        }
    },
    methods: {
        // tab切换
        onChange(event) {
            this.setData({
                active: `${event.detail.name}`,
            }, () => {
                this.orderQuery()
            });
        },

        // 查询检查和病历数据
        orderQuery() {
            const self = this
            const { admID } = self
            let data = {
                params: [{
                    "admID": admID
                }],
            }
            $http.post("urlS", self, {
                code: "17050009",
                data: data,
                namespace: "Y",
                success: function (res) {
                    Util.checkLoadStatusOpt(0, self)
                    if (+res.errorCode === 0) {
                        self.setData({
                            sinceLastDay: res.result.sinceLastDay,
                            checkReportData: res.result
                        })
                    }
                }
            });
        },

        // 页面跳转
        jumpLink(path, entertype) {
            Util.jumpLink(app, path, entertype);
        },
    }
}
</script>

<style>
.container {
    padding-top: 2rpx;
    padding-bottom: 4rpx;
}
.tab-class-custom {
    font-size: 28rpx !important;
    color: #666 !important;
    padding: 0 24rpx !important;
}

.tab-active-class {
    color: #007FCC !important;
}

.report-wrap {
    margin: 30rpx 24rpx calc(env(safe-area-inset-bottom) + 140rpx);
    background: #FFFFFF;
    border-radius: 10rpx;
    padding: 0 20rpx;
}

.report-wrap .report-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #007FCC;
    padding: 24rpx 0;
    border-bottom: 2rpx solid rgba(51, 51, 51, 0.3);
}

.report-wrap .report-content {
    font-size: 24rpx;
    font-weight: 400;
    color: #666666;
    line-height: 48rpx;
    padding: 14rpx 0 20rpx 0;
}

.report-wrap .report-content .table-item {
    display: flex;
    font-size: 24rpx;
    border-bottom: 2rpx solid rgba(51, 51, 51, 0.1);
}

.report-wrap .report-content .table-title {
    font-weight: 600;
}

.report-wrap .report-content .table-title .text-indent {
    text-indent: 24rpx;
}

.report-wrap .report-content .table-item text:first-child {
    flex: 2;
    text-align: left;
}

.report-wrap .report-content .table-item text:last-child {
    text-align: right;
    padding-right: 48rpx;
}

.report-wrap .report-content .table-item text.pr-48 {
    padding-right: 48rpx !important;
}

.report-wrap .report-content .table-item:first-child text:last-child {
    text-align: right;
    padding-right: 0;
}

.report-wrap .report-content .table-item text {
    flex: 1;
    text-align: center;
    line-height: 24rpx;
    padding: 20rpx 0;
}

.report-wrap .report-content .table-item text.flex2 {
    flex: 2;
    text-align: center;
    padding-right: 0;
}

.jump-btn-wrap {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    padding: 20rpx 24rpx 0;
    padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
    background: #fff;
    box-shadow: 10rpx 0 0 rgba(0, 0, 0, 0.05),
        10rpx -10rpx 10rpx 10rpx rgba(0, 0, 0, 0.05),
        10rpx 0 0 rgba(0, 0, 0, 0.05),
        10rpx 0 0 rgba(0, 0, 0, 0.05);
}

.jump-btn-wrap .jump-btn {
    width: 702rpx;
    height: 80rpx;
    border-radius: 10rpx;
}

.optometry-content {
    margin-top: 30rpx;
    padding-bottom: 30rpx;
}

.optometry-content .item {
    display: flex;
    font-size: 24rpx;
    padding: 6rpx 0;
    justify-content: flex-end;
}

.optometry-content .item .text {
    display: block;
    width: 120rpx;
    text-align: left;
}</style>