<template>
	<view class="page-container page-gray-color">
		<view class="content-box">
			<view class="content-container">
				<view class="info-title">平台需要您补充的内容说明</view>
				<!-- 第一部分 -->
				<view class="section" v-if="replenish != null">
					<view class="item">
						<text class="label">主题</text>
						<view class="select-content-item">
							<view class="value v-select">{{replenish.correctionTitle}}</view>
						</view>
					</view>
					<view class="item">
						<text class="label">内容</text>
						<view class="select-content-no-h">
							<view class="select-item-box">
								<view class="value v-select">{{replenish.correctionRemark}}</view>
							</view>
						</view>
					</view>
					<view class="item" v-if="replenish.correctionFiles !== ''">
						<text class="label">附件</text>
						<view class="select-content-no-h">
							<view class="select-item-box">
								<view class="value v-select">
									<view class="accessory-box">
										<view class="accessory-item" v-for="(item, index) in replenishFiles"
											@click="doDownloadFile" :data-value="item" :key="index">
											<block v-if="isImageFile(item.fileType)">
												<image class="accessory-img" :src="item.netUrl" mode="scaleToFill">
												</image>
												<view class="file-name">{{item.fileName}}</view>
											</block>
											<block v-else>
												<view class="icon-source"></view>
												<view class="file-name">{{item.fileName}}</view>
											</block>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="info-title">在下面填写您补充的内容</view>
				<!-- 第一部分 -->
				<view class="section">
					<view class="item">
						<text class="label">内容</text>
						<view class="textarea-content">
							<textarea style="height: 120rpx;width: 100%;" @input="inputRemark" :value="remark"
								placeholder="请输入要补充的内容"
								placeholder-style="font-size:28rpx;color:$text-gray-hint-color"></textarea>
						</view>
					</view>
					<view class="item">
						<text class="label">附件</text>
						<view class="upload-file-box">
							<view v-for="(item, index) in files" :key="index" class="upload-file-item">
								<image @click="doPreImg" :data-value="item.netUrl" class="accessory-img"
									:src="item.netUrl" mode="scaleToFill"></image>
								<view class="file-name">{{item.fileName}}</view>
								<view @click="doDelFile" :data-value="item" :data-index="index"
									class="upload-file-del icon-clear"></view>
							</view>
							<view v-if="maxCount>0" @click="bindChooseFile" class="upload-file-item">
								<view class="icon-add-line size-64"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-fixed-footer">
			<view class="bottom-btn-blue" @click="doSubmit">提交</view>
		</view>
		<uni-popup type="message" ref="msg">
			<uni-popup-message :type="msgType" :message="msgHint" :duration="2000"></uni-popup-message>
		</uni-popup>
		<DownProgress :progress="downloadProgress" :isShow="downloading"></DownProgress>
	</view>
</template>

