<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' ? '男性' : '女性'}}尿酸正常指标 {{ countMin }} ~ {{ countMax }}）</text>
                            </label>
                            <input class="case-inputs-input" placeholder="输入当前尿酸值" @input="numberInput" :value="countNumber" type="idcard" :disabled="editState"></input>
                            <text class="case-inputs-tips active" v-if="countNumber > countMax">偏高</text>
                            <text class="case-inputs-tips" v-if="countNumber < countMin && countNumber != ''">偏低</text>
                        </view>
                    </view>
                    <view class="issue-block">
                        <label class="issueNew-title">诊断证明</label>
                        <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('license')" v-else>
                                <image class="issueNew-icon" :src="license.showpath || '/static/imgs/cover_img.png'" mode="aspectFill"></image>
                                <view class="issueNew-text">请上传诊断证明</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    : '',
                countMax : '',
                countMin : '',
                countNumber:'',
                seeData  : {
                    name    : '',
                    id_card : '',
                    username: '',
                    sex     : '',
                    cover   : '',
                    remark  : '',
                    age     : ''
                },    //查看我的病例内容
                sexIndex : 0,
                sexName  : 'man',
                license	 : {
                	showpath: '',
                	path	: ''
                },
                sexArray : [{
                    val  : 'man',
                    name : '男'
                },{
                    val  : 'woman',
                    name : '女'
                }]
    		};
    	},
        onShow() {
            // 病例前置信息
            goutCreate().then(res => {
                this.count    = res.count
                this.countMax = parseInt(res.count.man.max)
                this.countMin = parseInt(res.count.man.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.countMax = parseInt(this.count.woman.max)
                    this.countMin = parseInt(this.count.woman.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'
            				})
            			})
            		}
            	})
            },
            
            // 尿酸值
            numberInput(e) {
                this.countNumber = e.detail.value
            },
            
            // 提交表单
            issueForm(e) {
                let value    = e.detail.value,
                    newCover = this.license.path,
                    newSex   = this.sexArray[this.sexIndex].val
                goutAdd({
                	name    : value.name,
                	age     : value.age,
                	mobileNo: value.mobileNo,
                    number  : this.countNumber,
                    remark  : value.remark,
                	cover   : newCover,
                	sex     : newSex
                }).then(res => {
                    this.disabled = true
                    this.$Router.replace({name: "User"})
                }).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: 25rpx;
            left: 25rpx;
            bottom: 10rpx;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-box-pack: center;
            border:1rpx solid #f5f5f5;
            border-radius: 6rpx;
            .issueNew-icon{
                width: 200rpx;
                height: 200rpx;
                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: #6e79ec;
            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: #a7affd !important;
                color: #fff !important;
            }
        }
    }
</style>
