<template>
	<view class="page">
		<navBar title="用户反馈" :back="true" color="black" background="white" />
		<view class="content">
			<view class="title">
				意见反馈
			</view>
			<u--textarea maxlength="100" :focus="true" v-model="value1" :disabled="false" placeholder="请描述您遇到的问题" count
				border="none" height="256rpx"></u--textarea>


			<view class="picTop">
				<view class="title" style="margin-top: 52rpx;">
					问题图片
				</view>

				<view class="count">
					<text style="color: #161717;">0</text>/1
				</view>
			</view>

			<!-- 图片上传区域 -->
			<!-- 选择要上传的图片区域 -->
			<view class="chooscontainer">
				<view class="addpicall" v-for="(item,index) in pic_url" :key="index">
					<image style="width: 184rpx;height:186rpx;border-radius: 15rpx;" @click="previewImg(item)"
						:src="item" mode="aspectFill">
					</image>
					<view @click="delectImg(index)" class="del_btn">×</view>
				</view>
				<view class="addpic" @click="addquesPic" v-show="pic_url.length<9">
					<view class="addPicBox">
						<image :src="picUrl+'/static/my/add.png'"></image>
					</view>

				</view>
			</view>


			<view class="title" style="margin-top: 52rpx;">
				联系方式
			</view>
			<input type="number" class="phone" placeholder="电话">


			<view class="btn">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	import uploadUrl from '@/common/config.js'
	export default {
		components: {

		},
		data() {
			return {
				picUrl: this.$picUrl,
				value1: '',
				pic_url: [
					// 'https://oaigc.oss-cn-chengdu.aliyuncs.com/lamp/2023-09/2023090715235129503.png'
				],
			}
		},
		onLoad(options) {},
		methods: {
			//删除图片
			delectImg(i) {
				this.pic_url.splice(i, 1)
			},
			//点击预览图片
			previewImg() {
				uni.previewImage({
					current: this.current,
					urls: this.formData.pic_url, //存放图片的数组
					loop: true,
					indicator: 'default'
				})
			},
			// 新增图片
			addquesPic() {
				let _this = this
				let imgList = []
				uni.chooseImage({
					count: 9 - _this.pic_url.length, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						if (_this.pic_url.length >= 9) {
							_this.$toast("只能选择9张照片")
							return
						}
						if (res.tempFilePaths.length > 0) {
							imgList = res.tempFilePaths
							imgList.forEach((item, index) => {
								uni.uploadFile({
									//后端接口地址
									url: uploadUrl.baseUrl,
									//图片临时地址
									filePath: imgList[index],
									//上传文件类型
									name: 'file',
									formData: {
										// tag: 'avatar',
										'tag': 'lamp'
									},
									success: (uploadRes) => {
										let result = JSON.parse(uploadRes.data)
										// localStorage.set('imgUrl', result.data.fileUrl)
										if (result.code == 0) {
											_this.pic_url = _this.pic_url
												.concat(result.data.file)
											console.log('上传后的头像url地址', result.data.file)
										}


										//后端返回的图片名称
										// let data = JSON.parse(res.data)
										// _this.pic_url = _this.pic_url
										// 	.concat(data.data.url)
									},
								})
							})
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>