<template>
    <nav-bar :navbar-data="navbarData"></nav-bar>
    <view :style="{ paddingTop: height +'px', height: '100vh', boxSizing: 'border-box' }">
        <view>
            <van-tabs :tabs="['计划信息', '学校信息', '视力检查']" height="88rpx" fontSize="36rpx" :active="tabActive"
                @change="tabChange"></van-tabs>
        </view>
        <scroll-view class="myopia-container" scroll-y="true" :scroll-into-view="scrollIntoView"
            :style="{ height: 'calc(100vh - '+ height +'px + 188rpx)' }">
            <view class="card" id="organization">
                <view class="title">计划信息</view>
                <van-cell-group :inset="true">
                    <van-cell title="计划名称" :value="detailData && detailData[0].plan_name" />
                    <van-cell title="科室名称" :value="detailData && detailData.length > 0 ? '屈光科室' : '--'" :border="false" />
                    <van-cell title="视力筛查员"
                        :value="detailData && (detailData[0].operator1 ? detailData[0].operator1 : '--')" :border="false" />
                    <van-cell title="屈光筛查员"
                        :value="detailData && (detailData[0].operator2 ? detailData[0].operator2 : '--')" :border="false" />
                    <van-cell title="检查时间" :value="detailData && detailData[0].checkdate" :border="false" />
                    <!-- <van-cell title="联系电话" value="{{ detailData && detailData.plan_name }}" border="{{ false }}" /> -->
                    <!-- <van-cell title="报告时间" value="{{ detailData && detailData.plan_name }}" border="{{ false }}" /> -->
                </van-cell-group>
            </view>
            <view class="card" id="school">
                <view class="title">学校信息</view>
                <van-cell-group inset>
                    <van-cell title="学校名称" :value="detailData && detailData[0].school" :border="false" />
                    <van-cell title="年级" :value="detailData && detailData[0].grade_code" :border="false" />
                    <van-cell title="年级" :value="detailData && (detailData[0].clazz ? detailData[0].clazz + '班' : '')"
                        :border="false" />
                    <van-cell title="学生姓名" :value="detailData && detailData[0].name" :border="false" />
                    <van-cell title="性别"
                        :value="detailData && (detailData[0].sex == '1' ? '男' : (detailData[0].sex == '2' ? '女' : ''))"
                        :border="false" />
                    <van-cell title="出生日期" :value="detailData && detailData[0].birthday" :border="false" />
                    <van-cell title="家长电话" :value="detailData && detailData[0].telephone" :border="false" />
                </van-cell-group>
            </view>
            <view class="card" id="eyesight">
                <view class="title line">视力/屈光筛查</view>
                <view class="table-box" v-for="(item, index) in detailData" :key="index">
                    <view class="table-t">
                        <text>第{{ detailData.length - index }}次</text>
                        <text class="check-date">{{ item.checkdate }}</text>
                    </view>
                    <view class="table">
                        <view class="tr">
                            <view class="td head">检查内容</view>
                            <view class="td head">右眼</view>
                            <view class="td head">左眼</view>
                        </view>
                        <view class="tr">
                            <view class="td">裸眼视力</view>
                            <view class="td">{{ item.ly_right ? item.ly_right : '--' }}</view>
                            <view class="td">{{ item.ly_left ? item.ly_left : '--' }}</view>
                        </view>
                        <view class="tr">
                            <view class="td">戴镜视力</view>
                            <view class="td">{{ item.dj_right ? item.dj_right : '--' }}</view>
                            <view class="td">{{ item.dj_left ? item.dj_left : '--' }}</view>
                        </view>
                        <view class="tr">
                            <view class="td">屈光球镜</view>
                            <view class="td">{{ item.qj_r ? item.qj_r : '--' }}</view>
                            <view class="td">{{ item.qj_l ? item.qj_l : '--' }}</view>
                        </view>
                        <view class="tr">
                            <view class="td">屈光柱镜</view>
                            <view class="td">{{ item.zj_r ? item.zj_r : '--' }}</view>
                            <view class="td">{{ item.zj_l ? item.zj_l : '--' }}</view>
                        </view>
                        <view class="tr">
                            <view class="td">屈光轴位</view>
                            <view class="td">{{ item.zw_r ? item.zw_r : '--' }}</view>
                            <view class="td">{{ item.zw_l ? item.zw_l : '--' }}</view>
                        </view>
                    </view>
                </view>
                <view class="tips">医生建议：良好的用眼习惯，可以预防多数眼部疾病；</view>
            </view>

            <!-- <view class="card" id="common">
                <view class="title">常规检查</view>
                <van-cell-group inset>
                <van-cell title="身高" value="内容" border="{{ false }}" />
                <van-cell title="体重" value="内容" border="{{ false }}" />
                <van-cell title="头部正常" value="内容" border="{{ false }}" />
                <van-cell title="四肢" value="内容" border="{{ false }}" />
                </van-cell-group>
            </view> -->
        </scroll-view>
        <view class="footer-bar">
            <view class="consulting" @tap="toAskDoctor">
                <image :src="imgHost + '/images/icon/consulting.png'"></image>
                <text>咨询医生</text>
            </view>
            <button class="gh" @tap="toRegistration">预约挂号</button>
        </view>
    </view>
</template>

