<template>
	<view class="bg-[#ffffff] min-h-[100vh]" :style="themeColor()">
		<view class="m-[30rpx]">
			<view class="bg-[#ffffff] rounded-10rpx">
				<view class="head border-0 border-b-1 border-solid border-[#ddd]">
					<view class="flex justify-between p-[20rpx]">
						<view class="u-body-item-title u-line-2">{{t('code')}}:{{formData.code}}</view>
						<view>
							<up-tag v-if="formData.storage_status == 5" :text="formData.storage_status_text" plain size="mini"></up-tag>
							<up-tag v-if="formData.storage_status == 6" :text="formData.storage_status_text" type="success" plain
								size="mini"></up-tag>
						</view>
					</view>
				</view>
				<view class="body">
					<view class="flex justify-start flex-col p-[20rpx]">
						<view class="flex justify-start mb-[18rpx] text-[12px] text-[#6a6a6a]">
							{{ t('customerId') }}:<text
								class="ml-[20rpx] text-[var(--primary-color)]">{{formData.customer?.name}}</text>
						</view>
						<view class="flex justify-start mb-[18rpx] text-[12px] text-[#6a6a6a]">
							{{ t('contact') }}:<text
								class="ml-[20rpx] text-[var(--primary-color)]">{{formData.contact}}</text>
						</view>

						<view class="flex justify-start mb-[18rpx] text-[12px] text-[#6a6a6a]">
							{{ t('phone') }}:<text
								class="ml-[20rpx] text-[var(--primary-color)]">{{formData.phone}}</text>
						</view>

						<view class="flex justify-start items-center mb-[18rpx] text-[12px] text-[#6a6a6a]">
							{{ t('address') }}:<text
								class="ml-[20rpx] text-[var(--primary-color)]">{{formData.address}}</text>
						</view>
						<view class="flex justify-start items-center mb-[18rpx] text-[12px] text-[#6a6a6a]">
							{{ t('type') }}:<text
								class="ml-[20rpx] text-[var(--primary-color)]">{{formData.type}}</text>
						</view>
						<view class="flex justify-start items-center mb-[18rpx] text-[12px] text-[#6a6a6a]">
							{{ '送货日期' }}:<text
								class="ml-[20rpx] text-[var(--primary-color)]">{{formData.delivery_time}}</text>
						</view>
						<view class="flex justify-start items-center mb-[18rpx] text-[12px] text-[#6a6a6a]">
							{{ t('billingTime') }}:<text
								class="ml-[20rpx] text-[var(--primary-color)]">{{formData.billing_time}}</text>
						</view>
						<view class="flex justify-start items-center mb-[18rpx] text-[12px] text-[#6a6a6a]">
							{{ t('remark') }}:<text
								class="ml-[20rpx] text-[var(--primary-color)]">{{formData.remark}}</text>
						</view>
						<view class="flex justify-start mb-[18rpx] text-[12px] text-[#6a6a6a]">
							{{ '申领人' }}:<text
								class="ml-[20rpx] text-[var(--primary-color)]">{{formData.enter_name }}</text>
						</view>
						<view class="flex justify-start mb-[18rpx] text-[12px] text-[#6a6a6a]">
							{{ '出库人' }}:<text
								class="ml-[20rpx] text-[var(--primary-color)]">{{formData.store_name}}</text>
						</view>
						<view class="flex justify-start mb-[18rpx] text-[12px] text-[#6a6a6a]">
							{{ t('updateTime') }}:<text
								class="ml-[20rpx] text-[var(--primary-color)]">{{formData.update_time}}</text>
						</view>

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

			<view class="bg-[#ffffff] rounded mt-[20rpx]">
				<view class="flex justify-between py-[10rpx] px-[20rpx] box-border border-0 border-b-1 border-color-[#dadbde] border-solid
				">
					<view class="text-base font-bold">{{t('Product List')}}</view>
				</view>

				<view class="sidebar-margin mt-[20rpx] pb-[20rpx] body-bottom">
					<view class="mb-[15rpx]" v-for="(item, index) in formData.productList" :key="index">

						<view class="bg-[#ffffff] rounded-10rpx">
							<view class="head border-0 border-b-1 border-solid border-[#ddd]">
								<view class="flex justify-between p-[20rpx]">
									<view class="u-body-item-title u-line-2">{{item.product?.name}}</view>
								</view>
							</view>
							<view class="body">
								<view class="flex justify-start flex-col p-[20rpx]">
									<view class="flex justify-start mb-[18rpx] text-[12px] text-[#6a6a6a]">
										{{ t('productCode') }}:<text
											class="ml-[20rpx] text-[var(--primary-color)]">{{item.product?.code}}</text>
									</view>
									<view class="flex justify-start mb-[18rpx] text-[12px] text-[#6a6a6a]">
										{{ t('productSpec') }}:<text
											class="ml-[20rpx] text-[var(--primary-color)]">{{item.product?.spec}}</text>
									</view>
									<view class="flex justify-start mb-[18rpx] text-[12px] text-[#6a6a6a]">
										{{ t('productUnitId') }}:<text
											class="ml-[20rpx] text-[var(--primary-color)]">{{item.unit}}</text>
									</view>
									<view class="flex justify-start mb-[18rpx] text-[12px] text-[#6a6a6a]">
										批次号:
										<text class="ml-[20rpx] text-[var(--primary-color)]">{{item.batch_number}}</text>
									</view>
									<view class="flex justify-start mb-[18rpx] text-[12px] text-[#6a6a6a]">
										仓库名称:
										<text class="ml-[20rpx] text-[var(--primary-color)]">{{item.warehouse?.name}}</text>
									</view>
									<view class="flex justify-start mb-[18rpx] text-[12px] text-[#6a6a6a]">
										出库数量:
										<text class="ml-[20rpx] text-[var(--primary-color)]">{{item.num}}</text>
									</view>
									<view class="flex justify-start mb-[18rpx] text-[12px] text-[#6a6a6a]">
										单价(元):
										<text class="ml-[20rpx] text-[var(--primary-color)]">{{item.price}}</text>
									</view>
									<view class="flex justify-start mb-[18rpx] text-[12px] text-[#6a6a6a]">
										{{ t('totalPrice') }}:<text
											class="ml-[20rpx] text-[var(--primary-color)]">{{ item.subtotal }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bg-[#ffffff]">
				<view class="head border-0 border-b-1 border-solid border-[#ddd]">
					图片
				</view>
				<view :class="formData.storage_status == 5 ?'pb-[120rpx]':''" v-if="imageArr.length >0">
					<view class="img-p">
						<up-image :show-loading="true" v-for="(imgItem,imgIndex) in imageArr" :key="imgIndex"  :src="img(imgItem)" style="margin: 6rpx;" width="100rpx" height="100rpx" @click="previewImageClick(img(imgItem))"></up-image>
					</view>
				</view>
				<view v-else class="sidebar-margin mt-[20rpx] body-bottom text-center">
					<text class="text-sm text-color-[#848484]">暂未上传图片</text>
				</view>
			</view>	
		</view>
		<view class="w-full footer" v-if="formData.storage_status == 5 && hasPermission('erp_manual_outbound_takeOutOfStorage')">
			<view
				class="py-[var(--top-m)] px-[var(--sidebar-m)] footer w-full fixed bottom-0 left-0 right-0 box-border">
				<button hover-class="none"
					class="!bg-[var(--primary-color)] text-[#fff] h-[80rpx] leading-[80rpx] rounded-[100rpx] text-[26rpx] font-500"
					@click="handleOutWarehouse" >立即出库</button>
			</view>
		</view>
<!-- 立即出库模态框 -->
		<up-modal :show="outWarehouseShow" @confirm="outWarehouseConfirm" showCancelButton @cancel="outWarehouseShow = false"
			:title="'出库'" :content="'确定要出库该数据吗？'" ref="outWarehouseModal"></up-modal>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, computed, onMounted } from 'vue'
	import { t } from '@/locale'
	import { onLoad } from '@dcloudio/uni-app';
	import { getManualInfo ,takeOutOfStorage} from '@/addon/erp/api/sell';
	import { img } from '@/utils/common'
	import usePermission from '@/utils/usePermission'
	const { hasPermission } = usePermission()
	const formRef : any = ref(null)

	const formData = reactive({
		code: "",
		name: '',
		supplier: {
			name: '',
			contact: '',
			phone: ''
		},
		warehouse: {
			name: ''
		},
		billing_time: '',
		remark: '',
		create_time: '',
		storage_status: '',
		storage_status_text: '',
		productList: [],
		outbound_image:""
	})
	const outWarehouseShow = ref(false);
	// 加载
	onLoad((data : any) => {
		getInfo(data.id);
	})
	const imageArr=computed (()=>{
		if(formData.outbound_image){
			return formData.outbound_image.split(',')
		}
		return []
	})
	const getInfo = async (id : number) => {
		const data = await (await getManualInfo(id)).data;
		Object.assign(formData, data);
	}
	// 立即出库
	const handleOutWarehouse= (item:any)=>{
		outWarehouseShow.value=true
	}
	
	// 确认立即出库
	const outWarehouseConfirm = () => {
		takeOutOfStorage(formData.id)
			.then((res:any) => {
				if(res.code ===1){
					getInfo(formData.id);
					outWarehouseShow.value = false;
				}
			}).catch(() => { });
	}
	const previewImageClick=(url:string)=>{
		uni.previewImage({
			current: 0,
			urls:[url]
		})
	}
</script>

<style scoped>
	.img-p{
		display: flex;
		width: 100rpx;
		height: 100rpx;
	}
</style>