<template>
	<view class="content">
		<!-- 商品图片 -->
		<view class="form-block">
			<view class="form-upd">
				<view class="form-title">商品轮播图<text>（首图封面图，点击预览，长按删除）</text></view>
				<view class="form-imgs">
					<view
						class="item"
						v-for="(item, index) in pictures"
						:key="index"
						@click="openImg(index, 'pictures')"
						@longpress="removeImg(index, 'pictures')"
					>
						<image class="item-cover" :src="item.showpath" mode="aspectFill"></image>
					</view>
					<view class="item item-add" @click="updCover('pictures')">
						<image class="item-cover" src="@/static/icons/add-icon.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 商品基本信息 -->
		<view class="form-block">
			<view class="form-box inputs-flex">
				<label class="form-label">产品标题</label>
				<input type="text" v-model="name" placeholder="输入商品标题"/>
			</view>
			<view class="form-box inputs-flex">
				<label class="form-label">商品描述</label>
				<input type="text" v-model="description" placeholder="输入商品描述"/>
			</view>
			<view class="form-box inputs-flex">
				<label class="form-label">规格单位</label>
				<input type="digit" :value="skus_unit" placeholder="输入规格单位 如:件"/>
			</view>
			<view class="form-upd">
				<view class="form-title">商品详情（点击预览，长按删除）</view>
				<view class="form-imgs">
					<view
						class="item"
						v-for="(item, index) in content"
						:key="index"
						@click="openImg(index, 'content')"
						@longpress="removeImg(index, 'content')"
					>
						<image class="item-cover" :src="item.showpath" mode="aspectFill"></image>
					</view>
					<view class="item item-add" @click="updCover('content')">
						<image class="item-cover" src="@/static/icons/add-icon.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 商品价格 -->
		<view class="form-block">
			<view class="form-box inputs-flex input-unit">
				<label class="form-label">市场价格</label>
				<input type="digit" v-model="skus_cost" placeholder="0.00"/>
				<text class="units">元{{skus_unit != '' ? '/' + skus_unit : ''}}</text>
			</view>
			<view class="form-box inputs-flex input-unit">
				<label class="form-label">销售价格</label>
				<input type="digit" v-model="skus_price" placeholder="0.00"/>
				<text class="units">元{{skus_unit != '' ? '/' + skus_unit : ''}}</text>
			</view>
			<view class="form-box inputs-flex input-unit">
				<label class="form-label">分销佣金</label>
				<input type="digit" v-model="skus_charge" placeholder="0.00"/>
				<text class="units">元{{skus_unit != '' ? '/' + skus_unit : ''}}</text>
			</view>
		</view>
		<!-- 商品详情介绍 -->
		<view class="form-block">
			<!-- is_change	query	否	0	是否支持易货 -->
			<view class="form-box inputs-flex">
				<label class="form-label">易货起购数量</label>
				<input type="number" v-model="skus_number" placeholder="输入易货起购数量"/>
			</view>
			<view class="form-box inputs-flex">
				<label class="form-label">商品库存</label>
				<input type="number" v-model="skus_stock" placeholder="输入商品库存"/>
			</view>
		</view>
		<!-- 售后服务 -->
		<view class="form-block">
			<view class="form-box picker-flex">
				<label class="form-label">配送方式</label>
				<view class="picker-text">
					logistic_type	1.快递，2.自提<uni-icons class="picker-icon" type="arrowright" color="#999"></uni-icons>
				</view>
			</view>
			<view class="form-box picker-flex">
				<label class="form-label">关联店铺</label>
				<view class="picker-text">
					stores 自提必填<uni-icons class="picker-icon" type="arrowright" color="#999"></uni-icons>
				</view>
			</view>
			<view class="form-box picker-flex">
				<label class="form-label">允许售后</label>
			</view>
			<view class="form-box picker-flex">
				<label class="form-label">可选服务</label>
				<view class="picker-text">
					321321<uni-icons class="picker-icon" type="arrowright" color="#999"></uni-icons>
				</view>
			</view>
		</view>
		<!-- 售后服务 -->
		<view class="form-block">
			<view class="form-box picker-flex">
				<label class="form-label">到期时间</label>
				<view class="picker-text">
					321321<uni-icons class="picker-icon" type="arrowright" color="#999"></uni-icons>
				</view>
			</view>
		</view>
		<!-- 可选服务 -->
		<!-- 安全区 -->
		<view class="ios-bottom"></view>
		<!-- footer -->
		<view class="footer">
			<button class="footer-btn" type="default">发布</button>
			<view class="ios-bottom"></view>
		</view>
	</view>
</template>

