<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 == 2" :text="formData.status_text" plain size="mini"></up-tag>
							<up-tag v-if="formData.storage_status == 3" :text="formData.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('supplierId') }}:<text
								class="ml-[20rpx] text-[var(--primary-color)]">{{formData.supplier?.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.supplier?.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.supplier?.phone}}</text>
						</view>
						<view class="flex justify-start 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 mb-[18rpx] text-[12px] text-[#6a6a6a]">
							{{ t('totalNums') }}:<text
								class="ml-[20rpx] text-[var(--primary-color)]">{{formData.total_num}}</text>
						</view>
						<view class="flex justify-start mb-[18rpx] text-[12px] text-[#6a6a6a]">
							{{ t('deliveryTime') }}:<text
								class="ml-[20rpx] text-[var(--primary-color)]">{{formData.delivery_time}}</text>
						</view>
						<view class="flex justify-start mb-[18rpx] text-[12px] text-[#6a6a6a]">
							{{ t('warehouseId') }}:<text
								class="ml-[20rpx] text-[var(--primary-color)]">{{formData.warehouse.name}}</text>
						</view>
						<view class="flex justify-start 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 items-center mb-[18rpx] text-[12px] text-[#6a6a6a]">
							{{ t('rate') }}:<text
								class="ml-[20rpx] text-[var(--primary-color)]">{{formData.rate}}</text>
						</view>
						<view class="flex justify-start items-center mb-[18rpx] text-[12px] text-[#6a6a6a]">
							{{ t('money') }}:<text
								class="ml-[20rpx] text-[var(--primary-color)]">￥{{formData.money}}</text>
						</view>
						<view class="flex justify-start items-center mb-[18rpx] text-[12px] text-[#6a6a6a]">
							{{ t('totalMoney') }}:<text
								class="ml-[20rpx] text-base text-red-500">￥{{formData.total_money}}</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('createTime') }}:<text
								class="ml-[20rpx] text-[var(--primary-color)]">{{formData.create_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 v-if="formData.productList.length > 0" 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('spec') }}:<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]">
										{{ t('purchaseQuantity') }}:
										<text class="ml-[20rpx] text-[var(--primary-color)]">{{item.num}}</text>

									</view>
									<view class="flex justify-start mb-[18rpx] text-[12px] text-[#6a6a6a]">
										{{ t('purchasePrice') }}:
										<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.num * item.price }}</text>
									</view>

								</view>
							</view>
						</view>
					</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 :class="formData.storage_status == 2 ?'pb-[120rpx]':''">
				<view class="bg-[#ffffff] rounded-10rpx">
					<view class="head border-0 border-b-1 border-solid border-[#ddd]">
						{{ t('inboundImage') }}
					</view>
					<view  v-if="inboundImageArr.length >0">
						<view class="img-p">
							<up-image :show-loading="true" v-for="(imgItem,imgIndex) in inboundImageArr" :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]">暂未上传{{ t('inboundImage') }}</text>
					</view>
					<view class="head border-0 border-b-1 border-solid border-[#ddd]">
						{{ t('inspectionReportImage') }}
					</view>
					<view class="img-p pb-[120rpx]" v-if="inspectionReportImageArr.length >0">
						<up-image :show-loading="true" v-for="(inspectionReportItem,inspectionReportIndex) in inspectionReportImageArr" :key="inspectionReportIndex" :src="img(inspectionReportItem)" style="margin: 6rpx;" width="100rpx" height="100rpx" @click="previewImageClick(img(inspectionReportItem))"></up-image>
					</view>
					<view v-else class="sidebar-margin mt-[20rpx] body-bottom text-center">
						<text class="text-sm text-color-[#848484]">暂未上传{{ t('inspectionReportImage') }}</text>
					</view>
				</view>	
			</view>
		</view>
		<view class="w-full footer" v-if="formData.storage_status == 2">
			<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="handleEnteringWarehouse" >立即入库</button>
			</view>
		</view>
		<!-- 立即入库模态框 -->
		<up-modal :show="enteringWarehouseShow" @confirm="enteringWarehouseConfirm" showCancelButton @cancel="enteringWarehouseShow = false"
			:title="'入库'" :content="'确定要入库该数据吗？'" ref="enteringWarehouseModal"></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,putInStorage } from '@/addon/erp/api/purchase';
	import { img } from '@/utils/common'
	const formRef : any = ref(null)

	const formData = reactive({
		code: "",
		name: '',
		productType: {
			name: ''
		},
		id:'',
		spec: '',
		productUnit: {
			name: ''
		},
		inventory: '',
		min_warning: '',
		max_warning: '',
		remark: '',
		create_time: '',
		delivery_time:'',
		productList: [],
		warehouse:{
			name:''
		},
		inbound_image:"",
		inspection_report_image:""
	})
	const enteringWarehouseShow = ref(false);
	const inboundImageArr=computed (()=>{
		if(formData.inbound_image){
			return formData.inbound_image.split(',')
		}
		return []
	})
	const inspectionReportImageArr=computed (()=>{
		if(formData.inspection_report_image){
			return formData.inspection_report_image.split(',')
		}
		return []
	})
	// 加载
	onLoad((data : any) => {
		getInfo(data.id);
	})

	const getInfo = async (id : number) => {
		const data = await (await getManualInfo(id)).data;
		Object.assign(formData, data);
	}
	
	// 立即入库
	const handleEnteringWarehouse= (item:any)=>{
		enteringWarehouseShow.value=true
	}
	
	// 确认立即入库
	const enteringWarehouseConfirm = () => {
		putInStorage(formData.id)
			.then((res:any) => {
				if(res.code ===1){
					getInfo(formData.id);
					enteringWarehouseShow.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>