<template>
	<gui-page>
		<view slot="gBody">

			<view>

				<view style="padding: 15rpx;">
					<form @submit="submit">
						<view style="margin: 20rpx 0;">
							<text class="gui-h6  gui-bold">商品信息</text>
						</view>
						<view class="gui-padding" style="background-color: #fff;border-radius: 10rpx;">
							<view class="gui-form-item gui-border-b">
								<text class="gui-form-label"><text style="color: red;">*</text>商品名称</text>
								<view class="gui-form-body">
									<input type="text" class="gui-form-input" name="goods_name"
										v-model="goods.goods_name" style="text-align: right;" placeholder="请输入商品名称" />
								</view>
							</view>
							<view class="gui-form-item gui-border-b">
								<text class="gui-form-label"><text style="color: red;">*</text>商品分类</text>
								<view class="gui-form-body" style="text-align: right;">

									<picker class="item-picker" mode="multiSelector" range-key="name"
										@change="classifyChange" @columnchange="columnchange" :value="classifyIndex"
										:range="classifyArr">
										<view style="text-align: right;">{{ name }}</view>
									</picker>
								</view>

								<text class="gui-form-icon gui-icons gui-text-center gui-color-gray">&#xe601;</text>
							</view>
							<view class="gui-form-item gui-border-b">
								<text class="gui-form-label"><text style="color: red;">*</text>可用时间</text>
								<view class="gui-form-body" style="text-align: right;">
									<picker mode="selector" range-key="name" :range="timesList" @change="pickerTimes">
										<text class="gui-text gui-secondary-text"
											v-if="TimesIndex > -1">{{timesList[TimesIndex].name}}</text>
										<text class="gui-text gui-secondary-text" v-else>请选择可用时间</text>
									</picker>

								</view>

								<text class="gui-form-icon gui-icons gui-text-center gui-color-gray">&#xe601;</text>
							</view>
							<view class="gui-form-item gui-border-b">
								<text class="gui-form-label"><text style="color: red;">*</text>使用方式</text>
								<view class="gui-form-body" style="text-align: right;">
									<picker mode="selector" range-key="name" :range="usesList" @change="pickerUses">
										<text class="gui-text gui-secondary-text"
											v-if="UsesIndex > -1">{{usesList[UsesIndex].name}}</text>
										<text class="gui-text gui-secondary-text" v-else>请选择使用方式</text>
									</picker>

								</view>

								<text class="gui-form-icon gui-icons gui-text-center gui-color-gray">&#xe601;</text>
							</view>

							<view class="gui-form-item">
								<text class="gui-form-label"><text style="color: red;">*</text>商品主图</text>
							</view>
							<view class="image-list">
								<view class="image-preview" v-for="(image, imageIndex) in formData[0].imageList"
									:key="imageIndex">
									<text class="image-delete iconfont icon-shanchu"
										@click="deleteImage(0, imageIndex)"></text>
									<image class="image" mode="aspectFill" :src="image.path"></image>
								</view>
								<view v-if="!formData[0].imageList || formData[0].imageList.length < maxImageLength"
									class="image-picker" @click="chooseImage(0)">
									<text class="choose-icon iconfont icon-camera"></text>
									<text class="choose-text">上传图片</text>
								</view>
							</view>
							<view style="height: 20rpx;"></view>
							<view class="gui-form-item gui-border-b">
								<text class="gui-form-label" style="width: 200rpx;"><text
										style="color: red;">*</text>抢购截止日期</text>
								<view class="gui-form-body" style="text-align: right;">
									<gui-datetime @confirm="confirm1" :value="demo1Val" @change="chang1"
										:isSecond="false" :isMinute="false" :isTime="false">
										{{demo1Val ? demo1Val:'请选择抢购截止日期'}}
									</gui-datetime>
								</view>
							</view>
							<view class="gui-form-item gui-border-b">
								<text class="gui-form-label" style="width: 200rpx;"><text
										style="color: red;">*</text>使用截止日期</text>
								<view class="gui-form-body" style="text-align: right;">
									<gui-datetime @confirm="confirm2" :value="use_time" @change="chang2"
										:isSecond="false" :isMinute="false" :isTime="false">
										{{use_time ? use_time:'请选择使用截止日期'}}
									</gui-datetime>
								</view>
							</view>
						</view>



						<view>
							<view class="form-box">
								<view class="form-item2">
									<view class="f1">设置套餐</view>
									<view class="flex-col">
										<view class="ggtitle">
											<view class="t1">套餐分组</view>
											<view class="t2">套餐名称</view>
										</view>
										<view class="ggcontent" v-for="(gg,index) in guigedata" :key="index">
											<view class="t1" @tap="delgggroupname" :data-index="index"
												:data-title="gg.title">
												{{gg.title}}
												<!-- 	<image class="edit" src="/static/img/edit2.png" /> -->
											</view>
											<view class="t2">

												<view class="ggname" v-for="(ggitem,index2) in gg.items" :key="index2"
													@tap="delggname" :data-index="index" :data-index2="index2"
													:data-title="ggitem.title" :data-k="ggitem.k">{{ggitem.title}}
													<image class="close" src="/static/img/ico-del.png" />
												</view>


												<view class="ggnameadd" @tap="addggname" :data-index="index">+</view>
											</view>
										</view>
										<!-- <view class="ggcontent">
											<view class="ggadd" @tap="addgggroupname">添加分组</view>
										</view> -->
									</view>
								</view>
							</view>


							<!-- 规格列表 -->
							<view class="form-box" v-for="(item,index) in gglist" :key="index">
								<view class="form-item" style="height:80rpx;line-height:80rpx">
									<view class="f1">套餐</view>
									<view class="f2" style="font-weight:bold">{{item.name}}</view>
								</view>
								<view class="form-item" style="height:80rpx;line-height:80rpx">
									<view class="f1">商品价（元）</view>
									<view class="f2"><input type="text" @input="gglistInput" :data-index="index"
											data-field="goods_price" :value="item.goods_price" placeholder="请填写商品价"
											placeholder-style="color:#888"></input></view>
								</view>
								<view class="form-item" style="height:80rpx;line-height:80rpx">
									<view class="f1">划线价（元）</view>
									<view class="f2"><input type="text" @input="gglistInput" :data-index="index"
											data-field="line_price" :value="item.line_price" placeholder="请填写划线价"
											placeholder-style="color:#888"></input></view>
								</view>

								<view class="form-item" style="height:80rpx;line-height:80rpx">
									<view class="f1">库存</view>
									<view class="f2"><input type="text" @input="gglistInput" :data-index="index"
											data-field="stock" :value="item.stock" placeholder="请填写库存"
											placeholder-style="color:#888"></input></view>
								</view>

								<view class="form-item2">
									<view class="f1" style="display: flex;padding-bottom: 20rpx;">
										<view>套餐内容</view>
										<view class="tancanadd" @click="showTancanPop(index)" :data-index="index">+
										</view>
									</view>

									<view>
										<view style="padding-bottom: 120rpx;">


											<view class="table" v-for="(titem,tindex) in item.taocanList">
												<view class="tr">
													<view class="th b-r"><text class="col-mm">*</text>名称</view>
													<view class="th b-r"><text class="col-mm">*</text>数量</view>
													<view class="th b-r"><text class="col-mm">*</text>单位</view>
													<!-- <view class="th"><text class="col-mm">*</text>价格</view> -->
												</view>
												<view class="tr2">
													<view class="td b-r"><text
															class="twoline-hide">{{titem.name}}</text></view>
													<view class="td b-r"><text class="twoline-hide">{{titem.sum}}</text>
													</view>
													<view class="td b-r"><text
															class="twoline-hide">{{titem.unit}}</text>
													</view>
												<!-- 	<view class="td"><text class="twoline-hide">{{titem.money}}</text>
													</view> -->
												</view>


												<view class="tr">

													<view class="th b-r">操作</view>

												</view>
												<view class="tr2">

													<view class="td b-r">
														<view class="edit" @click="editTaocan(tindex,index)">编辑</view>
														<view class="delete" @click="deleteTaocan(tindex,index)">删除
														</view>
													</view>

												</view>

											</view>

										</view>

									</view>

								</view>
							</view>



						</view>



						<view style="margin: 20rpx 20rpx "
							class="gui-flex gui-rows gui-nowrap gui-align-items-center gui-space-between">
							<text class="gui-h6  gui-bold"><text style="color: red;">*</text>购买须知</text>
							<text style="font-size: 24rpx;color: #9E1A91 ;" @click="bianjiqi('gmxz')">编辑</text>
						</view>
						<view class="gui-padding" style="background-color: #fff;border-radius: 10rpx;font-size: 24rpx;
							min-height: 200rpx;max-height: 400rpx;overflow: auto;">
							<mp-html :content="gmxz" />
						</view>
						<view style="margin: 20rpx 20rpx "
							class="gui-flex gui-rows gui-nowrap gui-align-items-center gui-space-between">
							<text class="gui-h6  gui-bold"><text style="color: red;">*</text>商品详情</text>
							<text style="font-size: 24rpx;color: #9E1A91 ;" @click="bianjiqi('spxq')">编辑</text>
						</view>
						<view class="gui-padding" style="background-color: #fff;border-radius: 10rpx;min-height: 200rpx;
							max-height: 400rpx;overflow: auto;font-size: 24rpx;">
							<mp-html :content="spxq" />
						</view>

