<template>
    <view class="content">
        <form class="issue-form" @submit="issueForm">
            <view class="case">
                <view class="issue-title">
                    用户档案
                </view>
                <view class="issue-block">
                    <view class="issue-inputs">
                        <label class="issue-input-label">真实姓名</label>
                        <input class="issue-inputs-input" maxlength="4" placeholder="输入真实姓名" name="name" :value="seeData.name" type="text" :disabled="editState"></input>
                    </view>
                    <view class="issue-inputs">
                        <label class="issue-input-label">手机号码</label>
                        <input class="issue-inputs-input" placeholder="输入手机号码" name="mobileNo" :value="seeData.username" type="tel":disabled="editState"></input>
                    </view>
                    <view class="issue-inputs">
                        <label class="issue-input-label">年龄</label>
                        <input class="issue-inputs-input" placeholder="输入年龄" name="age" :value="seeData.age" type="number":disabled="editState"></input>
                    </view>
                    <view class="issue-inputs">
                        <label class="issue-input-label">性别</label>
                        <block v-if="editState">
                            <view class="issue-inputs-input">
                                {{ seeData.sex == 'woman' ? '女' : '男' }}
                            </view>
                        </block>
                        <block v-else>
                            <picker @change="bindSexChange" :value="sexIndex" :range="sexArray" range-key="name" :disabled="editState">
                                <view class="uni-input">{{sexArray[sexIndex].name}}</view>
                                <image class="uni-input-img" src="/static/icons/userLogin_icon.png" mode=""></image>
                            </picker>
                        </block>
                    </view>
                </view>
                <block v-if="!editState">
                    <view class="issue-title">
                         健康档案
                    </view>
                    <view class="case-block">
                        <view class="case-inputs">
                            <label class="case-input-label">健康说明</label>
                            <textarea :value="seeData.remark" placeholder="请描述您当前的三高情况" name="remark" type="text" :disabled="editState" />
                        </view>
                        <view class="case-inputs">
                            <label class="case-input-label">
                                当前高血脂
                                <text>（{{sexName == 'man' ? '男性' : '女性'}}高血脂正常指标 {{ hyperlipemiaMin }} ~ {{ hyperlipemiaMax }}）</text>
                            </label>
                            <input class="case-inputs-input" placeholder="输入您当前高血脂值" @input="hyperlipemiaInput" :value="hyperlipemiaNumber" type="idcard" :disabled="editState"></input>
                            <text class="case-inputs-tips active" v-if="hyperlipemiaNumber > hyperlipemiaMax">偏高</text>
                            <text class="case-inputs-tips" v-if="hyperlipemiaNumber < hyperlipemiaMin && hyperlipemiaNumber != ''">偏低</text>
                        </view>
                        <view class="case-inputs">
                            <label class="case-input-label">
                                当前高血压
                                <text>（{{sexName == 'man' ? '男性' : '女性'}}高血压正常指标 {{ hypertensionMin }} ~ {{ hypertensionMax }}）</text>
                            </label>
                            <input class="case-inputs-input" placeholder="输入您当前高血压值" @input="hypertensionInput" :value="hypertensionNumber" type="idcard" :disabled="editState"></input>
                            <text class="case-inputs-tips active" v-if="hypertensionNumber > hypertensionMax">偏高</text>
                            <text class="case-inputs-tips" v-if="hypertensionNumber < hypertensionMin && hypertensionNumber != ''">偏低</text>
                        </view>
                        <view class="case-inputs">
                            <label class="case-input-label">
                                当前高血糖
                                <text>（{{sexName == 'man' ? '男性' : '女性'}}高血糖正常指标 {{ hyperglycemiaMin }} ~ {{ hyperglycemiaMax }}）</text>
                            </label>
                            <input class="case-inputs-input" placeholder="输入您当前高血糖值" @input="hyperglycemiaInput" :value="hyperglycemiaNumber" type="idcard" :disabled="editState"></input>
                            <text class="case-inputs-tips active" v-if="hyperglycemiaNumber > hyperglycemiaMax">偏高</text>
                            <text class="case-inputs-tips" v-if="hyperglycemiaNumber < hyperglycemiaMin && hyperglycemiaNumber != ''">偏低</text>
                        </view>
                    </view>
                    <view class="issue-block">
                        <label class="issueNew-title">上传诊断证明</label>
                        <!-- hyperlipemia;hypertension;hyperglycemia -->
                        <view class="flexrow">
                            <view class="issueNew-photo">
                                <view class="issueNew-content" v-if="editState">
                                    <image class="issueNew-icon" @click="openImg(seeData.cover)" :src="seeData.cover" mode="aspectFill"></image>
                                </view>
                                <view class="issueNew-content" @click="updImg('hyperlipemia')" v-else>
                                    <image class="issueNew-icon" :src="hyperlipemia.showpath || '/static/imgs/cover_img.png'" mode="aspectFill"></image>
                                    <view class="issueNew-text">高血脂诊断证明</view>
                                </view>
                            </view>
                            <view class="issueNew-photo">
                                <view class="issueNew-content" v-if="editState">
                                    <image class="issueNew-icon" @click="openImg(seeData.cover)" :src="seeData.cover" mode="aspectFill"></image>
                                </view>
                                <view class="issueNew-content" @click="updImg('hypertension')" v-else>
                                    <image class="issueNew-icon" :src="hypertension.showpath || '/static/imgs/cover_img.png'" mode="aspectFill"></image>
                                    <view class="issueNew-text">高血压诊断证明</view>
                                </view>
                            </view>
                            <view class="issueNew-photo">
                                <view class="issueNew-content" v-if="editState">
                                    <image class="issueNew-icon" @click="openImg(seeData.cover)" :src="seeData.cover" mode="aspectFill"></image>
                                </view>
                                <view class="issueNew-content" @click="updImg('hyperglycemia')" v-else>
                                    <image class="issueNew-icon" :src="hyperglycemia.showpath || '/static/imgs/cover_img.png'" mode="aspectFill"></image>
                                    <view class="issueNew-text">高血糖诊断证明</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </block>
            </view>
            <view class="userdata-btn" v-if="!editState">
                <button class="issue-btn" form-type="submit" :disabled="disabled">立即保存</button>
            </view>
        </form>
    </view>
