<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 == 0" :text="formData.status_text" type="warning" plain
								size="mini"></up-tag>
							<up-tag v-if="formData.status == 1" :text="formData.status_text" type="error" plain
								size="mini"></up-tag>
							<up-tag v-if="formData.status == 2" :text="formData.status_text" plain size="mini"></up-tag>
							<up-tag v-if="formData.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('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]">
							{{ t('city') }}:<text
								class="ml-[20rpx] text-[var(--primary-color)]">{{formData.city}}</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]">
							{{ t('deliveryTime') }}:<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>
				</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.products?.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.products?.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.products?.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('warehouseName') }}:<text
											class="ml-[20rpx] text-[var(--primary-color)]">{{item.w_name}}</text>
									</view>
									<view class="flex justify-start mb-[18rpx] text-[12px] text-[#6a6a6a]">
										{{ t('deliveryQuantity') }}:
										<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>

	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, computed, onMounted } from 'vue'
	import { t } from '@/locale'
	import { onLoad } from '@dcloudio/uni-app';
	import { getDeliveryInfo } from '@/addon/erp/api/sell';

	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: []
	})

	// 加载
	onLoad((data : any) => {
		getInfo(data.id);
	})

	const getInfo = async (id : number) => {
		const data = await (await getDeliveryInfo(id)).data;
		Object.assign(formData, data);
	}
</script>

<style>
</style>