<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 cover" :key="index">
						<image class="item-cover" src="@/static/dev/good_cover_00.jpg" mode="aspectFill"></image>
					</view>
					<view class="item item-add">
						<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 picker-flex">
				<label class="form-label">产品详情</label>
				<view class="picker-text">
					<uni-icons class="picker-icon" type="arrowright" color="#999"></uni-icons>
				</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="original_price" placeholder="0.00"/>
				<text class="units">元/件</text>
			</view>
			<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">元/件</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">元/件</text>
			</view>
			<view class="form-box inputs-flex input-unit">
				<label class="form-label">资产</label>
				<input type="digit" v-model="skus_assets" placeholder="0.00"/>
				<text class="units">元/件</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">元/件</text>
			</view>
		</view>
		<!-- 商品详情介绍 -->
		<view class="form-block">
			<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>
				<picker mode="selector">
					<view class="picker-text">
						请选择分类
						<uni-icons class="picker-icon" type="arrowright" color="#999"></uni-icons>
					</view>
				</picker>
			</view>
			<view class="form-box picker-flex">
				<label class="form-label">支付方式</label>
				<picker mode="selector">
					<view class="picker-text">
						请选择支付方式
						<uni-icons class="picker-icon" type="arrowright" color="#999"></uni-icons>
					</view>
				</picker>
			</view>
			<view class="form-box picker-flex">
				<label class="form-label">允许售后</label>
				<picker mode="selector">
					<view class="picker-text">
						是
						<uni-icons class="picker-icon" type="arrowright" color="#999"></uni-icons>
					</view>
				</picker>
			</view>
			<view class="form-box picker-flex">
				<label class="form-label">可选服务</label>
				<view class="picker-text">
					<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 } from '@/apis/interfaces/goods'
	import { uploads } from '@/apis/interfaces/uploading'
	export default {
		data() {
			return {
				cover			: [],
				name			: '',
				description		: '',
				original_price	: '',
				skus_cost		: '',
				skus_price		: '',
				skus_assets		: '',
				skus_charge		: '',
				skus_number		: '',
				skus_stock		: '',
			};
		},
		methods: {
			
		}
	}
</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>