<script>
	import { managesGoodsCreate, managesCreate } from '@/apis/interfaces/goods'
	import { uploads } from '@/apis/interfaces/uploading'
	export default {
		data() {
			return {
				name		: '',	 // 标题
				pictures	: [], 	 // 轮播图
				content		: [], 	 // 详情图
				description	: '', 	 // 商品描述
				isPostSale	: false, // 是否允许售后
				services	: [],	 // 商品服务
				skus_cost	: '0.00',// 市场价格
				skus_price	: '0.00',// 销售价格
				skus_number	: 1,	 // 易货起购数量
				skus_unit	: '件',	 // 规格文字
				skus_charge	: '0.00',// 分销佣金
				skus_stock	: 0,	 // 库存
				isChange	: false, // 是否支持易货
				logisticType: 0,	 // 配送方式
				stores		: [],	 // 关联店铺
				expiriedAt	: '',	 // 活动到期时间
				// 配置信息
				storesArr	: [],    // 可选店铺
				tags		: [],	 // 可选商品标签
				tagsIndex	: 0,	 // 选择标签的下标
				servicesArr	: [],	 // 可选服务
				type		: 1,	 // 1为商品，0为服务
			};
		},
		created() {
			managesCreate({
				category_cid: 140
			}).then(res => {
				this.storesArr 	= res.stores
				this.tags		= res.tags
				this.servicesArr= res.services
				this.type		= res.type
			}).catch(err => {
				uni.showToast({
					title: err.message,
					icon : 'none'
				})
			})
		},
		methods: {
			// 图片预览
			openImg(index, key){
				let paths = this[key].map(val => {
					return val.showpath
				})
				uni.previewImage({
					urls	 : paths,
					current	 : index,
					indicator: 'number'
				})
			},
			// 删除图片
			removeImg(index, key){
				this[key].splice(index, 1)
			},
			// 上传图片
			updCover(key){
				uni.chooseImage({
					success	: res => {
						let path = res.tempFiles.map((val, index) => {
							return {
								name: 'uploads' + index,
								uri : val.path
							}
						})
						uploads(path).then(updRes => {
							for(let i in updRes.path){
								this[key].push({
									path	: updRes.path[i],
									showpath: updRes.url[i]
								})
							}
						}).catch(err => {
							uni.showToast({
								title: err.message,
								icon : 'none'
							})
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding-bottom: 150rpx;
	}
	// 表单
	.form-block{
		background: white;
		margin-top: $margin - 10;
		.form-box{
			position: relative;
			padding-left: 240rpx;
			padding-right: $padding;
			font-size: $title-size-lg;
			min-height: 80rpx;
			&::after{
				position: absolute;
				bottom: 0;
				left: $margin;
				right: 0;
				height: 1rpx;
				content: " ";
				background: $border-color;
			}
			&:last-child::after{
				display: none;
			}
			.form-label{
				position: absolute;
				left: $margin;
				line-height: 80rpx;
				top: 0;
				width: calc(240rpx - #{$margin});
			}
		}
		.inputs-flex{
			input{
				height: 80rpx;
				line-height: 80rpx;
			}
		}
		.input-unit{
			padding-right: 200rpx;
			.units{
				position: absolute;
				right: 0;
				top: 0;
				line-height: 80rpx;
				height: 80rpx;
				width: 200rpx;
				padding-right: $padding;
				text-align: right;
				box-sizing: border-box;
			}
		}
		.picker-flex{
			.picker-text{
				position: relative;
				line-height: 80rpx;
				min-height: 80rpx;
				padding-right: 80rpx;
				@extend .nowrap;
				.picker-icon{
					right: 0;
					position: absolute;
				}
			}
		}
		.form-upd{
			.form-title{
				font-size: $title-size-lg;
				line-height: 80rpx;
				padding: 0 $padding;
				text{
					font-size: 80%;
					color: $text-gray;
				}
			}
			.form-imgs{
				margin-top: -($margin/3);
				padding: 0 20rpx 20rpx;
				display: flex;
				flex-wrap: wrap;
				.item{
					width: calc(20% - 14rpx);
					padding-top: calc(20% - 14rpx);
					margin: 7rpx;
					position: relative;
					.item-cover{
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
					}
				}
				.item-add{
					border: dashed 2rpx $border-color;
					box-sizing: border-box;
					.item-cover{
						top: calc(15% - 2rpx);
						left: calc(15% - 2rpx);
						width: 70%;
						height: 70%;
					}
				}
			}
		}
	}
	// 发布
	.footer{
		background: white;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx $padding;
		box-shadow: 0 0 4rpx 4rpx rgba($color: #000000, $alpha: .02);
		z-index: 99;
		.footer-btn{
			border: none;
			border-radius: 0;
			background: $text-price;
			height: 90rpx;
			line-height: 90rpx;
			font-weight: bold;
			font-size: $title-size;
			color: white;
			&::after{
				border: none;
			}
		}
	}
</style>