<!--						<view class="gui-margin-top" style="padding: 0 120rpx;">-->
<!--							<gui-radio @change="radioChange" :checked="radiochecked">-->
<!--								<text class="gui-text " style="color: #9e9e9e;">我已阅读并同意<text style="color: #b53190;"-->
<!--										@click="onagreement">《商家入驻协议》</text></text>-->
<!--							</gui-radio>-->
<!--						</view>-->
						<view class=" gui-flex gui-rows gui-nowrap gui-justify-content-end">
							<button type="default" class="gui-button gui-bg-blue"
								style="width: 90%;text-align: center;padding: 0rpx 0;text-align: center;background: linear-gradient(to bottom, #90178b, #590b6e);margin: 80rpx auto 0;color: #fff;border-radius: 40rpx;"
								formType="submit">
								<text class="gui-icons gui-color-white gui-button-text">提交</text>
							</button>

						</view>
						<view style="height:80rpx;"></view>
					</form>
				</view>
				<gui-modal ref="guimodal" width="660rpx" :isCloseBtn="false" title="商家协议" :canCloseByShade='false'>
					<template v-slot:content>
						<scroll-view scroll-y :style="{height:contentHeight+'px'}"
							class="gui-bg-gray gui-dark-bg-level-2">
							<mp-html :content="ArticleDetail.content" />
						</scroll-view>
					</template>
					<template v-slot:btns>
						<view class="gui-flex gui-row gui-space-between">
							<view hover-class="gui-tap" class="modal-btns gui-flex1">
								<text class="modal-btns gui-primary-color" @tap="confirm">同意</text>
							</view>
						</view>
					</template>
				</gui-modal>
			</view>
			<!-- 拼团规则弹窗 -->
			<u-modal v-model="showName" title="套餐名称" show-cancel-button @confirm="setggname">
				<scroll-view :scroll-y="true">
					<view class="pops-content">
						<input type="text" placeholder="输入套餐名称" v-model="guige_name" style="padding: 20rpx ;" />
					</view>
				</scroll-view>
			</u-modal>


			<u-popup v-model="taocanShow" mode="center" width="90%" border-radius="14">
				<view class="p-title">套餐内容</view>
				<view class="info">
					<view class="form-wrapper">
						<u-form ref="uForm" label-width="180rpx">
							<u-form-item label="名称" required>
								<u-input v-model="formDataTaocan.name" placeholder="请输入名称" />
							</u-form-item>
							<u-form-item label="数量" required>
								<u-input v-model="formDataTaocan.sum" type="number" placeholder="请输入数量" />

							</u-form-item>
							<u-form-item label="单位" required>
								<u-input v-model="formDataTaocan.unit" placeholder="请输入单位" />

							</u-form-item>
						<!-- 	<u-form-item label="价格" required>
								<u-input v-model="formDataTaocan.money" placeholder="请输入价格" />

							</u-form-item> -->




						</u-form>
					</view>

					<!-- 操作按钮 -->
					<view class="footer2">
						<view class="btn-wrapper">
							<view class="btn-item btn-item-main" @click="queuPi(formDataTaocan.index,taocanIndex)">确认
							</view>
						</view>
					</view>

				</view>
			</u-popup>

		</view>

	</gui-page>

