<template>
	<div class="assembly-goods-list">
		<div class="w-120">显示模式</div>
		<el-radio-group v-model="value.mode" @change="changeGroup">
			<el-radio value="mode-1">双列</el-radio>
			<el-radio value="mode-2">三列</el-radio>
			<el-radio value="mode-3">列表</el-radio>
			<el-radio value="mode-4">单列</el-radio>
		</el-radio-group>
		<div class="w-120">商品卡片阴影</div>
		<assembly-switch v-model="value.isShadow" />
		<div class="w-120">商品来源</div>
		<el-radio-group v-model="value.source" @change="changeSource">
			<el-radio value="source-1">手动选择</el-radio>
			<el-radio value="source-2">选择分类</el-radio>
			<el-radio value="source-3">营销属性</el-radio>
		</el-radio-group>
		<div class="attribute-box" v-if="isSource3">
			<el-radio-group v-model="value.attribute" @change="changeGroup">
				<el-radio :value="0">正常</el-radio>
				<el-radio :value="1">新品</el-radio>
				<el-radio :value="2">热卖</el-radio>
				<el-radio :value="3">推荐</el-radio>
				<el-radio :value="4">特价</el-radio>
			</el-radio-group>
		</div>
		<div class="attribute-num" v-if="!isSource1">
			<div class="w-120 mt-10">显示商品数量</div>
			<assembly-slider v-model="value.num" :min="1" :max="99" unit="件" :step="1" />
		</div>
		<div class="hand-select" v-if="isSource1">
			<div class="flex-row goods-item" v-for="(item, index) in value.list" :key="index">
				<el-image style="width: 60px; height: 60px" :src="item.mainPic" fit="cover" />
				<div class="goods-title">
					<div class="title">{{ item.title }}</div>
					<div class="price">
						<span class="p1">￥{{ item.price }}</span>
						<span class="p2">已售 {{ item.sold }}</span>
						<el-button
							@click="delGoods(index)"
							link
							type="danger"
							:icon="Delete"
							circle
						/>
					</div>
				</div>
			</div>
			<div class="add" @click="addGoods">
				<el-button link type="primary">添加商品</el-button>
			</div>
		</div>
		<div class="hand-select" v-if="isSource2">
			<div class="flex-row type-item" v-for="(item, index) in value.type" :key="index">
				<el-image style="width: 40px; height: 40px" :src="item.pic" fit="cover" />
				<div class="type-name">
					<span class="title">{{ item.name }}</span>
					<el-button @click="delType(index)" link type="danger" :icon="Delete" circle />
				</div>
			</div>
			<div class="add" @click="addGoodsType">
				<el-button link type="primary">添加分类</el-button>
			</div>
		</div>
		<cl-dialog title="选择数据" height="500px" v-model="visible">
			<template v-if="isSource1">
				<assembly-goods :multiple="true" @change="onTapGoodsDetails" />
			</template>
			<template v-if="isSource2">
				<div class="goods-type">
					<div
						class="item"
						v-for="(item, index) in goodsType"
						:key="index"
						@click="onTapGoodsType(item)"
					>
						<el-image
							style="width: 100%; max-width: 100%; border-radius: 6px"
							:src="item.pic"
							fit="cover"
						/>
						<div class="name">{{ item.name }}</div>
					</div>
				</div>
			</template>
		</cl-dialog>
	</div>
</template>

<script lang="ts" name="assembly-goods-list" setup>
import { ref, computed, type PropType } from "vue";
import { Delete } from "@element-plus/icons-vue";
import { Form } from "../../types/form";
import { useCool } from "/@/cool";

const { service } = useCool();

const props = defineProps({
	modelValue: {
		type: Object as PropType<Form.Goods>,
		default: () => {
			return {
				mode: "mode-1",
				source: "source-1",
				attribute: 0,
				num: 99,
				gap: 0,
				isShadow: false,
				type: [],
				list: []
			};
		}
	}
});

const emit = defineEmits(["update:modelValue"]);
const value = ref(props.modelValue);
// Computed properties for conditional rendering
const isSource1 = computed(() => value.value.source === "source-1");
const isSource2 = computed(() => value.value.source === "source-2");
const isSource3 = computed(() => value.value.source === "source-3");
const visible = ref(false);
const goodsType = ref<any[]>([]);

function addGoods() {
	visible.value = true;
}

// 选择商品
function onTapGoodsDetails(item: any) {
	const itemsToAdd = Array.isArray(item) ? item : [item];

	// 查找需要添加的商品
	const uniqueItems = itemsToAdd.filter(
		(newItem) => !value.value.list.some((existingItem) => existingItem.id === newItem.id)
	);

	// 将唯一的商品添加到列表
	if (uniqueItems.length > 0) {
		value.value.list.push(...uniqueItems);
		onChange();
	}

	// 关闭弹窗
	visible.value = false;
}
function onTapGoodsType(item: { name: string; pic: string; id: number; parentId: number }) {
	// 检查 item 是否已经存在于 type 数组中
	const itemExists = value.value.type.some((existingItem) => existingItem.id === item.id);

	// 如果 item 不存在，则添加到 type 数组中
	if (!itemExists) {
		value.value.type.push(item);
		onChange();
	}

	// 关闭弹窗
	visible.value = false;
}

function changeSource(mode: any) {
	onChange();
}

function changeGroup(mode: any) {
	onChange();
}

function delGoods(index: number) {
	value.value.list.splice(index, 1);
	onChange();
}
function delType(index: number) {
	value.value.type.splice(index, 1);
	onChange();
}
function addGoodsType() {
	visible.value = true;
	service.goods.type.list({ status: 1 }).then((res: any) => {
		goodsType.value = res;
	});
}

function onChange() {
	emit("update:modelValue", value.value);
}
</script>

<style lang="scss" scoped>
.assembly-goods-list {
	.w-120 {
		width: 140px;
	}
	.mt-10 {
		margin-top: 10px;
	}
	.attribute-box {
		margin-top: 20px;
		box-sizing: border-box;
		background-color: #f6f7fa;
		border-radius: 10px;
		padding: 6px 25px;
	}
	.flex-row {
		display: flex;
		align-items: center;
	}
	.hand-select {
		margin-top: 20px;
		box-sizing: border-box;
		background-color: #f6f7fa;
		border-radius: 10px;
		padding: 6px;
		margin-bottom: 10px;
		.add {
			margin-top: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 30px;
			border: 1px solid var(--el-border-color);
			background-color: #fff;
			border-radius: 6px;
			cursor: pointer;
		}
		.type-item {
			background-color: #fff;
			border-radius: 10px;
			padding: 6px;
			box-sizing: border-box;
			margin-bottom: 6px;
			.type-name {
				flex: 1;
				display: flex;
				justify-content: space-between;
				margin-left: 20px;
			}
		}
		.goods-item {
			background-color: #fff;
			border-radius: 10px;
			padding: 6px;
			box-sizing: border-box;
			position: relative;
			margin-bottom: 6px;
			.goods-title {
				margin-left: 20px;
				.title {
					width: 200px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.price {
					width: 200px;
					display: flex;
					justify-content: space-between;
					.p1 {
						color: red;
					}
					.p2 {
						color: #a9a9a9;
					}
				}
			}
		}
	}
}
.goods-type {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 10px;

	.item {
		background-color: #f6f7fa;
		border-radius: 10px;
		box-sizing: border-box;
		cursor: pointer;
		padding: 6px;
		.name {
			text-align: center;
			padding: 6px;
		}
	}
}
</style>
