<template>
	<view>
		<view class="wanl-product">
			<view class="product_warter" :class="dataStyle"
				v-if="isWaterfall">
				<mall-waterfall :flowList="dataList" :addTime="180">
					<template v-slot:left="{ leftList }">
						<view class="warter left" v-for="(item, index) in leftList" :key="index"
							@tap="handleGoods(item.id)">
							<view class="img-wrap">
								<image class="image" :src="item.image" mode="widthFix"></image>
							</view>
							<view class="content padding-bj">
								<view class="text-cut-2">
									<block v-if="item.shop && item.shop.isself == 1">
										<view class="cu-tag radius sm bg-red">{{ $t('mall.product.selfOperated') }}</view>
									</block>
									<block v-else-if="item.shop">
										<view class="cu-tag radius sm bg-gray" v-if="item.shop.state == 0">{{ $t('mall.product.personal') }}</view>
										<view class="cu-tag radius sm wanl-bg-blue" v-else-if="item.shop.state == 1">{{ $t('mall.product.enterprise') }}</view>
										<view class="cu-tag radius sm wanl-bg-orange" v-else-if="item.shop.state == 2">{{ $t('mall.product.flagship') }}</view>
									</block>
									<text class="margin-left-xs">{{ item.title }}</text>
								</view>
								<view class="goods-tag">
									<view class="cu-tag radius sm line-red" v-if="item.shop && item.shop.isself == 1">{{ $t('mall.product.officialGuarantee') }}</view>
									<view class="cu-tag radius sm line-gray" v-if="item.isLive">{{ $t('mall.product.live') }}</view>
								</view>
								<view class="flex align-center justify-between">
									<view class="text-red text-bold text-lg">
										<text class="text-price">{{ item.price }}</text>
									</view>
									<view class="text-sm wanl-gray">
										<text>{{ formatCount(item.comment) }} {{ $t('mall.product.comments') }}</text>
									</view>
								</view>
							</view>
						</view>
					</template>
					<template v-slot:right="{ rightList }">
						<view class="warter right" v-for="(item, index) in rightList" :key="index"
							@tap="handleGoods(item.id)">
							<view class="img-wrap">
								<image class="image" :src="item.image" mode="widthFix"></image>
							</view>
							<view class="content padding-bj">
								<view class="text-cut-2">
									<block v-if="item.shop && item.shop.isself == 1">
										<view class="cu-tag radius sm margin-right-xs bg-red">{{ $t('mall.product.selfOperated') }}</view>
									</block>
									<block v-else-if="item.shop">
										<view class="cu-tag radius sm margin-right-xs bg-gray" v-if="item.shop.state == 0">{{ $t('mall.product.personal') }}</view>
										<view class="cu-tag radius sm margin-right-xs wanl-bg-blue" v-else-if="item.shop.state == 1">{{ $t('mall.product.enterprise') }}</view>
										<view class="cu-tag radius sm margin-right-xs wanl-bg-orange" v-else-if="item.shop.state == 2">{{ $t('mall.product.flagship') }}</view>
									</block>
									<text>{{ item.title }}</text>
								</view>
								<view class="goods-tag">
									<view class="cu-tag radius sm line-red" v-if="item.shop && item.shop.isself == 1">{{ $t('mall.product.officialGuarantee') }}</view>
									<view class="cu-tag radius sm line-gray" v-if="item.isLive">{{ $t('mall.product.live') }}</view>
								</view>
								<view class="flex align-center justify-between">
									<view class="text-red text-bold text-lg">
										<text class="text-price">{{ item.price }}</text>
									</view>
									<view class="text-sm wanl-gray">
										<text>{{ formatCount(item.comment) }} {{ $t('mall.product.comments') }}</text>
									</view>
								</view>
							</view>
						</view>
					</template>
				</mall-waterfall>
			</view>
			<view class="product_list" :class="dataStyle" v-else>
				<view class="item" v-for="(item, index) in dataList" :key="index" @tap="handleGoods(item.id)">
					<view class="img-wrap">
						<image :src="item.image" mode="aspectFill"></image>
					</view>
					<view class="content padding-sm">
						<view>
							<view class="text-cut-2">
								<block v-if="item.shop && item.shop.isself == 1">
									<view class="cu-tag radius margin-right-xs sm bg-red">{{ $t('mall.product.selfOperated') }}</view>
								</block>
								<block v-else-if="item.shop">
									<view class="cu-tag radius sm margin-right-xs bg-gray" v-if="item.shop.state == 0">{{ $t('mall.product.personal') }}</view>
									<view class="cu-tag radius sm margin-right-xs wanl-bg-blue" v-else-if="item.shop.state == 1">{{ $t('mall.product.enterprise') }}</view>
									<view class="cu-tag radius sm margin-right-xs wanl-bg-orange" v-else-if="item.shop.state == 2">{{ $t('mall.product.flagship') }}</view>
								</block>
								<text>{{ item.title }}</text>
							</view>
							<view class="goods-tag">
								<view class="cu-tag radius sm line-red" v-if="item.shop && item.shop.isself == 1">{{ $t('mall.product.officialGuarantee') }}</view>
								<view class="cu-tag radius sm line-gray" v-if="item.isLive">{{ $t('mall.product.live') }}</view>
							</view>
						</view>
						<view class="flex align-center justify-between">
							<view class="text-red text-bold text-lg">
								<text class="text-price">{{ item.price }}</text>
							</view>
							<view class="text-sm wanl-gray">
								<text class="margin-right">{{ formatCount(item.comment) }} {{ $t('mall.product.comments') }}</text>
								<text>{{ item.comment > 0 ? parseInt((item.praise / item.comment) * 100) : 0 }}% {{ $t('mall.product.positiveRate') }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'mall-product',
	props: {
		dataList: {
			type: Array,
			required: true,
			default: () => []
		},
		dataStyle: {
			type: String,
			default: 'col-2-20'
		}
	},
	computed: {
		isWaterfall() {
			return ['col-2-10', 'col-2-15', 'col-2-20', 'col-2-25', 'col-2-30'].includes(this.dataStyle)
		}
	},
	methods: {
		handleGoods(id) {
			uni.navigateTo({ url: `/pages/product/goods?id=${id}` })
		},
		formatCount(num) {
			if (!num) return 0
			num = Number(num)
			if (num >= 10000) return (num / 10000).toFixed(1) + 'w'
			if (num >= 1000) return (num / 1000).toFixed(1) + 'k'
			return num
		}
	}
}
</script>

