<template>
	<view class="add-complaint-page">
		<!-- 顶部导航栏 -->
		<custom-navbar 
		  title="我要申诉" 
		  :show-back="true"
		  title-color="#000"
		  background-color="#FFFFFF"
		></custom-navbar>
		
		<!-- 订单编号 -->
		<view class="view-cont view-order">
			<view>
				<text class="cont-lable">订单编号</text>
			</view>
			<view>
				<text class="cont-text">{{queryData.order_number}}</text>
			</view>
		</view>
		<view class="container">
			<view class="view-cont">
				<view>
					<text class="cont-lable">申诉原因</text>
				</view>
				<view @click="openappealtitle">
					<text class="cont-text"
						  :class="{noshow: !queryData.title_id}">{{!queryData.title_id ? '请选择申诉原因' : title}} ></text>
				</view>
			</view>
			<!-- 申诉内容 -->
			<view class="complaint-cont">
				<view>
					<text class="cont-lable">申诉内容</text>
				</view>
				<textarea class="complaint-text"
						  v-model="queryData.text"></textarea>
			</view>
			<ali-oss-uploader
			  v-model="queryData.photos"
			  :max-count="3"
			  :max-size="5"
			  :width="'704rpx'"
			  :type="1"
			  :user-id="1"
			  button-text="上传图片"
			  tips="最多上传3张图片，每张不超过5MB"
			  @success="onUploadSuccess"
			  @error="onUploadError"
			  @delete="onFileDelete"
			  @ckeckisShowPer="ckeckisShowPer"
			  @ckecknowQer="ckecknowQer"
			  class="upload-box"
			>
			</ali-oss-uploader>
		</view>
		<!-- 联系 -->
		<view class="contact">
			<view class="contact-item">
				<text class="contact-lable">
					联系人
				</text>
				<input
					type="text"
					placeholder="联系人姓名"
					class="contact-text"
					v-model="queryData.name" />
				<view class="contact-options">
					<view class="contact-option"
						  @click="changeSex(1)">
						<text class="option-text">先生</text>
						<agree-radio
							:isAgree="queryData.sex == 1"></agree-radio>
					</view>
					<view class="contact-option"
						  @click="changeSex(2)">
						<text class="option-text">女士</text>
						<agree-radio
							:isAgree="queryData.sex == 2"></agree-radio>
					</view>
				</view>
			</view>
			<view class="contact-item">
				<text class="contact-lable">
					联系方式
				</text>
				<input
					type="text"
					placeholder="联系方式"
					class="contact-text"
					v-model="queryData.phone" />
			</view>
		</view>
		<!-- 提交按钮 -->
		<view class="btn-box" @click="submit">
			<text class="btn-text">提交</text>
		</view>
		<view class="kong"></view>
		
		
		<!-- 获取权限提示匡内容 -->
		<view class="permission"
			  :class="{ transform: isShowPer && nowQer === 'xc' }">
			<view class="per-tit">美融融plus 对储存空间/照片权限申请说明</view>
			<view class="per-cont">便于您使用该功能上传您的照片/图片/视频以及用于更换头像、发布商品等场景中读取相册和文件内容。</view>
		</view>
		<view class="permission"
			  :class="{ transform: isShowPer && nowQer === 'xj' }">
			<view class="per-tit">美融融plus 对相机拍摄权限申请说明</view>
			<view class="per-cont">便于您使用该功能上传您的照片/图片/视频以及用于更换头像、发布商品等场景中所需内容。</view>
		</view>
	</view>
</template>

