<template>
	<view @click="$emit('click')" class="item" :style="{'height': height + 'rpx'}">
		<image src="/static/logo.png" class="br-20 mr-20" :style="{'width': width + 'rpx', 'height': height + 'rpx'}">
		</image>
		<view class="item-right">
			<view>
				<view style="color: #333;">{{ $wskj.ellipsisText(title, 30) }}</view>
				<view class="fs-24 mt-16 flex-between-center" style="color: #999999;">
					<text>{{ sku }}</text>
					<text v-if="styleType == 2">×1</text>
				</view>
			</view>
			<view class="flex-between-center">
				<text :style="{'color': priceColor}" class="fs-24">¥<text class="fw-600 fs-32">{{ price }}</text></text>
				<view v-if="styleType == 1" class="fs-24" style="color: #999999;">数量：{{ number }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * goods 商品信息组件
	 * @property {String}			src 		图片地址
	 * @property {String}			width 		图片宽度单位rpx
	 * @property {String}			height 		图片高度单位rpx
	 * @property {Boolean}			title 		商品标题
	 * @property {Boolean}			sku 		商品sku
	 * @property {Boolean}			price		商品价格
	 * @property {Boolean}			number		商品数量
	 * @property {String}			styleType	样式，数量是否显示
	 * @property {String}			priceColor	价格文字的颜色
	 */
	export default {
		props: {
			src: {
				type: String,
				default: '/static/logo.png'
			},
			width: {
				type: String,
				default: '180'
			},
			height: {
				type: String,
				default: '180'
			},
			title: {
				type: String,
				default: '太空小伙子'
			},
			sku: {
				type: String,
				default: 'M，菁纯版'
			},
			price: {
				type: String | Number,
				default: '999.00'
			},
			priceColor: {
				type: String,
				default: '#FF3D00'
			},
			number: {
				type: String | Number,
				default: 1
			},
			styleType: { // UI样式  1
				type: String | Number,
				default: 1
			},
		},
		data() {
			return {

			}
		},
		created() {

		}
	}
</script>

<style scoped>
	.item {
		display: flex;
		align-items: center;
	}

	.item-right {
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
</style>