<template>
	<view>
		<view class="font-bold color-333">2024-07-24 14:23:09</view>
		<view class="item bg-fff border-r-12 u-m-t-20">

			<view class="u-flex  u-text-left  border-bottom u-p-b-30">
				<view class="">手动出库</view>
				<view class="u-m-l-10 u-m-r-10">|</view>
				<view class="">东风</view>
			</view>
			<view class="u-flex u-text-left u-row-left u-m-t-30">
				<view class="name">名称</view>
				<view class="category u-flex u-m-l-10">
					<view class="tag">分类</view>
				</view>
				<view class="id color-999 u-font-24 bg-gray u-m-l-10">
					ID:1234
				</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="title-min-width">使用量</view>
						<text class="u-m-l-10 color-red">12</text>
					</view>
					<view class="u-m-t-10 u-flex">
						<view class="title-min-width">成本</view>
						<text class="u-m-l-10">1.00元</text>
					</view>
					<!-- <view class="u-m-t-10 u-relative">
						<text>库存</text>
						<text class="u-m-l-10">2</text>
						<view class="u-absolute u-flex addNumber" >
							<uni-icons type="arrow-right" :color="color.ColorMain" size="16"></uni-icons>
							<text class="color-main u-m-l-10">3</text>
						</view>
					</view> -->
					<view class="u-m-t-10 u-flex">
						<view class="title-min-width">剩余库存</view>
						<text class="u-m-l-10 color-main">2</text>
					</view>
				</view>
				<view class="u-flex-1 u-flex u-row-right">
					<view>
						<!-- <view class="color-main font-bold">+22</view> -->
						<!-- <view class="u-m-t-10">剩余库存</view> -->
					</view>

				</view>
			</view>

			<view class="info u-flex bg-gray u-p-24 u-m-t-20 u-row-between" v-if="state.showRemark">
				<view class="u-flex u-text-right">
					<view class="title-min-width">出库备注</view>
					<text class="u-m-l-10 color-999">2</text>
				</view>
			</view>

			<view class="u-flex u-m-t-24 u-row-center" >
				<view class="u-flex" @tap="toggleRemark">
					<view class="u-m-r-10 color-666">手动出库明细</view>
					<view class="icon-down tranistion-1" :class="{'icon-up':state.showRemark}">
						<uni-icons type="right" size="16" color="#666"></uni-icons>
					</view>
				</view>
				
			</view>
			<view class="u-flex u-row-right u-m-t-20">
				<view class="u-flex u-m-r-30">
					<my-button shape="circle" height="70" type="default" @tap="retract">
						撤回操作
					</my-button>
				</view>
				<!-- <view class="u-flex">
					<my-button shape="circle" height="70" plain type="primary" @tap="more">更多操作</my-button>
				</view> -->
			</view>
		</view>
	</view>

</template>

<script setup>
	import myButton from '@/components/my-components/my-button';
	import go from '@/commons/utils/go.js'
	import color from '@/commons/color.js'
	import {
		reactive
	} from 'vue';

	function retract() {
		console.log('retract');
		uni.showModal({
			title: '提示',
			content: '确定撤回此该出库?撤回后，将恢复改动前的数量',
			success: function (res) {
				if (res.confirm) {
					console.log('用户点击确定');
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}
	const props = defineProps({
		index: {
			type: Number
		},
		data: {
			type: Object,
			default: () => {
				return {}
			}
		}
	})
	const emits = defineEmits(['more'])

	function more() {
		emits('more', props.index)
	}

	let state = reactive({
		showRemark:false
	})
	function toggleRemark(){
		state.showRemark=!state.showRemark
	}
</script>

<style lang="scss">
	.item {
		padding: 32rpx 32rpx 28rpx 28rpx;

		.title-min-width {
			min-width: 132rpx;
		}

		.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%);
	}

	.icon-down {
		transform: rotate(90deg);
	}
	.icon-up{
		transform: rotate(-90deg);
	}
</style>