<template>
	<view class="page">
		<view class="block">
			<view class="form-list edit-form">
				<view class="line">
					<view class="name">商品名称</view>
					<input type="text" placeholder="请输入商品名称" v-model="form.prodName" />
				</view>
				<view class="line">
					<view class="name">产品分类</view>
					<view class="inline">
						<uni-data-picker class="picker-input" :clear-icon="false" placeholder="请选择产品分类" popup-title="请选择产品分类" preload :localdata="provinces" :map="{text: 'provinceName', value: 'provinceName'}" v-model="form.categoryId"></uni-data-picker>
					</view>
				</view>
				<view class="py">
					<uni-file-picker v-model="pic" limit="5" title="请上传封面图片,至少一张" :auto-upload="false" @select="uploadDes"></uni-file-picker>
				</view>
				
			</view>
		</view>
		
		<view class="block">
			<view class="form-list edit-form">
				<view class="line textarea-line no-bd">
					<textarea placeholder="描述一下宝贝的品牌型号、货品来源..." v-model="form.brief"></textarea>
				</view>
				<view class="py">
					<uni-file-picker v-model="pic" limit="10" title="添加优质图片" :auto-upload="false" @select="uploadDes"></uni-file-picker>
				</view>
			</view>
		</view>
		
		<view class="title">产品规格</view>
		<view v-for="(item, i) in form.skuList" :key="i" class="block">
			<view class="form-list edit-form">
				<view class="line">
					<view class="name">规格名称</view>
					<input type="text" placeholder="请输入规格名称" v-model="item.skuName" />
				</view>
				<view class="line">
					<view class="name">价格</view>
					<view class="price-select" @click="showPrice">请选择</view>
				</view>
				<view class="line">
					<view class="name">库存</view>
					<uni-number-box v-model="item.stocks" :max="100" :min="1"></uni-number-box>
				</view>
			</view>
		</view>
		<view class="plus-sku">
			<uni-icons class="icon" type="plus" size="30" color="#007eff" @click="addSku"></uni-icons>
		</view>
		
		
		<view class="btns">
			<view class="btn" @click="submit(3)">存草稿</view>
			<view class="btn publish" @click="submit(0)">发布</view>
		</view>
		
		
		<uni-popup ref="popup" background-color="#fff" type="bottom">
			<view class="block">
				<view class="form-list edit-form">
					<view class="line">
						<view class="name">售价：</view>
						<input type="text" placeholder="请输入售价" v-model="form.prodName" />
					</view>
					<view class="line">
						<view class="name">优惠价：</view>
						<input type="text" placeholder="请输入优惠价" v-model="form.prodName" />
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { queryProvince, queryCity, queryTeamInfo, updateTeamInfo, enterpriseCertificationStatus } from '@/apis/modules/user.js'
	import { save, update, info, categoryList } from '@/apis/modules/goods.js'
	import OSS from '@/libs/Oss/upload'
	export default {
		data() {
			return {
				openId: uni.getStorageSync('openId'),
				info: {},
				form: {
					brief: '',
					categoryId: '',
					content: '',
					oriPrice: '',
					pic: '',
					price: '',
					prodName: '',
					skuList: [
						{
							actualStocks: '',
							oriPrice: '',
							price: '',
							skuName: '',
							stocks: '',
						}
					],
					totalStocks: ''
				},
				originSku: {},
				pic: [],
				submiting: false,
				uploading: false,
				classifications: [],
			}
		},
		computed: {
			// 平台名字
			platformName() {
				return this.info.platformSource === '6' ? '供应商' : this.info.platformSource === '5' ? '幼儿园' : ''
			},
		},
		onLoad() {
			this.originSku = JSON.parse(JSON.stringify(this.form.skuList[0]))
			this.getCategory()
			// this.getProvince()
		},
		methods: {
			// 企业认证信息
			async getEnterInfo() {
				const { data } = await enterpriseCertificationStatus(this.openId)
				if (data) {
					this.info = data
					data.platformSource === '6' && this.getClassification()
				}
			},
			// 供应商分类
			async getCategory() {
				const { data } = await categoryList()
				this.classifications = data
			},
			// 获取省份
			async getProvince() {
				const { list } = await queryProvince()
				this.provinces = list
				this.getInfo()
			},
			// 获取城市
			async getCity() {
				const { list } = await queryCity({
					provinceId: this.provinces.find(e => e.provinceName == this.form.province).provinceId
				})
				this.cities = list
				this.cityId = ''
			},
			// 上传logo
			uploadLogo() {
				const that = this
				uni.chooseImage({
					success: (res) => {
						const file = res.tempFilePaths[0];
						OSS(file, ({ url }) => {
							that.form.logoUrl = url
						})
					}
				});
			},
			// 上传描述图片
			uploadDes(e){
				OSS(e.tempFilePaths[0], (res) => {
					this.pic.push({
						name: res.name,
						extname: res.ext,
						url: res.url,
					})
				})
			},
			// 显示价格弹框
			showPrice() {
				this.$refs.popup.open()
			},
			// 新增sku
			addSku() {
				this.form.skuList.push(this.originSku)
			},
			// 提交
			async submit(status) {
				if (this.submiting) return false
				const { form } = this
				if (!form.prodName) return this.$util.errMsg(`请输入商品名称！`)
				if (!this.pic.length) return this.$util.errMsg(`请上传封面图片！`)
				if (!form.brief) return this.$util.errMsg(`请输入商品描述！`)
				if (!form.skuList.length) return this.$util.errMsg(`请输入产品规格！`)
				this.submiting = true
				form.pic = this.pic.map(e => e.url).join()
				form.status = status
				try {
					if (this.id) {
						await update(form)
						this.$util.sucMsg('保存成功！')
					} else {
						await save(form)
						this.$util.sucMsg('发布成功！')
					}
					
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				} catch(e) {
					this.submiting = false
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.page {
	padding-bottom: 170rpx;
	-webkit-overflow-scrolling: touch;
}
/deep/.picker-input {
	.arrow-area {
		display: none;
	}
	.input-value, .selected-list {
		padding: 0;
	}
}
.price-select {
	font-size: 24rpx;
	color: #333;
}
.title {
	margin: 40rpx 24rpx 24rpx;
	font-size: 30rpx;
	font-weight: 600;
	color: #333;
}
.plus-sku {
	text-align: center;
}
.btns {
	z-index: 10;
	position: fixed;
	bottom: env(safe-area-inset-bottom);
	bottom: 0;
	width: 100%;
	padding: 20rpx;
	display: flex;
	justify-content: center;
	box-sizing: border-box;
	background-color: #fff;
	box-shadow: 0px 0px 7rpx 0px rgba(203, 203, 203, 0.55);
	.btn {
		padding: 16rpx 60rpx;
		margin-left: 20rpx;
		font-size: 28rpx;
		color: #333;
		background-color: #d8d8d8;
		border-radius: 20px;
	}
	.publish {
		color: #fff;
		background-color: $uni-primary;
	}
}
</style>
