<template>
    <view class='container'>
		<view class="wapper">
			<view class="reason">
				<view class="title">文字描述（必填）</view>
				<view class="mt-30">
					<u--textarea v-model="reason" height="260rpx" maxlength="150" placeholder="请输入（最低10个字）" count></u--textarea>
				</view>
			</view>
			
			<view class="mt-30">
				<text>相关图片（必填，最多9张）</text>
				<view class="control">
					<upload-image
					v-model="images"
					maxCount="3"
					width="100"
					height="100"
					type="fullurl"
					></upload-image>
				</view>
			</view>
		</view>
		
		<view class="btn-box">
			<view @click="onSubmit" class="fullscreen-btn">
				<text>提交</text>
			</view>
		</view>
		
		<!-- 提交 -->
		<wskj-modal :show="submitShow" :showCancelButton="true" confirmText="确定" confirmColor="#EB7318"
			@close="submitShow = false" @confirm="onConfirmSubmit" @cancel="submitShow = false">
			<view class="pt-40 pb-40">
				<view>
					<text class="fs-28">确认提交？</text>
				</view>
			</view>
		</wskj-modal>
    </view>
</template>

<script>
export default {
    data() {
        return {
			reason:'',
			submitShow: false,
			images: '',
        };
    },
    onLoad() {
		this.images = '/assets/img/qrcode.png'
    },
    methods: {
		onSubmit(){
			// console.log(this.images)
			// this.images = ''
			// console.log(this.images)
			if(!this.reason){
				return this.$u.toast('请输入内容')
			}
			if(!this.images){
				return this.$u.toast('请至少上传一张照片')
			}
			if(this.reason.length < 10){
				return this.$u.toast('文字描述最低10个字')
			}
			this.submitShow = true
		},
		// 提交
		onConfirmSubmit(){
			const params = {
				url: '/api/user/yijian',
				loadingTip: '',
				data: {
					content: this.reason,
					images: this.images
				}
			}
			// console.log(params);
			this.$request(params).then(res => {
				// console.log(res)
				this.submitShow = false
				if(res.code === 1) {
					this.$u.toast(res.msg || '提交成功')
					
					this.reason = ''
					this.images = ''
				} else {
					this.$u.toast(res.msg || '提交失败')
				}
			}).catch(err => {
				this.submitShow = false
				this.$u.toast(err.msg || '提交失败')
			})
		}
    },
};
</script>

<style scoped>
	.container {
		padding: 30rpx;
	}
	.wapper {
		
	}
	
	.reason {
		
	}
	.reason > .title {
		
	}
	.reason > textarea {
		margin-top: 20rpx;
		padding: 15rpx;
		width: 100% !important;
		border: 1px solid #ccc !important;
	}
	.control {
		margin-top: 20rpx;
	}
	
	.btn-box {
		width: 90%;
		position: fixed;
		bottom: 100rpx;
		left: 50%;
		margin-left: -45%;
	}
</style>
