<template>
    <view class="content">
		<view class="tabs">
			<view class="tabs-item" :class="tabType == 'hyperglycemia' ? 'active': ''" @click="onTab('hyperglycemia')">血糖记录</view>
			<view class="tabs-item" :class="tabType == 'hyperlipidemia' ? 'active': ''" @click="onTab('hyperlipidemia')">血脂记录</view>
			<view class="tabs-item" :class="tabType == 'hypertension' ? 'active': ''" @click="onTab('hypertension')">血压记录</view>
		</view>
        <view class="While">
            <view class="top">
                <view class="top-time">
                    {{ lastData.log ? lastData.log.created_at : '您还没有上传过血糖值' }} 
                </view>
                <view v-if="lastData.log" class="top-record" @click="$Router.push({name: 'uricacidList', params: {id: lastData.caseId, type: tabType}})">
                    所有记录
                </view>
            </view>
            <view class="uricacid">
                <view class="uricacid-number">
                    <block v-if="lastData.log">
                        <text>{{ lastData.log.quantity }}</text> {{lastData.Newscope.scope.unit}}
                    </block>
                    <block v-else>
                        <text>暂无数据</text>
                    </block>
                </view>
                <view class="uricacid-tips">
					<view v-if="tabType == 'hyperglycemia'">
						<view>男性血糖指标 {{ lastData.Newscope.man }}</view>
						<view>女性血糖指标 {{ lastData.Newscope.woman }}</view>
					</view>
					<view v-if="tabType == 'hyperlipidemia'">
						<view>男性血脂指标 {{ lastData.Newscope.man }}</view>
						<view>女性血脂指标 {{ lastData.Newscope.woman }}</view>
					</view>
					<view v-if="tabType == 'hypertension'">
						<view>男性血压指标 {{ lastData.Newscope.man }}</view>
						<view>女性血压指标 {{ lastData.Newscope.woman }}</view>
					</view>
                </view>
            </view>
        </view>
        <view class="While analyse">
            <view class="analyse-title">
				<text v-if="tabType == 'hyperglycemia'">血糖趋势分析</text>
				<text v-if="tabType == 'hyperlipidemia'">血脂趋势分析</text>
				<text v-if="tabType == 'hypertension'">血压趋势分析</text>
            </view>
            <view class="analyse-text" v-if="lastData.log">
                当前血糖值为{{ lastData.log.quantity }}umol, 
                <block v-if="lastData.Newscope.scope">
                    {{ lastData.log.quantity > lastData.Newscope.scope.max ? '高于' : '低于' }}{{ lastData.Newscope.scope.max }}umol
                    {{ lastData.log.quantity > lastData.Newscope.scope.max ? '您的尿酸水平偏高，根据治疗指南需要进行治疗干预。需要生活控制（多喝水，饮食控制、并发症危险因素的控制、碱化尿液），配合药物治疗。具体情况请遵循医嘱。' : '您的尿酸水平控制很棒，请继续保持' }}
                </block>
            </view>
            <view class="analyse-text" v-else>
                暂无分析数据
            </view>
            <view class="analyse-btn" @click="recordClick">
				<text v-if="tabType == 'hyperglycemia'">记录血糖值</text>
				<text v-if="tabType == 'hyperlipidemia'">记录血脂值</text>
				<text v-if="tabType == 'hypertension'">记录血压值</text>
            </view>
        </view>
        
        <!-- 记录尿酸值弹出 -->
        <view class="recordBack" v-if="recordShow"></view>
        <view class="recordCont" v-if="recordShow">
            <form @submit="siteform">
                <view class="recordCont-title">
                    <image @click="recordClick" class="recordCont-title-close" src="/static/icons/uricacidClose.png" mode="aspectFill"></image>
                    <view class="recordCont-title-text">
						<text v-if="tabType == 'hyperglycemia'">记录血糖值</text>
						<text v-if="tabType == 'hyperlipidemia'">记录血脂值</text>
						<text v-if="tabType == 'hypertension'">记录血压值</text>
                    </view>
                    <view class="recordCont-title-btn">
                        <button form-type="submit">完成</button>
                    </view>
                </view>
                <view class="recordCont-form">
                	<view class="site-input">
                		<label>
							<text v-if="tabType == 'hyperglycemia'">血糖值</text>
							<text v-if="tabType == 'hyperlipidemia'">血脂值</text>
							<text v-if="tabType == 'hypertension'">血压值</text>
						</label>
                		<view class="recordCont-title-input">
                		    <input placeholder="请输入" name="quantity" type="digit"></input>
                            <text v-if="tabType == 'hyperglycemia'">mmol/L</text>
                            <text v-if="tabType == 'hyperlipidemia'">mmol/L</text>
                            <text v-if="tabType == 'hypertension'">mmHg</text>
                		</view>
                	</view>
                	<view class="site-remarks">
                        <textarea name="remark" placeholder="请输入备注信息" maxlength="30" />
                        <text>最大限制30字</text>
                	</view>
                    <view class="site-data">
                    	<label>记录日期</label>
                    	<view class="site-data-text">
                    	    <picker mode="date" :value="date" @change="bindDateChange">
                                <view class="uni-input">{{date}}</view>
                            </picker>
                    	</view>
                    </view>
                    <view class="site-photo">
                        <label>上传图片（选填）</label>
                    	<view class="issueNew-photo">
                    	    <image @click="updImg()" class="issueNew-icon" :src="cover.showpath || '/static/imgs/cover_img.png'" mode="aspectFill"></image>
                    	</view>
                    </view>
                </view>
            </form>
        </view>
    </view>
