<template>
	<view class="bg-[#ffffff] min-h-[100vh]" :style="themeColor()">
		<view class="mx-[30rpx]">
			<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
			<u-form labelPosition="left" :model="formData" labelWidth="190rpx" ref="formRef">
				<u-form-item :label="t('code')" borderBottom>
					{{formData.code}}
				</u-form-item>
				<u-form-item :label="t('name')" borderBottom>
					{{formData.name}}
				</u-form-item>
				<u-form-item :label="t('productTypeId')" borderBottom>
					{{formData.productType?.name}}
				</u-form-item>
				<u-form-item :label="t('spec')" borderBottom>
					{{formData.spec}}
				</u-form-item>
				<u-form-item :label="t('productUnitId')" borderBottom>
					{{formData.productUnit?.name}}
				</u-form-item>
				<u-form-item :label="t('minWarning')" borderBottom>
					{{formData.min_warning}}
				</u-form-item>
				<u-form-item :label="t('maxWarning')" borderBottom>
					{{formData.max_warning}}
				</u-form-item>
				<u-form-item :label="t('remark')" borderBottom>
					{{formData.remark}}
				</u-form-item>
				<u-form-item :label="t('createTime')" borderBottom>
					{{formData.create_time}}
				</u-form-item>
			</u-form>
		</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 { getProductInfo } from '@/addon/erp/api/product';

	const formRef : any = ref(null)

	const formData = reactive({
		code: "",
		name: '',
		productType: {
			name: ''
		},
		spec: '',
		productUnit: {
			name: ''
		},
		inventory: '',
		min_warning: '',
		max_warning: '',
		remark: '',
		create_time: '',
	})

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

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

<style>
</style>