<template>
	<view>
		<view class="hm-header-xian"></view>
		<view class="form-box">
			<view class="form-item">
				<view class="title hm-fl hm-m-t-20">商品图片：<text class="hm-col-error">*</text></view>
				<view class="image logo" v-if="goods_logo">
					<image :src="goods_logo" @click="chooseLogo()"></image>
				</view>
				<view class="image" v-else>
					<view class="upload" @click="chooseLogo()">
						<u-icon name="plus" color="#ccc" size="30"></u-icon>
					</view>
				</view>
			</view>
			<view class="form-item" @click="categoryShow = true">
				<view class="title">商品分类：<text class="hm-col-error">*</text></view>
				<view class="center">
					<u--input :customStyle="{'padding':'15rpx'}" v-model="categoryName" border="none" :disabled="true" disabledColor="#fff"
						:clearable="true" placeholder="请选择商品分类"></u--input>
				</view>
				<view class="arrow-right">
					<u-icon name="arrow-right" color="#c0c4cc"></u-icon>
				</view>
			</view>
			<view class="form-item">
				<view class="title">商品名称：<text class="hm-col-error">*</text></view>
				<view class="right">
					<u--input :customStyle="{'padding':'15rpx'}" v-model="data.goods_name" border="none" :clearable="true" placeholder="请输入商品名称">
					</u--input>
				</view>
			</view>
			<view class="form-item">
				<view class="title">商品卖点：</view>
				<view class="right">
					<u--input :customStyle="{'padding':'15rpx'}" v-model="data.selling_point" border="none" :clearable="true" placeholder="请输入商品卖点">
					</u--input>
				</view>
			</view>
			<view class="form-item">
				<view class="title">商品规格：<text class="hm-col-error">*</text></view>
				<view class="right">
					<u-radio-group v-model="data.spec_type" placement="row">
						<view class="radio">
							<u-radio activeColor="red" name="10" label="单规格"></u-radio>
						</view>
						<view class="radio">
							<u-radio activeColor="red" name="20" label="多规格"></u-radio>
						</view>
					</u-radio-group>
				</view>
			</view>
			<block v-if="data.spec_type == 10">
				<view class="form-item">
					<view class="title">商品售价：<text class="hm-col-error">*</text></view>
					<view class="center">
						<u--input :customStyle="{'padding':'15rpx'}" v-model="data.spec.goods_price" type="number" border="none" :clearable="true"
							placeholder="请输入商品售价">
						</u--input>
					</view>
					<view class="arrow-right hm-col-error">元</view>
				</view>
				<view class="form-item">
					<view class="title">划线价格：</view>
					<view class="center">
						<u--input :customStyle="{'padding':'15rpx'}" v-model="data.spec.line_price" type="number" border="none" :clearable="true"
							placeholder="请输入划线价格">
						</u--input>
					</view>
					<view class="arrow-right hm-col-error">元</view>
				</view>
				<view class="form-item">
					<view class="title">商品库存：</view>
					<view class="center">
						<u--input :customStyle="{'padding':'15rpx'}" v-model="data.spec.stock_num" type="number" border="none" :clearable="true"
							placeholder="请输入商品库存">
						</u--input>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="form-item">
					<view v-for="(item,index) in data.spec_many.spec_attr" :key="index"
						:class="data.spec_many.spec_attr.length == 2?'hm-p-b-20 hm-border-t':'hm-p-b-20'">
						<view class="hm-dis-block-inline hm-m-l-10 hm-m-t-10">
							<u-tag :text="item.group_name" @close="delSpecGroup(index)" size="mini" plain plainFill
								closable />
						</view>
						<view>
							<view v-for="(item2,index2) in item.spec_items" :key="index2"
								class="hm-m-t-10 hm-m-l-10 hm-dis-block-inline">
								<u-tag :text="item2.spec_value" @close="delSpecValue(index,index2)" size="mini" plain
									plainFill closable type="warning" />
							</view>
							<view class="hm-m-t-10 hm-m-l-10 hm-dis-block-inline">
								<u-button @click="setSpecValueShow(item.group_id)" size="mini" type="success"
									text="添加项"></u-button>
							</view>
							<view v-if="specValueShow">
								<u-popup :show="specValueShow" mode="center" closeable round="10"
									@close="closeSpecValue()">
									<view class="hm-popup">
										<view class="popup-title">添加规格项</view>
										<view class="form-box">
											<view class="form-item">
												<view class="title">规格值：<text class="hm-col-error">*</text></view>
												<view class="right">
													<u--input :customStyle="{'padding':'15rpx'}" v-model="specValue.spec_value" border="none"
														:clearable="true" placeholder="请输入规格值">
													</u--input>
												</view>
											</view>
										</view>
										<view class="hm-m-t-50 hm-p-lr-b25 hm-text-center">
											<u-button @click="addSpecValue(index)" type="error" text="确认提交"></u-button>
										</view>
									</view>
								</u-popup>
							</view>
						</view>
					</view>
					<view v-if="specGroupShow">
						<u-popup :show="specGroupShow" mode="center" closeable round="10" @close="closeSpecGroup()">
							<view class="hm-popup">
								<view class="popup-title">添加规格组</view>
								<view class="form-box">
									<view class="form-item">
										<view class="title">规格名：<text class="hm-col-error">*</text></view>
										<view class="right">
											<u--input :customStyle="{'padding':'15rpx'}" v-model="specGroup.spec_name" border="none" :clearable="true"
												placeholder="请输入规格名称">
											</u--input>
										</view>
									</view>
									<view class="form-item">
										<view class="title">规格值：<text class="hm-col-error">*</text></view>
										<view class="right">
											<u--input :customStyle="{'padding':'15rpx'}" v-model="specGroup.spec_value" border="none" :clearable="true"
												placeholder="请输入规格值">
											</u--input>
										</view>
									</view>
								</view>
								<view class="hm-m-t-50 hm-p-lr-b25 hm-text-center">
									<u-button @click="addSpecGroup()" type="error" text="确认提交"></u-button>
								</view>
							</view>
						</u-popup>
					</view>
					<view v-if="data.spec_many.spec_attr.length < 2" class="add-spec-group">
						<view class="button">
							<u-button @click="specGroupShow = true">添加规格组</u-button>
						</view>
					</view>
					<view class="hm-p-20">
						<block v-if="data.spec_many.spec_list.length > 0">
							<view class="spec-list hm-font-b">
								<view class="goods-spec">规格</view>
								<view class="goods-price">售价</view>
								<view class="goods-price">划线价</view>
								<view class="goods-price">库存</view>
							</view>
							<view v-for="(item,index) in data.spec_many.spec_list"
								:class="data.spec_many.spec_list.length == index+1?'spec-list u-b-b':'spec-list'">
								<view class="goods-spec">{{item.spec_name}}</view>
								<view class="goods-price">
									<u--input :customStyle="{'padding':'15rpx'}" v-model="item.form.goods_price" inputAlign="center" type="number"
										border="none" :clearable="true" placeholder="0.00">
									</u--input>
								</view>
								<view class="goods-price">
									<u--input :customStyle="{'padding':'15rpx'}" v-model="item.form.line_price" inputAlign="center" type="number"
										border="none" :clearable="true" placeholder="0.00">
									</u--input>
								</view>
								<view class="goods-price">
									<u--input :customStyle="{'padding':'15rpx'}" v-model="item.form.stock_num" inputAlign="center" type="number"
										border="none" :clearable="true" placeholder="0">
									</u--input>
								</view>
							</view>
						</block>
					</view>
				</view>
			</block>
			<view class="form-item">
				<view class="title">打包费用：</view>
				<view class="center">
					<u--input :customStyle="{'padding':'15rpx'}" v-model="data.pack_price" type="number" border="none" :clearable="true"
						placeholder="外卖打包时收取">
					</u--input>
				</view>
				<view class="arrow-right hm-col-error">元</view>
			</view>
			<view class="form-item">
				<view class="title">起售数量：</view>
				<view class="right">
					<u--input :customStyle="{'padding':'15rpx'}" v-model="data.start_sale" type="number" border="none" :clearable="true"
						placeholder="请输入起售数量">
					</u--input>
				</view>
			</view>
			<view class="form-item">
				<view class="title">初始销量：</view>
				<view class="right">
					<u--input :customStyle="{'padding':'15rpx'}" v-model="data.sales_initial" type="number" border="none" :clearable="true"
						placeholder="请输入初始销量">
					</u--input>
				</view>
			</view>
			<view class="form-item">
				<view class="title">显示排序：<text class="hm-col-error">*</text></view>
				<view class="right">
					<u--input :customStyle="{'padding':'15rpx'}" v-model="data.goods_sort" type="number" border="none" :clearable="true"
						placeholder="数字越小越靠前">
					</u--input>
				</view>
			</view>
			<view class="form-item">
				<view class="title">是否推荐：<text class="hm-col-error">*</text></view>
				<view class="right">
					<u-radio-group v-model="data.is_recommend" placement="row">
						<view class="radio">
							<u-radio activeColor="red" name="1" label="是"></u-radio>
						</view>
						<view class="radio">
							<u-radio activeColor="red" name="0" label="否"></u-radio>
						</view>
					</u-radio-group>
				</view>
			</view>
			<view class="form-item">
				<view class="title">商品状态：<text class="hm-col-error">*</text></view>
				<view class="right">
					<u-radio-group v-model="data.goods_status" placement="row">
						<view class="radio">
							<u-radio activeColor="red" name="10" label="上架"></u-radio>
						</view>
						<view class="radio">
							<u-radio activeColor="red" name="20" label="下架"></u-radio>
						</view>
					</u-radio-group>
				</view>
			</view>
			<view class="hm-m-t-50 hm-p-lr-b25 hm-text-center">
				<u-button @click="edit()" type="success" text="确认提交"></u-button>
			</view>
			<view v-if="categoryShow">
				<u-picker :show="categoryShow" :columns="category" keyName="name" title="选择商品分类"
					@confirm="setCategory()" @cancel="categoryShow = false"></u-picker>
			</view>
		</view>
		<!-- 技术支持 -->
		<view class="hm">
			{{applet.copyright}} <text class="v">V{{applet.version}}</text>
		</view>
	</view>
