<template>
	<view class="content" :style="{'--padding':index == 0?'56rpx':'20rpx'}">
		<image v-if="index == 0" class="First-Img" src="https://img.agrimedia.cn/chwl/v2/20220909-164805.png" mode="">
		</image>
		<view class="shop-box" @click="goShop">
			<view class="flex flex-space-between">
				<view class="flex">
					<view class="">
						<u-image :src="goodsInfo.store_img" radius="10rpx" width="200rpx" height="200rpx"></u-image>
					</view>
					<view v-if="dataType == 0" class="" style="margin-left: 20rpx;">
						<u-text size="30rpx" :bold="true" :text="goodsInfo.store_name" :lines="1"></u-text>
						<u-text size="22rpx" color="#999"
							:text="(goodsInfo.goods_sales == null?0:goodsInfo.goods_sales) + '销量'"></u-text>
						<view class="">
							<u-gap height="20rpx"></u-gap>
							<view class="flex" v-for="(item1,index1) in goodsInfo.goods" :key="index1">
								<view class="">
									<u-text lineHeight="40rpx" :bold="true" size="30rpx" color="#FF4D03"
										:text="'¥'+item1.price/100"></u-text>
								</view>

								<view class="" style="margin:  10rpx;">
									<u-text lineHeight="40rpx" decoration="line-through" size="22rpx" color="#999"
										:text="'¥'+item1.originalPrice/100"></u-text>
								</view>
								<view class="">
									<u-text lineHeight="40rpx" lines="1" size="30rpx" :text="item1.goodsTitle"></u-text>
								</view>
							</view>

						</view>
						<!-- <view class="">
							<text class="check-shop" @click="goShop">查看店铺</text>
						</view> -->
					</view>
					<view v-if="dataType == 1" class="" style="margin-left: 20rpx;">
						<u-text size="30rpx" :bold="true" :text="goodsInfo.goodsTitle" :lines="1"></u-text>
						<u-gap height="10rpx"></u-gap>
						<view v-if="active == 0" class="flex flex-space-between">
							<view class="" style="width: 100%;">
								<!-- <u-line-progress  height="18rpx" activeColor="#F14E10" inactiveColor="#FE8D3D"  :percentage="70" :showText="true">
								</u-line-progress> -->
								<u-gap height="10rpx"></u-gap>
								<progress backgroundColor="#FE8D3D" activeColor="#F14E10"
									:percent="goodsInfo.sales_num/goodsInfo.num" border-radius="40rpx" font-size="20rpx"
									active stroke-width="3" />
							</view>
							<view class="flex" style="width: 180rpx;">
								<view class="">
									<u-text size="20rpx" text="已抢%"></u-text>
								</view>
								<u-count-to fontSize="20rpx" :startVal="0" :endVal="goodsInfo.sales_num/goodsInfo.num">
								</u-count-to>
							</view>
						</view>
						<view v-else class="flex flex-space-between">
							<u-gap height="26rpx"></u-gap>
						</view>
						<!-- <u-line-progress  height="18rpx" activeColor="#F14E10" inactiveColor="#FE8D3D"  :percentage="20" :showText="true">
							<view class="" solt="default" style="font-size: 18rpx;line-height: 18rpx;">
								已抢20%
							</view>
						</u-line-progress> -->
						<u-text size="22rpx" lines="1" color="#999" :text="goodsInfo.address"></u-text>
						<u-gap height="10"></u-gap>
						<view class="">
							<view class="flex">
								<view class="">
									<u-text lineHeight="40rpx" color="#FE2825" size="30rpx" text="秒杀价"></u-text>
								</view>
								<view class="">
									<u-text lineHeight="40rpx" :bold="true" size="36rpx" color="#FF4D03"
										:text="'¥'+goodsInfo.seckill_price/100"></u-text>
								</view>
							</view>

						</view>
						<view class="">
							<u-text lineHeight="40rpx" size="24rpx" color="#666666" :text="'即将恢复￥'+goodsInfo.price/100"></u-text>
						</view>
					</view>
				</view>
				<view v-if="dataType == 0">

					<u-text align="center" size="22rpx" color="#999" :text="goodsInfo.distance + 'km'"></u-text>
				</view>
				<view v-if="dataType== 1" class="" style="min-width: 130rpx;">
					<u-gap height="44rpx"></u-gap>
					<u-text align="center" size="22rpx" color="#999"
						:text="active==0?'已抢'+ goodsInfo.sales_num +'件':' '"></u-text>
					<u-text align="center" size="22rpx" color="#999"
						:text="(goodsInfo.distance > 999?'999+':goodsInfo.distance)+'km'"></u-text>
					<u-gap height="60rpx"></u-gap>
					<view style="text-align: center;">
						<text @click.stop="goGoodsinfo(goodsInfo.goods_id)" v-if="active == 0"
							style="margin: 0 auto;color:#ffffff;text-align: center;padding: 0 20rpx;border-radius: 20rpx;font-size: 24rpx;background-color: #FF7B2D;">抢购</text>
						<view class="begin" v-else>
							<image class="begin_image" src="../../static/image/begin.png"></image>
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "goods-item",
		props: {
			index: {
				type: Number,
				default: 0
			},
			dataType: {
				type: Number,
				default: 0
			},
			active: {
				type: Number,
				default: 0
			},
			goodsInfo: {
				type: Object,
				default: {
					store_img: '',
					store_name: '',
					goods_sales: 0,
					goods: [],
					goodsTitle: '',
					sales_num: 0,
					num: 0,
					address: '',
					seckill_price: 0,
					price: 0,
					distance: '',
					goods_id: 0
				}
			}
		},
		data() {
			return {

			};
		},
		methods: {
			goGoodsinfo(item_id) {
				uni.navigateTo({
					url: '../../pages/goodsInfo/goodsInfo?goods_id=' + item_id
				})

			},
			goShop() {
				uni.navigateTo({
					url: '/pages/shop/shop?store_id=' + this.goodsInfo.store_id
				})
			}
		}
	}
</script>

<style lang="scss">
	.check-shop {
		background-color: #FF4D02;
		color: #FFFFFF;
		font-size: 24rpx;
		padding: 4rpx 20rpx;
		border-radius: 20rpx;
	}

	.content {
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: var(--padding) 20rpx 20rpx 20rpx;
		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
		margin-bottom: 20rpx;
		position: relative;
	}

	.First-Img {
		width: 322rpx;
		height: 86rpx;
		position: absolute;
		top: -30rpx;
		left: 50%;
		transform: translateX(-50%);

		&::after {
			content: '';
			position: absolute;
			right: 0;
			top: 8rpx;
			width: 0;
			height: 0;
			border-left: 28rpx solid transparent;
			border-right: 10rpx solid transparent;
			border-bottom: 21rpx solid #DD6409;
		    z-index: -1;
		}
		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 8rpx;
			width: 0;
			height: 0;
			border-left: 12rpx solid transparent;
			border-right: 10rpx solid transparent;
			border-bottom: 21rpx solid #DD6409;
			z-index: -1;
		}
	}
	.begin_image {
		width: 184rpx;
		height: 54rpx;
	}
</style>
