<template>
	<view class="page">
		<view class="qy">
			<view class="gv" style="background-color: #fff; padding: 20px 16px 0;">
				<view class="green"></view>
				<view class="title">
					企业评价
				</view>
			</view>
			<view style="background-color: #fff; padding: 20px 16px 0;">
				<view class="t">
					评分
				</view>
				<view class="box">
					<u-input v-model="qypf" border="none" :maxlength="'3'" type="number" input-align="left"
						:placeholder="'请输入0~100的数值'" :clearable="false"
						:custom-style="{height:'50px',fontSize:'32rpx', color:'#6666666', backgroundColor: '#FFF', paddingLeft: '0px'}" />
				</view>
			</view>
			<view style="background-color: #fff; padding: 20px 16px 20px;">
				<view class="list list_item_top" style="margin-top: 0;">
					<text class="item1">评语：</text>
					<text class="item2">{{detailObj.companyComment?`${detailObj.companyComment}`:'-'}}</text>
				</view>
				<view class="listflex list_item_top">
					<text class="item1">附件：</text>
					<view class="list_flex_right">
						<view class="pdffj" v-for="(item,index) in comattachmentsFile " @click="openLink1(item)">
							<text class="look">{{item.filename}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bczl" style="margin-top: 15px;">
			<view class="gv" style="background-color: #fff; padding: 20px 16px 0;">
				<view class="green"></view>
				<view class="title">
					教师评价
				</view>
			</view>
			<view style="background-color: #fff; padding: 20px 16px 0;">
				<view class="t">
					评分
				</view>
				<view class="box">
					<u-input v-model="pf" border="none" :maxlength="'3'" type="number" input-align="left"
						:placeholder="'请输入0~100的数值'" :clearable="false"
						:custom-style="{height:'50px',fontSize:'32rpx', color:'#6666666', backgroundColor: '#FFF', paddingLeft: '0px'}" />
				</view>
			</view>
			<view style="background-color: #fff; padding: 20px 16px; margin-top: 0px;">
				<view class="t">
					评语
				</view>
				<view style="margin-top: 15px;">
					<u--textarea v-model="py" border="none" :maxlength="'100'" input-align="left"
						:placeholder="'请输入评语…'" :type="'textarea'" :height="240"
						:custom-style="{fontSize:'28rpx', color:'#6666666', backgroundColor: 'rgba(0,0,0,0.03)', padding: '15px 18px'}" />
				</view>
			</view>
			<view v-if="picList.length>0" style="background-color: #fff; padding: 20px 16px; margin-top: 15px;">
				<view class="text_gray_28" style="margin-bottom: 20rpx;">照片附件(最多可上传9张)</view>
				<u-grid :col="3" :border="false">
					<u-grid-item v-for="(item, index) in picList" :key="index">
						<image v-if="type != 3" class="delete" src="/static/img/common/delete.png"
							@click="deleteImg(index)"></image>
						<u-image :height="216" :width="216" :src="item"></u-image>
					</u-grid-item>
				</u-grid>
			</view>
			<view v-if="fileList.length>0" style="background-color: #fff; padding: 20px 16px; margin-top: 15px;">
				<view class="text_gray_28" style="margin-bottom: 20rpx;">PDF附件(最多可上传3个)</view>
				<view class="pdffj" v-for="(item,index) in fileList "
					@click="!item.filename?openFile(index):openLink(item)" :key="index">
					<image class="img" src="/static/img/home/link.png"></image>
					<text class="look">{{item.name?item.name:item.filename}}</text>
					<image v-if="type != 3" style="margin-left: 7px; width: 14px;height: 14px;"
						@click.stop="deleteModal(index)"
						src="https://yxlypublic.oss-cn-beijing.aliyuncs.com/WeChat/excellet-working/treadTree.png">
						<!-- <text class="look">{{item.filename}}</text> -->
				</view>
			</view>
			<view class="add_info" @click="addPhotos">+ 添加附件</view>
		</view>
		<view style="height: 144rpx;"></view>
		<view class="botBtnV_centralize">
			<view class="botBtn" @click="submit()">确认提交</view>
		</view>
		<!-- <u-action-sheet :list="list" @click="chooseImg" v-model="show"></u-action-sheet> -->
		<u-action-sheet :actions="list" cancelText="取消" round="24" :show="show" @select="chooseImg" @close="close"
			:closeOnClickOverlay="true"></u-action-sheet>
	</view>
</template>

<script>
	import {
		getOssInitApi,
		getImgUrlApi,
		scoredetailUrl,
		putscoreappraisalApi
	} from '@/config/api.js';

	export default {
		data() {
			return {
				id: '',
				qypf: '',
				pf: '',
				py: '',
				list: [{
					name: '拍照'
				}, {
					name: '从手机相册选择'
				}, {
					name: '从微信文件选择'
				}],
				picList: [],
				fileList: [],
				attachments: [],
				attachmentsFile: [],
				ossInit: {},
				maxCount: 9,
				filemaxCount: 3,
				show: false,
				detailObj: {},
				comattachmentsFile: [],
			}
		},

		onLoad(e) {
			this.id = e.id

			getOssInitApi({
				"uploadFileType": "report"
			}).then(res => {
				this.ossInit = res
			})

			this.loadData()
		},

		methods: {

			loadData() {
				scoredetailUrl(this.id).then(res => {
					if (res) {
						this.detailObj = res;
						this.comhandleDataspdf()
					}
				})
			},

			comhandleDataspdf() {
				let a1 = []
				let a2 = []
				if (this.detailObj.companyAttachment) {
					a1 = JSON.parse(this.detailObj.companyAttachment)
				}
				if (this.detailObj.companyAttachmentFile) {
					a2 = JSON.parse(this.detailObj.companyAttachmentFile)
				}
				a1 = a1.concat(a2)
				this.comattachmentsFile = a1
			},

			addPhotos() {
				this.show = true
			},

			close() {
				this.show = false
			},

			chooseImg(index) {
				var _this = this
				console.log(index)
				if (index.name == '拍照') { //拍照
					if (this.picList.length >= this.maxCount) {
						uni.showToast({
							title: "已达到上传文件上限",
							icon: "none"
						})
						return
					}
					uni.chooseImage({
						count: this.maxCount - this.picList.length,
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['camera'], //从相机选择
						success: function(res) {
							console.log("chooseImage...", JSON.stringify(res.tempFilePaths));
							_this.picList = _this.picList.concat(res.tempFilePaths)
						}
					});
				} else if (index.name == '从手机相册选择') { //相册
					if (this.picList.length >= this.maxCount) {
						uni.showToast({
							title: "已达到上传文件上限",
							icon: "none"
						})
						return
					}
					uni.chooseImage({
						count: this.maxCount - this.picList.length,
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: function(res) {
							console.log(res)
							console.log("chooseImage...", JSON.stringify(res.tempFilePaths));
							if (!_this.picList || _this.picList.length == 0) {
								_this.picList = res.tempFilePaths
							} else {
								_this.picList = _this.picList.concat(res.tempFilePaths)
							}
						}
					});
				} else if (index.name == '从微信文件选择') {
					if (this.fileList.length >= this.filemaxCount) {
						uni.showToast({
							title: "已达到上传文件上限",
							icon: "none"
						})
						return
					}
					wx.chooseMessageFile({
						count: this.filemaxCount - this.fileList.length,
						extension: ['pdf', 'PDF'],
						type: 'file',
						success(res) {
							console.log(res.tempFiles)
							// tempFilePath可以作为img标签的src属性显示图片
							for (let i = 0; i < res.tempFiles.length; i++) {
								let item = res.tempFiles[i]
								if (item.size > 10485760) {
									uni.showToast({
										title: "单个文件不允许超过10M",
										icon: "none"
									})
									return
								}
							}
							_this.fileList.push(...res.tempFiles)
						}
					});
				}
			},

			submit() {
				var _this = this
				if (!this.qypf) {
					this.showToast("请输入企业评分")
					return;
				}
				if (!this.pf) {
					this.showToast("请输入学校评分")
					return;
				}
				if (!this.py) {
					this.showToast("请输入学校评语")
					return;
				}
				if (Number(this.pf) < 0 || Number(this.pf) > 100) {
					uni.showToast({
						title: '评分范围1~100分',
						icon: 'none',
						duration: 1500
					});
					return
				}
				if (Number(this.qypf) < 0 || Number(this.qypf) > 100) {
					uni.showToast({
						title: '评分范围1~100分',
						icon: 'none',
						duration: 1500
					});
					return
				}
				// if (this.picList.length == 0 && this.fileList.length == 0) {
				// 	this.showToast("请添加至少一个附件")
				// 	return;
				// }
				uni.showLoading({
					title: '文件上传中~',
					mask: true
				})
				if ((this.picList.length == this.attachments.length) && (this.fileList.length == this.attachmentsFile
						.length)) {
					_this.uploadInfos();
				} else {
					if ((this.picList.length != this.attachments.length) && (this.fileList.length != this.attachmentsFile
							.length)) {
						let p1 = this.uploadImages();
						let p2 = this.uploadFiles();
						Promise.all([p1, p2]).then((res) => {
							console.log('end11', p1)
							console.log('end22', p2)
							_this.uploadInfos();
						})
					} else if (this.picList.length != this.attachments.length) {
						let p1 = this.uploadImages();
						Promise.all([p1]).then((res) => {
							console.log('end11', p1)
							_this.uploadInfos();
						})
					} else if (this.fileList.length != this.attachmentsFile.length) {
						let p2 = this.uploadFiles();
						Promise.all([p2]).then((res) => {
							console.log('end22', p2)
							_this.uploadInfos();
						})
					}
				}
			},

			uploadInfos() {
				console.log("uploadInfos111...", JSON.stringify(this.attachments))
				console.log("uploadInfos222...", JSON.stringify(this.attachmentsFile))
				let _this = this
				putscoreappraisalApi({
					id: _this.id,
					companyScore: _this.qypf,
					schoolScore: _this.pf,
					schoolComment: _this.py,
					schoolAttachment: JSON.stringify(_this.attachments),
					schoolAttachmentFile: JSON.stringify(_this.attachmentsFile),
				}).then(res => {
					uni.hideLoading();
					let pages = getCurrentPages();
					let prevPage = pages[pages.length - 2];
					uni.navigateBack({
						delta: 1
					});
				})
			},

			//pdf
			openFile(e) { //打开文件
				uni.showLoading({
					title: '努力加载中~',
					mask: true
				})
				var type = this.fileList[e].type
				var path = this.fileList[e].path
				console.log("openFile", type, path)
				if (type == 'image') {
					let array = new Array(1).fill(path);
					uni.previewImage({
						urls: array,
						success(res) {
							uni.hideLoading();
							console.log('openImage success');
						}
					});
				} else {
					uni.openDocument({
						filePath: path,
						showMenu: true,
						success: function(res) {
							uni.hideLoading();
							console.log('openDoc succ');
						}
					});
				}
			},

			deleteImg(e) { //e==index
				console.log(e, this.picList)
				this.picList.splice(e, 1)
				this.attachments.splice(e, 1)
			},

			deleteModal(e) {
				var _this = this
				uni.showModal({
					content: '确定要删除该文件吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('confirm', _this.fileList);
							_this.fileList.splice(e, 1)
							_this.attachmentsFile.splice(e, 1)
						} else if (res.cancel) {
							console.log('cancel');
						}
					}
				});
			},

			uploadImages() { //上传图片
				// console.log("uploadImages...", this.picList, this.attachments)
				var _this = this
				// if (this.picList.length == this.attachments.length) { //是否有新增图片
				// 	_this.uploadInfos();
				// } else {}
				// console.log('_this.ossInit...', _this.ossInit)
				let formdata = {}
				if (this.ossInit.uploadType == 'minio') {
					formdata = {
						'bucket': _this.ossInit.bucket,
						'dir': _this.ossInit.dir,
						'fileName': `${_this.ossInit.dir}${new Date().getTime()}/` + '${filename}',
						'accessId': _this.ossInit.accessId,
						'policy': _this.ossInit.policy
					}
				}else {
					formdata = {
						'key': `${_this.ossInit.dir}${new Date().getTime()}/` + '${filename}',
						// 'key': `${_this.ossInit.dir}${new Date().getTime()}`,
						'action': `${_this.ossInit.host}`,
						'OSSAccessKeyId': _this.ossInit.accessId,
						'policy': _this.ossInit.policy,
						'signature': _this.ossInit.signature,
						'callback': _this.ossInit.callback,
					}
				}
				return new Promise((resolve, reject) => {
					var gapLength = this.picList.length - this.attachments.length
					for (var i = 0; i < gapLength; i++) {
						uni.uploadFile({
							url: _this.ossInit.host,
							filePath: _this.picList[_this.picList.length - gapLength + i],
							name: 'file',
							formData: formdata,
							success: (uploadFileRes) => {
								// console.log("--", _this.attachments, uploadFileRes)
								// console.log("...",JSON.parse(uploadFileRes.data))
								_this.attachments.push(JSON.parse(uploadFileRes.data))
								if (_this.attachments.length == _this.picList.length) {
									// _this.uploadInfos();
									resolve()
								}
							},

							complete: (res) => {

								// console.log('res...', res)
							}
						});
					}
				})

			},

			uploadFiles() { //上传文件
				var _this = this
				// if (this.fileList.length == this.attachmentsFile.length) { //是否有新增图片
				// 	_this.uploadInfos();
				// } else {

				// }
				// console.log("uploadFiles...", this.fileList, this.attachmentsFile)
				let formdata = {}
				if (this.ossInit.uploadType == 'minio') {
					formdata = {
						'bucket': _this.ossInit.bucket,
						'dir': _this.ossInit.dir,
						'fileName': `${_this.ossInit.dir}${new Date().getTime()}/` + '${filename}',
						'accessId': _this.ossInit.accessId,
						'policy': _this.ossInit.policy
					}
				}else {
					formdata = {
						'key': `${_this.ossInit.dir}${new Date().getTime()}/` + '${filename}',
						// 'key': `${_this.ossInit.dir}${new Date().getTime()}`,
						'action': `${_this.ossInit.host}`,
						'OSSAccessKeyId': _this.ossInit.accessId,
						'policy': _this.ossInit.policy,
						'signature': _this.ossInit.signature,
						'callback': _this.ossInit.callback,
					}
				}
				return new Promise((resolve, reject) => {
					var gapLength = this.fileList.length - this.attachmentsFile.length
					for (var i = 0; i < gapLength; i++) {
						let item = _this.fileList[_this.fileList.length - gapLength + i]
						if (this.ossInit.uploadType == 'minio') {
							formdata.fileName = `${_this.ossInit.dir}${new Date().getTime()}/` + item.name
						}else {
							formdata.key = `${_this.ossInit.dir}${new Date().getTime()}/` + item.name
						}
						uni.uploadFile({
							url: _this.ossInit.host,
							filePath: _this.fileList[_this.fileList.length - gapLength + i].path,
							// name:  _this.fileList[_this.fileList.length - gapLength + i].name,
							name: "file",
							formData: formdata,
							success: (uploadFileRes) => {
								// console.log("--", _this.attachmentsFile, uploadFileRes)
								_this.attachmentsFile.push(JSON.parse(uploadFileRes.data))
								if (_this.attachmentsFile.length == _this.fileList.length) {
									// _this.uploadInfos();
									resolve()
								}
							},
							complete: (res) => {

								// console.log('res...123', res)
							}
						});
					}
				})

			},

			openLink(e) {
				this.$u.api.getImgUrl({
					bucket: e.bucket,
					filePath: e.object
				}).then(data => {
					uni.showLoading({
						title: '努力加载中~',
						mask: true
					})
					uni.downloadFile({
						url: data.url,
						success: function(res) {
							var filePath = res.tempFilePath;
							uni.openDocument({
								filePath: filePath,
								showMenu: true,
								success: function(res) {
									console.log('打开文档成功');
									uni.hideLoading();
								}
							});
						}
					});
				})
			},

			showToast(res) {
				uni.showToast({
					title: res,
					icon: "none"
				})
			},

			openLink1(e) {
				var _this = this

				uni.showLoading({
					title: '努力加载中~',
					mask: true
				})

				getImgUrlApi({
					bucket: e.bucket,
					filePath: e.object
				}).then(data => {
					console.log("data...", data)
					if (e.mime_type.indexOf("image") != -1) {
						_this.openImage(data.url)
					} else {
						uni.downloadFile({
							url: data.url,
							success: function(res) {
								var filePath = res.tempFilePath;
								uni.openDocument({
									filePath: filePath,
									showMenu: true,
									success: function(res) {
										console.log('打开文档成功');
									},
									complete: function() {
										uni.hideLoading();
									}
								});
							}
						});
					}
				})
			},
			openImage(imgPath) {
				let array = new Array(1).fill(imgPath);
				uni.previewImage({
					urls: array,
					success(res) {
						uni.hideLoading();
						console.log('openImage success');
					},
					fail(res) {
						uni.hideLoading();
						console.log('openImage fail:', res);
					}
				});
			},

			clickCentralize() {

			}
		}
	}
