<template>
	<view class="box">
		<view class="pl-lg pr-lg pb-lg fill-base">
			<view class="box-item">
				<view class="box-item-title f-paragraph pb-md text-bold flex">
					<text class="c-warning f-sm-title">*</text>
					<text>反馈类型</text>
				</view>
				<view class="radius-16 flex-warp">
					<block v-for="(item,index) in navList" :key="index">
						<view class="nav-item text-center f-desc c-paragraph mb-md fill-body" @tap="getNavIndex(index)"
							:class="(index % 3 > 0)&& 'ml-md'"
							:style="{backgroundColor: index == navIndex ? primaryColor : '' , color:index == navIndex ? '#fff' : ''}">
							{{item.title}}
						</view>
					</block>
				</view>
			</view>
			<view class="box-item">
				<view class="box-item-title">
					<view class="text-bold f-paragraph">订单编号</view>
					<view class="c-caption f-caption pt-md pb-lg">若涉及订单, 填入订单号有助解决问题(订单详情页可复制)</view>
				</view>
				<view class="pr-lg pl-lg fill-body radius-16 f-paragraph flex-between box-item-cont">
					<input type="number" placeholder="请输入订单号" @input="getInput" v-model="param.order_code" />
				</view>
			</view>
			<view class="box-item pt-md">
				<view class="box-item-title f-paragraph pb-sm text-bold flex">
					<text class="c-warning f-sm-title">*</text>
					<text>反馈内容</text>
				</view>
				<view class="pd-lg radius-16 fill-body" style="overflow: hidden;">
					<textarea style="width: 100%;" class="c-paragraph" cols="30" rows="10"
						placeholder="您宝贵的建议，是我们不断进步的动力！请详细描述遇到的问题" :value="param.content" maxlength="1000"
						@input="bindInput"></textarea>
					<view class="pt-md text-right c-5A677E f-paragraph">
						{{param.content.length > 1000 ? 1000 : param.content.length}} / 1000
					</view>
				</view>
			</view>
			<view class="box-item mt-md" @click="checkquanxian">
				<view class="flex-warp" v-if="xianshi==2">
					<view class="radius-16 flex-center flex-column item-child upload-item fill-body radius-16 margin" style="width: 216rpx;height: 216rpx;background: #F7F7F7;">
						<view class="upload-icon flex-center c-title radius-10" style="display: contents;width:41px;height:39px;background:#FFFFFF;align-items:center;justify-content:center;"> 
							<view class="iconfont icon-camera _i">
								
							</view>
							<view class="f-caption c-caption mt-sm">
								上传图片
							</view>
							<view class="cur-imgsize f-caption c-caption">
								0/3
							</view>
						</view> 
					</view>
				</view>
				<upload @upload="imgUpload" v-if="xianshi==1" :imagelist="param.images" imgtype="images" @del="imgUpload" text="上传图片"
					:imgsize="3"></upload>
			</view>
			<view class="box-item mt-md" @click="checkquanxian">
				<view class="flex-warp" v-if="xianshi==2">
					<view class="radius-16 flex-center flex-column item-child upload-item fill-body radius-16 margin" style="width: 216rpx;height: 216rpx;background: #F7F7F7;">
						<view class="upload-icon flex-center c-title radius-10" style="display: contents;width:41px;height:39px;background:#FFFFFF;align-items:center;justify-content:center;"> 
							<view class="iconfont icon-camera _i">
								
							</view>
							<view class="f-caption c-caption mt-sm">
								上传视频
							</view>
							<view class="cur-imgsize f-caption c-caption">
								0/3
							</view>
						</view> 
					</view>
				</view>
				<upload @upload="imgUpload" v-if="xianshi==1"  @del="imgUpload" :imagelist="param.video_url" filetype="video"
					imgtype="video_url" text="上传视频" :imgsize="1" :videoSize="30">
				</upload>
			</view>
			<view class="f-desc c-caption pb-sm">*最多只能上传3张图片、1个视频（视频只支持30兆以内）</view>
		</view>
		<view class="f-caption c-warning pd-lg">注: 您反馈的意见问题，平台不会透露给他人，保护您的隐私</view>
		<view class="space-max-footer"></view>

		<fix-bottom-button @cancel="$util.goUrl({url:`/user/pages/feedback/list`})" @confirm="confirm"
			:text="[{text:'反馈记录',type:'cancel'},{text:'提交反馈',type:'confirm',isAuth:true}]" bgColor="#fff"
			:classType="2">
		</fix-bottom-button>
		<uni-popup ref="perpopup" type="top" :mask-click='false'>
			<view class="permissions_box">
				当您使用APP时，为了提供图片上传的功能，我们需要申请相机/存储权限。
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import  permision  from '@/utils/permission.js'
	export default {
		data() {
			return {
				param: {
					content: '',
					type_name: '', //反馈类型
					order_code: '', //订单号
					images: [],
					video_url: []
				},
				navList: [{
						title: '订单问题'
					},
					{
						title: '功能问题'
					},
					{
						title: '账号问题'
					},
					{
						title: '操作问题'
					},
					{
						title: 'BUG反馈'
					},
					{
						title: '其他'
					},
				],
				xianshi:2,
				navIndex: -1
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
		}),
		onLoad() {
			this.$util.setNavigationBarColor({
				bg: this.primaryColor
			})
			this.initIndex()
		},
		onShow(){ 
			plus.android.checkPermission('android.permission.WRITE_EXTERNAL_STORAGE',
				granted => {
					if (granted.checkResult==-1){
						this.xianshi=2
					}else{
						this.xianshi=1
					}
				},
				error => {
				  console.error('Error checking permission:', error.message);
				}
			);
		},
		methods: {
			async initIndex(refresh = false) {
				// #ifdef H5
				if (!refresh && this.$jweixin.isWechat()) {
					await this.$jweixin.initJssdk();
					this.$jweixin.wxReady(() => {
						this.$jweixin.hideOptionMenu()
					})
				}
				// #endif
			},
			bindInput(e) {
				this.$nextTick(function() {
					this.param.content = e.detail.value;
				})
			},
			async checkquanxian(){
				let that = this;
				if(uni.getSystemInfoSync().platform == 'android') {
					plus.android.checkPermission('android.permission.WRITE_EXTERNAL_STORAGE',
						granted => {
							console.log(1,granted.checkResult)
							if (granted.checkResult==-1){
								that.$refs.perpopup.open('top')
							}else{ 
								that.xianshi=1
							}
						},
						error => {
						  console.error('Error checking permission:', error.message);
						}
					  );
					that.requestAndroidPermission('android.permission.WRITE_EXTERNAL_STORAGE')
				}
			},
			async requestAndroidPermission(permisionID) {
				let that = this;
				console.log(permision)
				var result = await permision.requestAndroidPermission(permisionID);
				if(result != 1){
					this.recorderAuthModal();
				}else{
					this.$refs.perpopup.close()
					if(that.open_update_info == 0){
						return;
					}
				}
			},
			recorderAuthModal: function () {
				const that = this;
				uni.showModal({
					title: '温馨提示',
					content: '为了提供图片上传的功能，我们需要申请相机/存储权限，请您确认授权，否则无法使用该功能~',
					cancelText: '关闭',
					confirmText: '去授权',
					success(res) {
						if (res.confirm) {
							that.$refs.perpopup.close();
							permision.gotoAppPermissionSetting()
						}else{
							that.$refs.perpopup.close();
						}
					}
				})
			},
			imgUpload(e) {
				let {
					imagelist,
					imgtype
				} = e;
				this.param[imgtype] = imagelist;
			},
			confirm() {
				let {
					content,
					images,
					video_url
				} = this.param
				let param = this.$util.deepCopy(this.param)
				param.type_name = this.navIndex >= 0 && this.navList[this.navIndex].title
				if (images.length) {
					param.images = images.map(item => {
						return item.path
					})
				}
				if (video_url.length) {
					param.video_url = video_url[0].path
				}
				if (!param.type_name) {
					return this.$util.showToast({
						title: '请选择反馈类型'
					})
				}
				if (!content.trim()) {
					return this.$util.showToast({
						title: '请输入反馈内容'
					})
				}
				this.$util.showLoading()
				this.$api.mine.addFeedback(param).then(res => {
					this.$util.hideAll()
					this.$util.goUrl({
						url: `/user/pages/feedback/success`,
						openType: 'redirectTo'
					})
				})
			},
			getNavIndex(index) {
				this.navIndex = index
			},
			getInput(e) {
				this.$nextTick(function() {
					this.param.order_code = e.detail.value.replace(/\D/g, '')
				})
			}
		}
	}
</script>

<style lang="scss">
	.box-item {
		.box-item-title {
			padding-top: 40rpx;
		}

		.box-item-cont {
			height: 110rpx;

			input {
				width: 100%;
				height: 100%;
			}
		}

		.c-5A677E {
			color: #5A677E;
		}

		.nav-item {
			width: calc((100% - 40rpx) / 3);
			height: 68rpx;
			line-height: 68rpx;
			border-radius: 68rpx;
		}
	}
	.permissions_box{
		padding: 100rpx 30rpx;
		font-size: 30rpx;
		line-height: 50rpx;
		background-color: #fff;
	}
</style>
