<template>
	<div class="form-submit">
		<div class="i-layout-page-header">
			<PageHeader class="product_tabs" hidden-breadcrumb>
				<div slot="title">
					<router-link :to="{ path: `${roterPre}/marketing/serve/index` }">
						<div class="font-sm after-line">
							<span class="iconfont iconfanhui"></span>
							<span class="pl10">返回</span>
						</div>
					</router-link>
					<span v-text="$route.params.id ? '编辑服务卡' : '添加服务卡'" class="mr20 ml16"></span>
				</div>
			</PageHeader>
		</div>
		<Card :bordered="false" dis-hover class="ivu-mt"  >
			<div v-for="(item,index) in formData" class="product-item">
				<Button type="primary" class="submission" @click="delNewProject(index,item)" >删除</Button>
				<Form   :model="item" :label-width="150" >
					<FormItem label="选择服务项目：" prop="product_id" required>
					    <div class="picBox" @click="changeGoods(item)">
							<Button type="primary" v-if="!item.product_id">选择服务项目</Button>
							<template v-else>
								<div class="">
									{{item.store_name}}
								</div>
								<Button type="primary" >切换服务项目</Button>
							</template>
					       
					    </div>
					</FormItem>
					<FormItem label="业绩值" required>
						<Input  v-model="item.performance_value" v-width="320"></Input>
					</FormItem>
					<FormItem label="手工费" required>
						<Input  v-model="item.craft_price" v-width="320"></Input>
					</FormItem>
					<FormItem label="销售提成" required>
						<Input  v-model="item.sales_commissions" v-width="320"></Input>
					</FormItem>
					<FormItem label="次数" required>
						<InputNumber  v-model="item.repertory" v-width="320"></InputNumber>
					</FormItem>
				</Form>
			</div>
			
		</Card>
		<!-- 选择商品-->
		<Modal v-model="modals" title="商品列表" footerHide class="paymentFooter" scrollable width="900"
		    @on-cancel="cancel">
		    <goods-list ref="goodslist" :goodsType="1" v-if="modals" @getProductId="getProductId" :serviceProject="1"></goods-list>
		</Modal>
		<div style="width: 500px; display: flex;justify-content: center;">
			<Button  type="primary bom" class="submission" @click="addNewProject" >添加新项目</Button>
			<Button  type="primary" class="submission" @click="save" :disabled="disabled">保存</Button>
		</div>
	</div>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import storeList from "@/components/storeList";
	import goodsList from "@/components/goodsList/index";
	import {
		couponCategoryApi,
		couponSaveApi,
		couponDetailApi,
		VipEditApi,
		serveAddApi,
		bindServe,
		addServiceProject,
		serveReadApi,
		serveProductDeleteApi
	} from "@/api/marketing";
	import {
		brandList
	} from "@/api/product";
	// import { formatDate } from '@/utils/validate';
	import Setting from "@/setting";
	export default {
		name: "storeCouponCreate",
		components: {
			goodsList,
			storeList
		},
		data() {
			return {
				baseForm: {
					product_name: '',
					product_id: 0,
					performance_value: 0,
					craft_price: 0,
					sales_commissions: 0,
					repertory: 0
				},//基础数据
				modal_loading: false,
				 modals: false,
				id: '',
				roterPre: Setting.roterPre,
				disabled: false,
				storesList: [],
				formData: [{
					id: 0,
					service_card_id: 0,
					product_id: 0,
					store_name: '',
					slider_image: '',
					performance_value: '',
					craft_price: '',
					sales_commissions: '',
					repertory: 0,
				}],
				isMinPrice: 0,
				isCouponTime: 1,
				isReceiveTime: 0,
				modals: false,
				datetime1: [],
				datetime2: [],
				storeModals: false,
				currentTab: '1',
				current: {},
				service_card_id: '',
			};
		},
		computed: {
			...mapState("admin/layout", ["isMobile", "menuCollapse"]),
		},
		created() {
			console.log(this.$route.query);
			if (this.$route.query.id) {
				this.service_card_id = this.$route.query.id
				this.formData[0].service_card_id = this.$route.query.id
				this.getCouponDetail();
			}
		},
		methods: {
			getCouponDetail() {
				let that = this
				serveReadApi(that.service_card_id).then(res => {
					that.formData = res.data.info.storeInfo.project
					if(that.formData.length == 0) {
						that.formData = [{
							id: 0,
							service_card_id: that.service_card_id,
							product_id: 0,
							store_name: '',
							slider_image: '',
							performance_value: '',
							craft_price: '',
							sales_commissions: '',
							repertory: 0,
						}]
					}
				})
			},
			// 选择商品
			changeGoods(item) {
			    this.modals = true;
				this.current = item
			},
			addNewProject() {
				console.log('dddddddddddddddddd');
				let that = this
				try{
					this.formData.push({
					service_card_id: that.service_card_id,
					id: 0,
					product_id: 0,
					store_name: '',
					slider_image: '',
					performance_value: '',
					craft_price: '',
					sales_commissions: '',
					repertory: 0,
				})
					// this.formData.concat(this.baseForm)
					console.log(this.formData);
				}catch(e){
					console.log(e);
					//TODO handle the exception
				}
			},
			delNewProject(index,item) {
				let that = this
				if(item.id) {
					try{
						let delfromData = {
						    title: '删除服务项目',
						    url: `service/productDelete/${item.id}`,
						    method: 'DELETE',
						    ids: ''
						};
						this.$modalSure(delfromData).then((res) => {
						    that.$Message.success(res.msg);
						   that.formData.splice(index,1)
						}).catch(res => {
						    that.$Message.error(res.msg);
						});
					}catch(e){
						//TODO handle the exception
						console.log(e,'错误');
					}
					
					// serveProductDeleteApi(item.id).then(res => {
					// 	this.formData.splice(index,1)
					// })
				}else {
					this.formData.splice(index,1)
				}
				if(that.formData.length == 0) {
					that.formData = [{
						id: 0,
						service_card_id: that.service_card_id,
						product_id: 0,
						store_name: '',
						slider_image: '',
						performance_value: '',
						craft_price: '',
						sales_commissions: '',
						repertory: 0,
					}]
				}
			},
			// 商品id
			getProductId(row) {
				console.log(row,'这个');
			    this.modal_loading = false;
			    this.modals = false;
			    setTimeout(() => {
					this.current.product_id = row.id
					this.current.store_name = row.store_name
					this.current.slider_image = row.image
					// this.formData.image = row.image
			    }, 500);
			},
			downTab() {
				if (!this.formData.card_name) {
					return this.$Message.error("请输入服务卡名称");
				}
				if (!this.formData.card_price) {
					return this.$Message.error("请输入售价");
				}
				if (!this.formData.repertory) {
					return this.$Message.error("请输入库存");
				}
			},
			// 创建
			save() {
				// this.downTab();
				// console.log('这');
				bindServe(this.service_card_id,{item: this.formData})
					.then((res) => {
						this.disabled = true;
						this.$Message.success(res.msg);
						setTimeout(() => {
							this.$router.push({
								path: this.roterPre + "/marketing/serve/index",
							});
						}, 1000);
					})
					.catch((err) => {
						this.$Message.error(err.msg);
						this.disabled = false;
					});
			},
			// 使用有效期--时间段
			dateChange(time) {
				this.formData.start_use_time = time[0];
				this.formData.end_use_time = time[1];
			},
			// 限时
			timeChange(time) {
				this.formData.start_time = time[0];
				this.formData.end_time = time[1];
			},
			//对象数组去重；
			unique(arr) {
				const res = new Map();
				return arr.filter(
					(arr) => !res.has(arr.product_id) && res.set(arr.product_id, 1)
				);
			},
			// // 选择的商品
			// getProductId(productList) {
			// 	this.modals = false;
			// 	this.productList = this.unique(this.productList.concat(productList));
			// 	this.formData.product_id = "";
			// 	this.productList.forEach((value) => {
			// 		if (this.formData.product_id) {
			// 			this.formData.product_id += `,${value.product_id}`;
			// 		} else {
			// 			this.formData.product_id += `${value.product_id}`;
			// 		}
			// 	});
			// },
			cancel() {
				this.modals = false;
			},
			// 删除商品
			remove(productId) {
				for (let index = 0; index < this.productList.length; index++) {
					if (this.productList[index].product_id == productId) {
						this.productList.splice(index, 1);
					}
				}
				this.formData.product_id = "";
				this.productList.forEach((value) => {
					if (this.formData.product_id) {
						this.formData.product_id += `,${value.product_id}`;
					} else {
						this.formData.product_id += `${value.product_id}`;
					}
				});
			},
			cancel() {
			    this.modals = false;
			},
			
		},
	};
