{extend name="app/shop/view/base.html"/}
{block name="resources"}
<link rel="stylesheet" href="__STATIC__/element-ui/index.css">
<style>
	.layui-form-item .layui-input-inline.end-time{float: none;}
	.layui-table-body{max-height: 480px !important;}
	.goods-title{display: flex;align-items: center;}
	.goods-title .goods-img{display: flex;align-items: center;justify-content: center;width: 55px;height: 55px;margin-right: 5px;}
	.goods-title .goods-img img{max-height: 100%;max-width: 100%;}
	.goods-title .goods-name{flex: 1;line-height: 1.6;}
	.form-wrap {position: relative;}
	.goods_num {padding-left: 20px;}
</style>
{/block}
{block name="main"}
<div class="layui-form form-wrap" id="vue">

	<div class="layui-form-item">
		<label class="layui-form-label">商品图：</label>
		<div class="layui-input-inline img-upload">
			<div class="upload-img-block icon square">
				<div class="upload-img-box">
					{if condition="$groupbuy_info.goods_image"}
					<img layer-src src="{:img(explode(',', $groupbuy_info.goods_image)[0])}" alt="">
					{else/}
					<img src="" alt="">
					{/if}
				</div>
			</div>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">商品名称：</label>
		<div class="layui-input-inline good-name">{$groupbuy_info.goods_name}</div>
	</div>

	<div class="layui-form-item" >
		<label class="layui-form-label"><span class="required">*</span>商品分类：</label>
		<div class="layui-inline" >
			<el-cascader style="width: 300px;" ref="cascader" placeholder="请选择商品分类"  v-model="category_id" :props="props" v-if="options" :options="options" filterable  @change="handleChange" getCheckedNodes></el-cascader>
		</div>
		<div class="word-aux">首次或分类发生变化请<a href="{addon_url('alilife/shop/category/lists')}">同步分类</a></div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">商品原价：</label>
		<div class="layui-input-inline good-price">
			￥<span>{$groupbuy_info.price}</span>
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label"><span class="required">*</span>团购价：</label>
		<div class="layui-input-block">
			<div class="layui-input-inline">
				<input type="number" name="groupbuy_price" lay-verify="required|group_price" autocomplete="off" class="layui-input len-short" value="{$groupbuy_info.groupbuy_price}" min="0.00">
			</div>
			<div class="layui-form-mid">元</div>
		</div>
		<div class="word-aux">
			<p>如商品存在多规格，则所有规格均是此价售卖，请谨慎设置</p>
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label"><span class="required">*</span>最低购买数量：</label>
		<div class="layui-input-block">
			<input type="number" name="buy_num" lay-verify="required|buy_num" autocomplete="off" class="layui-input len-short primary_price" value="{$groupbuy_info.buy_num}">
			<input type="hidden" name="groupbuy_id" value="{$groupbuy_info.buy_num}">
		</div>
		<div class="word-aux">
			<p>最低购买数量不能小于2</p>
		</div>
	</div>

	<div class="layui-form-item" >
		<label class="layui-form-label"><span class="required">*</span>活动时间：</label>
		<div class="layui-inline">
			<div class="layui-input-inline">
				<input type="text" id="start_time" name="start_time" value="{:date('Y-m-d H:i:s', $groupbuy_info.start_time)}" lay-verify="required" class="layui-input len-mid" autocomplete="off" readonly>
				<i class=" iconrili iconfont calendar"></i>
			</div>
			<span class="layui-form-mid">-</span>
			<div class="layui-input-inline end-time">
				<input type="hidden" id="old_end_time" value="{$groupbuy_info.end_time}">
				<input type="text" id="end_time" name="end_time" value="{:date('Y-m-d H:i:s', $groupbuy_info.end_time)}"  lay-verify="required|time" class="layui-input len-mid" autocomplete="off" readonly>
				<i class=" iconrili iconfont calendar"></i>
			</div>
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">可使用门店</label>
		<div class="layui-input-block">
			<input type="radio" name="select_all_shop" v-model="formData.select_all_shop" value="1"  title="全部门店" checked>
			<input type="radio" name="select_all_shop" @click="getStore()" v-model="formData.select_all_shop" value="0" disabled title="部分门店">
		</div>
		<div class="word-aux">
			<p>没有蚂蚁门店<a style="color: #00b7ee" href="{:addon_url('store/shop/store/lists')}" target="_blank">去添加</a></p>
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label "><span class="required">*</span>商家名称</label>
		<div class="layui-input-block">
			<input type="text" name="merchant_name"  value="{$shop_info.site_name??''}"  lay-verify="required" autocomplete="off" class="layui-input len-long">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label"><span class="required">*</span>客服电话</label>
		<div class="layui-input-block">
			<input type="text" name="phone_number" value="{$shop_info.contacts_mobile??''}"  lay-verify="required" autocomplete="off" class="layui-input len-long">
		</div>
	</div>

	<div class="layui-form-item layui-form-text">
		<label class="layui-form-label">活动规则说明：</label>
		<div class="layui-input-inline">
			<textarea name="notification" class="layui-textarea len-long" maxlength="300">{$groupbuy_info.rule??''}</textarea>
		</div>
	</div>
	<div class="form-row">
		<button class="layui-btn" lay-submit lay-filter="save">保存</button>
		<button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
	</div>
	<input type="hidden" name="goods_ids" value="" />
