<template>
	<view>
		<template v-if="isBind">
			<view class="goods">
				<view class="u-m-t-24 u-flex u-col-top u-relative">
					<view class="img">
						<up--image :width="63" :height="63" :radius="3" :src="data.coverImg"></up--image>
					</view>
					<view class="w-full info u-p-l-30">
						<view class="color-333 u-flex u-row-between">
							<view class="u-flex">
								<text class="u-m-r-24">{{ data.name }}</text>
							</view>
						</view>
						<view class="u-flex u-m-t-10 u-row-right">
							<view class="btn-default btn" @tap="del">删除</view>
						</view>
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="goods-wrap">
				<view class="goods-item u-flex" @click="goodsClick">
					<my-radio @click="goodsClick" :modelValue="data.checked"></my-radio>
					<view class="u-flex u-m-l-10">
						<text class="">{{ data.name }}</text>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script setup>
const emits = defineEmits(['goodsClick', 'del']);

const props = defineProps({
	isBind: {
		type: Boolean,
		default: false
	},
	index: {
		type: Number
	},
	data: {
		type: Object,
		default: () => {
			return {
				checked: false
			};
		}
	},
	showDetail: {
		type: Boolean,
		default: false
	}
});

function goodsClick() {
	emits('goodsClick', props.index);
}

function del() {
	emits('del', props.index);
}
</script>

<style lang="scss" scoped>
$imgSize: 126rpx;

.btn {
	padding: 6rpx 28rpx;
	border-radius: 100rpx;
	border: 2rpx solid transparent;
}

.btn-default {
	border-color: #999;
	color: #999;
}

.img {
	width: $imgSize;
	height: $imgSize;
}

.goods {
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	background-color: #fff;
	padding: 32rpx 28rpx 32rpx 28rpx;
	font-size: 28rpx;

	.skus {
		background: #f9f9f9;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		padding: 20rpx;

		.sku {
			color: #000;
			font-weight: 700;
			padding: 6rpx 40rpx;
		}

		.skds {
			gap: 10rpx 50rpx;
		}
	}
}
.goods-wrap {
	padding: 0 20upx;
	.goods-item {
		padding: 20upx 0;
		border-bottom: 1px solid #ececec;
	}
}
</style>
