<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="160rpx">
			<view class="sidebar-margin card-template mt-[var(--top-m)] py-[20rpx]">
				<u-form-item :label="t('pid')" prop="pid" borderBottom>
					<view class="flex w-full items-center h-[52rpx]" @click="pidSheetShow = true">
						<view v-if="!formData.pid" class="text-[#888] text-[28rpx] flex-1">
							{{ t('pidPlaceholder') }}</view>
						<view v-else class="text-[28rpx] flex-1 leading-[1.4]">{{ formData.pid_name }}</view>
					</view>
				</u-form-item>
				<u-form-item :label="t('name')" prop="name" borderBottom required>
					<u-input v-model="formData.name" :placeholder="t('namePlaceholder')" border="none"></u-input>
				</u-form-item>
			</view>
		</u-form>
		<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>
		<!-- 上级分类 -->
		<u-action-sheet class="" :actions="pidList" :show="pidSheetShow" :closeOnClickOverlay="true"
		    :safeAreaInsetBottom="true"
		    @close="pidSheetShow = false" @select="updateSex"></u-action-sheet>
			
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, onMounted } from 'vue'
	import { t } from '@/locale'
	import { onLoad } from '@dcloudio/uni-app';
	import { getProductTypeSelect, getProductTypeInfo, addProductType, editProductType } from '@/addon/erp/api/product';
	import { redirect } from '@/utils/common';
	
	const formRef: any = ref(null)
	const loading = ref(false)
	
	// 页面加载
	onLoad((option: any) => {
		getCateList();
		if(option.id){
			getInfo(option.id);
		}
		
		
	})
	
	
	const rules = reactive({
		name: {
			type: 'string',
			required: true,
			message: t('namePlaceholder'),
			trigger: ['blur', 'change'],
		}
	});
	const formData = ref({
		id: 0,
		pid: 0,
		pid_name: '',
		name: '',
		sort: 20
	})
	
	/**
	 * 上级分类
	 */
	const pidSheetShow = ref(false)
	const pidList = ref<any[]>([]);
	const updateSex = (e: any) => {
	    formData.value.pid = e.id;
		formData.value.pid_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 getInfo = (id: number) => {
		getProductTypeInfo(id).then((res: any) => {
			formData.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
			const save = formData.value.id ? editProductType : addProductType;
		    save(formData.value).then((res: any) => {
				if(res.code == 1){
					redirect({ url: '/addon/erp/pages/product/type/list' })
				}
		    }).catch((err) => {
				// 如果是4001，没有绑定企业账号，强制跳转绑定
				if(err.code == 4001){
					redirect({ url: '/addon/erp/pages/member/bind' })
				}
		        loading.value = false
		    })
		})
	}
</script>

<style>
</style>