<template>
	<view class="page">
		<textarea v-model="form.reviewContent" maxlength="100" placeholder="写下您的反馈内容或者建议，我们会尽快完善"
			class="textarea-box"></textarea>

		<view class="flex align-center justify-center img-box" @click="handleUpload">

			<image v-if="form.reviewImg" :src="form.reviewImg" style="width: 100%;height:100%"></image>

			<text v-else class="cuIcon-pic" style="font-size: 56rpx;color: rgba(151, 151, 151, 1);"></text>
		</view>
		<view class="btn" @click="submit">
			确认提交
		</view>
	</view>
</template>

<script>
	import {
		base_url
	} from '@/api/config.js'
	import { addFeedback } from "@/api/user.js"
	export default {
		data() {
			return {
				form: {
					reviewContent: '',
					reviewImg: ''
				}
			};
		},
		methods: {
			submit() {
				if (!this.form.reviewContent) {
					uni.showToast({
						title: '请输入反馈内容',
						icon: 'none'
					})
					return
				}
				let data = {
					content: this.form.reviewContent,
					pics: this.form.reviewImg
				}
				addFeedback(data).then(res=>{
					uni.showToast({
						title: '提交成功',
						icon: 'none',
					})
					setTimeout(()=>{
						uni.navigateBack()
						},500)
				})

			},
			// 上传事件
			handleUpload() {
				// 读取 小程序已经授权的权限
				uni.getSetting({
					success:(res)=> {
						console.log(res)
						// 判断是否拥有此权限进行拉起授权  和 重新授权功能
						if (!res.authSetting['scope.camera']) {
							// 未授权此项权限 拉起授界面
							uni.authorize({
								scope: 'scope.camera',
								success:()=> {
									// 授权成功后 就可以执行 需要权限的  操作函数了
									uni.chooseImage({
										count: 1,
										success: (res) => {
											console.log(res,'res')
											uni.uploadFile({
												url: base_url +
												'/bar/common/upload', //仅为示例，非真实的接口地址
												filePath: res.tempFilePaths[0],
												name: 'file',
												formData: {
													type: 'image'
												},
												success: (uploadFileRes) => {
													this.form.reviewImg = JSON
														.parse(uploadFileRes.data)
														.url
												},
												fail: (err) => {
													console.log(err)
													uni.showToast({
														title: '上传失败',
														icon: 'none'
													})
												}
											});
										}
									})
								},
								fail:(err)=> {
									/*
									 第一次拒绝授权后必须在 uni.authorize的fail中使用
									 uni.openSetting 才能进入设置界面打开授权按钮
									 */
									uni.showToast({
										title: '拒绝授权',
										icon: 'none'
									});
									// 这里必须经过一个confirm 不然也会出现问题（啥问题我也不知道）
									uni.showModal({
										title: '是否重新授权拍照、相册的功能',
										success(res) {
											if (res.confirm) {
												uni.openSetting({
													success() {
														console.log('开启权限成功');
													},
													fail() {
														console.log('开启权限失败');
													}
												});
											} else if (res.cancel) {
												console.log('拒绝开启开启权限');
											}
										}
									});
								}
							});
						} else {
							uni.chooseImage({
								count: 1,
								success: (res) => {
									uni.uploadFile({
										url: base_url +
										'/bar/common/upload', //仅为示例，非真实的接口地址
										filePath: res.tempFilePaths[0],
										name: 'file',
										formData: {
											type: 'image'
										},
										success: (uploadFileRes) => {
											this.form.reviewImg = JSON
												.parse(uploadFileRes.data)
												.url
										}
									});
								}
							})	
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100vh;
		background: #FFFFFF;
		padding: 32rpx;
		.textarea-box {
			width: 100%;
		}
		.img-box {
			flex-shrink: 0;
			width: 160rpx;
			height: 160rpx;
			background: #D8D8D8;
			border-radius: 12rpx;
			margin-bottom: 28rpx;
		}

		.btn {
			width: 100%;
			height: 88rpx;
			border-radius: 12rpx;
			background: #39E5B1;
			font-size: 28rpx;
			font-weight: 500;
			line-height: 88rpx;
			text-align: center;
			color: #0B0E26;
		}
	}
</style>