<template>
    <view class="content">
        <view class="caseUser">
            <view class="caseUser-left">
                <view class="caseUser-left-number">
                    患者：{{ caseInfo.name }}
                </view>
                <view class="caseUser-left-tool">
                    <view class="caseUser-left-number">
                        年龄：{{ caseInfo.age }} 岁
                    </view>
                    <view class="caseUser-left-number">
                        性别：{{ caseInfo.sex == 'woman' ? '女' : '男' }}
                    </view>
                </view>
            </view>
            <view class="caseUser-img">
                <image v-if="caseImg" @click="openImg(caseImg)" :src="caseImg" mode="aspectFill"></image>
                <block v-else>
                    <image src="/static/imgs/caseTips.png" mode="aspectFill"></image>
                    <view @click="updImg" class="caseUser-tips">上传</view>
                </block>
            </view>
            <view class="caseUser-label">
                <view class="caseUser-label-see">
                    <view class="caseUser-label-name">
                        初始值
                    </view>
                    <view class="caseUser-label-number">
                        {{ countInfo.first != 0 ? countInfo.first : '-' }}
                    </view>
                </view>
                <view class="caseUser-label-see">
                    <view class="caseUser-label-name">
                        最高值
                    </view>
                    <view class="caseUser-label-number">
                        {{ countInfo.max != 0 ? countInfo.max : '-' }}
                    </view>
                </view>
                <view class="caseUser-label-see">
                    <view class="caseUser-label-name">
                        最新值
                    </view>
                    <view class="caseUser-label-number">
                        {{ countInfo.last != 0 ? countInfo.last : '-' }}
                    </view>
                </view>
            </view>
        </view>
        <view class="caseRemark">
            <view class="caseRemark-title">
                症状说明
            </view>
            <view class="caseRemark-text">
                {{ caseInfo.remark }}
            </view>
        </view>
        <view class="caseTime" v-if="timeInfo.length > 0">
            <view class="caseTime-label" v-for="(items, index) in timeInfo" :key="index">
                <view class="caseTime-date">
                    {{ items.created_at }}
                </view>
                <view class="caseTime-cont" @click="showSee(items.item.gout_case_log_id)" v-if="items.type == 'case_log'">
                    <view class="caseTime-cont-left" :class="{active : items.item.cover}">
                        <view class="caseTime-cont-name">
                            {{ items.text }} - {{ items.item.quantity }}umol
                        </view>
                        <view class="nowrap-multi caseTime-cont-text">
                            {{ items.item.remark }}
                        </view>
                    </view>
                    <image class="caseTime-cont-img" :src="items.item.cover" mode="aspectFill"></image>
                </view>
                <view class="caseTime-cont" @click="$Router.push({name: 'Indexdetails', params: {id: items.item.goods.goods_id}})" v-else>
                    <view class="caseTime-cont-left">
                        <view class="caseTime-cont-name">
                            {{ items.text }}
                        </view>
                        <view class="nowrap caseTime-cont-text">
                            商品： {{ items.item.goods.goods_name }}
                        </view>
                        <view class="caseTime-cont-text" style="margin: 0;">
                            状态： {{ items.item.state }}
                        </view>
                    </view>
                    <image class="caseTime-cont-img" :src="items.item.goods.cover" mode="aspectFill"></image>
                </view>
            </view>
        </view>
        
        <!-- 记录尿酸值弹出 -->
        <view class="recordBack" v-if="recordShow"></view>
        <view class="recordCont" v-if="recordShow">
            <view class="recordCont-title">
               <view class="recordCont-title-text">
                   尿酸详情
               </view>
               <image @click="recordClick" class="recordCont-title-close" src="/static/icons/uricacidClose.png" mode="aspectFill"></image>
            </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 { goutSee, goutCover, DetLog } from '@/apis/interfaces/gout'
    import { uploads } from '@/apis/interfaces/uploading'
	export default {
		data() {
			return {
                caseImg     : '',
                caseInfo    : '',
                LogInfo     : '',  //记录详情
                countInfo   : '',
                timeInfo    : [],
                recordShow  : false,
			};
		},
        onLoad() {
            goutSee().then(res => {
                this.caseInfo  = res.case
                this.countInfo = res.count
                this.timeInfo  = res.timelines
                this.caseImg   = res.case.cover
                console.log(res.case)
            }).catch(err => {
            	uni.showToast({
            		title: err.message,
            		icon : 'none'
            	})
            })
        },
		methods:{
            // 查看图片
            openImg(img) {
                uni.previewImage({
                    current: img,
                    urls:[img]
                })
            },
            
            // 上传图片
            updImg(type){
            	uni.chooseImage({
            		count	: 1,
            		success	: path => {
            			uploads([{
            				uri : path.tempFilePaths[0]
            			}]).then(res => {
                            this.caseImg = res.url[0]
                            // 上传头像
                            this.settingInfo(res.path[0]);
            			}).catch(err => {
            				uni.showToast({
            					title: err.message,
            					icon : 'none'
            				})
            			})
            		}
            	})
            },
            
            // 上传图片-提交
            settingInfo(value) {
                goutCover(this.caseInfo.gout_case_id, {
                    cover: value
                }).then(res => {
                    uni.showToast({
                    	title: '上传成功',
                    	icon : 'none'
                    })
                }).catch(err => {
                	uni.showToast({
                		title: err.message,
                		icon : 'none'
                	})
                })
            },
            
            // 查看详情
            showSee(val) {
                // 获取详情
                this.lastDet(val);
                this.recordShow = true
            },
            
            // 新增尿酸弹出
            recordClick() {
                this.recordShow = !this.recordShow
            },
            
            // 尿酸列表-详情
            lastDet(id) {
            	DetLog(id).then(res => {
                    this.LogInfo = res
                    this.LogId   = id
            	}).catch(err => {
            		uni.showToast({
            			title: err.message,
            			icon: "none"
            		})
            	})
            },
		}
	}
