<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>
        <block v-if="LogArr.length > 0">
            <view class="While list">
                <view class="list-label" v-for="(item, index) in LogArr" :key="index" @click="showSee(item.gout_case_log_id)">
                    <view class="list-title">
                        <view class="list-regular">
                            <text>{{ item.quantity }}</text> umol
                        </view>
                        <view class="list-rise" :class="{active : item.diff.symbol == '+'}">
                            <text>{{ item.diff.symbol == '+' ? '上升' : '下降'}}</text> {{ item.diff.value }}umol
                        </view>
                    </view>
                    <view class="list-text">
                        {{ item.remark }}
                    </view>
                    <view class="list-text">
                        记录时间：{{ item.created_at }}
                    </view>
                </view>
                <view class="pagesLoding" v-if="lodingStats">
                    <block v-if="page.has_more">
                        <image class="pagesLodingIcon" src="/static/icons/refresh_loding.gif" mode="widthFix"></image>加载中...
                    </block>
                    <block v-else>
                        没有更多了~
                    </block>
                </view>
            </view>
        </block>
        
        <view class="pack-center pages-hint" v-else>
            <image src="/static/imgs/coupon_null.png"></image>
            <view>暂无数据</view>
        </view>
        
        <!-- 记录尿酸值弹出 -->
        <view class="recordBack" v-if="recordShow"></view>
        <view class="recordCont" v-if="recordShow">
            <view class="recordCont-title">
               <image @click="recordClick" class="recordCont-title-close" src="/static/icons/uricacidClose.png" mode="aspectFill"></image>
               <view class="recordCont-title-text">
                   尿酸详情
               </view>
               <view class="recordCont-title-btn">
                   <view @click="delLogs">删除记录</view>
               </view>
            </view>
            <view class="recordCont-form">
                <view class="site-input">
                    <label>尿酸值</label>
                    <view class="recordCont-title-input">
                        {{ LogInfo.quantity }}<text>umol</text>
                    </view>
                </view>
                <view class="site-input">
                    <label>备注描述</label>
                    <view class="site-remarks">
                        {{ LogInfo.remark }}
                    </view>
                </view>
                <view class="site-data">
                    <label>尿酸记录日期</label>
                    <view class="site-data-text">
                        {{ LogInfo.created_at }}
                    </view>
               </view>
               <view class="site-input" v-if="LogInfo.cover">
                   <label>图片信息</label>
                   <image class="issueNew-icon" @click="openImg(LogInfo.cover)" :src="LogInfo.cover" mode="aspectFill"></image>
               </view>
            </view>
        </view>
    </view>
</template>

<script>
    import { ListLog, DetLog, DelLog } from '@/apis/interfaces/gout'
    export default {
    	data() {
    		return {
    			LogArr      : [],  //记录列表
                LogInfo     : '',  //记录详情
                LogId       : '',  //记录id
                recordShow  : false,
                page        : {},     //分页信息
                lodingStats : false   ,//加载状态
				tabType		: 'hyperglycemia'
    		}
    	},
    	onLoad() {
            // 获取尿酸记录列表
            this.lastInfo();
    	},
    	methods: {
			// 切换数据
			onTab(e){
				this.tabType = e;
				this.page    = {};
				this.lastInfo()
			},
            // 尿酸数据
            lastInfo(page) {
            	ListLog(this.$Route.query.id,{
                    page : page || 1,
					type : this.tabType
                }).then(res => {
                    let listArr = this.LogArr,
                        newData = []
                        if(page == 1 || page == undefined) listArr = []
                        newData = listArr.concat(res.data)
                    this.LogArr     = newData
                    this.page       = res.page
                    this.lodingStats= false
                    uni.stopPullDownRefresh()
            	}).catch(err => {
            		uni.showToast({
            			title: err.message,
            			icon: "none"
            		})
            	})
            },
            
            // 查看详情
            showSee(val) {
                // 获取详情
                this.lastDet(val);
                this.recordShow = true
            },
            
            // 尿酸列表-详情
            lastDet(id) {
            	DetLog(id).then(res => {
                    this.LogInfo = res
                    this.LogId   = id
            	}).catch(err => {
            		uni.showToast({
            			title: err.message,
            			icon: "none"
            		})
            	})
            },
            
            // 新增尿酸弹出
            recordClick() {
                this.recordShow = !this.recordShow
            },
            
            // 删除记录
            delLogs() {
                DelLog(this.LogId).then(res => {
                    // 获取尿酸记录列表
                    this.lastInfo();
                    
                    this.recordShow = false
                }).catch(err => {
                	uni.showToast({
                		title: err.message,
                		icon: "none"
                	})
                })
            },
            
            // 查看图片
            openImg(img) {
                uni.previewImage({
                    current: img,
                    urls:[img]
                })
            },
            
            // 页面相关事件处理函数--监听用户下拉动作
            onPullDownRefresh() {
                // 商品列表数据
                this.lastInfo();
            },
                    
            // 上拉加载
            onReachBottom(){
                this.lodingStats = true
                let pageNumber = this.page.current
                if(this.page.has_more){
                    pageNumber++
                    // 商品列表数据
                    this.lastInfo(pageNumber);
                }
            }
    	}
    }
</script>

<style lang="scss" scoped>
    .content{
    	overflow: hidden;
    	background: #f3f4f6;
		min-height: 100vh;
    }
	
	.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);
    }
    
    .list {
        border-radius: 10rpx;
        margin: 30rpx;
        .list-label {
            margin-bottom: 20rpx;
            padding-bottom: 30rpx;
            border-bottom: 2rpx solid #f4f4f4;
            &:last-child {
                padding-bottom: 0;
                border: none;
            }
            .list-title {
                display: flex;
                font-size: 28rpx;
                line-height: 54rpx;
                .list-regular {
                    margin-right: 40rpx;
                    text {
                        color: #6d79ec;
                        font-weight: 600;
                        font-size: 44rpx;
                        padding-right: 10rpx;
                    }
                }
                .list-rise {
                    margin-right: 20rpx;
                    color: #919191;
                    text {
                        font-weight: 600;
                        color: #54975e;
                        padding-right: 10rpx;
                    }
                    &.active {
                        text {
                            color: red;
                        }
                    }
                }
            }
            .list-text {
                margin-top: 20rpx;
                color: #919191;
                font-size: 28rpx;
            }
        }
    }
    
    // 弹出
    .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: 70vh;
        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 view {
                background-color: red;
                width: 150rpx;
                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;
                    font-size: 40rpx;
                    font-weight: 600;
                    line-height: 60rpx;
                    text {
                        font-size: 32rpx;
                        font-weight: normal;
                        color: #adadad;
                        padding-left: 10rpx;
                    }
                }
            }
            .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;
                }
            }
        }
    }
    .issueNew-icon{
        width: 200rpx;
        height: 200rpx;
    }
</style>
