<template>
	<view class="container">
		<view class="top-box">
			<u--textarea border="none" v-model="textContent" count placeholder="写下自己的感受分享给更多人"></u--textarea>
			<view class="upload-box">
				<image class="upd-img" :key="index" v-for="(item, index) of fileList" :src="item" mode="aspectFill">
				</image>
				<view class="upload-item" @click="handlerUploadImg" v-if="fileList.length < 9">
					<image class="img" src="@/static/images/uploadImg.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="item-box" @click="handlerGetLocation">
			<view class="item-left">
				<u-icon name="map" size="22"></u-icon>
				<span class="fs-bold">你在哪里</span>
				<span class="left-text">{{ address }}</span>
			</view>
			<view class="item-right">
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="btn-box">
			<button class="btn" @click="handlerPublishBtn">发布</button>
		</view>
	</view>
</template>
<script>
	import { addClientContent } from '@/api/client/community.js';
	import { getCurrentLocation } from '@/api/client/home';
	import { mapGetters } from "vuex"
	import { uploadFile } from "@/utils/upload"
	export default {
		data() {
			return {
				textContent: '',
				fileList: [],
				uploadCount: 0,
				address: '', //当前位置
				uploadImgList: []
			};
		},
		mounted() {
			let {
				latitude,
				longitude
			} = this.location
			this.handlerInitLocation(latitude, longitude)
		},
		computed: {
			...mapGetters(['location', 'userId'])
		},
		methods: {
			// 初始化当前位置
			handlerInitLocation(latitude, longitude) {
				let point = `${latitude},${longitude}`
				getCurrentLocation({
					point
				}).then(res => {
					this.address = res.data.name
				})
			},
			// 手动选择城市	获取位置
			handlerGetLocation() {
				uni.chooseLocation({
					success: res => {
						this.address = res.name
					},
					fail: function(err) {
						console.log('取消按钮', err)
					}
				});
			},
			// 点击发布按钮
			handlerPublishBtn() {
				let params = {
					textContent: this.textContent,
					status: 0, // 状态：0-正常；1-屏蔽
					type: 'PURE_TEXT', // 动态类型:1-纯文字；2-图片；3-视频 允许值: PURE_TEXT, PHOTO, VIDEO
					location: this.address, // 定位
					userId: this.userId,
				};
				if (this.fileList.length != 0) {
					params.type = 'PHOTO';
					params.list = [];
					this.uploadImgList.map((rs, idx) => {
						params.list.push({
							resourceKey: rs,
							sort: idx,
						});
					});
				}
				addClientContent(params).then(res => {
					if (res.code === 'OK') {
						uni.showToast({
							title: '发布成功',
							icon: 'none',
						});
						this.textContent = '';
						setTimeout(() => {
							uni.navigateBack(-1);
						}, 1500);
						this.uploadImgList = []
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
						});
						return;
					}
				});
			},
			// 上传头像
			async handlerUploadImg() {
				try {
					const res = await uni.showActionSheet({
						itemList: ['拍照', '从相册选择'],
					});

					if (res.tapIndex === 0) {
						// 用户选择拍照
						this.takePhoto();
					} else if (res.tapIndex === 1) {
						// 用户选择从相册选择
						this.chooseImage();
					}
				} catch (error) {
					console.error(error);
				}
			},
			// 拍照
			takePhoto() {
				uni.chooseImage({
					sourceType: ['camera'],
					count: 9 - this.uploadCount,
					success: res => {
						const tempFilePaths = res.tempFilePaths;
						// 调用上传图片的方法
						tempFilePaths.map(rs => {
							this.uploadAvatar(rs);
						});
					},
					fail: error => {
						console.error(error);
					},
				});
			},
			//从相册中选择
			chooseImage() {
				uni.chooseImage({
					sourceType: ['album'],
					count: 9 - this.uploadCount,
					success: res => {
						const tempFilePaths = res.tempFilePaths;
						tempFilePaths.map(rs => {
							this.uploadAvatar(rs);
						});
						// 调用上传图片的方法
					},
					fail: error => {
						console.error(error);
					},
				});
			},
			// 上传头像
			async uploadAvatar(filePath) {
				// 在这里实现上传头像的逻辑，将filePath作为参数传入
				let res = await uploadFile(filePath)
				let data = JSON.parse(res.data)
				this.fileList.push(filePath);
				this.uploadImgList.push(data.data.url)
				this.uploadCount = this.fileList.length;
				// this.queryParams.avatar = filePath;
				this.$forceUpdate(); // 手动触发组件的重新渲染
			},
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		position: relative;
		background-color: #f5f7f9;
		height: 100vh;

		.top-box,
		.item-box {
			padding: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;

			.upload-box {
				margin-top: 20rpx;
				display: flex;
				flex-wrap: wrap;

				.upd-img {
					width: 140rpx;
					height: 140rpx;
					border-radius: 20rpx;
					margin: 10rpx;
				}

				.upload-item {
					width: 140rpx;
					height: 140rpx;
					border: 2rpx solid #000;
					border-radius: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					margin: 10rpx;

					.img {
						width: 80rpx;
						height: 80rpx;
						margin: 0 auto;
					}
				}
			}
		}

		.item-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;

			.item-left {
				display: flex;
				align-items: center;
			}
		}

		.btn-box {
			position: absolute;
			bottom: 0;
			background-color: #fff;
			height: 100rpx;
			padding: 20rpx;
			width: 95%;
			display: flex;
			justify-content: center;

			.btn {
				width: 80%;
				border-radius: 20rpx;
				font-size: 28rpx;
				color: #000;
				background-color: #fecf4c;
				height: 80rpx;
				line-height: 80rpx;
			}
		}

		.fs-bold {
			font-weight: bold;
			font-size: 28rpx;
			color: #000;
			margin-left: 10rpx;
		}

		.left-text {
			color: #a6a7a8;
			font-size: 28rpx;
			margin-left: 10rpx;
		}
	}
</style>