<script>
	import DownProgress from '@/components/download-progress.vue'
	import Shop from '@/common/js/net/shop.js'
	import {
		upShopImgUrl,
		sImgPrefix,
		upShopFileUrl
	} from '@/common/js/net/mainUrl.js';
	import {
		get
	} from '@/common/js/cache/storage.js'

	export default {
		components: {
			DownProgress
		},
		setup() {},
		data() {
			return {
				msgHint: '',
				msgType: 'info',
				msgShow: false,
				files: [],
				maxCount: 4,
				maxFixedCount: 4,
				replenishId: '',
				replenish: null,
				replenishFiles: [],
				downloading: false,
				downloadProgress: 0,
				remark: '',
				showActionsheet: false,
				groups: [{
						text: '图片',
						value: 'img'
					},
					{
						text: '文件(Word、PDF)',
						value: 'file'
					}
				]
			};
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: "材料补充",
			});
			uni.setNavigationBarColor({
				frontColor: "#000000",
				backgroundColor: "#FFFFFF",
				animation: {
					duration: 500,
					timingFunc: "easeIn",
				},
			});

			var id = options.id;
			if (id && id !== '') {
				this.replenishId = id
				this.doGetReplenishDetail();
			} else {
				this.showMessage('数据有误,请稍后重试', 'error');
				setTimeout(function() {
					uni.navigateBack();
				}, 1500);
			}
		},
		methods: {
			// 获取补充详情
			async doGetReplenishDetail() {
				try {
					uni.showLoading({
						title: '加载中...'
					});
					const res = await Shop.doGetReplenishDetail(this.replenishId);
					uni.hideLoading();

					this.replenish = res;

					// 获取附件信息
					if (this.replenish.correctionFiles) {
						await this.doGetFileInfo(this.replenish.correctionFiles);
					}
				} catch (err) {
					uni.hideLoading();
					this.showMessage(err.msg || '网络错误,请稍后重试', 'error');
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}
			},

			// 获取文件信息
			async doGetFileInfo(ids) {
				try {
					uni.showLoading({
						title: '加载中...'
					});
					const res = await Shop.doGetFileInfos({
						ids
					});
					uni.hideLoading();

					if (res) {
						const list = this.addPrefix(res);
						this.replenishFiles = list;
					}
				} catch (err) {
					uni.hideLoading();
					this.showMessage(err.msg || '获取附件失败,请稍后重试', 'error');
				}
			},

			inputRemark(e) {
				this.remark = e.detail.value
			},

			// 添加baseUrl
			addPrefix(list) {
				return list.map(item => {
					item.netUrl = sImgPrefix + item.fileId;
					return item;
				});
			},

			doPreImg(e) {
				const url = e.currentTarget.dataset.value
				uni.previewImage({
					urls: [url]
				});
			},

			// 下载文件
			doDownloadFile(e) {
				const item = e.currentTarget.dataset.value
				// 判断是否是图片
				if (this.isImageFile(item.fileName)) {
					this.doPreImg(item.netUrl);
				} else {
					// 判断是否支持打开
					if (this.isDocumentFile(item.fileName)) {
						// 去下载文件
						this.goDownloadFile(item);
					} else {
						this.showMessage('该文件无法在小程序中打开,请前往电脑端查看', 'info');
					}
				}
			},

			async goDownloadFile(item) {
				try {
					this.downloadProgress = 0;
					this.downloading = true;

					const token = get('token');
					const header = token ? {
						'Auth': `Bearer ${token}`
					} : {};

					const downloadTask = uni.downloadFile({
						url: item.netUrl + '.' + item.fileType,
						header,
						success: (res) => {
							if (res.statusCode === 200) {
								console.log('下载文件成功', res)
								var path = ''
								if (res.tempFilePath.endsWith('.' + item.fileType)) {
									path = res.tempFilePath
								} else {
									path = res.tempFilePath + '.' + item.fileType
								}
								this.saveAndOpenFile(path, item.fileType);
							} else {
								throw new Error('下载失败');
							}
						}
					});

					downloadTask.onProgressUpdate((res) => {
						this.downloadProgress = Number(res.progress);
					});

					await new Promise((resolve, reject) => {
						downloadTask.onSuccess(resolve);
						downloadTask.onFail(reject);
					});
				} catch (err) {
					console.log('下载失败', err);
					this.showMessage('很抱歉，文件下载出现问题。建议您稍作等待，之后再尝试下载。', 'error');
				} finally {
					this.downloadProgress = 0;
					this.downloading = false;
				}
			},

			saveAndOpenFile(path, fileType) {
				console.log('打开文件', path, fileType)
				const that = this
				uni.openDocument({
					filePath: path,
					fileType: fileType,
					showMenu: true,
					success(res) {
						that.showMessage('下载成功', 'success');
					},
					fail(err) {
						that.showMessage('很抱歉，文件下载出现问题。建议您稍作等待，之后再尝试下载。', 'error');
					}
				})
			},

			backPageRefresh() {
				const pages = getCurrentPages();
				const beforePage = pages[pages.length - 2];
				if (beforePage) {
					beforePage.$vm.needRefresh = true;
				}
				uni.navigateBack();
			},

			showMessage(msg, type = 'info') {
				this.msgHint = msg;
				this.msgType = type;
				this.msgShow = true;

				// 自动关闭提示
				if (this.$refs.msg) {
					this.$refs.msg.open({
						message: msg,
						type
					});
				}
			},

			bindChooseWay(e) {
				this.showActionsheet = false;
				const value = e.detail.value;

				if (value === 'img') {
					uni.chooseMedia({
						count: 4,
						mediaType: ['image'],
						sourceType: ['album'],
						success: (res) => {
							if (res.tempFiles.length > 0) {
								this.doUploadFile(1, res.tempFiles);
							}
						},
						fail: (err) => {
							this.showMessage(err.errMsg || '选择文件失败,请稍后重试', 'error');
						}
					});
				} else {
					uni.chooseMessageFile({
						count: 1,
						type: 'file',
						extension: docFix,
						success: (res) => {
							if (res.tempFiles.length > 0) {
								this.doUploadFile(2, res.tempFiles);
							}
						},
						fail: (err) => {
							this.showMessage(err.errMsg || '选择文件失败,请稍后重试', 'error');
						}
					});
				}
			},

			bindChooseFile() {
				const that = this
				uni.chooseImage({
					count: that.maxCount,
					success(res) {
						if (res.tempFilePaths && res.tempFilePaths.length > 0) {
							that.doUploadFile(res.tempFilePaths)
						}
					},
					fail(err) {
						that.showMessage('选择图片失败,请稍后重试', 'error')
					}
				})
			},

			// 上传文件 type=1 图片  =2文件
			async doUploadFile(files) {
				try {
					uni.showLoading({
						title: '上传中...'
					});

					const upUrl = upShopImgUrl;
					const upType = 'image';
					const token = get('token');
					const header = token ? {
						'Auth': `Bearer ${token}`
					} : {};

					const uploadPromises = files.map((file, index) => {
						const filePath = file

						return new Promise((resolve, reject) => {
							uni.uploadFile({
								url: upUrl,
								header,
								filePath,
								name: upType,
								success: (res) => {
									try {
										let data = res.data;
										if (typeof data === 'string') {
											data = JSON.parse(data);
										}
										data.data.netUrl = sImgPrefix + data.data
											.fileId;
										resolve(data.data);
									} catch (err) {
										reject(new Error('解析上传结果失败'));
									}
								},
								fail: reject
							});
						});
					});

					const results = await Promise.all(uploadPromises);
					this.files = [...this.files, ...results];
					//判断files的长度
					this.maxCount = this.maxFixedCount - this.files.length
					uni.hideLoading();
				} catch (err) {
					console.error('上传失败', err);
					uni.hideLoading();
					this.showMessage('上传文件失败，请稍后重试', 'error');
				}
			},

			doDelFile(e) {
				const item = e.currentTarget.dataset.value
				const index = e.currentTarget.dataset.index
				if (index >= 0 && index < this.files.length) {
					this.files.splice(index, 1);
					this.maxCount = this.maxFixedCount - this.files.length
				}
			},

			// 校验参数
			checkParams() {
				const isRemarkValid = this.remark.trim() !== '';
				const isFileValid = this.files.length > 0;

				if (!isRemarkValid && !isFileValid) {
					this.showMessage('请输入补充内容或上传附件（至少完成一项）', 'error');
					return false;
				}

				return true;
			},

			// 提交
			async doSubmit() {
				if (this.checkParams()) {
					try {
						uni.showLoading({
							title: '提交中...'
						});

						const fileIds = this.files.map(item => item.fileId).join(',');
						const data = {
							correctionFiles: fileIds,
							correctionParentId: this.replenish.correctionId,
							correctionRemark: this.remark,
							orderId: this.replenish.orderId
						};

						await Shop.doSaveReplenish(data);
						this.showMessage('提交成功', 'success');

						setTimeout(() => {
							this.backPageRefresh();
						}, 1500);
					} catch (err) {
						this.showMessage(err.msg || '网络错误,请稍后重试', 'error');
					} finally {
						uni.hideLoading();
					}
				}
			},

			// 文件类型判断工具方法
			isImageFile(fileName) {
				const imgExts = ['jpg', 'jpeg', 'png', 'gif', 'bmp'];
				const ext = fileName.split('.').pop().toLowerCase();
				return imgExts.includes(ext);
			},

			isDocumentFile(fileName) {
				const docExts = ['doc', 'docx', 'pdf', 'xls', 'xlsx', 'ppt', 'pptx', 'txt'];
				const ext = fileName.split('.').pop().toLowerCase();
				return docExts.includes(ext);
			}
		},
	};