</div>
{/block}
{block name="script"}
<script type="text/html" id="toolbarOperation">
	<button class="layui-btn layui-btn-primary" lay-event="group-price">团购价</button>
	<button class="layui-btn layui-btn-primary" lay-event="purchase-num">最低购买数量</button>
</script>

<script src="STATIC_JS/vue.js"></script>
<!-- 引入组件库 -->
<script src="__STATIC__/element-ui/index.js"></script>
<script>
	var goodsId = [], selectedGoodsId = [], goods_list = [],id=0;
	new Vue({
		el:'#vue',
		data(){
			return {
				formData: {
					select_all_shop:1
				},
				options: '',
				props: {
					value:'cat_id',
					label:'cat_name',
				},
				category_id:'{$category_id}',
				item_type:'',
				item_attr_list:[],
				Template:{
					limit_stock_rule:{
						limit:'', //库存模式 0 1
						num:'',  //库存数量
						unit:'', //单位
						is_required:false, //是否必填
					}
				},
			};
		},
		created(){
			this.getCategory();
			let _this=this;
			layui.use(['form', 'laydate','carousel'], function() {
				var form = layui.form,
						laydate = layui.laydate,
						carousel = layui.carousel,
						repeat_flag = false,
						currentDate = new Date(),
						minDate = "";
				currentDate.setDate(currentDate.getDate() + 30);
				carousel.render({
					elem: '#carousel',
					width: '100%',
					arrow: 'always',
					interval: 3500
				});
				form.render();
				//开始时间
				laydate.render({
					elem: '#start_time', //指定元素
					type: 'datetime',
					value: new Date(),
					done: function(value) {
						minDate = value;
						reRender();
					}
				});

				//结束时间
				laydate.render({
					elem: '#end_time', //指定元素
					type: 'datetime',
					value: new Date(currentDate)
				});

				/**
				 * 重新渲染结束时间
				 * */
				function reRender() {
					$("#end_time").remove();
					$(".end-time").html('<input type="text" id="end_time" name="end_time" placeholder="请输入结束时间" lay-verify="required|time" class="layui-input len-mid" autocomplete="off" readonly> ');
					laydate.render({
						elem: '#end_time',
						type: 'datetime',
						min: minDate
					});
				}

				/**
				 * 表单验证
				 */
				form.verify({
					time: function(value) {
						var now_time = (new Date()).getTime();
						var start_time = (new Date($("#start_time").val())).getTime();
						var end_time = (new Date(value)).getTime();
						if (now_time > end_time) {
							return '结束时间不能小于当前时间!'
						}
						if (start_time > end_time) {
							return '结束时间不能小于开始时间!';
						}
					},
					flnum: function(value) {
						var arrMen = value.split(".");
						var val = 0;
						if (arrMen.length == 2) {
							val = arrMen[1];
						}
						if (val.length > 2) {
							return '保留小数点后两位！'
						}
						if (Number(value) < 0){
							return '价格不能小于0！';
						}
					},
					buy_num: function(value,item) {
						console.log(item)
						var stock = Number('{$groupbuy_info.goods_stock}');
						if (Number(value) < 1) {
							return '最低购买数量不能小于1！'
						}
						if (Number(value) > stock) {
							return '购买数量不能大于库存数！'
						}
					},
					group_price: function(value, item) {
						var price = $(item).parents("tr").find(".goods-price").text();
						if (parseFloat(value) > parseFloat(price)) {
							return '团购价格不能大于商品价格';
						}
						if (value.trim() == "") {
							return '团购价格不能为空';
						}
						if (parseFloat(value) <= 0) {
							return '团购价格必须大于0';
						}
						var arrMen = value.split(".");
						var val = 0;
						if (arrMen.length == 2) {
							val = arrMen[1];
						}
						if (val.length > 2) {
							return '团购价格最多保留两位小数';
						}
					},
				});
				/**
				 * 表单提交
				 */
				form.on('submit(save)', function(data){
					data.field.goods_ids = goodsId;
					var goodsListArr = [];
					data.field.goods_list = goodsListArr;
					data.field.cat_id = _this.category_id;
					data.field.item_type = _this.item_type;
					data.field.api_type= '{$api_type}' ;
					data.field.formData =JSON.stringify(_this.formData);
					if(repeat_flag) return;
					console.log(data.field)
					let index = ns.loading('open', '正在上传');
					$.ajax({
						type: 'POST',
						dataType: 'JSON',
						url: location.href,
						data: data.field,
						async: false,
						success: function (res) {
							repeat_flag = false;
							layer.close(index);
							if (res.code == 0) {
								layer.confirm('编辑成功', {
									title: '操作提示',
									btn: ['返回列表', '继续编辑'],
									closeBtn: 0,
									yes: function () {
										location.href = ns.url("alilife://shop/goods/lifelists");
									},
									btn2: function () {
										location.href;
									}
								});
							} else {
								layer.msg(res.message);
							}
						}
					})
				});
			});
		},
		methods: {
			getStore() {
				console.log(4444)
				// $.ajax({
				// 	url: ns.url("alilife://shop/category/getTemplate"),
				// 	data: {
				// 		api_type:'{$api_type}',
				// 		category_id:nodesInfo.data.cat_id,
				// 		item_type:nodesInfo.data.cat_type,
				// 	},
				// 	dataType: 'JSON',
				// 	type: 'POST',
				// 	success: function(res) {
				// 		let item_attr_list=res.attr.item_attr_list;
				// 		_this.item_attr_list=item_attr_list;
				// 		let lists=item_attr_list.map(item=>{
				//
				// 			console.log(item)
				//
				// 		})
				//
				// 	}
				// });
			},
			 getCategory(){
				 let _this=this;
				 $.ajax({
					 url: ns.url("alilife://shop/category/getCategory"),
					 data: {
						 api_type:'{$api_type}',
					 },
					 dataType: 'JSON',
					 type: 'POST',
					 success: function(res) {
						 _this.options=res;
					 }
				 });
			 },
		     handleChange(value,$obs){
				let nodesInfo = this.$refs['cascader'].getCheckedNodes()[0],_this=this;
				console.log('nodesInfo>>>>>',nodesInfo,value)
				 _this.category_id=nodesInfo.data.cat_id;
				 _this.item_type=nodesInfo.data.cat_type;
				// $.ajax({
				// 	url: ns.url("alilife://shop/category/getTemplate"),
				// 	data: {
				// 		api_type:'{$api_type}',
				// 		category_id:nodesInfo.data.cat_id,
				// 		item_type:nodesInfo.data.cat_type,
				// 	},
				// 	dataType: 'JSON',
				// 	type: 'POST',
				// 	success: function(res) {
				// 		let item_attr_list=res.attr.item_attr_list;
				// 		_this.item_attr_list=item_attr_list;
				// 		let lists=item_attr_list.map(item=>{
				//
				// 			console.log(item)
				//
				// 		})
				// 	}
				// });
			}
		}
	});
	// 表格渲染
	function back() {
		location.href = ns.url("alilife://shop/goods/lifelists");
	}

</script>

{/block}