</template>

<script>
    import { lastLog, AddlastLog } from '@/apis/interfaces/gout'
	import { uploads } from '@/apis/interfaces/uploading'
    export default {
    	data() {
    		return {
                lastData    : {
                    Newscope : '',
                    log      : '',
                    caseId   : ''
                }, //尿酸数据
    			date        : '请选择日期',
                recordShow  : false,
				cover		: {
					showpath: '',
					path	: ''
				},
				tabType		: 'hyperglycemia'
    		}
    	},
    	onShow() {
    	    // 获取尿酸数据
    	    this.lastInfo();
    	},
    	methods: {
			// 切换数据
			onTab(e){
				this.tabType = e;
				this.lastInfo()
			},
            // 尿酸数据
            lastInfo() {
            	lastLog(this.tabType).then(res => {
                    this.lastData.Newscope  = res.scope
                    this.lastData.log       = res.log
                    this.lastData.caseId    = res.case.gout_case_id
            	}).catch(err => {
            		uni.showToast({
            			title: err.message,
            			icon: "none"
            		})
            	})
            },
            
            // 选择日期
            bindDateChange(e) {
                this.date = e.target.value
            },
            
            // 新增尿酸弹出
            recordClick() {
                this.recordShow = !this.recordShow
            },
            
            // 上传图片
            updImg(type){
            	uni.chooseImage({
            		count	: 1,
            		success	: path => {
            			uploads([{
            				uri : path.tempFilePaths[0]
            			}]).then(res => {
            				this.cover = {
            					showpath: res.url[0],
            					path: res.path[0]
            				}
            			}).catch(err => {
            				uni.showToast({
            					title: err.message,
            					icon : 'none'
            				})
            			})
            		}
            	})
            },
            
            // 提交表单
            siteform(e) {
				
				console.log(this.lastData)
				
                AddlastLog(this.lastData.caseId, {
					type		: this.tabType,
                    quantity	: e.detail.value.quantity,
                    remark		: e.detail.value.remark,
                    checked_at	: this.date,
                    cover		: this.cover.path
                }).then(res => {
                    this.recordShow = false
                    this.cover  = ''
                	// 获取尿酸数据
                	this.lastInfo();
                }).catch(err => {
                	uni.showToast({
                		title: err.message,
                		icon: "none"
                	})
                })
            }
    	}
    }
</script>

