<template>
	<view class="recoder-item bg-fff default-box-padding border-r-18">
		<view class="u-flex u-row-between">
			<view class="u-flex user-head-img">
				<image lazy-load src="@/static/uni.png" class="user-head-img" mode=""></image>
			</view>
			<view class="u-flex-1 u-flex u-row-between u-p-l-24">
				<view class="color-666">13416472917</view>
				<view class="u-font-32 font-bold">
					<text class="color-999">已过期</text>
				</view>
			</view>
		</view>
		
		<view class="u-m-t-24 goods border-bottom u-p-b-24">
			<view class="u-flex bg-gray u-p-10 border-r-12">
				<view class="u-flex goods-img">
					<image lazy-load src="@/static/uni.png" class="goods-img" mode=""></image>
				</view>
				<view class="u-flex-1  u-p-l-24">
					<view class="font-bold">言力经典330ml</view>
					<view class="color-999 u-m-t-16">剩余：9瓶</view>
				</view>
			</view>
		
		</view>
		
		<view class="u-m-t-24">
			<view class="u-flex">
				<text class="color-999">取酒码</text>
				<text class="font-bold u-m-l-24">3920240529160807875</text>
			</view>
			<view class="u-flex u-m-t-16">
				<text class="color-999">到期时间</text>
				<text class="font-bold u-m-l-24">2024-06-18 16:08:07</text>
			</view>
			<view class="u-flex u-m-t-16">
				<text class="color-999">最新记录</text>
				<text class="font-bold u-m-l-24">取出1瓶，还剩下9瓶</text>
			</view>
		</view>
		<view class="u-flex u-row-right u-m-t-24">
			<view class="u-m-r-30">
				<my-button shape="circle" plain width="160" height="60" type="cancel"><view>取酒</view></my-button>
			</view>
			<my-button shape="circle" width="180" height="60"><view>查看详情</view></my-button>
		</view>
	</view>
	
	
</template>

<script setup>
	import myButton from '@/components/my-components/my-button'
	import go from '@/commons/utils/go.js'
	function toDetail(){
		go.to('PAGES_STORING_WINE_RECORD_DETAIL',{id:1})
	}
</script>

<style lang="scss">
	.border-bottom{
		border-color: rgb(245, 245, 245);
	}
	$head-img-size:80rpx;
	.recoder-item {
		margin-bottom: 32rpx;

		.user-head-img {
			width: $head-img-size;
			height: $head-img-size;
			background-color: rgb(204, 204, 204);
			border-radius: 8rpx;
			overflow: hidden;
		}
		.goods{
			padding-left: calc( $head-img-size + 24rpx);
			.goods-img{
				width: 100rpx;
				height: 100rpx;
				background-color: rgb(204, 204, 204);
				border-radius: 8rpx;
				overflow: hidden;
			}
		}
		
	}
</style>