</script>

<style scoped lang="stylus">
	.tips {
		display: inline-bolck;
		font-size: 12px;
		font-weight: 400;
		color: #999999;
		margin-top: 10px;
	}

	.imgPic {
		.info {
			width: 60%;
			margin-left: 10px;
		}

		.pictrue {
			height: 36px;
			margin: 7px 3px 0 3px;

			img {
				height: 100%;
				display: block;
			}
		}
	}

	.productType {
		width: 120px;
		height: 60px;
		background: #FFFFFF;
		border-radius: 3px;
		border: 1px solid #E7E7E7;
		float: left;
		text-align: center;
		padding-top: 8px;
		position: relative;
		cursor: pointer;
		line-height: 23px;
		margin-right: 12px;

		&.on {
			border-color: #1890FF;
		}

		.name {
			font-size: 14px;
			font-weight: 600;
			color: rgba(0, 0, 0, 0.85);

			&.on {
				color: #1890FF;
			}
		}

		.title {
			font-size: 12px;
			font-weight: 400;
			color: #999999;
		}

		.jiao {
			position: absolute;
			bottom: 0;
			right: 0;
			width: 0;
			height: 0;
			border-bottom: 26px solid #1890FF;
			border-left: 26px solid transparent;
		}

		.iconfont {
			position: absolute;
			bottom: -3px;
			right: 1px;
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	.info {
		color: #888;
		font-size: 12px;
	}

	.ivu-input-wrapper {
		width: 320px;
	}

	.ivu-input-number {
		width: 160px;
	}

	.ivu-date-picker {
		width: 320px;
	}

	.ivu-icon-ios-camera-outline {
		width: 58px;
		height: 58px;
		border: 1px dotted rgba(0, 0, 0, 0.1);
		border-radius: 4px;
		background-color: rgba(0, 0, 0, 0.02);
		line-height: 58px;
		cursor: pointer;
		vertical-align: middle;
	}

	.upload-list {
		width: 58px;
		height: 58px;
		border: 1px dotted rgba(0, 0, 0, 0.1);
		border-radius: 4px;
		margin-right: 15px;
		display: inline-block;
		position: relative;
		cursor: pointer;
		vertical-align: middle;
	}

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

	.ivu-icon-ios-close-circle {
		position: absolute;
		top: 0;
		right: 0;
		transform: translate(50%, -50%);
	}

	.form-submit {
		/deep/.ivu-card {
			border-radius: 0;
		}

		margin-bottom: 79px;

		.fixed-card {
			position: fixed;
			right: 0;
			bottom: 0;
			left: 200px;
			z-index: 99;
			box-shadow: 0 -1px 2px rgb(240, 240, 240);

			/deep/ .ivu-card-body {
				padding: 15px 16px 14px;
			}

			.ivu-form-item {
				margin-bottom: 0;
			}

			/deep/ .ivu-form-item-content {
				margin-right: 124px;
				text-align: center;
			}

			.ivu-btn {
				height: 36px;
				padding: 0 20px;
			}
		}
	}

	/deep/.vxe-tree-cell {
		padding-left: 0 !important;
	}
	.upLoad {
	    width: 58px;
	    height: 58px;
	    line-height: 58px;
	    border: 1px dotted rgba(0, 0, 0, 0.1);
	    border-radius: 4px;
	    background: rgba(0, 0, 0, 0.02);
	    cursor: pointer;
	}
	.product-item {
		border: 1px solid #eee;
		min-width: 300px;
		padding: 20px
		.submission {
			// display: block;
			margin-left: 500px;
		}
	}
	.bom {
		margin-right: 20px
	}
</style>