<template>
	<div class="assembly-coupon">
		<div class="box">
			<el-input placeholder="请指定优惠券" v-model="value.title" disabled class="le-url">
				<template #append>
					<el-button type="primary" @click="onTap"> 选择 </el-button>
				</template>
			</el-input>
		</div>
		<cl-dialog title="选择优惠券" height="500px" v-model="visible">
			<cl-crud ref="Crud">
				<cl-row>
					<!-- 刷新按钮 -->
					<cl-refresh-btn />
					<cl-filter label="状态">
						<cl-select :options="options.status" prop="status" :width="140" />
					</cl-filter>

					<cl-flex1 />
					<!-- 关键字搜索 -->
					<cl-search-key placeholder="搜索标题" />
				</cl-row>

				<cl-row>
					<!-- 数据表格 -->
					<cl-table ref="Table" :autoHeight="false" />
				</cl-row>

				<cl-row>
					<cl-flex1 />
					<!-- 分页控件 -->
					<cl-pagination />
				</cl-row>
			</cl-crud>
		</cl-dialog>
	</div>
</template>

<script lang="ts" name="assembly-coupon" setup>
import { ref, reactive, type PropType } from "vue";
import { useCrud, useTable } from "@cool-vue/crud";
import dayjs from "dayjs";
import { useCool } from "/@/cool";
const { service } = useCool();

const options = reactive({
	type: [
		{
			label: "满减券",
			value: 0
		}
	],
	status: [
		{
			label: "启用",
			value: 1
		},
		{
			label: "禁用",
			value: 0
		}
	]
});

const props = defineProps({
	modelValue: {
		type: Object as PropType<Eps.MarketCouponInfoEntity>,
		default: () => {
			return {
				id: 0,
				title: "",
				description: "",
				amount: 0
			};
		}
	}
});

// cl-table
const Table = useTable<Eps.MarketCouponInfoEntity>({
	columns: [
		{ label: "标题", prop: "title", minWidth: 200 },
		{ label: "描述", prop: "description", showOverflowTooltip: true, minWidth: 200 },
		{ label: "类型", prop: "type", minWidth: 120, dict: options.type },
		{
			label: "条件",
			prop: "condition",
			minWidth: 140,
			formatter(row) {
				switch (row.type) {
					case 0:
						return `满 ${row.condition?.fullAmount} 减 ${row.amount}`;

					default:
						return "无门槛";
				}
			}
		},
		{ label: "金额", prop: "amount", minWidth: 120, sortable: "custom" },
		{ label: "数量", prop: "num", minWidth: 120, sortable: "custom" },
		{ label: "已领取", prop: "receivedNum", minWidth: 120, sortable: "custom" },
		{ label: "状态", prop: "status", minWidth: 100, component: { name: "cl-switch" } },
		{
			label: "有效期",
			prop: "startTime",
			minWidth: 260,
			formatter(row) {
				return (
					dayjs(row.startTime).format("YYYY-MM-DD") +
					" ~ " +
					dayjs(row.endTime).format("YYYY-MM-DD")
				);
			}
		},
		{
			label: "创建时间",
			prop: "createTime",
			minWidth: 160,
			component: { name: "cl-date-text" }
		},

		{
			type: "op",
			width: 160,
			buttons: [
				{
					label: "选择TA",
					type: "success",
					onClick({ scope }) {
						value.value = scope.row;
						onChange();
						visible.value = false;
					}
				}
			]
		}
	]
});

// cl-crud
const Crud = useCrud(
	{
		service: service.market.coupon.info
	},
	(app) => {
		app.refresh();
	}
);

const emit = defineEmits(["update:modelValue"]);

const value = ref(props.modelValue);
const visible = ref(false);
function onTap() {
	visible.value = true;
}
function onChange() {
	emit("update:modelValue", value.value);
}
</script>

<style lang="scss" scoped>
.assembly-coupon {
	box-sizing: border-box;
	background-color: #f6f7fa;
	border-radius: 10px;
	padding: 6px;
	margin-bottom: 10px;
	.box {
		box-sizing: border-box;
		display: flex;
		background-color: #ffffff;
		padding: 10px;
	}

	.le-url {
		width: 100%;
		:deep(.el-input-group__append) {
			width: 118px;
			background: #623ceb;
			border: 1px solid #623ceb;
			text-align: center;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			box-sizing: border-box;
		}
	}
}
</style>