</template>

<script>
    import { goutCreate, goutAdd, goutSee } from '@/apis/interfaces/gout'
    import { uploads } from '@/apis/interfaces/uploading'
    export default {
    	data() {
    		return {
    			disabled : false ,// 提交按钮状态
                editState: false,    //是否可以编辑表单
                numberVal: '',
                count    : '',
                hyperlipemiaMax : '',
                hyperlipemiaMin : '',
                hyperlipemiaNumber:'',
                hypertensionMax : '',
                hypertensionMin : '',
                hypertensionNumber:'',
                hyperglycemiaMax : '',
                hyperglycemiaMin : '',
                hyperglycemiaNumber:'',
                seeData  : {
                    name    : '',
                    id_card : '',
                    username: '',
                    sex     : '',
                    cover   : '',
                    remark  : '',
                    age     : ''
                },    //查看我的病例内容
                sexIndex : 0,
                sexName  : 'man',
                hyperlipemia	 : {
                	showpath: '',
                	path	: ''
                },
                hypertension:{
                    showpath: '',
                    path	: ''
                },
                hyperglycemia:{
                    showpath: '',
                    path	: ''
                },
                sexArray : [{
                    val  : 'man',
                    name : '男'
                },{
                    val  : 'woman',
                    name : '女'
                }]
    		};
    	},
        onShow() {
            // 健康前置信息
            goutCreate().then(res => {
                this.count    = res.count
                this.hyperlipemiaMax     =  res.count.man.hyperlipidemia.max
                this.hyperlipemiaMin     =  res.count.man.hyperlipidemia.min
                this.hypertensionMax     =  res.count.man.hypertension.max
                this.hypertensionMin     =  res.count.man.hypertension.min
                this.hyperglycemiaMax    =  res.count.man.hyperglycemia.max
                this.hyperglycemiaMin    =  res.count.man.hyperglycemia.min
                this.seeData.username    =  res.user.username
            }).catch(err => {
            	uni.showToast({
            		title: err.message,
            		icon : 'none'
            	})
            })
            if(this.$Route.query.hasCase === 'true') {
                this.editState = true
                // 获取查看病例
                this.goutSeeInfo();
            }
        },
        methods: {
            // 查看病例
            goutSeeInfo() {
                goutSee().then(res => {
                    this.seeData.name       = res.case.name
                    this.seeData.username   = res.case.user.username
                    this.seeData.sex        = res.case.sex
                    this.seeData.cover      = res.case.cover
                    this.seeData.age        = res.case.age
                    this.countNumber        = parseInt(res.case.number)
                    this.seeData.remark     = res.case.remark
                    this.sexName            = res.case.sex
                }).catch(err => {
                	uni.showToast({
                		title: err.message,
                		icon : 'none'
                	})
                })
            },
            
            // 选择男女
            bindSexChange(e) {
                this.sexIndex = parseInt(e.detail.value)
                this.sexName  = this.sexArray[e.detail.value].val
                if(this.sexArray[e.detail.value].val == 'woman') {
                    this.hyperlipemiaMax     =  this.count.woman.hyperlipidemia.max
                    this.hyperlipemiaMin     =  this.count.woman.hyperlipidemia.min
                    this.hypertensionMax     =  this.count.woman.hypertension.max
                    this.hypertensionMin     =  this.count.woman.hypertension.min
                    this.hyperglycemiaMax    =  this.count.woman.hyperglycemia.max
                    this.hyperglycemiaMin    =  this.count.woman.hyperglycemia.min
                }else {
                    this.hyperlipemiaMax     =  this.count.man.hyperlipidemia.max
                    this.hyperlipemiaMin     =  this.count.man.hyperlipidemia.min
                    this.hypertensionMax     =  this.count.man.hypertension.max
                    this.hypertensionMin     =  this.count.man.hypertension.min
                    this.hyperglycemiaMax    =  this.count.man.hyperglycemia.max
                    this.hyperglycemiaMin    =  this.count.man.hyperglycemia.min
                }
            },
            
            // 上传图片
            updImg(type){
            	uni.chooseImage({
            		count	: 1,
            		success	: path => {
            			uploads([{
            				uri : path.tempFilePaths[0]
            			}]).then(res => {
            				this[type] = {
            					showpath: res.url[0],
            					path: res.path[0]
            				}
            			}).catch(err => {
            				uni.showToast({
            					title: err.message,
            					icon : 'none'
            				})
            			})
            		}
            	})
            },
            
            //   高血脂
            hyperlipemiaInput(e) {
                this.hyperlipemiaNumber = e.detail.value
            },
            // 高血压
            hypertensionInput(e) {
                this.hypertensionNumber = e.detail.value
            },
            //  高血糖
            hyperglycemiaInput(e) {
                this.hyperglycemiaNumber = e.detail.value
            },
            
            
            
            // 提交表单   hyperlipemia;hypertension;hyperglycemia 
            issueForm(e) {
                let value    = e.detail.value;
                    
                let data = {
                    name    : value.name,
                    age     : value.age,
                    mobileNo: value.mobileNo,
                    remark  : value.remark,
                    sex     : this.sexArray[this.sexIndex].val,
                    hyperlipidemia  : this.hyperlipemiaNumber,
                    hypertension    : this.hypertensionNumber,
                    hyperglycemia   : this.hyperglycemiaNumber,
                    hyperlipidemia_cover   : this.hyperlipemia.path,
                    hypertension_cover   : this.hypertension.path,
                    hyperglycemia_cover   : this.hyperglycemia.path,
                }
                goutAdd(data).then(res => {
                    this.disabled = true
                    uni.navigateBack({
                        
                    })
                }).catch(err => {
                	uni.showToast({
                		title: err.message,
                		icon : 'none'
                	})
                })
            },
            
            // 查看图片
            openImg(img) {
                uni.previewImage({
                    current: img,
                    urls:[img]
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .content{
    	overflow: hidden;
    	background: #f3f4f6;
    }
    .case {
        border-bottom: 160rpx solid transparent;
    }
    .issue-title {
        padding: 30rpx;
        font-weight: 600;
    }
    .issue-block {
        background: white;
        margin-bottom: 20rpx;
        padding: 0 25rpx;
        .issue-inputs {
            position: relative;
            height: 90rpx;
            line-height: 90rpx;
            padding-left: 170rpx;
            .issue-input-label {
                position: absolute;
                left: 0;
                top: 0;
                width: 170rpx;
            }
            .issue-inputs-input {
                line-height: 90rpx;
                height: 90rpx;
                width: 100%;
            }
            .uni-input-img {
                width: 32rpx;
                height: 32rpx;
                position: absolute;
                right: 0;
                top: 30rpx;
            }
        }
    }
    .case-block {
        .case-inputs {
            margin-bottom: 30rpx;
            background-color: #FFFFFF;
            padding: 30rpx;
            box-sizing: border-box;
            position: relative;
            .case-input-label {
                margin-bottom: 30rpx;
                display: block;
                text {
                    color: #646464;
                }
            }
            .case-inputs-input {
                width: 70%;
            }
            .case-inputs-tips {
                position: absolute;
                right: 30rpx;
                top: 100rpx;
                color: green;
                &.active {
                    color: red;
                }
            }
            textarea {
                width: 100%;
            }
        }
    }
    
    
    /* 上传图片样式 */
    .issueNew-title {
        line-height: 90rpx;
    }
    .issueNew-photo{
        width: 100%;
        padding-top: 50%;
        background: white;
        position: relative;
        text-align: center;
        color: #999;
        font-size: 28rpx;
        .issueNew-content{
            position: absolute;
            top: 0;
            right: 15rpx;
            left: 15rpx;
            bottom: 10rpx;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-box-pack: center;
            border:1rpx solid #f5f5f5;
            border-radius: 6rpx;
            .issueNew-icon{
                width: 180rpx;
                height: 180rpx;
                margin-bottom: 15rpx;
            }
        }
    }
    
    
    /* 按钮 */
    .userdata-btn {
        width: 100%;
        box-sizing: border-box;
        padding: 30rpx;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 99;
        right: 0;
        background: white;
        .issue-btn {
            background: #4490ff;
            text-align: center;
            color: white;
            height: 90rpx;
            line-height: 90rpx;
            font-size: 34rpx;
            font-weight: normal;
            width: 100%;
            margin: 0;
            padding: 0;
            border-radius: 10rpx;
            &[disabled] {
                background: #4490ff !important;
                color: #fff !important;
            }
        }
    }
    .flexrow{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        box-sizing: border-box;
    }
</style>
