<template>
	<view class="goods">
		<view class="goods-hd">
			<view class="item">
				<view class="a">商品名称<text>*</text></view>
				<view class="b">
					<input type="text" v-model="form.goods_name" placeholder="请输入商品名称" />
				</view>
			</view>
			<view class="item">
				<view class="a">商品分类<text>*</text></view>
				<view class="b" style="width: 350rpx;height: 40rpx;text-align: right;" >
					<picker @change="changeMode" mode="selector" placeholder="请选择分类" style="width: 350rpx;height: 40rpx;"  range-key="text" :value="index" :range="modeList">
						{{form.goods_class}}</picker>
				</view>
			</view>
			<view class="itemImg">
				<view class="a">分类照片<text>*</text></view>
				<view class="c">
					<u-upload :action="action" :header="header" @on-uploaded="success" width="180" height="180"
						:file-list="fileList" :custom-btn="true" max-count="6">
						<template v-slot:addBtn>
							<view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
								<image :src="$picUrl+'/static/news/icon-upload.png'"></image>
								<view class="1">上传图片</view>
							</view>
						</template>
					</u-upload>
				</view>
			</view>
			<view class="item-status">
				<view class="item" style="border: none;padding-top: 0;">
					<view class="a">状态</view>
					<view class="b">
						<u-switch v-model="form.checked" active-color="#55BD6A"></u-switch>
					</view>
				</view>

				<view class="c">
					用户端是否显示
				</view>
			</view>
			<view class="item">
				<view class="a">排序<text>*</text></view>
				<view class="b">
					<input type="number" v-model="form.goods_sort" placeholder="请输入排序" />
				</view>
			</view>
		</view>
		<view class="goods-fd">
			<view class="btn" @click="onSubmit">确认</view>
		</view>
	</view>
</template>

<script>
	import Config from '@/core/config'
	export default {
		data() {
			return {
				fileList: [],
				form: {
					image_id: [],
					goods_type: '',
					goods_class: '',
					checked: false,
					goods_sort: '',
					goods_name:'',
				},
				modeList: [{
					text: '店内现货',
					id: 0,
				}, {
					text: '仓库发货',
					id: 1,
				}],

				value: "",
				action: '',
				header: '',
			};
		},
		onReady() {
			this.action = (Config.get('apiUrl') + 'upload/image').replace("index.php?s=/", "")
			this.header = {
				'Storeid': uni.getStorageSync('Store').storeInfo.store_id,
				'Access-Token': uni.getStorageSync('AccessToken'),
				'platform': "MP-WEIXIN",
			}
		},
		methods: {
			// 提交信息
			async onSubmit() {
				const that = this;
				if (!that.form.goods_name) {
					return that.$toast('请输入商品名称')
				}
				if (!that.form.goods_class) {
					return that.$toast('请选择商品分类')
				}
				if (!that.form.image_id) {
					return that.$toast('请上传分类图片')
				}
				if (!that.form.goods_sort) {
					return that.$toast('请输入商品排序')
				}
				let {
					status,
					message,
					data
				} = await newFunApi.addTransfer(that.form);
				if (status == 200) {
					uni.showToast({
						title: "录入成功"
					})
					setTimeout(function() {
						uni.$emit('refreshData');
						uni.navigateBack({
							delta: 1
						})
					}, 2000);
				}
			},
			// 商品分类
			changeMode(e) {
				this.form.goods_class = this.modeList[e.detail.value].text;
				this.form.goods_type = this.modeList[e.detail.value].id;
			},
			//接受上传返回的数据
			success(list) {
				if (list.length > 0) {
					const {
						response
					} = list[0];
					if (response.status == 200) {
						uni.showToast({
							title: "上传成功"
						})
						let idList = []
						list.forEach(item => {
							idList.push(item.response.data.fileInfo.file_id)
						});
						this.form.image_id = idList.join(',');
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.goods {
		padding: 0 0 20rpx;
		overflow: hidden;

		.c {
			padding-top: 20rpx;
			overflow: hidden;

			.slot-btn {
				width: 180rpx;
				height: 180rpx;
				background: #F6F6F6;
				border-radius: 10rpx;
				border: 1px solid #C0C0C0;
				text-align: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #6D6D6D;

				.l {
					line-height: 30rpx;
				}

				image {
					width: 50rpx;
					height: 50rpx;
					display: block;
					margin: 0 auto;
					margin-top: 30rpx;
				}
			}
		}

		&-hd {
			margin-top: 12rpx;
			background-color: #fff;
			padding: 0 36rpx 0;
			overflow: hidden;

			.itemImg {
				padding: 25rpx 10rpx;
				border-bottom: 1px solid #F7F7F7;

				text {
					color: #F34A40;
					margin-left: 5rpx;
				}
			}

			.item-status {
				padding: 25rpx 10rpx;
				border-bottom: 1px solid #F7F7F7;

				.c {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #C7C7C7;
					line-height: 28rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
			}

			.item {
				padding: 25rpx 10rpx;
				line-height: 50rpx;
				font-size: 28rpx;
				color: #212121;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #F7F7F7;

				.a {
					text {
						color: #F34A40;
						margin-left: 5rpx;
					}
				}


				.b {
					font-size: 28rpx;
					color: #212121;
					display: flex;
					align-items: center;

					input {
						font-size: 28rpx;
						color: #212121;
						flex: 1;
						line-height: 50rpx;
						font-size: 28rpx;
						color: #212121;
						text-align: right;
						margin-right: 10rpx;
					}

					.select {
						color: #C7C7C7;

						&-on {
							color: #212121;
						}
					}
				}
			}
		}

		&-bd {
			background-color: #fff;
			padding: 60rpx;
			overflow: hidden;

			.l {
				height: 260rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.a {
					height: 100%;
					width: 100rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.b {
					width: 260rpx;
					height: 260rpx;

					.slot-btn {
						width: 260rpx;
						height: 260rpx;
						background: #F6F6F6;
						border-radius: 10rpx;
						border: 1px solid #C0C0C0;
						text-align: center;
						font-size: 28rpx;
						font-weight: 500;
						color: #6D6D6D;

						image {
							width: 50rpx;
							height: 50rpx;
							margin-top: 80rpx;
							margin-bottom: 20rpx;
						}
					}
				}
			}

			.t {
				text-align: center;
				margin-top: 20rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #2D2D2D;
			}
		}

		&-fd {
			width: 100%;
			position: fixed;
			left: 0;
			bottom: 0;
			padding: 30rpx;
			background-color: #fafafa;
			box-sizing: border-box;

			.btn {
				width: 630rpx;
				line-height: 88rpx;
				background: #F34A40;
				border-radius: 88rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
				margin: auto;
			}
		}
	}
</style>