<style lang="scss" scoped>
.wanl-product .content > view { width: 100%; }
.wanl-product .content .goods-tag { margin-top: 4rpx; margin-bottom: 10rpx; }
.wanl-product .product_list { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.wanl-product .product_list .item { border-radius: 16rpx; background-color: #fff; overflow: hidden; }
.wanl-product .product_list .item .img-wrap,
.wanl-product .product_list .item image { height: 250rpx; width: 250rpx; }
.wanl-product .product_warter .warter { border-radius: 16rpx !important; background-color: #ffffff; overflow: hidden; }
.wanl-product .product_warter .warter .image { border-radius: 16rpx 16rpx 0 0 !important; width: 100%; overflow: hidden; }
.wanl-product .product_warter .warter .img-wrap { margin-bottom: -4px; }
.padding-bj { padding: 24rpx; }
.padding-sm { padding: 16rpx; }
.text-cut-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; }
.cu-tag { font-size: 20rpx; padding: 2rpx 10rpx; border-radius: 6rpx; display: inline-block; vertical-align: middle; color: #fff; line-height: 1.6; }
.cu-tag.radius { border-radius: 6rpx; }
.cu-tag.sm { font-size: 18rpx; padding: 1rpx 8rpx; }
.bg-red { background-color: #e54d42; }
.bg-gray { background-color: #999; }
.wanl-bg-blue { background-color: #0081ff; }
.wanl-bg-orange { background-color: #f37b1d; }
.line-red { border: 1rpx solid #e54d42; color: #e54d42; background: transparent; }
.line-gray { border: 1rpx solid #999; color: #999; background: transparent; }
.text-red { color: #e54d42; }
.text-bold { font-weight: bold; }
.text-lg { font-size: 32rpx; }
.text-sm { font-size: 24rpx; }
.text-price::before { content: '¥'; font-size: 24rpx; }
.wanl-gray { color: #999; }
.margin-left-xs { margin-left: 8rpx; }
.margin-right-xs { margin-right: 8rpx; }
.margin-right { margin-right: 12rpx; }
.flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.wanl-product .product_warter.col-2-10 { margin: 0 10rpx; padding-top: 10rpx; }
.wanl-product .product_warter.col-2-10 .warter { margin-bottom: 10rpx; }
.wanl-product .product_warter.col-2-10 .warter.right { margin-left: 5rpx; }
.wanl-product .product_warter.col-2-10 .warter.left { margin-right: 5rpx; }
.wanl-product .product_warter.col-2-15 { margin: 0 15rpx; padding-top: 15rpx; }
.wanl-product .product_warter.col-2-15 .warter { margin-bottom: 15rpx; }
.wanl-product .product_warter.col-2-15 .warter.right { margin-left: 7.5rpx; }
.wanl-product .product_warter.col-2-15 .warter.left { margin-right: 7.5rpx; }
.wanl-product .product_warter.col-2-20 { margin: 0 20rpx; padding-top: 20rpx; }
.wanl-product .product_warter.col-2-20 .warter { margin-bottom: 20rpx; }
.wanl-product .product_warter.col-2-20 .warter.right { margin-left: 10rpx; }
.wanl-product .product_warter.col-2-20 .warter.left { margin-right: 10rpx; }
.wanl-product .product_warter.col-2-25 { margin: 0 25rpx; padding-top: 25rpx; }
.wanl-product .product_warter.col-2-25 .warter { margin-bottom: 25rpx; }
.wanl-product .product_warter.col-2-25 .warter.right { margin-left: 12.5rpx; }
.wanl-product .product_warter.col-2-25 .warter.left { margin-right: 12.5rpx; }
.wanl-product .product_warter.col-2-30 { margin: 0 30rpx; padding-top: 30rpx; }
.wanl-product .product_warter.col-2-30 .warter { margin-bottom: 30rpx; }
.wanl-product .product_warter.col-2-30 .warter.right { margin-left: 15rpx; }
.wanl-product .product_warter.col-2-30 .warter.left { margin-right: 15rpx; }
.wanl-product .product_list[class*='col-2-'] .item image,
.wanl-product .product_list[class*='col-2-'] .item .img-wrap { width: 100%; height: 400rpx; }
.wanl-product .product_list[class*='col-2-'] .content { height: 200rpx; }
.wanl-product .product_list.col-2-10 { margin: 0 10rpx; padding-top: 10rpx; }
.wanl-product .product_list.col-2-10 .item { width: calc((100% - 10rpx) / 2); margin-bottom: 10rpx; }
.wanl-product .product_list.col-2-15 { margin: 0 15rpx; padding-top: 15rpx; }
.wanl-product .product_list.col-2-15 .item { width: calc((100% - 15rpx) / 2); margin-bottom: 15rpx; }
.wanl-product .product_list.col-2-20 { margin: 0 20rpx; padding-top: 20rpx; }
.wanl-product .product_list.col-2-20 .item { width: calc((100% - 20rpx) / 2); margin-bottom: 20rpx; }
.wanl-product .product_list.col-2-25 { margin: 0 25rpx; padding-top: 25rpx; }
.wanl-product .product_list.col-2-25 .item { width: calc((100% - 25rpx) / 2); margin-bottom: 25rpx; }
.wanl-product .product_list.col-2-30 { margin: 0 30rpx; padding-top: 30rpx; }
.wanl-product .product_list.col-2-30 .item { width: calc((100% - 30rpx) / 2); margin-bottom: 30rpx; }
.wanl-product .product_list.col-1-10 { margin: 0 10rpx; padding-top: 10rpx; }
.wanl-product .product_list.col-1-10 .item { display: flex; width: 100%; margin-bottom: 10rpx; }
.wanl-product .product_list.col-1-15 { margin: 0 15rpx; padding-top: 15rpx; }
.wanl-product .product_list.col-1-15 .item { display: flex; width: 100%; margin-bottom: 15rpx; }
.wanl-product .product_list.col-1-20 { margin: 0 20rpx; padding-top: 20rpx; }
.wanl-product .product_list.col-1-20 .item { display: flex; width: 100%; margin-bottom: 20rpx; }
.wanl-product .product_list.col-1-25 { margin: 0 25rpx; padding-top: 25rpx; }
.wanl-product .product_list.col-1-25 .item { display: flex; width: 100%; margin-bottom: 25rpx; }
.wanl-product .product_list.col-1-30 { margin: 0 30rpx; padding-top: 30rpx; }
.wanl-product .product_list.col-1-30 .item { display: flex; width: 100%; margin-bottom: 30rpx; }
</style>