<template>
	<view class="whole">
		<view class="oneBox">
			<view class="row flex" @click="showType = true">
				<view class="span">商品类型<text>*</text></view>
				<view class="text">
					<text v-if="Index === ''">请选择</text>
					<text v-else>{{typeList[Index].name}}</text>
					<up-icon name="arrow-right" size="14" />
				</view>
			</view>
			
			<view class="row flex">
				<view class="span">商品名称<text>*</text></view>
				<input class="input" type="text" v-model="goods_name" placeholder="请填写商品名称" />
			</view>
			
			<view class="row">
				<view class="span">上传图片</view>
				<view class="upImg">
					<view class="hasimg" v-for="(item, index) in imgList" :key="index">
						<image :src="item" class="img" mode="aspectFill"></image>
						<view class="icon flexc" @click="delUpImg(item, index)"><up-icon name="close" color="#fff" size="12" /></view>
					</view>
					<view class="plus flexc" @click="uploadImg()">
						<up-icon name="camera-fill" color="#9D9D9D" size="20" />
						<text>上传图片</text>
					</view>
				</view>
			</view>
			
			<view class="row" style="padding: 0;">
				<up-textarea v-model="desc" count placeholder="请填写备注,如商品来源,商品信息" style="font-size: 28rpx;" :height="70" :maxlength="500"></up-textarea>
			</view>
			
			<view class="btmbox flexc" @click="commitSubmit()">提交</view>
		</view>
		
		<up-popup :show="showType" :round="10" mode="bottom" @close="showType = false">
			<view class="reasonbox">
				<view class="title">请选择商品类型</view>
				<view class="box">
					<view class="row" v-for="(item, index) in typeList" :key="index" @click="selectType(index)">
						<view class="tit">{{item.name}}</view>
						<up-icon v-if="Index === index" name="checkbox-mark" color="#F14939" size="20" />
					</view>
				</view>
			</view>
		</up-popup>
		
		<!-- 隐私协议弹窗 -->
		<privacy-popup :show-dialog="showPrivacy" @close="showPrivacy = false" @agree="showPrivacy = false" @refuse="showPrivacy = false" />
		
	</view>
</template>

<script>
	import { reactive, toRefs } from 'vue'
	import { get, post } from '@/Api/request.js'
	import { showToast, judgePrivacy } from '@/components/common.js'
	import privacyPopup from '@/components/privacyPopup/index.vue'
	import { Style } from '@/utils/list.js'
	
	export default {
		components: {
			privacyPopup
		},
		setup() {
			const data = reactive({
				reason: '',
				mobile: '',
				desc: '',
				imgList: [],
				Color: uni.getStorageSync('theme_color'),
				bgColor: Style[uni.getStorageSync('theme_index') * 1].bgColor,
				showPrivacy: false,
				goods_name: '',
				typeList: [],
				Index: '',
				showType: false
			})

			function changeDesc(e) {
				data.desc = e.detail
			}
			
			// 上传图片
			async function uploadImg() {
				if(data.imgList.length >= 3) {
					showToast('最多只能添加3张图片喔')
					return false
				}
				if(await judgePrivacy()) {
					data.showPrivacy = true
					return false
				}
				uni.chooseImage({
					success(res) {
						const tempFilePaths = res.tempFilePaths
						uni.showLoading({
							title: '正在上传...',
							mask: true
						})
						tempFilePaths.forEach((item) => {
							uni.uploadFile({
								url: '/api/v1/upload',
								filePath: item,
								name: 'file',
								header: {
									Authorization: uni.getStorageSync('token') || '',
									accept: 'application/json',
									appid: uni.getStorageSync('appId')
								},
								success(req) {
									uni.hideLoading()
									if(data.imgList.length >= 3){
										showToast('最多只能添加3张图片喔')
									} else {
										const imgUrl = JSON.parse(req.data).data.link
										data.imgList.push(imgUrl)
									}
								},
								fail() {
									uni.hideLoading()
								}
							})
						})
					}
				})
			}
		  
			// 删除图片
			function delUpImg(item, index) {
				data.imgList.splice(index, 1)
			}
			
			function selectType(index) {
				data.Index = index
				data.showType = false
			}

			// 确认提交
			const commitSubmit = async () => {
				if(data.Index === '') {
					return showToast('请选择商品类型')
				}
				if(!data.goods_name) {
					return showToast('请填写商品名称')
				}
				uni.showLoading({
					mask: true,
					title: '正在提交'
				})
				let param = {
					shop_group_id: data.typeList[data.Index].id,
					goods_name: data.goods_name,
					comment: data.desc,
					images: data.imgList
				}
				post('/api/v1/wish', param).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: '提交成功',
						icon: 'success',
						duration: 1000,
						mask: true,
						success() {
							setTimeout(() => {
								uni.navigateBack({delta: 1})
							}, 1000)
						}
					})
				}).catch(() => {
					uni.hideLoading()
				})
			}
			
			function getCategoryList() {
				get('/api/v1/group', { parent_id: 0 }).then((res) => {
					data.typeList = res.data
				})
			}

			return {
				...toRefs(data),
				changeDesc,
				commitSubmit,
				uploadImg,
				delUpImg,
				selectType,
				getCategoryList
			}
		},
		async onLoad(options) {
			// await this.$onLaunched
			this.getCategoryList()
		}
	}
