<template>
	<view class="item bg-fff border-r-12">
		<view class="u-flex u-text-left u-row-between border-bottom u-p-b-30">
			<view class="">
				<uni-dateformat format="yyyy-MM-dd hh:mm:ss" :date="data.createTime"></uni-dateformat>
			</view>
			<view class="tag">{{$dict.getDiceName(data.inOutItem,'invoicingType')}}</view>
		</view>
		<view class="u-flex u-text-left u-row-left u-m-t-30">
			<view class="name up-line-1">{{data.productName}}</view>
			<view class="id color-999 u-font-24 bg-gray u-m-l-10"> ID:{{data.id}} </view>
		</view>
		<view class="info u-flex bg-gray u-p-24 u-m-t-20 u-row-between">
			<view class="u-text-right">
			
				<view class="u-flex">
					<view class="text-ming-w">订单号</view>
					<text class="u-m-l-10 u-font-24 color-main">{{data.orderNo||''}}</text>
				</view>
				<view class="u-m-t-10 u-flex u-relative">
					<view class="text-ming-w">库存</view>
					<view class="u-relative">
						<text class="u-m-l-10">{{data.beforeNumber}}</text>
						<view class="u-absolute u-flex addNumber">
							<uni-icons type="arrow-right" :color="$utils.ColorMain" size="16"></uni-icons>
							<text class="color-main u-m-l-10">{{data.afterNumber}}</text>
						</view>
					</view>
				</view>
				<view class="u-m-t-10 u-flex">
					<view class="text-ming-w">剩余库存</view>
					<view class="u-m-l-10 color-main">{{data.afterNumber}}{{data.unitName}}</view>
				</view>
				<view class="u-m-t-10 u-flex" v-if="data.remark" style="align-items: flex-start;">
					<view class="text-ming-w">备注</view>
					<view class="u-m-l-10" style="text-align: left;">{{data.remark}}</view>
				</view>
			</view>
			<view class="u-flex-1 u-flex u-row-right">
				<view>
					<view class="no-wrap">
						<text class="color-main font-bold" v-if="data.inOutNumber > 0">{{data.inOutNumber}}</text>
						<text class="color-red font-bold" v-else>{{data.inOutNumber}}</text>
						<text>{{data.unitName}}</text>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive } from 'vue';

	const props = defineProps({
		data: {
			type: Object,
			default: () => {
				return {}
			}
		}
	})
	
	
	
</script>

<style lang="scss" scoped>
	.text-ming-w{
		min-width: calc(28rpx * 5);
	}
	.item {
		padding: 32rpx 32rpx 28rpx 28rpx;

		.tag {
			color: $my-main-color;
			background-color: rgb(234, 244, 255);
			border-radius: 8rpx;
			padding: 2rpx 10rpx;
			font-size: 24rpx;
		}

		.id {
			padding: 2rpx 10rpx;
			border-radius: 8rpx;
		}

		.info {}
	}

	.addNumber {
		position: absolute;
		left: 100%;
		top: 50%;
		padding-left: 20rpx;
		transform: translateY(-50%);
	}
</style>