<style lang="scss" scoped>
    .content{
    	overflow: hidden;
    	background: #f3f4f6;
		min-height: calc(100vh - 60px);
    }
	
	.tabs{
		background-color: white;
		border-radius: 0 0 10rpx 10rpx;
		box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: .05);
		margin-bottom: 30rpx;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-around;
		.tabs-item{
			line-height: 100rpx;
			color: #888;
			&.active{
				font-weight: bold;
				color: $mian-color;
			}
		}
	}
    
    .While {
        border-radius: 10rpx;
        margin-bottom: 30rpx;
        background-color: #FFFFFF;
        padding:30rpx;
        box-sizing: border-box;
        box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: .05);
    }
    
    .top {
        margin-bottom: 30rpx;
        display: flex;
        font-size: 28rpx;
        .top-time {
            color: #919191;
            flex: 1;
        }
        .top-record {
            color: #54975e;
        }
    }
    .uricacid {
        padding: 40rpx 0 20rpx;
        .uricacid-number {
            text-align: center;
            color: #919191;
            text {
                color: #000000;
                font-size: 58rpx;
                font-weight: 600;
                padding-right: 10rpx;
            }
        }
        .uricacid-tips {
            margin-top: 30rpx;
            font-size: 26rpx;
            text-align: center;
            text {
                padding: 0 15rpx;
                box-sizing: border-box;
            }
        }
    }
    
    .analyse {
        .analyse-title {
            font-weight: 600;
            margin-bottom: 30rpx;
        }
        .analyse-text {
            line-height: 42rpx;
            color: #585858;
            font-size: 26rpx;
        }
        .analyse-btn {
            background-color: #4490ff;
            color: #FFFFFF;
            text-align: center;
            border-radius: 80rpx;
            line-height: 84rpx;
            margin: 80rpx 0 20rpx;
        }
    }
    
    // 弹出
    .recordBack {
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: .4);
        left: 0;
        top: 0;
        z-index: 99;
    }
    .recordCont {
        position: fixed;
        width: 100%;
        left: 0;
        bottom: 0;
        background-color: #FFFFFF;
        z-index: 100;
        overflow-y: scroll;
        height: 60vh;
        border-radius: 30rpx 30rpx 0 0;
        padding: 30rpx;
        box-sizing: border-box;
        .recordCont-title {
            border-bottom: 2rpx solid #F2F2F2;
            padding-bottom: 30rpx;
            display: flex;
            line-height: 54rpx;
            position: relative;
            .recordCont-title-close {
                width: 40rpx;
                height: 40rpx;
                margin-top: 7rpx;
            }
            .recordCont-title-text {
                width: 100%;
                text-align: center;
            }
            .recordCont-title-btn button {
                background-color: #4490ff;
                width: 120rpx;
                text-align: center;
                color: #FFFFFF;
                height: 54rpx;
                line-height: 54rpx;
                border-radius: 40rpx;
                font-size: 28rpx;
                position: absolute;
                right: 0;
                top: 0;
            }
        }
        .recordCont-form {
            margin-top: 30rpx;
            .site-input {
                margin-bottom: 30rpx;
                label {
                    margin-bottom: 20rpx;
                    display: block;
                    font-weight: 600;
                }
                .recordCont-title-input {
                    display: flex;
                    input {
                        flex: 1;
                        font-size: 40rpx;
                    }
                    text {
                        color: #adadad;
                    }
                }
            }
            .site-photo {
                display: flex;
                label {
                    flex: 1;
                    margin-top: 10rpx;
                    display: block;
                    font-weight: 600;
                }
                .issueNew-photo{
                    width: 120rpx;
                    height: 120rpx;
                    margin: 0 auto;
                    background: white;
                    position: relative;
                    text-align: center;
                    color: #999;
                    font-size: 28rpx;
                    .issueNew-icon{
                        width: 100%;
                        height: 100%;;
                    }
                }
            }
            .site-remarks {
                background-color: #F2F2F2;
                border-radius: 10rpx;
                padding: 20rpx;
                box-sizing: border-box;
                textarea {
                    width: 100%;
                    height: 80rpx;
                }
                text {
                    text-align: right;
                    display: block;
                    font-size: 26rpx;
                    color: #54975e;
                }
            }
            .site-data {
                margin: 40rpx 0;
                display: flex;
                label {
                    flex: 1;
                    font-weight: 600;
                }
            }
        }
    }
</style>