</script>


<style lang="scss" scoped>
.whole {
	background-color: #F5F5F5;
	position: relative;
	padding-bottom: 140rpx;
	.pad20{
		padding: 20rpx 0;
		box-sizing: border-box;
	}
	.oneBox{
		padding: 20rpx;
		box-sizing: border-box;
		.row{
			padding: 0 24rpx;
			font-size: 28rpx;
			background-color: #fff;
			margin-bottom: 20rpx;
			border-radius: 6rpx;
			.span{
				line-height: 80rpx;
				font-size: 30rpx;
				position: relative;
				&::after{
					position: absolute;
					border-bottom: 1px solid #f4f4f4;
					width: calc(100% + 40rpx);
					left: -20rpx;
					bottom: 0;
					content: '';
				}
				text{
					font-size: 24rpx;
					color: #f00;
				}
			}
			.input{
				width: calc(100% - 250rpx);
				height: 64rpx;
				text-align: right;
			}
			.upImg{
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				padding: 24rpx 0;
				.hasimg{
					width: 130rpx;
					height: 130rpx;
					margin-right: 30rpx;
					margin-bottom: 30rpx;
					position: relative;
					.img{
						width: 100%;
						height: 100%;
					}
					.icon{
						position: absolute;
						top: -18rpx;
						right: -18rpx;
						width: 36rpx;
						height: 36rpx;
						background: rgba(0, 0, 0, 0.6);
						border-radius: 50%;
						z-index: 10;
					}
				}
				.plus{
					width: 140rpx;
					height: 140rpx;
					flex-direction: column;
					border: 1px dashed #707070;
					box-sizing: border-box;
					border-radius: 6rpx;
					text{
						font-size: 24rpx;
						color: #9D9D9D;
						text-align: center;
					}
				}
			}
		}
	}
	
	.btmbox{
		width: 94%;
		height: 80rpx;
		color: #fff;
		background: v-bind('Color');
		border-radius: 10rpx;
		font-size: 30rpx;
		position: fixed;
		bottom: 30rpx;
		left: 3%;
	}
	.flexc{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.flex{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}
.reasonbox{
	padding: 0 30rpx;
	.title{
		font-size: 30rpx;
		color: #303030;
		font-weight: bold;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #E5E5E5;
	}
	.box{
		height: 65vh;
		overflow: auto;
		.row{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;
			.tit{
				font-size: 28rpx;
				color: #707070;
			}
		}
	}
}
</style>