</template>
<script>
	var graceJS = require('@/GraceUI5/js/grace.js');
	import * as ArticleApi from '@/api/article'
	import * as UploadApi from '@/api/upload'
	import * as GoodsApi from '@/api/goods/index.js'
	import * as CategoryApi from '@/api/category'
	import * as PageApi from '@/api/page'
	const maxImageLength = 6
	export default {

		data() {
			return {
				timesList: [],
				usesList: [],
				UsesIndex: -1,
				TimesIndex: -1,
				name: '请选择类目',
				classifyArr: [
					[],
					[]
				], // picker - 数据源
				classifyIndex: [0, 0], // picker - 索引

				childArr: [], // 二级分类数据源
				category_id: -1,
				guige_name: '',
				taocanIndex: 0,
				taocanShow: false,
				glistshow: false,
				ggname: '',
				ggindex: 0,
				ggindex2: 0,
				oldgglist: [],
				gglist: [],
				showName: false,
				guigedata: [{
					title: '套餐',
					items: []
				}],
				contentHeight: 300,
				// 表单数据
				formData: [{
					imageList: [],
					uploaded: []
				}],
				formDataTaocan:{
					name: '',
					sum: '',
					unit: '',
					money: '',

				},
				// 最大图片数量
				maxImageLength,
				textareaVal: '', // 文本内容
				maxWords: 100, // 最多字符数
				textareatimer: null, // 延迟记录
				radiochecked: false,
				ArticleDetail: '',
				CategoryList: '',
				CategoryIndex: '-1',
				spxq: '',
				gmxz: '',
				demo1Val: '',
				use_time:'',
				disabled: false,
				goodsId: 0,
				goods: {}
			}
		},
		watch: {
			textareaVal: function(val) {
				if (this.textareatimer != null) {
					clearTimeout(this.textareatimer);
				}
				this.textareatimer = setTimeout(() => {
					if (val.length > this.maxWords) {
						this.textareaVal = this.textareaVal.substr(0, this.maxWords);
					}
				}, 200);
			}
		},
		mounted: function() {
			var systemInfo = graceJS.system();
			this.contentHeight = systemInfo.windowHeight * 0.65;
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			//this.goodsId = options.goodsId
			this.getArticleDetail()
			this.getCategory()
			this.getTimesList()
			this.getUsesList()

		},

		onShow() {

			this.spxq = uni.getStorageSync('spxq')
			this.gmxz = uni.getStorageSync('gmxz')

		},
		methods: {
			getTimesList() {
				let _this = this
				PageApi.getTimesList()
					.then(result => {
						_this.timesList = result.data.list

					})

			},
			getUsesList() {
				let _this = this
				PageApi.getUsesList()
					.then(result => {
						_this.usesList = result.data.list

					})

			},

			getCategory() {
				let _this = this
				CategoryApi.shoplist()
					.then(result => {
						_this.dataSource = result.data.list.filter(item => item.parent_id === 0)
						_this.getAllClassify()
					})

			},
			// 获取数据源并分出一级二级
			getAllClassify() {
				let dataLen = this.dataSource.length;

				for (let i = 0; i < dataLen; i++) {
					// 将数据源中的二级分类 push 进 childArr，作为二级分类的数据源
				    this.childArr.push(this.dataSource[i].children)
				};

				// 一级分类的数据源
				this.classifyArr[0] = this.dataSource;

				// 第一次打开时，默认给一级分类添加它的二级分类
				this.classifyArr[1] = this.childArr[0]
			},

			// 选择商品分类
			classifyChange(e) {
				let value = e.target.value;
				this.classifyIndex = value;

				// if (this.classifyArr[0].length != 0) {
				// 	this.name = this.classifyArr[0][this.classifyIndex[0]].name
				// 	this.category_id = this.classifyArr[0][this.classifyIndex[0]].category_id
				// };
				if (this.classifyArr[1].length != 0) {
					this.name = this.classifyArr[1][this.classifyIndex[1]].name
					this.category_id = this.classifyArr[1][this.classifyIndex[1]].category_id
				}
			},

			// 获取二级分类
			columnchange(e) {
				// 当滚动切换一级分类时，为当前的一级分类添加它的子类
				if (e.detail.column == 0) {
					// #ifdef H5
					// 在小程序中直接赋值无效  H5 可直接赋值
					this.classifyArr[1] = this.childArr[e.detail.value]
					// #endif
					// #ifdef MP-WEIXIN
					// 在 H5 环境下 $set 会导致一级分类无法滚动， 小程序正常运行
					this.$set(this.classifyArr, 1, this.childArr[e.detail.value])
					// #endif
				}
			},

			gglistInput: function(e) {
				var index = e.currentTarget.dataset.index;
				var field = e.currentTarget.dataset.field;
				var gglist = this.gglist;
				gglist[index][field] = e.detail.value;
				this.gglist = gglist;
				console.log(gglist)
			},

			showTancanPop(index) {
				this.taocanIndex = index
				this.formDataTaocan = {
					name:'',
					sum:'',
					unit:''
				}
				this.taocanShow = true
			},

			queuPi(index, tindex) {
				let app = this
				//var index = this.taocanIndex
				
				console.log(app.formDataTaocan)
				if (app.formDataTaocan.name == '') {
					uni.showToast({
						title: '请输入名称',
						icon: 'none'
					})
					return
				}
				if (app.formDataTaocan.sum == '') {
					uni.showToast({
						title: '请输入数量',
						icon: 'none'
					})
					return
				}
				if (app.formDataTaocan.unit == '') {
					uni.showToast({
						title: '请输入单位',
						icon: 'none'
					})
					return
				}
				// if (app.formDataTaocan.money == '') {
				// 	uni.showToast({
				// 		title: '请输入价格',
				// 		icon: 'none'
				// 	})
				// 	return
				// }






				app.gglist.forEach((item, key) => {

					var taocanList = item.taocanList ? item.taocanList : [];

					if (tindex == key) {
						if (index >= 0) {

							var newArr = []
							taocanList.forEach((item, key) => {
								if (key == index) {
									newArr.push(app.formDataTaocan)
								} else {
									newArr.push(item)
								}

							})
							taocanList = newArr
							console.log(index)
						} else {
							taocanList = taocanList.concat(app.formDataTaocan)
						}
					}



					item.taocanList = taocanList




					// if (key == index) {
					// 	var taocanList = item.taocanList ? item.taocanList : []
					// 	taocanList.push(app.formDataTaocan)
					// 	item.taocanList = taocanList
					// }

					return item

				})



				console.log(app.gglist)




				app.taocanShow = false

			},


			editTaocan(index, gindex) {
				let app = this
				app.taocanShow = true

				app.gglist.forEach((item, key) => {

					if (key == gindex) {
						app.formDataTaocan = item.taocanList[index]
						app.formDataTaocan.index = index
					}


				})



			},
			deleteTaocan(index, gindex) {
				let app = this


				// app.gglist.forEach((item, key) => {
				// 	if(item.taocanList){
				// 		if (key == gindex) {
				// 			item.taocanList.splice(index,1)				
				// 		} 
				// 	}
				// 	return item
				// })

				var gglist = app.gglist
				var newgg = []
				gglist.forEach((item, key) => {
					var taocanList = item.taocanList
					var newArr = []
					if (taocanList) {
						taocanList.forEach((dd, dkey) => {
							if (key == gindex) {

							} else {
								newArr.push(dd)
							}
						})

						item.taocanList = newArr
					}


					newgg.push(item)

				})

				app.gglist = newgg

				console.log(app.gglist)


			},

			addggname: function(e) {
				var ggindex = e.currentTarget.dataset.index;
				this.guige_name = '';
				this.ggindex = ggindex;
				this.ggindex2 = -1;
				this.showName = true;
			},
			delggname: function(e) {
				var that = this;
				var ggindex = e.currentTarget.dataset.index;
				var ggindex2 = e.currentTarget.dataset.index2;
				var k = e.currentTarget.dataset.k;
				var title = e.currentTarget.dataset.title;
				that.guigedata.forEach(function(element, index) {
					element.items.splice(ggindex2,1)
					
					return element
				})
				that.gglist.splice(ggindex2,1)
			
				
			},
			setggname: function(done, val) {
				var val = this.guige_name
				var guigedata = this.guigedata;
				var ggindex = this.ggindex;
				var ggindex2 = this.ggindex2;
				if (ggindex2 == -1) { //新增规格名称
					var items = guigedata[ggindex].items;
					ggindex2 = items.length;
					items.push({
						k: ggindex2,
						title: val
					});
					guigedata[ggindex].items = items;
					this.guigedata = guigedata;
				} else { //修改规格名称
					guigedata[ggindex].items[ggindex2].title = val;
					this.guigedata = guigedata;
				}
				//this.$refs.dialogInput.close();
				this.getgglist();
			},

			getgglist: function() {
				var oldgglist = this.oldgglist;
				var guigedata = this.guigedata;
				var gglist = this.gglist;
				var len = guigedata.length;
				var newlen = 1;


				var guige = {}



				guige.name = this.guige_name
				guige.goods_price = ''
				guige.line_price = ''
				guige.stock = 100

				guige.taocanList = []



				this.gglist.push(guige);
				console.log(555);
				console.log(gglist);
			},
			getGoods() {
				let _this = this
				GoodsApi.shopdetail(_this.goodsId)
					.then(result => {
						_this.goods = result.data.detail
						_this.spxq = _this.goods.content
						_this.gmxz = _this.goods.contents
						_this.demo1Val = _this.goods.become_time


						_this.CategoryList.forEach(function(element, index) {
							if (element.category_id == _this.goods.category_id) {
								_this.CategoryIndex = index
							}
						});

						_this.goods.goods_images.forEach(function(element, index) {
							uni.downloadFile({
								url: element.preview_url, // 图片的网络地址
								success: (res) => {
									console.log(res)
									if (res.statusCode === 200) {
										_this.formData[0]['imageList'].push({
											path: res.tempFilePath
										})
									}
								},
							});
							// _this.formData[0]['imageList'].push({
							// 	path: element.preview_url
							// })
							// _this.formData[0]['uploaded'].push(element.file_id)
						});

					})
			},
			submit: function(e) {
				const app = this



				var fromData = e.detail.value;


				if (!fromData['goods_name']) {
					app.$toast('请填写商品名称')
					return false
				}
				if (app.category_id < 0) {
					app.$toast('请选择商品分类')
					return false
				}
				// if (!fromData['goods_price']) {
				// 	app.$toast('请填写商品价格')
				// 	return false
				// }
				// if (!fromData['stock_num']) {
				// 	app.$toast('请填写库存数量')
				// 	return false
				// }


				if (app.TimesIndex == -1) {
					app.$toast('请选择可用时间')
					return false
				}
				if (app.TimesIndex == -1) {
					app.$toast('请选择使用方式')
					return false
				}
				if (!app.demo1Val) {
					app.$toast('请选择抢购日期')
					return false
				}
				if (!app.use_time) {
					app.$toast('请选择使用日期')
					return false
				}


				if (app.gglist.length == 0) {
					app.$toast('请设置套餐')
					return false
				}


				if (!app.gmxz) {
					app.$toast('请编辑购买须知')
					return false
				}
				if (!app.spxq) {
					app.$toast('请编辑商品详情')
					return false
				}
				// if (!app.radiochecked) {
				// 	app.$toast('请阅读协议')
				// 	return false
				// }
				const imagesLength = app.getImagesLength()
				if (imagesLength == 0) {
					app.$toast('请上传商品图片')
					return false
				}

				fromData.uses_id = app.usesList[app.UsesIndex].uses_id
				fromData.times_id = app.timesList[app.TimesIndex].times_id
				fromData.category_id = app.category_id
				fromData.become_time = app.demo1Val
				fromData.content = app.spxq
				fromData.contents = app.gmxz

				// 判断是否重复提交
				if (app.disabled === true) return false
				// 按钮禁用
				app.disabled = true
				// 判断是否需要上传图片

				if (imagesLength > 0) {
					app.uploadFile()
						.then(() => {
							console.log('then')
							app.onSubmit(fromData)
						})
						.catch(err => {
							console.log('catch')
							app.disabled = false
							if (err.statusCode !== 0) {
								app.$toast(err.errMsg)
							}
							console.log('err', err)
						})
				} else {
					app.onSubmit(fromData)
				}
			},
			getImagesLength() {
				const {
					formData
				} = this
				let imagesLength = 0
				formData.forEach(item => {
					imagesLength += item.imageList.length
				})
				return imagesLength
			},

			// 提交到后端
			onSubmit(fromData) {
				const app = this
				fromData.uploaded = this.formData[0].uploaded
				fromData.gglist = app.gglist

				GoodsApi.add(fromData)
					.then(result => {
						app.$toast(result.message)
						setTimeout(() => {
							app.disabled = false
							// uni.navigateBack()
						}, 1500)
					})
					.catch(err => app.disabled = false)
			},

			// 上传图片
			uploadFile() {
				const app = this
				const {
					formData
				} = app
				// 整理上传文件路径
				const files = []
				formData.forEach((item, index) => {
					if (item.imageList.length) {
						const images = item.imageList.map(image => image)
						files.push({
							formDataIndex: index,
							images
						})
					}
				})
				// 批量上传
				return new Promise((resolve, reject) => {
					Promise.all(files.map((file, index) => {
							return new Promise((resolve, reject) => {
								UploadApi.image(file.images)
									.then(fileIds => {
										app.formData[index].uploaded = fileIds
                                        console.log(app.formData[index].uploaded, fileIds)
										resolve(fileIds)
									})
									.catch(reject)
							})
						}))
						.then(resolve, reject)
				})
			},

			chang1: function(e) {
				console.log(e);
			},
			chang2: function(e) {
				console.log(e);
			},
			confirm1: function(res) {
				this.demo1Val = res[0] + '-' + res[1] + '-' + res[2];
			},
			confirm2: function(res) {
				this.use_time = res[0] + '-' + res[1] + '-' + res[2];
			},
			pickerCategory(e) {
				this.CategoryIndex = e.detail.value;
			},
			pickerTimes(e) {
				this.TimesIndex = e.detail.value;
			},
			pickerUses(e) {
				this.UsesIndex = e.detail.value;
			},

			bianjiqi(type) {
				uni.navigateTo({
					url: './editor?type=' + type
				})

			},
			
			confirm: function() {
				// 客户点击确认按钮后的逻辑请在此处实现
				this.$refs.guimodal.close();
				this.radiochecked = true
			},
			getArticleDetail() {
				const app = this
				ArticleApi.detail(3)
					.then(result => {
						app.ArticleDetail = result.data.detail
					})


			},
			radioChange(e) {
				this.radiochecked = !this.radiochecked
			},
			onagreement() {
				this.$refs.guimodal.open();
			},
			// 选择图片
			chooseImage(index) {
				const app = this
				const oldImageList = app.formData[0].imageList
				// 选择图片
				uni.chooseImage({
					count: maxImageLength - oldImageList.length,
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success({
						tempFiles
					}) {
						// tempFiles = [{path:'xxx', size:100}]
						console.log(tempFiles)
						app.formData[0].imageList = oldImageList.concat(tempFiles)
					}
				});
			},

			// 删除图片
			deleteImage(index, imageIndex) {
				this.formData[index].imageList.splice(imageIndex, 1)
			},

			fanhui() {
				uni.navigateBack()
			},

		},


	}
