<template>
	<div>

		<div class="tab-header webtop">
			<!-- 标题 -->
			<div>礼包信息</div>
			<!-- start 添加修改按钮 -->
			<div>
				<el-button type="primary" size="small" :disabled="submitdisabled" @click="saveOrUpdate">保存</el-button>
				<el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
			</div>
			<!-- end 添加修改按钮 -->
			<!-- end 详情按钮 -->
		</div>

		<div class="listconadd">

			<el-form ref="dataForm" :model="formobj" label-position="top" label-width="190px" class="formadd">
				<div class="title" style="display: flex;align-items: center;justify-content: space-between;height:40px">
					<div>主体信息</div>
				</div>
				<el-row>
					<el-col :span="4" class="trightb">
						<el-form-item class="trightb_item">
							<span slot="label">礼包名称</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="trightb_item">
							<el-input v-model="formobj.name" placeholder="" class="addinputw" style="width:100%"
								clearable />
						</el-form-item>
					</el-col>
					<el-col :span="4" class="trightb">
						<el-form-item class="trightb_item">
							<!-- <span slot="label">礼包金额</span> -->
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="trightb_item">
							<!-- <span slot="label">{{formobj.price}}</span> -->
							<!-- <el-input v-model="formobj.boundaryPrice" placeholder="" class="addinputw"
								style="width:100%" clearable
								oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')" /> -->

						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="4" class="trightb">
						<el-form-item class="trightb_item">
							<span slot="label">礼包总价格</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="trightb_item">
							<span slot="label">{{formobj.price}}</span>
						</el-form-item>
					</el-col>
					<el-col :span="4" class="trightb">
						<el-form-item class="trightb_item">
							<span slot="label">优惠后价格</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="trightb_item">
							<!-- <span slot="label">{{formobj.price}}</span> -->
							<el-input v-model="formobj.preferentialPrice" placeholder="" class="addinputw"
								style="width:100%" clearable
								oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')" />

						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="4" class="trightb">
						<el-form-item class="trightb_item">
							<span slot="label">起始日期</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="trightb_item">
							<el-date-picker v-model="formobj.dateStart" type="date" style="width:100%"
								value-format="yyyy-MM-dd" placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="4" class="trightb">
						<el-form-item class="trightb_item">
							<span slot="label">终止日期</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="trightb_item">
							<el-date-picker v-model="formobj.dateEnd" type="date" style="width:100%"
								value-format="yyyy-MM-dd" placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="4" class="trightb">
						<el-form-item class="trightb_item">
							<span slot="label">备注信息</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="trightb_item">
							<el-input v-model="formobj.remarks" placeholder="" class="addinputw" style="width:100%"
								type="textarea" :rows="8" clearable />
						</el-form-item>
					</el-col>
					<el-col :span="4" class="trightb">
						<el-form-item class="trightb_item">
							<span slot="label">礼包图片</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="trightb_item">
							<upload style="margin-top: 20px;margin-bottom: 20px;" class="addinputw" ref="uploadImg2"
								v-model="imgList" :limit="1" @change="backData" bucket="map"
								:upload-data="{ type: '0001' }" :class="{ hide: hideUploadBtn }"></upload>
						</el-form-item>
					</el-col>
				</el-row>


				<el-collapse v-model="activeNames" style="margin-top: 20px;">
					<el-collapse-item name="1">
						<template slot="title">
							商品列表<span class="span" @click.stop="add()">添加</span>
						</template>
						<el-table v-loading="listLoading" :data="formobj.goods" border style="width: 100%;"
							:row-style="{height: '40px'}">
							<!-- <el-table-column type="selection" align="center" width="50"/> -->
							<el-table-column label="序号" type="index" width="80" :index="indexMethod" align="center" />
							<el-table-column label="操作" wid align="center" width="150">
								<template slot-scope="scope">
									<el-button type="primary" size="mini"
										@click="doGoodsDel(scope.row.goodsSid)">删除</el-button>
								</template>
							</el-table-column>
							<el-table-column label="商品名称" prop="name" align="center" />
							<el-table-column label="份数" prop="goodsNumber" align="center" />
							<el-table-column label="价格(元/斤)" prop="price" align="center" />
							<el-table-column label="商品单位" prop="specificationUnit" align="center" />
							<el-table-column label="规格(斤份)" prop="weight" align="center" />
							<el-table-column label="小计" prop="subtotal" align="center" />
						</el-table>

					</el-collapse-item>
				</el-collapse>


			</el-form>

		</div>

		<el-dialog title="添加商品" :visible.sync="editDialog" width="30%" @close='handleCancle'>
			<table class="e-table" cellspacing="0">
				<tr>
					<td>商品名称</td>
					<td> <!-- @change="changeParentSid" -->
						<el-select v-model="GiftBagGood.goodsSid" filterable clearable placeholder="请选择"
							style="width:100%" @change="goodsSelect">
							<el-option v-for="item in goods" :key="item.sid" :label="item.name" :value="item.sid">
							</el-option>
						</el-select>
					</td>
				</tr>
				<tr>
					<td>份数</td>
					<td>
						<el-input v-model="GiftBagGood.goodsNumber" style="width:100%"
							oninput="value=value.replace(/^(0+)|[^\d]+/g,'')" @input="input"></el-input>
					</td>
				</tr>
				<tr>
					<td>价格(元/斤)</td>
					<td>
						<!-- <span style="width:100%">{{GiftBagGood.price}}</span> -->
						<el-input v-model="GiftBagGood.price" style="width:100%"
							oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"></el-input>
					</td>
				</tr>
				<tr>
					<td>商品单位</td>
					<td>
						<span style="width:100%">{{GiftBagGood.specificationUnit}}</span>
						<!-- <el-input v-model="GiftBagGood.unitName" style="width:100%"></el-input> -->
					</td>
				</tr>
				<tr>
					<td>规格(斤份)</td> <!-- // 一份多少斤 -->
					<td>
						<span style="width:100%">{{GiftBagGood.weight}}</span>
						<!-- <el-input v-model="GiftBagGood.unitName" style="width:100%"></el-input> -->
					</td>
				</tr>
				<tr>
					<td>小计</td> <!-- // 份数*份单价 -->
					<td>
						<span style="width:100%">{{GiftBagGood.subtotal}}</span>
						<!-- <el-input v-model="GiftBagGood.unitName" style="width:100%"></el-input> -->
					</td>
				</tr>
			</table>
			<div style="margin-top: 20px; text-align: center;">
				<el-button type="primary" @click="save()">保 存</el-button>
				<el-button @click="handleCancle">关 闭</el-button>
			</div>
		</el-dialog>



	</div>