</template>

<script>
	let App = getApp();

	export default {
		data() {
			return {
				id: '',
				applet: {},
				data: {
					goods_name: '',
					category_id: '',
					image_id: '', //商品图片id
					selling_point: '',
					spec_type: '10',
					sales_initial: '',
					is_recommend: '0',
					pack_price: '1',
					start_sale: '1',//起售数量
					goods_status: '10',
					goods_sort: '100',
					spec: {
						goods_price: '',
						line_price: '',
						stock_num:''
					},
					spec_many: {
						spec_attr: [],
						spec_list: []
					},
				},
				goods_logo: '', //商品图片
				category: [], //商品分类
				categoryShow: false,
				categoryName: '',
				specGroupShow: false, //是否显示添加多规格组面板
				specValueShow: false, //是否显示添加规格名称面板
				specGroup: {
					spec_name: '',
					spec_value: ''
				},
				specValue: {
					spec_id: '',
					spec_value: ''
				},
			};
		},
		components: {},
		props: {},
		created: function() {
			let _this = this;
			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('cropper', path => {
				App._upload_file(path, {}, function(result) {
					_this.goods_logo = result.data.url;
					_this.data.image_id = result.data.file_id;
				});
			})
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(opt) {
			let _this = this;
			_this.id = opt.id;
			_this.applet = App.getApplet();
			_this.getDetail();
		},
		methods: {
			/**
			 * 获取详情
			 */
			getDetail: function() {
				let _this = this;
				App._get('goods/edit', {
					id: _this.id
				}, function(result) {
					_this.category[0] = result.data.category;
					_this.categoryName = result.data.model.category.name;
					_this.goods_logo = result.data.model.image[0].url;
					_this.data.image_id = result.data.model.image[0].image_id;
					_this.data.goods_name = result.data.model.goods_name;
					_this.data.category_id = result.data.model.category_id;
					_this.data.selling_point = result.data.model.selling_point;
					_this.data.spec_type = String(result.data.model.spec_type);
					if (result.data.model.spec_type == 10) {
						_this.data.spec.goods_price = result.data.model.spec[0].goods_price;
						_this.data.spec.line_price = result.data.model.spec[0].line_price;
						_this.data.spec.stock_num = result.data.model.spec[0].stock_num;
					} else {
						_this.data.spec_many = result.data.specData;
					}
					_this.data.sales_initial = String(result.data.model.sales_initial);
					_this.data.pack_price = String(result.data.model.pack_price);
					_this.data.start_sale = String(result.data.model.start_sale);//起售数量
					_this.data.is_recommend = String(result.data.model.is_recommend.value);
					_this.data.goods_status = String(result.data.model.goods_status.value);
					_this.data.goods_sort = String(result.data.model.goods_sort);
				});
			},
			/**
			 * 编辑
			 */
			edit: function() {
				let _this = this,
					data = _this.data;
				data.id = _this.id;
				if (_this.goods_logo == '') {
					App.showError('商品图片不可为空');
					return false;
				}
				if (_this.categoryName == '') {
					App.showError('商品分类不可为空');
					return false;
				}
				if (data.goods_name == '') {
					App.showError('商品名称不可为空');
					return false;
				}
				if (data.spec_type == '10') {
					if (data.spec.goods_price == '') {
						App.showError('商品售价不可为空');
						return false;
					}
				} else {
					if (data.spec_many.spec_attr.length == 0 || data.spec_many.spec_list.length == 0) {
						App.showError('多规格项目不可为空');
						return false;
					}
					for (let n = 0; n < data.spec_many.spec_list.length; n++) {
						if (data.spec_many.spec_list[n].form.goods_price == '') {
							App.showError('多规格商品售价不可为空');
							return false;
						}
					}
				}
				if (data.start_sale == '' || data.start_sale < 1) {
					App.showError('起售数量必须大于1');
					return false;
				}
				if (data.goods_sort == '') {
					App.showError('显示排序不可为空');
					return false;
				}
				data.spec = JSON.stringify(data.spec);
				data.spec_many = JSON.stringify(data.spec_many);
				App._post_form('goods/edit', data, function(result) {
					App.showSuccess(result.msg, function() {
						uni.navigateBack(); //返回上一页
					});
				}, false, function() {});
			},

			/**
			 * 添加规则组
			 */
			addSpecGroup: function() {
				let _this = this,
					specGroup = _this.specGroup;
				if (specGroup.spec_name == '') {
					App.showError('规格名称不可为空');
					return false;
				}
				if (specGroup.spec_value == '') {
					App.showError('规格值不可为空');
					return false;
				}
				_this.specGroupShow = false;
				//清空数据
				_this.specGroup = {
					spec_name: '',
					spec_value: ''
				};
				App._post_form('goods.spec/addSpec', specGroup, function(result) {
					App.showSuccess('添加成功', function() {
						console.log(result);
						let spec_many = _this.data.spec_many;
						let spec_attr = {
							group_id: result.data.spec_id, //数据库中规格组ID
							group_name: specGroup.spec_name, //规格组名称
							spec_items: [{
								item_id: result.data.spec_value_id, //数据库中规格值ID
								spec_value: specGroup.spec_value //规格值名称
							}],
							tempValue: ''
						};
						spec_many.spec_attr.push(spec_attr); //数组新增项目
						_this.data.spec_many = _this.specList(spec_many);
					});
				}, false, function() {});
			},

			closeSpecGroup: function() {
				let _this = this;
				_this.specGroupShow = false;
				//清空数据
				_this.specGroup = {
					spec_name: '',
					spec_value: ''
				};
			},
			closeSpecValue: function() {
				let _this = this;
				_this.specValueShow = false;
				//清空数据
				_this.specValue = {
					spec_id: '',
					spec_value: ''
				};
			},

			/**
			 * 显示添加规格项面板
			 */
			setSpecValueShow: function(spec_id) {
				let _this = this;
				_this.specValue.spec_id = spec_id;
				_this.specValueShow = true;
			},

			/**
			 * 添加规格项值
			 */
			addSpecValue: function() {
				let _this = this,
					specValue = _this.specValue;
				if (specValue.spec_value == '') {
					App.showError('规格值不可为空');
					return false;
				}
				_this.specValueShow = false;
				//清空数据
				_this.specValue = {
					spec_id: '',
					spec_value: ''
				};
				App._post_form('goods.spec/addSpecValue', specValue, function(result) {
					App.showSuccess('添加成功', function() {
						let spec_many = _this.data.spec_many;
						//循环查询规格组
						for (let n = 0; n < spec_many.spec_attr.length; n++) {
							//如果是该规格组
							if (spec_many.spec_attr[n].group_id == specValue.spec_id) {
								let spec_items = {
									item_id: result.data.spec_value_id,
									spec_value: specValue.spec_value
								};
								spec_many.spec_attr[n].spec_items.push(spec_items); //新增规格项
								break; //退出循环
							}
						}
						_this.data.spec_many = _this.specList(spec_many);
					});
				}, false, function() {});
			},

			/**
			 * 删除规格项
			 */
			delSpecValue: function(index, index2) {
				let _this = this,
					spec_many = _this.data.spec_many;
				uni.showModal({
					title: "提示",
					content: "确定要删除 ( " + spec_many.spec_attr[index].group_name + "/" + spec_many.spec_attr[
						index].spec_items[index2].spec_value + " ) 规格值？",
					success: function(o) {
						if (o.confirm) {
							spec_many.spec_attr[index].spec_items.splice(index2, 1);
							//如果规格值组内没项目，则删除该规格组
							if (spec_many.spec_attr[index].spec_items.length == 0) {
								spec_many.spec_attr.splice(index, 1);
							}
							_this.data.spec_many = _this.specList(spec_many);
						}
					}
				});
			},

			/**
			 * 删除规格组
			 */
			delSpecGroup: function(index) {
				let _this = this,
					spec_many = _this.data.spec_many;
				uni.showModal({
					title: "提示",
					content: "确定要删除 ( " + spec_many.spec_attr[index].group_name + " ) 规格组？",
					success: function(o) {
						if (o.confirm) {
							spec_many.spec_attr.splice(index, 1);
							_this.data.spec_many = _this.specList(spec_many);
						}
					}
				});
			},
			/**
			 * 重组规格商品列表
			 */
			specList: function(spec_many) {
				console.log(spec_many);
				spec_many.spec_list = [];
				for (let m = 0; m < spec_many.spec_attr[0].spec_items.length; m++) {
					if (spec_many.spec_attr.length == 2) {
						for (let n = 0; n < spec_many.spec_attr[1].spec_items.length; n++) {
							let spec_list_item = {
								spec_sku_id: spec_many.spec_attr[0].spec_items[m].item_id + '_' + spec_many
									.spec_attr[1].spec_items[n].item_id,
								spec_name: spec_many.spec_attr[0].spec_items[m].spec_value + '/' + spec_many
									.spec_attr[1].spec_items[n].spec_value,
								form: {
									goods_price: '',
									line_price: '',
									stock_num:'',
									image_id: '',
									image_path: '',
									image_url: ''
								}
							};
							spec_many.spec_list.push(spec_list_item); //数组新增项目
						}
					} else {
						let spec_list_item = {
							spec_sku_id: spec_many.spec_attr[0].spec_items[m].item_id,
							spec_name: spec_many.spec_attr[0].spec_items[m].spec_value,
							form: {
								goods_price: '',
								line_price: '',
								stock_num:'',
								image_id: '',
								image_path: '',
								image_url: ''
							}
						};
						spec_many.spec_list.push(spec_list_item); //数组新增项目
					}
				}
				return spec_many;
			},

			/**
			 * 分类选择
			 */
			setCategory: function(e) {
				let _this = this;
				_this.categoryShow = false;
				_this.categoryName = e.value[0].name;
				_this.data.category_id = e.value[0].category_id;
				return true;
			},

			/**
			 * 选择图片
			 */
			chooseLogo: function() {
				let _this = this;
				// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
				_this.$u.route({
					// 关于此路径，请见下方"注意事项"
					url: 'pages/cropper/cropper',
					params: {
						destWidth: 400, // 输出图片宽度，单位px
						destHeight: 400, // 输出图片高度，单位px
						rectWidth: 400, // 裁剪框宽度，单位px
						rectHeight: 400, // 裁剪框高度，单位px
						fileType: 'jpg', // 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
					}
				})
			}
		}
	};
</script>
<style lang="scss" scoped>
	.form-box {
		background-color: #FFF;
		padding: 0rpx 20rpx 20rpx 20rpx;
		.form-item {
			border-bottom: 1rpx solid #f0f0f0;
			.input{
				padding: 15rpx;
				background-color: #ff0000;
			}
			.title {
				font-size: 30rpx;
				width: 23%;
				display: inline-block;
			}
			.right {
				width: 77%;
				display: inline-block;
				.radio{
					margin-left: 15rpx;
					padding: 20rpx 0rpx;
				}
			}
			.image {
				display: inline-block;
				padding: 20rpx 20rpx 10rpx 15rpx;
			}
			.upload {
				height: 105rpx;
				width: 105rpx;
				background-color: #F2F2F2;
				padding: 45rpx 0rpx 0rpx 45rpx;
				border-radius: 10rpx;
			}
			.logo{
				image {
					width: 150rpx;
					height: 150rpx;
				}
			}
			.start-time {
				display: inline-block;
				width: 33%;
			}
			.end-time {
				display: inline-block;
				width: 33%;
			}
			.time {
				display: inline-block;
				padding: 0rpx 20rpx;
			}
			.center {
				display: inline-block;
				width: 64%;
			}
			.arrow-right {
				display: inline-block;
				float: right;
				margin-top: 22rpx;
			}
		}
	}
	.add-spec-group {
		text-align: center;
		padding: 20rpx 0rpx;
		text-align: center;
		.button {
			width: 300rpx;
			margin: 0rpx auto;
		}
	}
	.spec-list {
		border-top: 1rpx solid #f3f4f6;
		border-left: 1rpx solid #f3f4f6;
		border-right: 1rpx solid #f3f4f6;
		.goods-spec {
			padding: 20rpx 0rpx;
			display: inline-block;
			width: 24.5%;
			text-align: center;
		}
		
		.goods-price {
			display: inline-block;
			width: 24.5%;
			text-align: center;
			border-left: 1rpx solid #f3f4f6;
		}
	}
</style>