<script>
import Util from '@/utils/utils';
import httpConfig from '@/utils/httpConfig'
import navBar from '@/components/navBar/index'
import VanCellGroup from '@/components/cell-group/index'
import VanCell from '@/components/cell/index'
import VanTabs from '@/components/tabs/tabs'
import VanSticky from '@/components/sticky/index'
const app = getApp();
export default {
    components: {
        'nav-bar': navBar,
        'van-cell-group': VanCellGroup,
        'van-cell': VanCell,
        'van-tabs': VanTabs,
        'van-sticky': VanSticky
    },
    data() {
        return {
            height: app.globalData.height,
            windowHost: httpConfig && httpConfig.ipDeault,
            imgHost: httpConfig && httpConfig.imgHost,
            navbarData: {
                isGoHome: true,
                isGoBack: true,
                title: "近视防控"
            },
            tabActive: 0,
            detailData: null,
            scrollIntoView: '',
        }
    },
    onLoad: function (options) {
        console.log(options, typeof options)
        if (options && options['q']) {
            this.init(this.getQueryString(decodeURIComponent(options.q)))
        } else if (options && options['no']) {
            this.init(options.no)
        }
    },
    methods: {
        getQueryString(url) {
            ///myopia/?data={"no":"E11101200512210020"}&extra={"channel":"14","h_code":"H07","page":"2","offset":"top-left-qrcode"}
            let params = url.split('?')[1]
            let paramsData = params.split('&')[0]
            let paramsExtra = params.split('&')[1]
            let paramsNOStr = paramsData.split('=')[1]
            let paramsNOObj = JSON.parse(paramsNOStr)
            console.log(Object.prototype.toString.call(paramsNOObj)) //变量类型查看
            let _paramsNO = paramsNOObj.no
            if (_paramsNO != null) return _paramsNO;
            return null;
        },

        // 跳转医生列表
        toAskDoctor: Util.debounce(function () {
            uni.navigateTo({
                url: '/pages/index/pages/moreDoctor/moreDoctor'
            })
        }),

        // 跳转挂号页面
        toRegistration: Util.debounce(function () {
            app.globalData.reservationEntrance = "4"
            uni.navigateTo({
                url: '/pages/index/pages/videoConsultation/videoConsultation',
            })
        }),
        init(no) {
            const self = this
            uni.request({
                method: 'POST',
                url: httpConfig.screeningHost + '/newdeparture/eyenurse/sight/getPrStudentInfo',
                data: {
                    "appId": "Fjc8ZGAsSSTQKMBt",
                    "appSecret": "Psq14tchx3c55VTqSLjpJlmbs8RF6GuY",
                    "query": no
                },
                header: {
                    'content-type': 'application/json;charset=UTF-8' // 默认值
                },
                success(res) {
                    console.log(res.data.error == '-1')
                    if (res.data.error == '-1') {
                        if (res.data.data && res.data.data.length == 0) {
                            Util.showToast('未查询到该查询码相关数据', 'none', 3000)
                        } else {
                            let detailData = res.data.data.sort(function (a, b) {
                                let c = new Date(a.checkdate.split('-').join('/')).getTime()
                                let d = new Date(b.checkdate.split('-').join('/')).getTime()
                                return d - c; 降序
                            })
                            self.detailData = detailData
                        }
                    }
                }
            })
        },

        tabChange(e) {
            let type = 'organization'
            console.log(e)
            switch (e.detail.name) {
                case 1:
                    type = 'school'
                    break;
                case 2:
                    type = 'eyesight'
                    break;
                case 3:
                    type = 'common'
                    break;
            }
            // const query = uni.createSelectorQuery().in(this)
            // query.select('#' + type).boundingClientRect(function (res) {
            //     console.log(res)
            //     uni.pageScrollTo({
            //         scrollTop: res.top - 100,
            //         duration: 500
            //     })
            // }).exec()
            this.scrollIntoView = type
            this.tabActive = e.detail.name
        },
    }
}
</script>

<style>
page {
    background-color: #F7F7F7;
}

.card {
    overflow: hidden;
    margin: 30rpx 24rpx;
    border-radius: 8rpx;
}

.card .title {
    box-sizing: border-box;
    height: 88rpx;
    padding: 20rpx 32rpx;
    font-weight: 700;
}

.line {
    border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
}

.table-box {
    box-sizing: border-box;
    padding: 0 20rpx;
}

.table-t {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48rpx;
    padding: 20rpx 0;
}

.check-date {
    color: #999999;
}

.table {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    border-left: 1rpx solid #777777;
    border-bottom: 1rpx solid #777777;
}

.table .tr {
    box-sizing: border-box;
    display: flex;
}

.table .tr .td {
    box-sizing: border-box;
    width: 33.33333%;
    text-align: center;
    height: 80rpx;
    line-height: 80rpx;
    border: 1rpx solid #777777;
    border-left: 0;
    border-bottom: 0;
}

.table .tr .td.head {
    background: #D2D2D2;
}

.card .tips {
    font-size: 20rpx;
    font-weight: bold;
    color: #007FCC;
    padding: 20rpx;
}

.footer-bar {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100rpx;
    padding: 0 24rpx;
    background-color: #fff;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0), 0 -2px 6px rgba(0, 0, 0, 0.05), 0 0 6px rgba(0, 0, 0, 0), 0 0 6px rgba(0, 0, 0, 0);
}

.footer-bar .consulting {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 90rpx;
    height: 100rpx;
}

.footer-bar .consulting image {
    width: 38rpx;
    height: 35rpx;
    margin-bottom: 10rpx;
}

.footer-bar .consulting text {
    font-size: 20rpx;
}

.gh {
    box-sizing: border-box;
    width: 600rpx;
    height: 70rpx;
    line-height: 70rpx;
    border-radius: 35rpx;
    color: #fff;
    background: #007FCC;
    font-size: 30rpx;
    margin: 0;
}
</style>