</script>

<style lang="scss" scoped>
	.page-gray-color {
		background-color: $divider-color;
	}

	.content-box {
		border-radius: 20rpx;
		margin-top: -10rpx;
	}

	.upload-img-box {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.content-container {
		margin: 0rpx -30rpx 0rpx -30rpx;
		background-color: white;
		display: flex;
		flex-direction: column;
		padding: 30rpx;
	}

	.info-title {
		font-size: 36rpx;
		font-weight: bold;
		display: flex;
		flex-direction: row;
		align-items: center;
	}


	.info-title::before {
		content: "";
		width: 10rpx;
		height: 36rpx;
		margin-right: 5rpx;
		border-left: 15rpx solid $blue-color;
		vertical-align: middle;
	}

	.section {
		margin-bottom: 15rpx;
		margin-left: 20rpx;
	}

	.item {
		display: flex;
		flex-direction: column;
		margin-bottom: 10rpx;
		padding: 20rpx 10rpx;
		font-size: 28rpx;
	}

	.label {
		color: $text-color;
		font-weight: bold;
	}

	.textarea-content {
		margin-top: 10rpx;
		padding: 10rpx 0rpx;
		font-size: 28rpx;
		border-bottom: 1rpx solid $divider-color;
	}

	.select-content {
		margin-top: 15rpx;
		display: flex;
		height: 70rpx;
		flex-direction: row;
		border-radius: 5rpx;
		background-color: $bg-gray-input-color;
		padding: 0rpx 10rpx;
	}

	.select-content-no-h {
		margin-top: 15rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		min-height: 70rpx;
		flex-direction: row;
		border-radius: 5rpx;
		padding: 0rpx 15rpx 10rpx 0rpx;
		border-bottom: 1rpx solid $divider-color;
	}

	.select-content-item {
		margin-top: 15rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 70rpx;
		flex-direction: row;
		border-radius: 5rpx;
		padding: 0rpx 15rpx 10rpx 0rpx;
		border-bottom: 1rpx solid $divider-color;
	}

	.select-item-box {
		flex: 1;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 5rpx;
	}

	.select-item-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: $divider-color;
		padding: 5rpx 15rpx;
		border-radius: 5rpx;
		font-size: 24rpx;
		margin-right: 15rpx;
		margin-top: 5rpx;
		color: $text-color;
	}

	.desc {
		flex: 1;
		color: $text-gray-desc-color;
		text-align: left;
		padding-left: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-right: 10px;
		align-items: center;
	}

	.select-time {
		color: $text-color;
		flex: 1;
		font-size: 28rpx;
		text-align: left;
	}

	.clear-icon {
		width: 20px;
		height: 20px;
		margin-right: 20rpx;
	}

	.value {
		flex: 1;
		text-align: left;
		font-size: 28rpx;
	}


	.value-hint {
		color: $text-gray-hint-color;
	}

	.v-select {
		color: $text-color;
		;
	}

	.v-normal {
		color: $text-gray-hint-color;
	}

	.custom-dialog {
		background-color: $white-color;
	}

	.custom-tips {
		margin-top: 80px;
	}

	.upload-file-box {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 20rpx 0rpx;
	}

	.upload-file-item {
		width: 20%;
		height: 180rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border: 1rpx solid $divider-color;
		border-radius: 10rpx;
		position: relative;
	}

	.upload-file-del {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		top: -15rpx;
		right: -15rpx;
	}

	.upload-file-item:nth-of-type(n+2) {
		margin-left: 20rpx;
	}

	.icon-add-line {
		background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQ5ODEwMTM0NTA0IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQzMDkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTUxMS45MTQ2NjcgOTYwYTIxLjMzMzMzMyAyMS4zMzMzMzMgMCAwIDEtMjEuMzMzMzM0LTIxLjMzMzMzM2wwLjEyOC04NTMuMzMzMzM0YTIxLjMzMzMzMyAyMS4zMzMzMzMgMCAxIDEgNDIuNjY2NjY3IDBsLTAuMTI4IDg1My4zMzMzMzRhMjEuMzMzMzMzIDIxLjMzMzMzMyAwIDAgMS0yMS4zMzMzMzMgMjEuMzMzMzMzeiIgZmlsbD0iI2NkY2RjZCIgcC1pZD0iNDMxMCI+PC9wYXRoPjxwYXRoIGQ9Ik05MzguNjY2NjY3IDUzMy4zMTJIODUuMzMzMzMzYTIxLjMzMzMzMyAyMS4zMzMzMzMgMCAxIDEgMC00Mi42NjY2NjdoODUzLjMzMzMzNGEyMS4zMzMzMzMgMjEuMzMzMzMzIDAgMSAxIDAgNDIuNjY2NjY3eiIgZmlsbD0iI2NkY2RjZCIgcC1pZD0iNDMxMSI+PC9wYXRoPjwvc3ZnPg==');
		background-size: cover;
		background-repeat: no-repeat;
	}

	.accessory-box {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.accessory-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		width: 21%;
		padding: 15rpx;
		margin: 10rpx;
		border: 1rpx solid $divider-color;
		box-sizing: border-box;
		min-width: auto;
	}

	.accessory-img {
		width: 100%;
		height: 160rpx;
	}

	.file-name {
		width: 100%;
		font-size: 20rpx;
		white-space: nowrap;
		overflow: hidden;
		line-height: 20rpx;
		text-overflow: ellipsis;
	}

	.icon-source {
		background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSI2NCA2NCA4OTYgODk2IiB3aWR0aD0iNTIiIGhlaWdodD0iNTIiIHN0eWxlPSIiIGZpbHRlcj0ibm9uZSI+CiAgICAKICAgIDxnPgogICAgPHBhdGggZD0iTTkyOCAxNjFINjk5LjJjLTQ5LjEgMC05Ny4xIDE0LjEtMTM4LjQgNDAuN0w1MTIgMjMzbC00OC44LTMxLjNBMjU1LjIgMjU1LjIgMCAwIDAgMzI0LjggMTYxSDk2Yy0xNy43IDAtMzIgMTQuMy0zMiAzMnY1NjhjMCAxNy43IDE0LjMgMzIgMzIgMzJoMjI4LjhjNDkuMSAwIDk3LjEgMTQuMSAxMzguNCA0MC43bDQ0LjQgMjguNmMxLjMuOCAyLjggMS4zIDQuMyAxLjNzMy0uNCA0LjMtMS4zbDQ0LjQtMjguNkM2MDIgODA3LjEgNjUwLjEgNzkzIDY5OS4yIDc5M0g5MjhjMTcuNyAwIDMyLTE0LjMgMzItMzJWMTkzYzAtMTcuNy0xNC4zLTMyLTMyLTMyek00MDQgNTUzLjVjMCA0LjEtMy4yIDcuNS03LjEgNy41SDIxMS4xYy0zLjkgMC03LjEtMy40LTcuMS03LjV2LTQ1YzAtNC4xIDMuMi03LjUgNy4xLTcuNWgxODUuN2MzLjkgMCA3LjEgMy40IDcuMSA3LjV2NDV6bTAtMTQwYzAgNC4xLTMuMiA3LjUtNy4xIDcuNUgyMTEuMWMtMy45IDAtNy4xLTMuNC03LjEtNy41di00NWMwLTQuMSAzLjItNy41IDcuMS03LjVoMTg1LjdjMy45IDAgNy4xIDMuNCA3LjEgNy41djQ1em00MTYgMTQwYzAgNC4xLTMuMiA3LjUtNy4xIDcuNUg2MjcuMWMtMy45IDAtNy4xLTMuNC03LjEtNy41di00NWMwLTQuMSAzLjItNy41IDcuMS03LjVoMTg1LjdjMy45IDAgNy4xIDMuNCA3LjEgNy41djQ1em0wLTE0MGMwIDQuMS0zLjIgNy41LTcuMSA3LjVINjI3LjFjLTMuOSAwLTcuMS0zLjQtNy4xLTcuNXYtNDVjMC00LjEgMy4yLTcuNSA3LjEtNy41aDE4NS43YzMuOSAwIDcuMSAzLjQgNy4xIDcuNXY0NXoiIGZpbGw9InJnYmEoMTI5LDE3OSw1NSwxKSI+PC9wYXRoPgogICAgPC9nPgogIDwvc3ZnPg==');
		background-size: cover;
		background-repeat: no-repeat;
		width: 42px;
		height: 42px;
	}
</style>