<script>
import AliOssUploader from '../../components/ali-oss-uploader/ali-oss-uploader.vue';
import AgreeRadio from '@/components/agree-radio/agree-radio.vue'
import request from '../../utils/request';
	export default {
		components: {
			AliOssUploader,
			AgreeRadio
		},
		data() {
			return {
				photo: [],
				number: '',
				queryData: {
					title_id: null,
					text: '',
					photos: [],
					phone: '',
					sex: 1,
					name: '',
					order_number: '',
					user_id: ''
				},
				appealtitle: [],
				title: '',
				isShowPer: false,
				nowQer: 'xc'
			}
		},
		async onLoad(options) {
			const user = await request.post('/user/getuser',{type: 1});
			this.queryData.user_id = user.data.id;
			this.queryData.order_number = options.number;
			this.getappealtitle();
		},
		methods: {
			ckeckisShowPer(value) {
				console.log('this.isShowPer==========',value)
				this.isShowPer = value;
				console.log('this.isShowPer==========',this.isShowPer)
			},
			ckecknowQer(value) {
				this.nowQer = value;
			},
			getUserInfo() {
				request.post('/user/getuser',{type: 1}).then(result=>{
					this.userInfo = result.data;
				})
			},
			getappealtitle() {
				request.post('/user/getappealtitle').then(res=>{
					this.appealtitle = res.data;
				})
			},
			openappealtitle() {
				let itemList = [];
				itemList = this.appealtitle.map(item => item.title)
				uni.showActionSheet({
				  itemList: itemList,
				  success: (res) => {
				    this.queryData.title_id = this.appealtitle[res.tapIndex].id;
				    this.title = this.appealtitle[res.tapIndex].title;
				  }
				})
			},
			changeSex(sex) {
				this.queryData.sex = sex;
			},
			onUploadSuccess() {},
			onUploadError() {},
			onFileDelete() {},
			submit() {
				if(!this.queryData.order_number) {
					uni.showToast({
						title: '请重新申诉',
						icon: 'none'
					})
					return;
				}
				if(!this.queryData.title_id) {
					uni.showToast({
						title: '请选择申诉原因',
						icon: 'none'
					})
					return;
				}
				if(!this.queryData.text) {
					uni.showToast({
						title: '请填写申诉内容',
						icon: 'none'
					})
					return;
				}
				if(!this.queryData.name) {
					uni.showToast({
						title: '请填写联系人姓名',
						icon: 'none'
					})
					return;
				}
				if(!this.queryData.phone) {
					uni.showToast({
						title: '请填写联系方式',
						icon: 'none'
					})
					return;
				}
				if(!this.queryData.sex) {
					uni.showToast({
						title: '请选择性别',
						icon: 'none'
					})
					return;
				}
				request.post('/user/orderappeal',this.queryData).then(res=>{
					if(res.state == 1) {
						uni.showToast({
							title: '提交成功',
							icon: 'none'
						})
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style>
.view-cont {
	height: 100rpx;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	background-color: #fff;
}
.view-order {
	margin-bottom: 24rpx;
	padding: 0 24rpx;
}
.container {
	padding: 0 24rpx 42rpx;
	background-color: #fff;
}
.complaint-cont {
	border-top: 2rpx solid #eee;
}
.cont-lable,.cont-text,.contact-lable {
	line-height: 100rpx;
	font-size: 28rpx;
	color: #333333;
}
.contact-text {
	font-size: 28rpx;
	color: #333333;
}
.complaint-text {
	background-color: #eee;
	border-radius: 10rpx;
	width: 100%;
	height: 320rpx;
	padding: 24rpx;
	box-sizing: border-box;
	font-size: 28rpx;
	color: #333333;
	margin-bottom: 20rpx;
}
.upload-box {
  margin: -16rpx;
}
.contact {
  padding: 0 24rpx;
  background-color: #fff;
  margin-top: 24rpx;
}
.contact-item {
  height: 100rpx;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 2rpx solid #eee;
}
.contact-options,.contact-option {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
}
.contact-option {
  margin-left: 24rpx;
}
.contact-lable {
  margin-right: 24rpx;
}
.contact-text {
  flex: 1;
}
.kong {
  height: 202rpx;
}
.noshow {
  color: #999;
}

/* #ifdef APP-PLUS */
.permission.transform {
	top: calc(var(--status-bar-height) + 88rpx + 30rpx);
	opacity: 1;
	visibility: visible;
}
/* #endif */

.btn-box{
	height: 88rpx;
	border-radius: 44rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn-text{
	    font-size: 32rpx;
}
</style>
