<template>
    <nav-bar :navbar-data="navbarData" />
    <view :style="{ marginTop: height +'px', paddingBottom: '4rpx' }">
        <!-- 导航 -->
        <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-content detail-content">
                时间：{{ (diagInfo && diagInfo.admTime) || '-' }}
                <text class="float-right">{{ patBaseInfo && patBaseInfo.reAdm == 'N' ? '初诊' : '复诊' }} </text>
            </view>
            <view class="report-content detail-content">
                <view class="content-item">
                    姓名：
                    <text class="content-detail">{{ (patBaseInfo && patBaseInfo.patName) || '-' }}</text>
                </view>
                <view class="content-item text-center">
                    性别：
                    <text class="content-detail">{{ (patBaseInfo && patBaseInfo.patGender) || '-' }}</text>
                </view>
                <view class="content-item text-right">
                    年龄：
                    <text class="content-detail">{{ (patBaseInfo && patBaseInfo.patAge) || '-' }}</text>
                </view>
                <view>
                    就诊号：
                    <text class="content-detail">{{ admID || '-' }}</text>
                </view>
            </view>
            <view class="report-content detail-content">
                <view class="detail-item">
                    <text class="detail-item-label">主诉：</text>
                    <text class="content-detail">{{ (diagInfo && diagInfo.mainDiag) || '-' }}</text>
                </view>
                <view class="detail-item">
                    <text class="detail-item-label">现病史：</text>
                    <text class="content-detail">{{ (diagInfo && diagInfo.hPI) || '-' }}</text>
                </view>
                <view class="detail-item">
                    <text class="detail-item-label">既往史：</text>
                    <text class="content-detail">{{ (diagInfo && diagInfo.pastHistoy) || '-' }}</text>
                </view>
                <view class="detail-item">
                    <text class="detail-item-label">过敏史：</text>
                    <text class="content-detail">{{ (diagInfo && diagInfo.allergy) || '-' }}</text>
                </view>
                <view class="detail-item">
                    <text class="detail-item-label">其他病史：</text>
                    <text class="content-detail">{{ (diagInfo && diagInfo.otherHistory) || '-' }}</text>
                </view>
            </view>
            <view class="report-title check-tilte">检查信息</view>
            <view class="report-content report-table">
                <view class="table-item table-title">
                    <view class="text-indent table-head">
                        <view class="table-name1">项目</view>
                        <view class="table-name2">眼别</view>
                        <view class="table-line"></view>
                    </view>
                    <text>右眼(OD)</text>
                    <text>左眼(OS)</text>
                </view>
                <view class="table-item">
                    <text class="table-name">裸眼视力</text>
                    <text>{{ (diagInfo && diagInfo.nakedEyeOD) || '-' }}</text>
                    <text>{{ (diagInfo && diagInfo.nakedEyeOS) || '-' }}</text>
                </view>
                <view class="table-item">
                    <text class="table-name">戴镜视力</text>
                    <text>{{ (diagInfo && diagInfo.djslOD) || '-' }}</text>
                    <text>{{ (diagInfo && diagInfo.djslOS) || '-' }}</text>
                </view>
                <view class="table-item">
                    <text class="table-name">现镜度数(°)</text>
                    <text>{{ (diagInfo && diagInfo.xjdsOD) || '-' }}</text>
                    <text>{{ (diagInfo && diagInfo.xjdsOS) || '-' }}</text>
                </view>
                <view class="table-item">
                    <text class="table-name">眼压(mmHg)</text>
                    <text>{{ (diagInfo && diagInfo.yyOD) || '-' }}</text>
                    <text>{{ (diagInfo && diagInfo.yyOS) || '-' }}</text>
                </view>
                <view class="table-item">
                    <text class="table-name">眼轴(mm)</text>
                    <text>{{ (diagInfo && diagInfo.yzOD) || '-' }}</text>
                    <text>{{ (diagInfo && diagInfo.yzOS) || '-' }}</text>
                </view>
                <view class="table-item">
                    <text class="table-name">眼位</text>
                    <text>{{ (diagInfo && diagInfo.eyePositionR) || '-' }}</text>
                    <text>{{ (diagInfo && diagInfo.eyePositionL) || '-' }}</text>
                </view>
                <view class="table-item">
                    <text class="table-name">眼球运动</text>
                    <text>{{ (diagInfo && diagInfo.eyeMovementsR) || '-' }}</text>
                    <text>{{ (diagInfo && diagInfo.eyeMovementsL) || '-' }}</text>
                </view>
                <view class="table-item">
                    <text class="table-name">屈光介质</text>
                    <text>{{ (diagInfo && diagInfo.qgMediumR) || '-' }}</text>
                    <text>{{ (diagInfo && diagInfo.qgMediumL) || '-' }}</text>
                </view>
                <view class="table-item">
                    <text class="table-name">眼底</text>
                    <text>{{ (diagInfo && diagInfo.fundusR) || '-' }}</text>
                    <text>{{ (diagInfo && diagInfo.fundusL) || '-' }}</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>
                <view class="report-title">医生诊断</view>
                <view class="report-content">{{ (diagInfo && diagInfo.diagnosis) || '--' }}</view>
            </view>
            <view>
                <view class="report-title">处方</view>
                <view class="report-content">{{ (diagInfo && diagInfo.prescription) || '--' }}</view>
            </view>
            <view>
                <view class="report-title">建议矫正方案</view>
                <view class="report-content">{{ (diagInfo && diagInfo.adviceScheme) || '--' }}</view>
            </view>
            <view>
                <view class="report-title">方案备注</view>
                <view class="report-content">{{ (diagInfo && diagInfo.planRemark) || '--' }}</view>
            </view>
            <view>
                <view class="report-title">就诊情况描述</view>
                <view class="report-content">{{ (diagInfo && diagInfo.admDescripts) || '--' }}</view>
            </view>
            <view class="report-title">治疗建议</view>
            <view class="report-content">{{ (diagInfo && diagInfo.entrust) || '--' }}</view>
            <view class="doctor-info">
                <view class="info-item">
                    <text>签名医生：</text><text>{{ (diagInfo && diagInfo.docSignature) || '-' }}</text>
                </view>
                <view class="info-item">
                    <text>签名时间：</text><text>{{ (diagInfo && diagInfo.signingTtime) || '-' }}</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'
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,
            blueColor: '#007FCC',
            active: 0,
            diagInfo: null,
            patBaseInfo: null, // 患者信息
            admID: null,
            admRecordData: null
        }
    },
    onLoad(options) {
        const self = this
        uni.showLoading({
            title: '页面加载中...',
        })
        console.log(options.admID)
        if (options && options.admID) {
            const admRecordData = app.globalData.admRecordData.map(item => item.checkDate)
            console.log(admRecordData)
            self.setData({
                admID: options.admID,
                admRecordData
            }, () => {
                self.orderQuery()
            })
        }
    },
    methods: {
        // tab切换
        onChange(event) {
            const self = this
            self.setData({
                active: `${event.detail.name}`,
            }, () => {
                self.orderQuery()
            });
        },
        // 查询检查和病历数据
        orderQuery() {
            const self = this
            const { admID } = self
            let data = {
                params: [{
                    "admID": admID
                }],
            }
            console.log(data)
            $http.post("urlS", self, {
                code: "17050010",
                data: data,
                namespace: "Y",
                success: function (res) {
                    console.log(res)
                    Util.checkLoadStatusOpt(0, self)
                    if (+res.errorCode === 0) {
                        self.setData({
                            diagInfo: res.result.diagInfo,
                            patBaseInfo: res.result.patBaseInfo
                        })
                    }
                }
            });
        },
        // 页面跳转
        jumpLink(path, entertype) {
            Util.jumpLink(app, path, entertype);
        },
    }
}
</script>