</script>
<style lang="scss" scoped>
	radio {
		transform: scale(0.6);
	}

	checkbox {
		transform: scale(0.6);
	}

	.info {
		padding-bottom: 50rpx;
	}

	.p-title {

		text-align: center;
		padding: 20rpx 0;
	}

	.footer2 {

		width: 50%;
		margin-left: 25%;
		margin-top: 80rpx;

	}

	.btn-wrapper {
		height: 100%;
		// display: flex;
		// align-items: center;

	}

	.btn-item {

		font-size: 36rpx;
		height: 76rpx;
		color: #fff;
		border-radius: 40rpx;
	

		display: flex;
		justify-content: center;
		align-items: center;
	}


	.btn-item-main {
		background: linear-gradient(to top, #0E001F, #7B0373 );
		color: #fff;

		// 禁用按钮
		&.disabled {
			opacity: 0.6;
		}
	}

	.form-wrapper {
		margin-top: 10rpx;
		padding: 0 40rpx;
		width: 100%;
		box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
		border-radius: 16rpx;
		background: #fff;
	}

	.form-box {
		padding: 2rpx 24rpx 0 24rpx;
		background: #fff;
		margin: 24rpx 0;
		border-radius: 10rpx
	}

	.form-item2 {
		min-height: 100rpx;
		padding: 20rpx 0;
	}

	.form-item {
		line-height: 100rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #eee
	}

	.form-item .f1 {
		color: #222;
		width: 200rpx;
		flex-shrink: 0
	}

	.form-item .f2 {
		display: flex;
		align-items: center
	}

	.form-box .form-item:last-child {
		border: none
	}

	.form-box .flex-col {
		padding-bottom: 20rpx
	}

	.form-item input {
		width: 100%;
		border: none;
		color: #111;
		font-size: 28rpx;
		text-align: right
	}

	.form-item textarea {
		width: 100%;
		min-height: 200rpx;
		padding: 20rpx 0;
		border: none;
	}

	.form-item .upload_pic {
		margin: 50rpx 0;
		background: #F3F3F3;
		width: 90rpx;
		height: 90rpx;
		text-align: center
	}

	.form-item .upload_pic image {
		width: 32rpx;
		height: 32rpx;
	}

	.savebtn {
		width: 90%;
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
		border-radius: 48rpx;
		color: #fff;
		font-weight: bold;
		margin: 0 5%;
		margin-top: 60rpx;
		border: none;
	}

	.ggtitle {
		height: 60rpx;
		line-height: 60rpx;
		color: #111;
		font-weight: bold;
		font-size: 26rpx;
		display: flex;
		border-bottom: 1px solid #f4f4f4
	}

	.ggtitle .t1 {
		width: 200rpx;
	}

	.ggcontent {
		line-height: 60rpx;
		margin-top: 10rpx;
		color: #111;
		font-size: 26rpx;
		display: flex
	}

	.ggcontent .t1 {
		width: 200rpx;
		display: flex;
		align-items: center;
		flex-shrink: 0
	}

	.ggcontent .t1 .edit {
		width: 40rpx;
		height: 40rpx
	}

	.ggcontent .t2 {
		display: flex;
		flex-wrap: wrap;
		align-items: center
	}

	.ggcontent .ggname {
		background: #f55;
		color: #fff;
		height: 40rpx;
		line-height: 40rpx;
		padding: 0 20rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;

		font-size: 24rpx;
		position: relative
	}

	.ggcontent .ggname .close {
		position: absolute;
		top: -14rpx;
		right: -14rpx;
		background: #fff;
		height: 28rpx;
		width: 28rpx;
		border-radius: 14rpx
	}

	.ggcontent .ggnameadd {
		background: #ccc;
		font-size: 36rpx;
		color: #fff;
		height: 40rpx;
		line-height: 40rpx;
		padding: 0 20rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
		margin-left: 10rpx;
		position: relative
	}

	.tancanadd {
		background: #ccc;
		font-size: 36rpx;
		color: #fff;
		height: 40rpx;
		line-height: 40rpx;
		padding: 0 20rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
		margin-left: 10rpx;

	}

	.ggcontent .ggadd {
		font-size: 26rpx;
		color: #558
	}

	.ggbox {
		line-height: 50rpx;
	}


	.layui-imgbox {
		margin-right: 16rpx;
		margin-bottom: 10rpx;
		font-size: 24rpx;
		position: relative;
	}

	.layui-imgbox-close {
		position: absolute;
		display: block;
		width: 32rpx;
		height: 32rpx;
		right: -16rpx;
		top: -16rpx;
		z-index: 5;
		color: #999;
		font-size: 32rpx;
		background: #fff;
		border-radius: 50%
	}

	.layui-imgbox-close image {
		width: 100%;
		height: 100%
	}

	.layui-imgbox-img {
		display: block;
		width: 200rpx;
		height: 200rpx;
		padding: 2px;
		border: #d3d3d3 1px solid;
		background-color: #f6f6f6;
		overflow: hidden
	}

	.layui-imgbox-img>image {
		max-width: 100%;
	}

	.layui-imgbox-repeat {
		position: absolute;
		display: block;
		width: 32rpx;
		height: 32rpx;
		line-height: 28rpx;
		right: 2px;
		bottom: 2px;
		color: #999;
		font-size: 30rpx;
		background: #fff
	}

	.uploadbtn {
		position: relative;
		height: 200rpx;
		width: 200rpx
	}


	.clist-item {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #f5f5f5;
		padding: 20rpx 30rpx;
	}

	.radio {
		flex-shrink: 0;
		width: 32rpx;
		height: 32rpx;
		background: #FFFFFF;
		border: 2rpx solid #BFBFBF;
		border-radius: 50%;
		margin-right: 30rpx
	}

	.radio .radio-img {
		width: 100%;
		height: 100%;
		display: block
	}

	.freightitem {
		width: 100%;
		height: 60rpx;
		display: flex;
		align-items: center;
		margin-left: 40rpx
	}

	.freightitem .f1 {
		color: #666;
		flex: 1
	}

	.detailop {
		display: flex;
		line-height: 60rpx
	}

	.detailop .btn {
		border: 1px solid #ccc;
		margin-right: 10rpx;
		padding: 0 16rpx;
		color: #222;
		border-radius: 10rpx
	}

	.detaildp {
		position: relative;
		line-height: 50rpx
	}

	.detaildp .op {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		font-size: 24rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin-top: 10rpx
	}

	.detaildp .op .btn {
		background: rgba(0, 0, 0, 0.4);
		margin-right: 10rpx;
		padding: 0 10rpx;
		color: #fff
	}

	.detaildp .detailbox {
		border: 2px dashed #00a0e9
	}

	.uni-popup-dialog {
		width: 300px;
		border-radius: 5px;
		background-color: #fff;
	}

	.uni-dialog-title {
		display: flex;
		flex-direction: row;
		justify-content: center;
		padding-top: 15px;
		padding-bottom: 5px;
	}

	.uni-dialog-title-text {
		font-size: 16px;
		font-weight: 500;
	}

	.uni-dialog-content {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 5px 15px 15px 15px;
	}

	.uni-dialog-content-text {
		font-size: 14px;
		color: #6e6e6e;
	}

	.uni-dialog-button-group {
		display: flex;
		flex-direction: row;
		border-top-color: #f5f5f5;
		border-top-style: solid;
		border-top-width: 1px;
	}

	.uni-dialog-button {
		display: flex;
		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 45px;
	}

	.uni-border-left {
		border-left-color: #f0f0f0;
		border-left-style: solid;
		border-left-width: 1px;
	}

	.uni-dialog-button-text {
		font-size: 14px;
	}

	.uni-button-color {
		color: #007aff;
	}


	.popup__container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: auto;
		z-index: 10;
		background: #fff
	}

	.popup__overlay {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
		z-index: 11;
		opacity: 0.3;
		background: #000
	}

	.popup__modal {
		width: 100%;
		position: absolute;
		bottom: 0;
		color: #3d4145;
		overflow-x: hidden;
		overflow-y: hidden;
		opacity: 1;
		padding-bottom: 20rpx;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		z-index: 12;
		min-height: 600rpx;
		max-height: 1000rpx;
	}

	.popup__title {
		text-align: center;
		padding: 30rpx;
		position: relative;
		position: relative
	}

	.popup__title-text {
		font-size: 32rpx
	}

	.popup__close {
		position: absolute;
		top: 34rpx;
		right: 34rpx
	}

	.popup__content {
		width: 100%;
		max-height: 880rpx;
		overflow-y: scroll;
		padding: 20rpx 0;
	}

	.service-item {
		display: flex;
		padding: 0 40rpx 20rpx 40rpx;
	}

	.service-item .prefix {
		padding-top: 2px;
	}

	.service-item .suffix {
		padding-left: 10rpx;
	}

	.service-item .suffix .type-name {
		font-size: 28rpx;
		color: #49aa34;
		margin-bottom: 10rpx;
	}
