<template>
	<div>
		<el-dialog title="已领取详情" v-model="dialogVisible" width="80%" top="5vh">
			<div>
				<el-form :model="querForm" inline>
					<el-form-item label="搜索">
						<el-select
							v-model="querForm.userId"
							placeholder="用户昵称/用户ID/用户手机"
							filterable
							remote
							reserve-keyword
							:remote-method="remoteMethod"
							:loading="loading"
						>
							<el-option
								v-for="item in options"
								:key="item.id"
								:label="item.nickName"
								:value="item.id"
							/>
						</el-select>
					</el-form-item>
					<el-form-item label="状态">
						<el-select
							v-model="querForm.status"
							placeholder="请选择"
							style="width: 200px"
						>
							<el-option
								:label="item.label"
								:value="item.value"
								v-for="item in statusList"
								:key="item.value"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="领取时间">
						<el-date-picker
							v-model="querForm.time"
							type="datetimerange"
							value-format="YYYY-MM-DD HH:mm:ss"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							@clear="querForm.time = []"
							@change="datePickerChange"
						/>
					</el-form-item>
					<el-form-item label-width="0">
						<el-button type="primary" @click="searchHandle">搜索</el-button>
						<el-button @click="resetHandle">重置</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div>
				<el-table
					:data="tableData.list"
					border
					stripe
					v-loading="tableData.loading"
					height="64vh"
				>
					<el-table-column label="用户ID" prop="userId" width="80"></el-table-column>
					<el-table-column label="用户名称" prop="name" width="200">
						<template #default="scope">
							<div class="user_info">
								<el-avatar :size="40" :src="scope.row.headImg" />
								<el-text>{{ scope.row.nickName }}</el-text>
							</div>
						</template>
					</el-table-column>
					<el-table-column
						label="优惠券名称"
						prop="coupon.title"
						width="180"
					></el-table-column>
					<el-table-column
						label="领取时间"
						prop="createTime"
						width="200"
					></el-table-column>
					<el-table-column label="使用时间" prop="useTime"></el-table-column>
					<!-- <el-table-column label="获得来源" prop="source"></el-table-column> -->
					<el-table-column label="来源订单" prop="sourceFlowId"></el-table-column>
					<el-table-column label="状态" prop="status">
						<template #default="scope">
							<el-tag
								disable-transitions
								:type="
									statusList.find((item) => item.value == scope.row.status).type
								"
							>
								{{
									statusList.find((item) => item.value == scope.row.status).label
								}}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="操作">
						<template #default="scope">
							<template v-if="scope.row.status == 0">
								<el-popconfirm
									title="确认要失效吗？"
									@confirm="deleteHandle(scope.row)"
								>
									<template #reference>
										<el-button type="danger" link icon="EditPen">
											失效
										</el-button>
									</template>
								</el-popconfirm>
							</template>
							<template v-else>
								<el-button type="danger" link icon="EditPen" disabled>
									失效
								</el-button>
							</template>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="row">
				<el-pagination
					v-model:current-page="tableData.page"
					v-model:page-size="tableData.pageSize"
					:page-sizes="[10, 100, 200, 300, 400]"
					background
					layout="total, sizes, prev, pager, next, jumper"
					:total="tableData.total"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
				/>
			</div>
		</el-dialog>
	</div>
</template>

<script setup>
import _ from "lodash";
import { ref, reactive } from "vue";
import { xfCouponRecord, deleteRecord, getShopUserList } from "@/api/coupon/index.js";

const dialogVisible = ref(false);
const row = ref(null);

const statusList = ref([
	{
		value: 0,
		label: "未使用",
		type: "success",
	},
	{
		value: 1,
		label: "已使用",
		type: "info",
	},
	{
		value: 2,
		label: "已失效",
		type: "info",
	},
]);

const loading = ref(false);
const options = ref([]);
const querForm = reactive({
	status: "",
	userId: "",
	time: [],
});

// 远程搜索用户列表
const remoteMethod = _.debounce(async function (query) {
	try {
		if (query) {
			loading.value = true;
			const res = await getShopUserList({
				key: query,
				page: 1,
				size: 100,
			});
			options.value = res.records;
		}
	} catch (error) {
		console.error(error);
	}
	loading.value = false;
}, 200);

// 搜索
function searchHandle() {
	tableData.page = 1;
	tableData.pageSize = 10;
	couponRecordAjax();
}

// 重置
function resetHandle() {
	querForm.userId = "";
	querForm.status = "";
	querForm.time = [];
	options.value = [];
	tableData.page = 1;
	tableData.pageSize = 10;
	couponRecordAjax();
}

const tableData = reactive({
	loading: false,
	page: 1,
	pageSize: 10,
	total: 0,
	list: [],
});

// 分页大小发生变化
function handleSizeChange(e) {
	tableData.pageSize = e;
	couponRecordAjax();
}

// 分页发生变化
function handleCurrentChange(e) {
	tableData.page = e;
	couponRecordAjax();
}

function datePickerChange(e) {
	if (!e) {
		querForm.time = [];
	}
}

// 已领取详情
async function couponRecordAjax() {
	try {
		tableData.loading = true;
		const res = await xfCouponRecord({
			page: tableData.page,
			size: tableData.pageSize,
			status: querForm.status,
			userId: querForm.userId,
			id: "",
			shopId: row.value.shopId,
			couponId: "",
			name: "",
			startTime: querForm.time[0] || "",
			endTime: querForm.time[1] || "",
			sourceId: row.value.id,
		});

		res.records.map((item) => {
			item.coupon = JSON.parse(item.couponJson);
		});

		tableData.total = res.totalRow;
		tableData.list = res.records;

		console.log(tableData.list);
	} catch (error) {
		console.log(error);
	}
	tableData.loading = false;
}

// 删除用户优惠券
async function deleteHandle(e) {
	try {
		tableData.loading = true;
		await deleteRecord({ id: e.id });
		couponRecordAjax();
	} catch (error) {
		console.log(error);
	}
}

function show(obj = null) {
	if (obj) {
		row.value = { ...obj };
		dialogVisible.value = true;
		couponRecordAjax();
	}
}

defineExpose({
	show,
});
</script>

<style scoped lang="scss">
.row {
	padding-top: 14px;
}
.user_info {
	display: flex;
	align-items: center;
	gap: 10px;
}
</style>
