<template>
	<ContainerQuery>
		<div v-if="$accessCheck($Access.DiscountCardAdd)" slot="left" class="clearfix">
			<el-button type="primary" size="small" @click="$router.push('/Marketing/card/addCard')">
				新增优惠卡
			</el-button>
		</div>
		<el-table :data="cardListData">
			<el-table-column align="left" label="商品" min-width="200">
				<template slot-scope="scope">
					<div class="clearfix">
						<div class="float_left">
							<el-image fit="cover" :src="scope.row.image"></el-image>
						</div>
						<div class="float_left goods-name-view">
							{{ scope.row.name }}
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="售价(元)" min-width="120" prop="price"></el-table-column>
			<el-table-column label="原价(元)" min-width="120" prop="ot_price"></el-table-column>
			<el-table-column align="left" label="启用状态" min-width="120">
				<template slot-scope="scope">
					<div>
						<span v-if="scope.row.status === 0" class="warning-status">
							禁用
						</span>
						<span v-if="scope.row.status === 1" class="success-status">
							启用
						</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="简介" min-width="150" prop="info">
			</el-table-column>
			<el-table-column label="创建时间" min-width="150">
				<template slot-scope="scope">
					{{$_common.formatDate(scope.row.createTime)}}
				</template>
			</el-table-column>

			<el-table-column label="操作" fixed="right" min-width="220">
				<template slot-scope="scope">
					<el-button type="text" @click="Detail(scope.row.id)">
						绑定项目
					</el-button>
					<el-button type="text" @click="
              $router.push(
                `/Marketing/card/addCard?id=${scope.row.id}&setDetail=1`
              )
            ">
						编辑
					</el-button>
					<el-button type="text" @click="delData(scope.row.id)">
						删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<FooterPage :page-size="pageSize" :total-page.sync="total" :current-page.sync="page" @pageChange="pageChange"
			@sizeChange="sizeChange"></FooterPage>
		<!--   新增绑定项目-->
		<BindItem v-if="bind_Item" :card-id='cardid' :is-edit='true' :visible="bind_Item" @close="bind_Item = false" @confirm="bindConfirm"></BindItem>
	</ContainerQuery>
</template>

<script>
	import {
		cardList,
		deleteCard,
	} from "@/api/card";
	import BindItem from "./components/bindItem.vue";
	export default {
		name: "CardList",
		components: {
			BindItem,
		},
		data() {
			return {
				// 点击的优惠卡id
				cardid: '',
				// 显示绑定项目
				bind_Item: false,
				pageSize: 10,
				page: 1,
				total: 0,
				cardListData:[]
			};
		},
		created() {
			this.getData();
		},
		activated() {
			if (this.$_isInit()) return;
			this.getData();
		},
		methods: {
			// 绑定项目
			Detail(id) {
				this.bind_Item = true;
				this.cardid = id;
			},
			// 绑定项目完成
			bindConfirm(data) {
				console.log(data);
			},
			//  获取列表
			async cardList() {
				const {
					data,
					pageTotal
				} = await cardList({
					page: this.page,
					pageSize: this.pageSize,
				});

				this.cardListData = data;
				this.total = pageTotal;
			},
			//  搜索
			getData() {
				this.cardList();
			},
			//  删除
			async delData(id) {
				this.$confirm("确定删除此优惠卡吗?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(async () => {
					const data = await deleteCard({
						id: id
					});

					this.getData();
					this.$message({
						type: "success",
						message: "删除成功!",
					});
				});
			},
			pageChange(page) {
				this.page = page;
				this.getData();
			},
			sizeChange(size) {
				this.pageSize = size;
				this.pageChange(1);
			},
			change() {
				this.faceValueFlag = this.checkList.some((item) => item === "面值");
				this.mutualExclusionFlag = this.checkList.some(
					(item) => item === "是否互斥"
				);
				this.thresholdFlag = this.checkList.some((item) => item === "使用门槛");
				this.quantityFlag = this.checkList.some((item) => item === "数量");
				this.stateFlag = this.checkList.some((item) => item === "审核状态");
				this.grantFlag = this.checkList.some((item) => item === "启用状态");
			},
		},
	};
</script>

<style scoped lang="scss">
	.num-ul {
		padding-bottom: 10px;
		padding-left: 10px;
	}

	.num-ul>li {
		padding-right: 10px;
	}

	.order-info-p {
		height: auto;
		padding-bottom: 0;
	}

	.custom-table-checkbox {
		.el-checkbox {
			display: block !important;
			margin: 0 0 $base-padding/4 0;
		}
	}
</style>