<style>
.float-right {
    float: right;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.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-title.check-tilte {
    border-bottom: none;
}

.report-wrap .report-title:first-child {
    border-bottom: none;
}

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

.report-wrap .report-content.detail-content {
    padding: 16rpx 0;
    border-bottom: 2rpx solid rgba(51, 51, 51, 0.3);
}

.report-wrap .report-content.detail-content .content-item {
    display: inline-block;
    width: 33%;
}

.report-wrap .report-content.detail-content .detail-item {
    display: flex;
    padding: 6rpx 0;
}

.report-wrap .report-content.detail-content .detail-item .detail-item-label {
    width: 70px;
}

.report-wrap .report-content.detail-content .content-detail {
    flex: 1;
    color: #333;
}


.report-wrap .report-content.report-table {
    padding: 0 0 20rpx 0;
}

.report-wrap .report-content .table-item {
    display: flex;
    font-size: 24rpx;
    border-bottom: 2rpx solid #d5d5d5;
    border-left: 2rpx solid #d5d5d5;
}

.report-wrap .report-content .table-item:first-child {
    border-top: 2rpx solid #d5d5d5;
}

.report-wrap .report-content.report-table .table-item .table-head {
    display: flex;
    box-sizing: border-box;
    width: 180rpx;
    position: relative;
    overflow: hidden;
}

.report-wrap .report-content.report-table .table-item .table-head .table-name {
    padding: 16rpx 0 0 14rpx;
    overflow: hidden;
}

.report-wrap .report-content.report-table .table-item .table-head .table-name1,
.report-wrap .report-content.report-table .table-item .table-head .table-name2 {
    position: absolute;
    line-height: 1;
}

.report-wrap .report-content.report-table .table-item .table-head .table-name1 {
    left: 10rpx;
    bottom: 10rpx;
}

.report-wrap .report-content.report-table .table-item .table-head .table-name2 {
    right: 10rpx;
    top: 10rpx;
}

.report-wrap .report-content.report-table .table-item .table-line {
    position: absolute;
    width: 100%;
    right: 10rpx;
    top: 10rpx;
    bottom: 16rpx;
    text-align: right;
}

.report-wrap .report-content.report-table .table-item .table-line::after {
    content: '';
    display: block;
    width: 140%;
    height: 2rpx;
    background-color: #d5d5d5;
    position: absolute;
    left: 2rpx;
    top: 35rpx;
    transform: rotate(23deg);
}

.report-wrap .report-content.report-table .table-item:first-child text:nth-of-type(1) {
    border-left: 2rpx solid #d5d5d5;
}

/* .report-wrap .report-content .table-title .text-indent{
text-indent: 24rpx;
}
.report-wrap .report-content .text-indent{
text-indent: 48rpx;
} */
.report-wrap .report-content .table-item:nth-child(2n-1) {
    background-color: #eee;
}

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

.report-wrap .report-content .table-item text:first-child {
    box-sizing: border-box;
    width: 180rpx;
}

.report-wrap .report-content .table-item text {
    width: 268rpx;
    text-align: center;
    line-height: 1.5;
    padding: 20rpx 10rpx;
    border-right: 2rpx solid #d5d5d5;
}

.jump-btn-wrap {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    padding: 20rpx 24rpx 0;
    padding-bottom: env(safe-area-inset-bottom);
    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;
}

.doctor-info {
    padding: 20rpx 0;
    margin-top: 30rpx;
    border-top: 1rpx solid #ccc;
}

.doctor-info .info-item {
    font-size: 28rpx;
    color: #666;
    padding: 10rpx 0;
}
</style>