</script>

<style lang="scss" scoped>
    .content{
    	overflow: hidden;
        background: linear-gradient(to bottom, rgba($color: $mian-color, $alpha: .2), white);
        padding: 30rpx;
        box-sizing: border-box;
    }
    
    .caseUser {
        background-color: #6e79ec;
        color: #FFFFFF;
        padding: 30rpx 0;
        box-sizing: border-box;
        position: relative;
        height: 310rpx;
        border-radius: 10rpx 10rpx 0 0;
        .caseUser-left {
            height: 160rpx;
            padding-left: 30rpx;
            box-sizing: border-box;
            .caseUser-left-tool {
                display: flex;
                margin-top: 30rpx;
                .caseUser-left-number {
                    flex: 2;
                    font-weight: normal;
                }
            }
            .caseUser-left-number {
                line-height: 48rpx;
                font-weight: 600;
            }
        }
        .caseUser-img {
            width: 120rpx;
            height: 140rpx;
            border-radius: 6rpx;
            position: absolute;
            background-color: #a8b0ff;
            padding: 6rpx;
            box-sizing: border-box;
            right: 30rpx;
            top: 25rpx;
            image {
                width: 100%;
                height: 100%;
            }
            .caseUser-tips {
                position: absolute;
                top: 0;
                left: 0;
                color: #707070;
                font-weight: 600;
                font-size: 28rpx;
                line-height: 140rpx;
                text-align: center;
                width: 100%;
            }
        }
        .caseUser-label {
            background-color: #5963cb;
            color: #FFFFFF;
            display: flex;
            padding: 20rpx 0;
            .caseUser-label-see {
                flex: 3;
                text-align: center;
                .caseUser-label-name {
                    font-size: 26rpx;
                    margin-bottom: 10rpx;
                }
                .caseUser-label-number {
                    font-weight: 600;
                }
            }
        }
    }
    
    .caseRemark {
        background-color: #F8F8F8;
        padding: 30rpx;
        box-sizing: border-box;
        .caseRemark-title {
            font-weight: 600;
            margin-bottom: 20rpx;
        }
        .caseRemark-text {
            font-size: 28rpx;
            color: #666;
            line-height: 48rpx;
        }
    }
    
    .caseTime {
        background-color: #FFFFFF;
        padding: 50rpx;
        box-sizing: border-box;
        position: relative;
        &::after {
            position: absolute;
            content: '';
            left: 50rpx;
            top: 55rpx;
            background-color: #ebebeb;
            width: 2rpx;
            height: 100%;
        }
        .caseTime-label {
            position: relative;
            padding-left: 50rpx;
            &::after {
                position: absolute;
                content: '';
                left: -13rpx;
                z-index: 99;
                top: 6rpx;
                background-color: #ebebeb;
                width: 26rpx;
                height: 26rpx;
                border-radius: 50%;
            }
            &:last-child::before {
                position: absolute;
                content: '';
                left: -1rpx;
                z-index: 99;
                top: 6rpx;
                background-color: #FFFFFF;
                width: 2rpx;
                height: 200%;
            }
            .caseTime-date {
                font-size: 26rpx;
                color: #666666;
                font-weight: 600;
            }
            .caseTime-cont {
                background-color: #eff0ff;
                margin: 20rpx 0 40rpx;
                padding: 20rpx 30rpx;
                border-radius: 10rpx;
                box-sizing: border-box;
                position: relative;
                height: 180rpx;
                .caseTime-cont-left {
                    width: 100%;
                    &.active {
                        width: calc(100% - 100rpx);
                    }
                    .caseTime-cont-name {
                        color: #6e79ec;
                        font-size: 30rpx;
                    }
                    .caseTime-cont-text {
                        font-size: 28rpx;
                        color: #666666;
                        margin-top: 20rpx;
                    }
                    .caseTime-cont-price {
                        color: red;
                        margin-top: 20rpx;
                    }
                }
                .caseTime-cont-img {
                    position: absolute;
                    right: 20rpx;
                    top: 20rpx;
                    width: 100rpx;
                    height: 100rpx;
                    border-radius: 6rpx;
                }
            }
        }
    }
    
    // 弹出
    .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>
