<template>
    <nav-bar :navbar-data="navbarData" />
    <view class="container" :style="{ marginTop: height  +'px'}">
        <view class="chart-body" v-if="chartData">
            <view v-for="(item, index) in chartData" :key="index">
                <!-- 裸眼视力 -->
                <view v-if="item.arr">
                    <view class="chart-title">{{ item.title }}</view>
                    <view class="canvas-box">
                        <u-charts type="line" :canvasId="'lineCanvas' + index" :opts="opts" :chartData="item.arr" />
                    </view>
                </view>
            </view>
            <!-- <view class="chart-title">眼轴分析</view>
		<van-collapse value="{{ activeNames }}" bind:change="onChange">
			<van-collapse-item title="2023-09-05" name="1" >
				<view class="collapse-detail">
					年龄：<text class="dark">7岁</text>
					<text class="space">检查眼轴：</text>
					<text class="red">24.65</text>
				</view>
				<view class="collapse-detail">
					7岁眼轴参考范围：<text class="dark">12.33~333</text>
				</view>
				<view class="collapse-detail">
					分析结果：<text class="dark">当前检查眼轴数值，以达到10岁儿童眼轴区间。</text>
				</view>
			</van-collapse-item>
			<van-collapse-item title="2023-09-05" name="2" >
				<view class="collapse-detail">
					年龄：<text class="dark">7岁</text>
					<text class="space">检查眼轴：</text>
					<text class="red">24.65</text>
				</view>
				<view class="collapse-detail">
					7岁眼轴参考范围：<text class="dark">12.33~333</text>
				</view>
				<view class="collapse-detail">
					分析结果：<text class="dark">当前检查眼轴数值，以达到10岁儿童眼轴区间。</text>
				</view>
			</van-collapse-item>
		</van-collapse> -->
        </view>
        <view class="jump-btn-wrap">
            <van-button size="large" type="primary" :color="blueColor" custom-class="jump-btn" @tap="jumpLink('/pages/index/pages/videoConsultation/videoConsultation', 4)">预约挂号</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'
const app = getApp()
export default {
    components: {
        'nav-bar': navBar,
        'van-button': VanButton
    },
    data() {
        return {
            pageLoading: true,
            checkLoadStatus: [false],
            navbarData: {
                isGoHome: true,
                isGoBack: true,
                title: "视力健康趋势分析"
            },
            height: app.globalData.height,
            blueColor: '#007FCC',
            activeNames: ['1'],
            chartData: [],
            opts: {
                color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
                padding: [15, 10, 0, 15],
                enableScroll: false,
                legend: {},
                xAxis: {
                    disableGrid: true
                },
                yAxis: {
                    gridType: "dash",
                    dashLength: 2
                },
                extra: {
                    line: {
                        type: "straight",
                        width: 2,
                        activeType: "hollow"
                    }
                }
            }
        }
    },
    onLoad: function (options) {
        this.orderQuery()
    },
    methods: {
        // 手风琴下拉展开
        onChange(event) {
            this.setData({
                activeNames: event.detail,
            });
        },

        // 查询检查和病历数据
        orderQuery() {
            const self = this
            let data = {
                params: [{}],
            }
            $http.post("urlS", self, {
                code: "17050015",
                data: data,
                namespace: "Y",
                success: function (res) {
                    Util.checkLoadStatusOpt(0, self)
                    if (+res.errorCode === 0) {
                        res.result && res.result.chartEyeData.map((item, index) => {
                            let LArr = [], RArr = []
                            switch (item.title) {
                                case '裸眼视力':
                                    LArr = item.nakedEyeLArr
                                    RArr = item.nakedEyeRArr
                                    break;
                                case '球面镜':
                                    LArr = item.ballLArr
                                    RArr = item.ballRArr
                                    break;
                                case '柱镜':
                                    LArr = item.colLArr
                                    RArr = item.colRArr
                                    break;
                                case '轴位':
                                    LArr = item.axisLArr
                                    RArr = item.axisRArr
                                    break;
                                case '矫正视力':
                                    LArr = item.clArr
                                    RArr = item.crArr
                                    break;
                                case '戴镜视力':
                                    LArr = item.djslODArr
                                    RArr = item.djslOSArr
                                    break;
                                case '现镜度数':
                                    LArr = item.xjdsODArr
                                    RArr = item.xjdsOSArr
                                    break;
                                case '眼压':
                                    LArr = item.yyODArr
                                    RArr = item.yyOSArr
                                    break;
                                case '眼轴':
                                    LArr = item.yzODArr
                                    RArr = item.yzOSArr
                                    break;
                            }

                            let resArr = null
                            if ((LArr && LArr.length > 0 && LArr[0] != '') || (RArr && RArr.length > 0 && RArr[0] != '')) {
                                resArr = {
                                    categories: res.result.categories,
                                    series: [
                                        {
                                            name: "右眼(OD)",
                                            data: RArr,
                                            format: function (val, name) {
                                                return parseFloat(val).toFixed(2) + unit;
                                            }
                                        },
                                        {
                                            name: "左眼(OS)",
                                            data: LArr,
                                            format: function (val, name) {
                                                return parseFloat(val).toFixed(2) + unit;
                                            }
                                        }
                                    ]
                                }
                            }
                            self.chartData[index] = { title: item.title, arr: resArr ? JSON.parse(JSON.stringify(resArr)) : null };
                        })
                    }
                }
            });
        },

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

<style>
.container {
    padding-bottom: 4rpx;
    padding-top: 2rpx;
}
.chart-body {
    margin: 30rpx 24rpx;
    background: #FFFFFF;
    border-radius: 10rpx;
    padding: 0 24rpx;
}

.chart-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #007FCC;
    line-height: 32rpx;
    padding: 16rpx 0;
}

.collapse-detail {
    font-size: 24rpx;
    line-height: 24rpx;
    font-weight: 400;
    color: #666666;
    margin-bottom: 20rpx;
}

.collapse-detail .dark {
    color: #333;
}

.collapse-detail .space {
    margin-left: 36rpx;
}

.collapse-detail .red {
    color: #F23535;
}

.chart-body .van-cell {
    border: none;
    padding-left: 0;
    padding-right: 0;
}

/* 展开后不展示下划线 */
.chart-body .van-cell::after {
    display: none;
}

.chart-body .van-cell .item-van-cell {
    border: none;
}

.chart-body .van-cell__title {
    font-size: 24rpx;
    font-weight: bold;
    color: #007FCC;
}

.chart-body .van-collapse-item__content {
    padding: 8rpx 0;
}

.jump-btn-wrap {
    padding: 38rpx 24rpx 68rpx 24rpx;
}

.jump-btn-wrap .jump-btn {
    height: 80rpx;
}
</style>