</style>
<style>
	page {
		background-color: #f4f4f4;
	}
</style>
<style scoped>
	.gui-step-item {
		width: 130rpx;
	}

	.form-add-footer-btns {
		padding: 0 38rpx;
		font-size: 30rpx;
		line-height: 100rpx;
	}

	.modal-btns {
		line-height: 100rpx;
		height: 100rpx;
		font-size: 35rpx;
		text-align: center;
		width: 320rpx;
	}
</style>
<style lang="scss" scoped>
	.col-mm {
		color: #ff0000;
	}

	.table {
		width: 100%;
		font-size: 28rpx;

		.b-r {
			border-right: solid 1rpx #E8E8E8;
		}

		.tr {
			height: 58rpx;
			line-height: 58rpx;
			border-bottom: solid 1rpx #E8E8E8;

			display: flex;
			justify-content: space-between;
			text-align: center;
			background-color: #F2F2F2;

			.th {
				width: 33.33%;
			}
		}

		.tr2 {
			min-height: 58rpx;
			line-height: 38rpx;
			border-bottom: solid 1rpx #E8E8E8;

			display: flex;
			justify-content: space-between;
			text-align: center;
			background-color: #fff;

			.td {
				width: 33.33%;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 5rpx;
				font-size: 20rpx;

				.edit {
					width: 80rpx;
					height: 40rpx;
					line-height: 40rpx;
					background-color: #0076DA;
					text-align: center;
					color: #FFF;
				}

				.delete {
					margin-left: 10rpx;
					width: 80rpx;
					height: 40rpx;
					line-height: 40rpx;
					background-color: #FF0000;
					text-align: center;
					color: #FFF;
				}

			}
		}
	}

	.image-list {
		margin-top: 20rpx;
		margin-bottom: -20rpx;

		&:after {
			clear: both;
			content: " ";
			display: table;
		}

		.image {
			display: block;
			width: 100%;
			height: 100%;
		}

		.image-picker,
		.image-preview {
			width: 184rpx;
			height: 184rpx;
			margin-right: 30rpx;
			margin-bottom: 30rpx;
			float: left;

			&:nth-child(3n+0) {
				margin-right: 0;
			}
		}

		.image-picker {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border: 1rpx dashed #ccc;
			color: #ccc;

			.choose-icon {
				font-size: 48rpx;
				margin-bottom: 6rpx;
			}

			.choose-text {
				font-size: 24rpx;
			}
		}

		.image-preview {
			position: relative;

			.image-delete {
				position: absolute;
				top: -15rpx;
				right: -15rpx;
				height: 42rpx;
				width: 42rpx;
				background: rgba(0, 0, 0, 0.64);
				border-radius: 50%;
				color: #fff;
				font-weight: bolder;
				font-size: 22rpx;
				z-index: 10;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>