<template>
	<view class="good-list mg-top-24" @click="goToDetail">
		<view class="good-item u-f u-f-jcfs u-f-aifs">
			<view style="width: 146rpx;" class="u-f u-f-fdc mg-right-10">
				<image style="width: 146rpx;height: 146rpx;" :mode="'scaleToFill'" :src="item.goodsImage"
					class="border-radius-9"></image>
			</view>
			<view class="right" style="width: calc(100% - 156rpx);">
				<view class="fs28 one-line-ellipsis mg-bot-10" style="width: 100%;">{{item.goodsName}}</view>
				<view class="fs22 u-f u-f-jcfs u-f-aic mg-bot-10">
					<view class="gray-btn u-f u-f-jcfs u-f-aic">
						<view class="shop-icon mg-right-8">
							<image src="../.././static/common/shop-icon.png" :mode="'widthFix'"
								style="width: 100%;height: 100%"></image>
						</view>
						<text class="light-black">{{item.storeName}}</text>
					</view>
				</view>
				<view class="fs24 light-gray mg-bot-10">
					总售 {{item.totalSales}}
				</view>
				<view class="fs24 fw400 mg-bot-10 one-line-ellipsis">
					<text class="light-black">{{item.distance}}km </text>
					<text class="light-gray">| {{item.address}}</text>
				</view>
				<view class="mg-top-16 u-f u-f-jcsb u-f-aic">
					<text class="main-color fs30 fw700">￥{{item.goodsOriginalPrice}}</text>
					<view class="go-look u-f u-f-aic u-f-jcfs">
						<text class="mg-right-10">立即抢购</text>
						<text class="white-right-arrow"></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'maintenanceShop',
		props: {
			item: {
				type: Object,
				default: {}
			},
			activeOperateMenu: {
				type: Number,
				default: 0
			}
		},
		methods: {
			goToDetail() {
				this.$emit('enter-detail', this.item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.good-list {
		.good-item {
			background-color: #ffffff;
			border-radius: 18rpx;
			padding: 20rpx;
		}
	}

	.shop-icon {
		width: 24rpx;
		height: 24rpx;
	}

	.go-look {
		color: #ffffff;
		padding: 6rpx 26rpx;
		background: linear-gradient(90deg, #FF4502 0%, #FF8903 100%);
		border-radius: 30rpx;
	}

	.white-right-arrow {
		width: 16rpx;
		height: 16rpx;
		background: url(../.././static/common/white_right_arrow.png) no-repeat center center;
		background-size: 100%;
	}

	.gray-btn {
		padding: 6rpx 10rpx;
		background: #F1F1F1;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
</style>