<template>
	<div>
		<el-drawer class="edit-drawer" title="绑定项目列表" size="650px" :visible.sync="visible" direction="rtl"
			:modal="modal" :wrapper-closable="false" @close="close">
			<vxe-table ref="goodsTable" class="tab-style" border="inner" :data="actionList"
				:edit-config="{trigger: 'click', mode: 'cell'}">
				<vxe-table-column field="name" title="项目名称" min-width="150"></vxe-table-column>
				<vxe-table-column field="price" title="价格" min-width="100"></vxe-table-column>
				<vxe-table-column :edit-render="{}" field="cardnum" title="数量" min-width="100">
					<template #edit="{ row }">
						<vxe-input v-model="row.cardnum" type="number" placeholder="请输入昵称" min="1"></vxe-input>
					</template>
				</vxe-table-column>
				<vxe-table-column title="操作" width="100">
					<template #default="{  $rowIndex }">
						<el-button type="text" @click="delItemAction($rowIndex)">
							删除
						</el-button>
					</template>
				</vxe-table-column>
			</vxe-table>
			<div style="margin: 10px;">
				<el-button type="primary" @click="show_Item = true">选择项目</el-button>
				<el-button type="danger" @click="bindItem">绑定项目</el-button>
			</div>
			<el-table :data="list" class="tab-style">
				<el-table-column prop="project_name" label="项目名称" width="180">
				</el-table-column>
				<el-table-column prop="createTime" label="绑定日期">
					<template slot-scope="scope">
						{{$_common.formatDate(scope.row.createTime,'yyyy/MM/dd hh:mm')}}
					</template>
				</el-table-column>
				<el-table-column prop="number" label="次数">
				</el-table-column>
				<el-table-column label="操作" min-width="100">
					<template slot-scope="scope">
						<el-button type="text" @click="delItem(scope.row.id)">
							删除
						</el-button>
						<el-button type="text" @click="updateBindItem(scope.row)">
							修改
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-form size="small" :model="form" style="margin-top: 10px;" label-width="120px">
				<el-form-item style="text-align: right; padding-right: 10px">
					<el-button type="primary" @click="confirm">确 定</el-button>
					<el-button @click="close">取 消</el-button>
				</el-form-item>
			</el-form>
		</el-drawer>
		<ItemList v-if="show_Item" :dialog-visible="show_Item" :is-show-add="true" :modal="false"
			@close="show_Item = false" @confirm="itemConfirm"></ItemList>
	</div>
</template>

<script>
	import {
		listBindItem,
		addBindItem,
		deleteBindItem,
		updateBindItem
	} from "@/api/card.js";
	import ItemList from "@/component/goods/itemList.vue";
	export default {
		name: "BindItem",
		components: {
			ItemList,
		},
		props: {
			visible: {
				type: Boolean,
				default: false,
			},
			isEdit: {
				type: Boolean,
				default: false,
			},
			cardId: {
				type: [Number, String],
				default: '',
			},
			// 是否需要遮罩层
			modal: {
				type: Boolean,
				default: true,
			},
		},
		data() {
			return {
				// 保存编辑对象数字
				numberData: 1,
				// 显示项目弹窗
				show_Item: false,
				// 选择项目列表
				actionList: [],
				// 绑定项目列表
				list: [],
				form: {
					//班次名字
					name: '',
					//签到单次奖励金额
					single_time: 0,
					// 签到时间范围
					// 整合签到数据
				},
			};
		},
		created() {
			if (this.cardId) {
				this.listBindItem();
			}
		},
		methods: {
			// 次数改变事件
			changeActionNum(ev, ind) {
				console.log(ev, ind);
			},
			// 选择要绑定的项目
			itemConfirm(item) {
				for (var i = 0; i < this.list.length; i++) {
					if( this.list[i].project_id ==item[0].id){
						this.$message({
							type: "danger",
							message: "已绑定过该项目无法重复绑定!",
						});
						return
					}
				}
				this.actionList.push(...item.map((item) => {
					// 初始化次数
					item.cardnum = 1;
					item.num_flag = false;
					return item
				}))
			},
			// 删除选中项目
			delItemAction(ind) {
				this.actionList.splice(ind, 1)
			},
			// 删除绑定项目
			delItem(id) {
				this.$confirm("你确定删除此绑定项目么?", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(async () => {
					const data = await deleteBindItem({
						id: id
					});
					this.listBindItem();
					this.$message({
						type: "success",
						message: "删除成功!",
					});
				});

			},
			// 修改项目
			updateBindItem(item) {
				console.log(item);
				this.$prompt('请输入修改后数量', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputPattern: /^\d*$/,
					inputErrorMessage: '请输入数字'
				}).then(async ({
					value
				}) => {
					console.log(value);
					if (value <= 0) {
						this.$message({
							type: 'danger',
							message: "数量不可少于1"
						});
						return
					}
					const data =await updateBindItem({
						"project_id": item.project_id, //项目id
						"number": value, //优惠次数
						"id": item.id //id
					})
					this.listBindItem();
					this.$message({
						type: 'success',
						message: data.data
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消修改'
					});
				});
			},
			// 绑定项目
			async bindItem() {
				const loading = this.$loading({
					lock: true,
					text: '绑定中',
					spinner: 'el-icon-loading',
				});
				let data;
				try {
					for (var i = 0; i < this.actionList.length; i++) {
						const it = this.actionList[i]
						data = await addBindItem({
							"card_id": this.cardId, //优惠卡id
							"project_id": it.id, //项目id
							"number": it.cardnum //优惠次数
						})
					}
				} catch (e) {
					this.$message({
						message: e.message,
						type: "danger",
					});
					loading.close();
					return
				}
				this.listBindItem();
				this.$message({
					message: data.data,
					type: "success",
				});
				loading.close();
			},
			close() {
				this.$emit("close");
			},
			//  绑定项目详情 listBindItem
			async listBindItem() {
				if (!this.cardId) return;
				const {
					data
				} = await listBindItem({
					"page": 1,
					"pageSize": 100,
					"card_id": this.cardId
				});
				this.list = data;
			},
			async confirm() {
				this.$refs.form.validate(async (valid) => {
					if (valid) {
						let upData = {
							shift: Object.assign({}, this.form)
						};
						upData.shift.sections = upData.shift.sections.map((res) => {
							let data = res.times.map((e) => {
								return Object.assign({}, e)
							})

							if (data[1].check_time == '24:00') {
								data[1].across = 1;
								data[1].check_time = "00:00";
							}
							data[0].check_time = "1970-01-01 " + data[0].check_time +
								':00'
							data[1].check_time = "1970-01-01 " + data[1].check_time +
								':00'

							return {
								times: data
							};
						})
						const data = await postAddClass(upData);
						this.$message({
							message: data.data,
							type: "success",
						});

						this.close();
						this.$emit("confirm");
					}
				});
			},
		},
	};
</script>

<style scoped>
	.tab-style {
		width: 100%;
		padding: 0 20px;
	}

	.btn-up {
		position: relative;
	}

	.btn-department {
		position: absolute;
		left: 270px;
		top: 4px;
	}

	.btn-role-up {
		position: relative;
	}

	.add-role {
		position: absolute;
		left: 270px;
		top: 4px;
	}

	.creat-shop {
		color: #1890ff;
		font-size: 12px;
	}
</style>