</script>

<style>
	page {
		background-color: #FAFAFB;
	}
</style>

<style lang="scss" scoped>
	.page {

		.qy {
			.gv {
				display: flex;
				align-items: center;

				.green {
					width: 3px;
					height: 10px;
					background: #0CB17A;
				}

				.title {
					margin-left: 10rpx;
					font-size: 16px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #000000;
				}

			}

			.list {
				margin-top: 9px;

				.item1 {
					font-size: 16px;
					font-family: PingFangSC-Light, PingFang SC;
					font-weight: 300;
					color: #646464;
				}

				.item2 {
					margin-left: 2px;
					font-size: 16px;
					font-family: PingFangSC-Light, PingFang SC;
					font-weight: 300;
					color: #121212;
				}
			}

			.listflex {
				margin-top: 9px;
				display: flex;

				.item1 {
					font-size: 16px;
					font-family: PingFangSC-Light, PingFang SC;
					font-weight: 300;
					color: #646464;
				}

				.list_flex_right {
					display: flex;
					flex-direction: column;
					margin-left: 2px;
					width: 80%;

					.pdffj {
						margin-bottom: 5px;

						.img {
							width: 24rpx;
							height: 24rpx;
							margin-right: 12rpx;
						}

						.look {
							width: 100%;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							white-space: normal;
							word-break: break-all;
							word-wrap: break-word;
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #0CB17A;
						}
					}

				}
			}

			.list_item_top {
				margin-top: 10px;
			}

			.t {
				font-size: 16px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #121212;
			}

			.box {
				border-bottom: 1rpx solid #E5E5E6;
			}
		}

		.bczl {

			.gv {
				display: flex;
				align-items: center;

				.green {
					width: 3px;
					height: 10px;
					background: #0CB17A;
				}

				.title {
					margin-left: 10rpx;
					font-size: 16px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #000000;
				}

			}

			.t {
				font-size: 16px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #121212;
			}

			.t1 {
				font-size: 12px;
				font-family: PingFangSC-Light, PingFang SC;
				font-weight: 300;
				color: rgba(0, 0, 0, 0.45);
			}

			.box {
				border-bottom: 1rpx solid #E5E5E6;
			}

			.add_info {
				margin-top: 15px;
				width: 100%;
				height: 88px;
				background-color: #fff;
				font-size: 34rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.9);
				line-height: 88px;
				text-align: -webkit-center;
			}

		}

		.delete {
			width: 40rpx;
			height: 40rpx;
			padding: 16rpx;
			position: absolute;
			top: -10rpx;
			right: -16rpx;
			z-index: 99;
		}

		.pdffj {
			display: flex;
			align-items: baseline;

			.img {
				width: 24rpx;
				height: 24rpx;
				margin-right: 10rpx;
			}

			.look {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #0CB17A;
				margin-left: 8rpx;
			}
		}

		.botBtnV_centralize {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 24rpx 32rpx;
			// height: 144rpx;
			background-color: #FFFFFF;
			z-index: 999;

			.botBtn {
				height: 48px;
				background: linear-gradient(180deg, #1CD9B2 0%, #0CB17A 100%);
				border-radius: 24px;
				font-size: 17px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 48px;
				text-align: center;
				margin-left: 0px;
			}
		}
	}
</style>