<template>
	<view class="container safe-area-inset-bottom">
		<MessageNotification />
		<view class="title">
			请描述您的病情
		</view>
		<view class="detail">
			<u-field v-model="txt" :focus="true" label-width="0" placeholder="请描述疾病症状(哪里不舒服,持续多长时间)"
				placeholder-style="color:#94A3B8" type="textarea" @input="sumfontnum" :auto-height="false">
			</u-field>
			<view class="words">
				最少还要描述
				<text id="txtnum">{{fontNum}}</text>个字
			</view>
		</view>
		<view class="btn_up">
			<view class="pre-box" v-if="!showUploadList">
				<view class="prompt">
					上传检查报告或患处照片(最多9张)
					<text>照片仅自己和医生可见</text>
				</view>
				<view class="pre-item" v-for="(item, index) in lists" :key="index">
					<image class="pre-item-image" :src="item.url" mode="aspectFill"></image>
				</view>
			</view>

			<u-upload :action="action" ref="uUpload" :show-upload-list="showUploadList" :custom-btn="true"
				upload-text="点击上传" max-count="9" :header="headers">
				<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
					<u-icon name="camera" size="40" color="#C4C7CC"></u-icon>
					<text @click="submit">点击上传</text>
				</view>
			</u-upload>
		</view>

		<view class="footer">
			<text @click="next">下一步</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				txt: "",
				fontNum: 140,
				action: "https://hospital.nbxlmy.com/member/v1/attachment/upload", // 演示地址
				showUploadList: false,
				// 如果将某个ref的组件实例赋值给data中的变量，在小程序中会因为循环引用而报错
				// 这里直接获取内部的lists变量即可
				lists: [],
				headers: {
					authorization: "Bearer " + uni.getStorageSync('token')
				},
				img: "",
				doctorID: "", // 医生id
			}
		},
		onLoad(e) {
			// console.log(e, 'e');
			this.doctorID = e.id
		},
		// 只有onReady生命周期才能调用refs操作组件
		onReady() {
			// 得到整个组件对象，内部图片列表变量为"lists"
			this.lists = this.$refs.uUpload.lists;

			// console.log(this.lists, 'files')
		},
		methods: {
			next() {
				// if (this.txt.length == 0 && this.img == []) {
				// 	uni.showToast({
				// 		title: '病情不能为空',
				// 		duration: 1500,
				// 		mask: false,
				// 		icon: 'error'
				// 	})
				// 	return
				// }
				// if (this.img != "" && this.txt.length <= 15) {
				// 	uni.showToast({
				// 		title: '病情最少15个字',
				// 		duration: 1500,
				// 		mask: false,
				// 		icon: 'error'
				// 	})
				// 	return
				// }
				// if (this.txt.length >= 15 && this.img != "") {
				// 	uni.navigateTo({
				// 		url: "/subPackages/doctor/doctor-picture-next"
				// 	})
				// 	return
				// }
				uni.navigateTo({
					url: "/subPackages/doctor/doctor-picture-next"
				})

				this.img = this.$refs.uUpload.lists.reduce((con, item) => {
					con.push(item.response.data.url)
					return con
				}, [])
				// console.log(this.img);
				uni.setStorageSync('img', this.img)
				uni.setStorageSync('txt', this.txt)
				uni.setStorageSync('doctorID', this.doctorID)

			},
			// 字数
			sumfontnum(e) {
				this.fontNum = 140 - e.length
			},
			// 上传
			submit() {
				let files = [];
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				console.log(files, 'files')
			},
		},

	}
</script>

<style lang="scss" scoped>
	.container {
		padding-bottom: env(safe-area-inset-bottom);

		.title {
			width: 686rpx;
			height: 60rpx;
			font-size: 36rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #1E293B;
			margin: 32rpx;
		}

		.detail {
			width: 686rpx;
			height: 300rpx;
			background: #F8FAFC;
			border-radius: 8rpx;
			margin: 32rpx;
			position: relative;

			.words {
				position: absolute;
				right: 30rpx;
				bottom: 20rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #A7ABB0;

				text {
					margin-left: 2rpx;
					color: #F44336;
				}
			}
		}

		::v-deep .u-field {
			width: 686rpx;
			height: 300rpx;
		}

		.btn_up {
			padding: 32rpx;


			.pre-box {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;

				.prompt {
					height: 90rpx;
					font-size: 30rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #31353D;

					text {
						display: inline-block;
						height: 40rpx;
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #A7ABB0;
						line-height: 40rpx;
					}
				}

				.pre-item {
					margin-bottom: 20rpx;

					.pre-item-image {
						width: 200rpx;
						height: 200rpx;
					}
				}

			}


			.wrap {
				padding: 24rpx;
			}

			.slot-btn {
				width: 128rpx;
				height: 128rpx;
				background: #F3F4F5;
				border-radius: 8rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				text {
					width: 96rpx;
					height: 34rpx;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #A7ABB0;
					line-height: 28rpx;
				}
			}

		}

		.footer {
			width: 750rpx;
			height: 110rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 2rpx solid #F2F3F5;
			position: fixed;
			left: 0;
			bottom: env;

			text {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 686rpx;
				height: 86rpx;
				background: #4175EE;
				border-radius: 64rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
</style>
