<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.status == 1" :text="formData.status_text" type="warning" plain
								size="mini"></up-tag>
							<up-tag v-if="formData.status == 2" :text="formData.status_text" type="error" plain
								size="mini"></up-tag>
							<up-tag v-if="formData.status == 3" :text="formData.status_text" plain size="mini"></up-tag>
							<up-tag v-if="formData.status == 5" :text="formData.status_text" type="success" plain
								size="mini"></up-tag>
							<up-tag v-if="formData.status == 4" :text="formData.status_text" type="error" 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('customerName') }}:<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 mb-[18rpx] text-[12px] text-[#6a6a6a]">
							详细地址:<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('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]">
							退货原因:<text
								class="ml-[20rpx] text-[var(--primary-color)]">{{formData.reason}}</text>
						</view>
						<view class="flex justify-start items-center mb-[18rpx] text-[12px] text-[#6a6a6a]">
							拒绝审核原因:<text
								class="ml-[20rpx] text-[var(--primary-color)]">{{formData.reject_reason}}</text>
						</view>
						<view class="flex justify-start items-center mb-[18rpx] text-[12px] text-[#6a6a6a]">
							拒绝入库原因:<text
								class="ml-[20rpx] text-[var(--primary-color)]">{{formData.why}}</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]">
										{{ t('quantity') }}:
										<text class="ml-[20rpx] text-[var(--primary-color)]">{{item.num}}</text>

									</view>
									<view class="flex justify-start mb-[18rpx] text-[12px] text-[#6a6a6a]">
										{{ t('sellPrice') }}:
										<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="true ?'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>
</template>

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

	const formData = reactive({
		code: "",
		name: '',
		supplier: {
			name: '',
			contact: '',
			phone: ''
		},
		warehouse: {
			name: ''
		},
		billing_time: '',
		remark: '',
		create_time: '',
		status: '',
		status_text: '',
		productList: [],
		inbound_image:""
	})
	// 响应式数据  
	const list = ref([
	    {key: 'plus', name: 'plus', color: '#fff', backgroundColor: 'red'},
	    {key: 'order', name: 'order', color: '#fff', backgroundColor: 'green'}
	]);
	const imageArr=computed (()=>{
		if(formData.inbound_image){
			return formData.inbound_image.split(',')
		}
		return []
	})
	// 加载
	onLoad((data : any) => {
		getInfo(data.id);
	})
	const itemClick = (e) => {
	    console.log(e)
	}
	const getInfo = async (id : number) => {
		const data = await (await getManualReturnInfo(id)).data;
		Object.assign(formData, data);
	}
	const previewImageClick=(url:string)=>{
		uni.previewImage({
			current: 0,
			urls:[url]
		})
	}
</script>

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