</template>

<script>
	import req from '@/api/marketingCard/marketingCard.js'
	import upload from '@/components/uploadFile/upload_yanchejianchaTuBiao.vue'

	export default {
		components: {
			upload
		},
		data() {
			return {
				editDialog: false,
				listLoading: false,
				activeNames: ['1'],
				imgList: [],
				submitdisabled: false,
				formobj: {
					sid: "",
					name: '',
					dateStart: '',
					dateEnd: '',
					preferentialPrice: "",
					boundary: "",
					remarks: "",
					iconUrl: "",
					goods: []
				},
				GiftBagGood: {
					goodsSid: "",
					goodsNumber: "",
					name: "",
					unitName: "",
					price: "",
					specificationUnit: "",
					weight: "",
					subtotal: "0.00"

				},
				goods: [],
				hideUploadBtn: false,
			}
		},
		created() {
			this.getGoodList()
		},
		methods: {
			doGoodsDel(sid) {
				console.log("doGoodsDel》》》》", sid)

				this.$confirm("是否确定删除此商品？", '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					const index = this.formobj.goods.findIndex((item) => item.goodsSid === sid)
					console.log("index》》》》", index)
					this.formobj.goods.splice(index, 1)
					
					this.countPrice()
				})
			},
			save() {
				console.log("save》》》》", this.GiftBagGood)
				if (!this.GiftBagGood.goodsSid) {
					this.$message({
						showClose: true,
						type: 'warning',
						message: '请选择商品'
					})
					return
				}


				if (!this.GiftBagGood.goodsNumber) {
					this.$message({
						showClose: true,
						type: 'warning',
						message: '请输入数量'
					})
					return
				}


				const choose = this.formobj.goods.filter((item) => item.goodsSid == this.GiftBagGood.goodsSid)
				console.log(">>>>>>>>>addCangku", choose)
				if (choose.length == 0) {
					this.formobj.goods.push(this.GiftBagGood)

					this.GiftBagGood = {
						goodsSid: "",
						goodsNumber: "",
						name: "",
						unitName: "",
						price: "",
						specificationUnit: "",
						weight: "",
						subtotal: "0.00"

					}
					this.editDialog = false
					this.countPrice()

				} else {
					this.$message({
						showClose: true,
						type: 'error',
						message: "请勿重复添加商品!"
					})
					return
				}


			},

			countPrice() {

				let num = 0

				for (var i = 0; i < this.formobj.goods.length; i++) {
					var item = this.formobj.goods[i]

					num += Number(item.subtotal)

				}

				console.log("num", num);

				this.formobj.price = Number(num).toFixed(2)
				this.formobj.preferentialPrice =  Number(num).toFixed(2)

			},

			handleCancle() {
				this.GiftBagGood = {
					goodsSid: "",
					goodsNumber: "",
					name: "",
					unitName: "",
					price: "",
					specificationUnit: "",
					weight: "",
					subtotal: "0.00"

				}
				this.editDialog = false
			},
			input(val) {
				console.log("input》》》》", val)
				this.GiftBagGood.goodsNumber = val

				this.GiftBagGood.subtotal = this.GiftBagGood.goodsNumber * this.GiftBagGood.price * this.GiftBagGood.weight
				

			},
			add() {
				this.editDialog = true

			},
			getGoodList() {
				req.getGoods().then(resp => {
					console.log("getGoods》》》》", resp)
					this.goods = resp.data


				}).catch(() => {})
			},
			goodsSelect(val) {
				console.log("goodsSelect》》》》", val)
				const choose = this.goods.filter((item) => item.sid === val)
				this.GiftBagGood.goodsSid = choose[0].sid
				this.GiftBagGood.name = choose[0].name
				this.GiftBagGood.unitName = choose[0].unitName
				this.GiftBagGood.price = choose[0].price
				this.GiftBagGood.specificationUnit = choose[0].specificationUnit
				this.GiftBagGood.weight = choose[0].weight


			},
			indexMethod(index) {
				return index + 1
			},
			backData(value) {
				console.log("backData》》》》", value)
				console.log("imgList", this.imgList)


				if (this.imgList.length > 0) {
					this.formobj.iconUrl = this.imgList[0].url
				} else {
					this.formobj.iconUrl = ""
				}

				this.hideUploadBtn = this.imgList.length != 0;
				console.log("this.hideUploadBtn", this.hideUploadBtn)
			},

			saveOrUpdate() {
				console.log('>>>>>>>>>saveOrUpdate', this.formobj)
				this.submitdisabled = true
				req.saveAppletGiftBag(this.formobj)
					.then(resp => {
						if (resp.success) {
							this.submitdisabled = false
							this.$message({
								showClose: true,
								type: 'success',
								message: resp.msg
							})
							this.handleReturn('true')
						} else {
							this.submitdisabled = false
							// 根据resp.code进行异常情况处理
						}
					})
					.catch(() => {
						this.submitdisabled = false
					})
			},
			handleReturn(isreload) {
				if (isreload === 'true') this.$emit('reloadlist')
				this.imgList = []
				this.formobj = {
					sid: "",
					name: '',
					dateStart: '',
					dateEnd: '',
					boundaryPrice: "",
					boundary: "",
					remarks: "",
					iconUrl: "",
					goods: []
				}
				this.$emit('doback')
			},

			showAdd() {

			},
			showEdit(row) {
				req.AppletGiftBagInit(row.sid)
					.then(resp => {
						if (resp.success) {
							this.formobj = resp.data
							this.imgList = []
							if (resp.data.iconUrl != '')
								this.imgList.push({
									url: resp.data.iconUrl
								})
							this.hideUploadBtn = this.imgList.length != 0;
							console.log("this.hideUploadBtn", this.hideUploadBtn)
						}
					})
					.catch(e => {
						this.formobj = row
						this.imgList = []
						if (resp.data.iconUrl != '')
							this.imgList.push({
								url: formobj.iconUrl
							})
						this.hideUploadBtn = this.imgList.length != 0;
						console.log("this.hideUploadBtn", this.hideUploadBtn)
					})
			}
		}
	}
</script>
<style lang="scss" scoped>
	// 隐藏上传组件

	::v-deep .hide {
		.el-upload--picture-card {
			display: none !important;
		}
	}

	.trightb {
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: center;
	}

	.trightb_item {
		padding-top: 5px;
	}

	.span {
		margin-left: 50px;
		font-size: 15px;
		font-weight: 400;
	}

	::v-deep .el-collapse-item__header {
		height: 40px;
		padding: 10px;
		font-weight: bold;
		font-size: 20px;
		text-align: left;
		color: #ffffff;
		background-color: #0294d7;
	}

	::v-deep .el-collapse-item__content {
		padding-bottom: 0;
	}
</style>