<template>
	<view style="padding-top: 5px;">
		<view class="product-list" v-for="(item,index) in list" :key="item.defaultSpecsId">
			<view class="product-shop" v-if="showShop">
				{{item.supplierName||item.sellerName||item.platformName}}
			</view>
			<view class="product-content" :style="{paddingBottom: showAddress?'0':'30rpx'}">
				<view style="display: flex; align-items: center;" @click="onDetail(item)">
					<view class="left">
						<image v-if="item.imageUrl != undefined" class="image" mode="aspectFill"
							:src="item.imageUrl[0]">
						</image>
						<image v-else class="image" mode="aspectFill" src="/static/none.jpg"></image>
						<view class="type">{{item.deliveryWayName}}</view>
					</view>
					<view class="right">
						<view class="detail">
							<view class="name">{{item.name}}({{item.availableCount}}{{item.productVo.unit}})</view>
							<view class="text"
								style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis;">
								{{$t('index.card-num')}}：{{item.productVo.brandNumber }} |
								{{$t('index.factory')}}：{{item.productVo.manufacturer}} |
								{{$t('index.spec')}}：{{item.productVo.varieties}}
							</view>
						</view>

						<view class="btn-box" v-if="operate==true">
							<view class="price-view">
								<text class="price">{{item.priceStr | transformPrice}}</text>
								<text class="unit"
									v-if="item.priceStr !== '注册可见' && item.priceStr !== 'null'">{{$t('index.yuan')}}/{{item.productVo.unit}}</text>
							</view>
							<view class="operate">
								<view class="cart"
									:class="(item.availableCount > 0 && item.isInvalid == 'F' && item.priceStr && item.priceStr !== 'null') ? 'valid' : 'disabled'"
									@click.stop="addCart(item)">
									<image :src="web('icon_cart_add.png')" mode="aspectFit"></image>
								</view>
								<view class="buy"
									:class="(item.availableCount > 0 && item.isInvalid == 'F' && item.priceStr && item.priceStr !== 'null' ) ? 'valid' : 'disabled'"
									@click.stop="buyNow(item)">{{$t('index.buy-now')}}</view>
							</view>
						</view>
					</view>
				</view>

				<view class="product-address" v-if="showAddress ">
					<text>{{$t('index.delivery-from')}}：</text>
					<text style="color:#333;">{{ item.warehouseName}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 自营商城模块
	 * @description 标题栏
	 * @property {Array} list  商品集合
	 */
	import VueI18n from 'vue-i18n'
	import messages from '@/locale/index.js'
	import {
		web
	} from '@/utils/util.js'

	let i18nConfig = {
		locale: uni.getLocale(),
		messages
	}

	const i18n = new VueI18n(i18nConfig)
	export default {
		name: 'shopingMall',
		props: {
			list: {
				type: Array,
				default: []
			},
			operate: {
				type: Boolean,
				default: true
			},
			showShop: {
				type: Boolean,
				default: false
			},
			showAddress: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {}
		},
		filters: {
			transformPrice(str) {
				if (str == 'null' || str == undefined) {
					return i18n.t('index.price-expire')
				} else {
					let price = str.match(/^\d+(?:\.\d{0,2})?/, '')?.[0] || str // 两位小数
					return price.replace(/(?:\.0*|(\.\d+?)0+)$/, '$1') // 去除最后的0
				}
			}
		},
		watch: {

		},
		methods: {
			web(name) {
				return web(name)
			},
			addCart(item) {
				if (item.priceStr == 'null') return
				this.$emit('addCar', item)
			},
			buyNow(item) {
				if (item.priceStr == 'null') return
				this.$emit('buyNow', item)
			},
			onDetail(item) {
				uni.navigateTo({
					url: `/pages/product/index?id=${item.id}&platformType=${item.platformType}`
				});
				// this.mixinCheckLogin().then(()=> {
				// 	uni.navigateTo({
				// 		url: `/pages/product/index?id=${id}`
				// 	});
				// }).catch(()=> {
				// 	uni.navigateTo({
				// 		url: `/pages/login/index?url=${encodeURIComponent(JSON.stringify('/pages/home/index'))}`
				// 	});
				// })
			}
		}
	}
</script>
<style lang="scss">
	.product-list {
		margin-top: 30rpx;

		.product-shop {
			padding-left: 30rpx;
			color: #697077;
			height: 72rpx;
			line-height: 72rpx;
			background: #f7f9fa;
			margin-bottom: 20rpx;
		}

		.product-content {
			display: flex;
			flex-direction: column;
			background: #fff;
			padding: 15px 10px;

			.left {
				display: flex;
				position: relative;

				.image {
					width: 98px;
					height: 98px;
				}

				.type {
					position: absolute;
					top: 0;
					left: 0;
					height: 24px;
					width: 40px;
					text-align: center;
					background-color: #FFEEEE;
					font-size: 12px;
					color: #B60001;
					text-align: center;
					line-height: 24px;
				}
			}

			.right {
				padding-left: 12px;
				width: 430rpx;

				.detail {
					display: flex;
					flex-direction: column;
					height: 70px;

					.name {
						word-break: break-all;
						font-size: 30rpx;
						font-weight: 500;
						color: #222;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.text {
						font-size: 12px;
						color: #99A0AF;
						margin-top: 10rpx;
						word-break: break-all;
					}
				}
			}

			.btn-box {
				display: flex;
				align-items: center;
				height: 28px;
				position: relative;
				font-size: 28rpx;

				.price-view {
					display: flex;
					flex-grow: 1;

					.price {
						color: #B60001;
						font-size: 40rpx;
						line-height: 1;
					}

					.unit {
						color: #B60001;
						font-size: 12px;
						margin-left: 3px;
						white-space: nowrap;
					}
				}

				.operate {
					display: flex;

					.cart {
						width: 28px;
						height: 28px;
						line-height: 28px;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
						background: #FFEEEE;

						image {
							width: 20px;
							height: 20px;
						}

						&.valid {
							color: #F36E03;
						}

						&.disabled {
							color: #bcbec2;
						}
					}

					.buy {
						color: #fff;
						width: 80px;
						height: 28px;
						line-height: 28px;
						background: #B60001;
						text-align: center;
						margin-left: 10px;

						&.valid {
							color: #fff;
						}

						&.disabled {
							color: #bcbec2;
						}
					}
				}

			}

			.product-address {
				margin-top: 30rpx;
				height: 80rpx;
				line-height: 80rpx;
				color: #999;
				font-size: 26rpx;
				border-top: 1px solid #f2f2f2;
			}
		}
	}
</style>