<template>
	<view class="content">
		<view class="" v-if="suessShow">
			<view class="fabBtn">
				<view class="btn">
					<image src="../../static/ic_41@2x.png" mode="" @click="submit"></image>
				</view>
			</view>
			<view class="goodBox">
				<view class="leftImg">
					<image src="../../static/ic_21@2x.png" mode=""></image>
				</view>
				<view class="nameBox">
					科麦斯无油静音空吗压力小型气550W-8L便捷吹尘木工打钉枪气泵空气压缩机
				</view>
			</view>
			<view class="evaluateBox">
				<view class="textBox">
					<view class="textrLeft">
						<image src="../../static/ic_42@2x.png" mode="" class="editIcon"></image>
					</view>
					<view class="textRight">
						<textarea value="" placeholder="从多个角度评价宝贝，可以帮助更多想买的人" confirm-type="done" maxlength="-1"
							@input="bindInput" />
					</view>
				</view>
				<view class="imgBox">
					<image src="../../static/ic_43@2x.png" mode=""
						style="width: 160rpx;height: 160rpx;margin-right: 10rpx;" @click="uploadImg"></image>
					<view class="uploadImg" v-for="(item,idnex) in fileList" :key="index">
						<image :src="item" mode=""></image>
						<image src="../../static/ic_19@2x.png" mode="" class="delicon" @click="deleteImg(index)">
						</image>
					</view>
				</view>
			</view>
		</view>
		<view class="noData" v-else>
			<image src="../../static/ic_44@2x.png" mode="" style="width: 320rpx;height: 320rpx;"></image>
			<view class="fabuText">
				发布成功
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				inputValue: '', //内容输入框
				suessShow: true, //是否成功
				fileList: [],
				urlImg: [],
				tempFilePaths: [],
				btnClick: true
			}
		},
		methods: {
			bindInput(e) {
				this.inputValue = e.detail.value
			},
			submit() {
				uni.showModal({
					title: '提示',
					content: '确定发布吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			uploadImg() {
				let that = this
				that.tempFilePaths = []
				uni.chooseImage({
					count: 6,
					success: (chooseImageRes) => {
						let list = chooseImageRes.tempFilePaths
						list.forEach((item, index) => {
							that.tempFilePaths.push(item);
						})
						let lists = that.tempFilePaths
						lists.forEach(ele => {
							const uploadTask = uni.uploadFile({
								url: 'https://ketao.shequtaoapp.com/api/common/upload',
								filePath: ele,
								fileType: 'image',
								name: 'file',
								formData: {
									'user': 'test'
								},
								header: {
									'token': uni.getStorageSync('token') || ''
								},
								success: (uploadFileRes) => {
									let uploadList = JSON.parse(uploadFileRes.data).data
									that.fileList.push(uploadList.url)
									that.urlImg.push(uploadList.save_path)
								}
							});
						})

					}
				});
			},
			//删除图片
			deleteImg(idx) {
				this.fileList.splice(idx, 1);
				this.urlImg.splice(idx, 1);
				this.tempFilePaths.splice(idx, 1);
			},
			//发布
			submit() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定发布吗？',
					success: function(res) {
						if (res.confirm) {
							let postData = {
								content: this.inputValue,
								images: this.fileList.toString(),
								id: '', //商品id
								order_item_id: '', //订单商品id
								level: '', //评星
							}
							if (that.btnClick) {
								that.btnClick=false
								request.post('/api/order/comment', postData).then(res => {
									if (res.code == 1) {
										uni.navigateBack({
											delta: 1
										})
										uni.showToast({
											title: '发布成功'
										})
									} else {
										uni.showToast({
											title: res.msg,
											icon: 'none'
										})
									}
								}).catch(err => {

								})
							}

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
		background-color: #F7F8FA;
		box-sizing: border-box;
	}

	.fabBtn {
		padding: 16rpx 32rpx;
		box-sizing: border-box;
		background-color: #fff;
		display: flex;
		justify-content: flex-end;
		border-bottom: 2rpx solid #F7F8FA
	}

	.btn image {
		width: 114rpx;
		height: 52rpx;
	}

	.goodBox {
		background-color: #fff;
		padding: 32rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid #F7F8FA
	}

	.leftImg {
		width: 136rpx;
		height: 136rpx;
		margin-right: 32rpx;
	}

	.leftImg image {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	}

	.nameBox {
		flex: 1;
		color: #323233;
		font-size: 26rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.evaluateBox {
		background-color: #fff;
		padding: 32rpx;
		box-sizing: border-box;
	}

	.textBox {
		display: flex;
		justify-content: space-around;
	}

	.editIcon {
		width: 32rpx;
		height: 32rpx;
	}

	.uploadImg {
		width: 160rpx;
		height: 160rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
		position: relative;
	}

	.imgBox {
		display: flex;
		flex-wrap: wrap;
	}

	.uploadImg image {
		width: 100%;
		height: 100%;
	}

	.delicon {
		position: absolute;
		top: 0;
		right: 0;
		width: 40rpx !important;
		height: 40rpx !important;
		background-color: #fff;
	}

	.fabuText {
		color: #323233;
		font-size: 36rpx;
		text-align: center;
		font-weight: 600;
	}

	.noData {
		width: 320rpx;
		height: 380rpx;
		padding-top: 230rpx;
		margin: 0 auto;
	}
</style>