<template>
	<view class="bg-[var(--page-bg-color)] min-h-[100vh] overflow-hidden form-edit" :style="themeColor()">
		<u-form labelPosition="left" :model="formData" errorType='toast' :rules="rules" ref="formRef"
			labelWidth="180rpx">
			<view class="sidebar-margin card-template mt-[var(--top-m)] py-[20rpx]">
				<view>
					<u-form-item :label="t('productTypeId')" prop="name" required borderBottom>
						<view class="flex w-full items-center h-[52rpx]" @click="pidSheetShow = true">
							<view v-if="!formData.product_type_id" class="text-[#888] text-[28rpx] flex-1">
								{{ t('productTypeIdPlaceholder') }}
							</view>
							<view v-else class="text-[28rpx] flex-1 leading-[1.4]">{{ formData.product_type_name }}
							</view>
						</view>
					</u-form-item>
				</view>
				<view class="mt-[16rpx]">
					<u-form-item :label="t('name')" prop="name" required borderBottom>
						<u-input fontSize="28rpx" v-model.trim="formData.name" border="none" clearable
							placeholderStyle="color: #888" :placeholder="t('namePlaceholder')" />
					</u-form-item>
				</view>
				<view class="mt-[16rpx]">
					<u-form-item :label="t('productUnitId')" required prop="product_unit_id" borderBottom>
						<view class="flex w-full items-center h-[52rpx]" @click="unitSheetShow = true">
							<view v-if="!formData.product_unit_id" class="text-[#888] text-[28rpx] flex-1">
								{{ t('productUnitIdPlaceholder') }}
							</view>
							<view v-else class="text-[28rpx] flex-1 leading-[1.4]">{{ formData.product_unit_name }}
							</view>
						</view>
					</u-form-item>
				</view>
				<view class="mt-[16rpx]">
					<u-form-item :label="t('spec')" prop="spec" borderBottom>
						<u-input fontSize="28rpx" v-model.trim="formData.spec" border="none" clearable
							placeholderStyle="color: #888" :placeholder="t('specPlaceholder')" />
					</u-form-item>
				</view>

				<view class="mt-[16rpx]">
					<u-form-item :label="t('minWarning')" prop="min_warning" borderBottom>
						<u-input fontSize="28rpx" type="number" v-model="formData.min_warning"
							:placeholder="t('minWarningPlaceholder')" border="none"></u-input>
					</u-form-item>
				</view>

				<view class="mt-[16rpx]">
					<u-form-item :label="t('maxWarning')" prop="max_warning" borderBottom>
						<u-input fontSize="28rpx" type="number" v-model="formData.max_warning" border="none" clearable
							maxlength="120" :placeholder="t('maxWarningPlaceholder')" placeholderStyle="color: #888" />
					</u-form-item>
				</view>
				<view class="mt-[16rpx]">
					<u-form-item :label="t('remark')" prop="remark">
						<u-textarea fontSize="28rpx" v-model="formData.remark" :placeholder="t('remarkPlaceholder')"
							border="none"></u-textarea>
					</u-form-item>
				</view>
			</view>

		</u-form>
		<!-- 产品分类 -->
		<u-action-sheet class="" :actions="pidList" :show="pidSheetShow" :closeOnClickOverlay="true"
			:safeAreaInsetBottom="true" @close="pidSheetShow = false" @select="updateSex"></u-action-sheet>

		<!-- 产品单位 -->
		<u-action-sheet class="" :actions="unitList" :show="unitSheetShow" :closeOnClickOverlay="true"
			:safeAreaInsetBottom="true" @close="unitSheetShow = false" @select="updateSexUnit"></u-action-sheet>


		<view class="w-full footer">
			<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="handSave" :disabled="loading" :class="{'opacity-50': loading}">{{t('save')}}</button>
			</view>
		</view>
	</view>

</template>

<script setup lang="ts">
	import { ref, reactive, computed } from 'vue'
	import { t } from '@/locale'
	import { onLoad } from '@dcloudio/uni-app';
	import { getProductTypeSelect, getProductUnitSelect, addProduct } from '@/addon/erp/api/product';
	import { generatedCode } from '@/addon/erp/utils/common';
	import { redirect } from '@/utils/common';

	const formRef : any = ref(null)
	const loading = ref(false)

	const areaRef = ref()
	const isSelectAddress = ref(false)

	const rules = computed(() => {
		return {
			'product_type_id': {
				type: 'string',
				required: true,
				message: t('productTypeIdPlaceholder'),
				trigger: ['blur', 'change'],
			},
			'name': {
				type: 'string',
				required: true,
				message: t('namePlaceholder'),
				trigger: ['blur', 'change'],
			},
			'product_unit_id': {
				type: 'string',
				required: true,
				message: t('productUnitIdPlaceholder'),
				trigger: ['blur', 'change'],
			},
		}
	})

	// 页面加载
	onLoad((option : any) => {
		getCateList();
		getUnitList();
	})

	const formData = ref({
		id: "",
		code: generatedCode("P"),
		name: "",
		product_type_id: "",
		product_type_name: "",
		spec: "",
		inventory: "",
		min_warning: "",
		max_warning: "",
		remark: "",
		product_unit_id: "",
		product_unit_name: "",
		image: "",
	})

	/**
	 * 分类
	 */
	const pidSheetShow = ref(false)
	const pidList = ref<any[]>([]);
	const updateSex = (e : any) => {
		formData.value.product_type_id = e.id;
		formData.value.product_type_name = e.name;
	}
	// 获取分类
	const getCateList = () => {
		getProductTypeSelect().then((res : any) => {
			pidList.value = res.data;
		}).catch(err => {
			// 如果是4001，没有绑定企业账号，强制跳转绑定
			if (err.code == 4001) {
				redirect({ url: '/addon/erp/pages/member/bind' })
			}
		})
	}

	/**
	 * 单位
	 */
	const unitSheetShow = ref(false)
	const unitList = ref<any[]>([]);
	const updateSexUnit = (e : any) => {
		formData.value.product_unit_id = e.id;
		formData.value.product_unit_name = e.name;
	}
	// 获取单位
	const getUnitList = () => {
		getProductUnitSelect({}).then((res : any) => {
			unitList.value = res.data;
		}).catch(err => {
			// 如果是4001，没有绑定企业账号，强制跳转绑定
			if (err.code == 4001) {
				redirect({ url: '/addon/erp/pages/member/bind' })
			}
		})
	}




	// 保存
	const handSave = () => {
		formRef.value.validate().then(() => {
			if (loading.value) return
			loading.value = true

			addProduct(formData.value).then((res : any) => {
				loading.value = false
				if (res.code == 1) {
					redirect({ url: '/addon/erp/pages/product/product/list' })
				}
			}).catch((err) => {
				// 如果是4001，没有绑定企业账号，强制跳转绑定
				if (err.code == 4001) {
					redirect({ url: '/addon/erp/pages/member/bind' })
				}
				loading.value = false
			})
		})
	}
</script>

<style lang="scss" scoped>
	.form-edit :deep(.u-form-item__body__left__content__label) {
		font-size: 28rpx !important;
	}

	.form-edit :deep(.u-form-item__body__right) {
		display: flex;
		align-items: center;
	}

	.footer {
		height: calc(100rpx + var(--top-m) + var(--top-m) + constant(safe-area-inset-bottom)) !important;
		height: calc(100rpx + var(--top-m) + var(--top-m) + env(safe-area-inset-bottom)) !important;
	}
</style>