<!--
 * @Author: ch
 * @Date: 2022-05-13 15:57:31
 * @LastEditors: ch
 * @LastEditTime: 2022-05-14 13:47:05
 * @Description: file content
-->
<template>
	<view class="product" @click="handleDetail">
		<image class="product--img" :src="goodsInfo.productImageUrl" mode="aspectFit"/>
		<view class="product--con">
			<view class="product--con-title">{{goodsInfo.name}}</view>
			<UiMoney class="product--con-price" :money="goodsInfo.startingPrice" float prefix suffix></UiMoney>
		</view>
		<template v-if="position === 'footer'">
			<UiButton class="product--btn" size="min" type="gradual" @click="send">发送商品</UiButton>
			<image class="product--close" src="@/static/imxx/close.png" @click="close"/>
		</template>
	</view>
</template>
<script>
import UiButton from '../../../../../components/UiButton.vue'
import UiMoney from '../../../../../components/UiMoney.vue'
export default {
	components: { UiMoney, UiButton },
	props : {
		goodsInfo : {
			type : Object,
			default : ()=>({})
		},
		// 显示位置 footer 底部 msg消息框
		position : {
			type : String,
			default : 'footer'
		}
	},
	methods : {
		send(){
			this.$emit('send');
		},
		close(){
			this.$emit('close');
		},
		handleDetail(){
			this.$emit('click')
		}
	}
}
</script>
<style lang="scss" scoped>
.product { 
	display: flex;
	background: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	position: relative;
	&--img{
		width: 140rpx;
		height: 140rpx;
	}
	&--con{
		width: 300rpx;
		margin-left: 30rpx;
		&-title{
			font-size: 28rpx;
			line-height: 36rpx;
			@include ellipses(2);
		}
		&-price{
			margin-top: 36rpx;
		}
	}
	&--btn{
		width: 160rpx;
		padding : 0;
		position: absolute;
		right: 30rpx;
		bottom: 30rpx;
	}
	&--close{
		width: 24rpx;
		height: 24rpx;
		position: absolute;
		top: 30rpx;
		right:30rpx;
	}
}
/deep/{
	.product--con-price{
		text{
			color: #FF512B;
			font-size: 24rpx;
		}
		.ui-money--price{
			font-size: 32rpx;
		}
		
	}
}
</style>