<template>
	<view class="min-page bg-gray u-p-30 u-font-28 color-333">

		<view class=" ">
			<uni-forms ref="refform" label-position="left" :model="form" label-align="left" label-width="300"
				:rules="rules">
				<view class="">
					<text class="">货品信息</text>
				</view>
				<view class="form">
					<view class="border-bottom  u-p-b-10">
						<uni-forms-item required label="" name="name">
							<template #label>
								<view class="u-text-left">
									<text class="color-333 u-font-28">货品名称</text>
									<!-- <text class="color-red">*</text> -->
								</view>
							</template>
							<view class="u-flex-1">
								<uni-easyinput :inputBorder="false" paddingNone v-model="form.name"
									placeholder="填写货品名称"></uni-easyinput>
							</view>
						</uni-forms-item>
					</view>
					<view class="border-bottom u-p-b-10 u-p-t-10">
						<uni-forms-item required label="" name="code">
							<template #label>
								<view class="u-text-left">
									<text class="color-333 u-font-28">货品编码</text>
									<!-- <text class="color-red">*</text> -->
								</view>
							</template>
							<view class="u-flex-1 ">
								<uni-easyinput :inputBorder="false" paddingNone v-model="form.code"
									placeholder="填写货品编码"></uni-easyinput>
							</view>
						</uni-forms-item>
					</view>
					<view class="border-bottom u-p-b-10 u-p-t-10">
						<uni-forms-item required label="" name="category">
							<template #label>
								<view class="u-text-left ">
									<text class="color-333 u-font-28">货品类别</text>
									<!-- <text class="color-red">*</text> -->
								</view>
							</template>
							<picker @change="categoryChange" :value="categoryCurrent" range-key="name"
								:range="category">
								<view class="  u-flex u-row-between   u-relative  ">
									<view class="zhezhao u-absolute  position-all" style="z-index: 1;"></view>
									<!-- <view>
										<text class="" v-if="form.category!==''">{{category[form.category].name}}</text>
										<text class="color-999 " v-else>选择分类</text>
									</view> -->
									<view class="u-flex-1">
										<uni-easyinput :inputBorder="false" paddingNone v-model="form.category"
											placeholder="未分类"></uni-easyinput>
									</view>
									<uni-icons type="right" size="18" color="#999"></uni-icons>
								</view>

							</picker>

						</uni-forms-item>
					</view>
					<view class="border-bottom u-p-b-10">
						<uni-forms-item required label="" name="unit">
							<template #label>
								<view class="u-text-left">
									<text class="color-333 u-font-28">计量单位</text>
									<!-- <text class="color-red">*</text> -->
								</view>
							</template>
							<view class="u-flex-1">
								<uni-easyinput :inputBorder="false" paddingNone v-model="form.unit"
									placeholder="填写计量单位"></uni-easyinput>
							</view>
						</uni-forms-item>
					</view>

					<view class="border-bottom u-p-b-10">
						<uni-forms-item required label="" name="">
							<template #label>
								<view class="u-text-left">
									<text class="color-333 u-font-28">入库数量</text>
									<!-- <text class="color-red">*</text> -->
								</view>
							</template>
							<view class="u-flex-1">
								<uni-easyinput type="digit" :inputBorder="false" paddingNone v-model="form.inNumber"
									placeholder="选填"></uni-easyinput>
							</view>
						</uni-forms-item>
					</view>

					<view class="border-bottom u-p-b-10">
						<uni-forms-item required label="" name="unit">
							<template #label>
								<view class="u-text-left">
									<text class="color-333 u-font-28">总价值</text>
									<!-- <text class="color-red">*</text> -->
								</view>
							</template>
							<view class="u-flex">
								<view class="u-flex-1">
									<uni-easyinput type="digit" :inputBorder="false" paddingNone v-model="form.allPrice"
										placeholder="选填"></uni-easyinput>
								</view>
								<view class="u-p-l-30">元</view>
							</view>

						</uni-forms-item>
					</view>

					<view class=" u-p-b-10">
						<uni-forms-item required label="" name="price">
							<template #label>
								<view class="u-text-left">
									<text class="color-333 u-font-28">平均单价</text>
									<!-- <text class="color-red">*</text> -->
								</view>
							</template>
							<view class="u-flex-1">
								<uni-easyinput type="digit" :inputBorder="false" paddingNone v-model="form.price"
									placeholder="0"></uni-easyinput>
							</view>
						</uni-forms-item>
					</view>
				</view>

				<view class="u-m-t-32">
					<text class="">供应商信息（选填）</text>
				</view>
				<div class="form">
					<view class="border-bottom  u-p-b-10">
						<uni-forms-item required label="" >
							<template #label>
								<view class="u-text-left">
									<text class="color-333 u-font-28">供应商名称</text>
									<!-- <text class="color-red">*</text> -->
								</view>
							</template>
							<view class="u-flex-1">
								<uni-easyinput :inputBorder="false" paddingNone v-model="form.supplierShopName"
									placeholder="填写供应商名称"></uni-easyinput>
							</view>
						</uni-forms-item>
					</view>
					<view class="border-bottom  u-p-b-10">
						<uni-forms-item required label="" >
							<template #label>
								<view class="u-text-left">
									<text class="color-333 u-font-28">联系人</text>
									<!-- <text class="color-red">*</text> -->
								</view>
							</template>
							<view class="u-flex-1">
								<uni-easyinput :inputBorder="false" paddingNone v-model="form.supplierName"
									placeholder="填写联系人"></uni-easyinput>
							</view>
						</uni-forms-item>
					</view>
					<view class="  u-p-b-10">
						<uni-forms-item required label="" name="name">
							<template #label>
								<view class="u-text-left">
									<text class="color-333 u-font-28">联系电话</text>
									<!-- <text class="color-red">*</text> -->
								</view>
							</template>
							<view class="u-flex-1">
								<uni-easyinput :inputBorder="false" paddingNone v-model="form.supplierPhone"
									placeholder="填写联系号码"></uni-easyinput>
							</view>
						</uni-forms-item>
					</view>
				</div>

			</uni-forms>
		</view>
		<view style="height: 200rpx;">

		</view>
	</view>

	<view class="fixed-b u-flex u-row-right">
		<view><my-button shape="circle" type="cancel" height="56" @tap="cancel">
				<view class="u-p-r-30 u-p-l-30 color-999">取消</view>
			</my-button></view>
		<view class="u-m-l-30"><my-button shape="circle" height="56" @tap="submit">
				<view class="u-p-r-30 u-p-l-30">保存</view>
			</my-button></view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onReady,
		onShow,
		onPageScroll,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import myButton from '../../components/my-components/my-button';
	import {
		reactive,
		ref
	} from 'vue';
	const units = reactive({
		list: [{
				name: '件',
				value: 1
			},
			{
				name: '杯',
				value: 2
			},
			{
				name: '个',
				value: 3
			}
		],
		current: ''
	})
	const category = reactive([{
			name: '分类1',
			value: 1
		},
		{
			name: '分类2',
			value: 2
		},
		{
			name: '分类3',
			value: 3
		}
	])
	let categoryCurrent = ref('')

	function categoryChange(e) {
		console.log(e);
		categoryCurrent.value = e.detail.value
		form.category = category[e.detail.value].name
	}

	function unitChange(e) {
		units.current = e.detail.value
		form.unit = units.list[e.detail.value].name
	}

	const refform = ref(null)
	const form = reactive({
		name: '',
		code: '',
		category: '',
		price: 0,
		inNumber: 0,
		unit: '',
		number: 0,
		inNumber: 0,
		allPrice:0,
		supplierShopName:'',
		supplierName:'',
		supplierPhone:'',
	})
	// 校验规则
	const rules = {
		name: {
			rules: [{
				required: true,
				errorMessage: '菜品名称不能为空'
			}]
		},
		code: {
			rules: [{
				required: true,
			}]
		},
		category: {
			rules: [{
				required: true,
				errorMessage: '请选择菜品分类'
			}]
		},
		price: {
			rules: [{
				required: true,
				errorMessage: '请输入价格'
			}]
		},
		unit: {
			rules: [{
				required: true,
				errorMessage: '请选择单位'
			}]
		},
		price: {
			rules: [{
				required: true,
				errorMessage: '请填写下单数量'
			}]
		},
	}

	function submit() {
		refform.value.validate(res => {
			console.log(res)
		}).catch(err => {
			console.log(err);
		})
	}
	const page = reactive({
		type: 'add'
	})
	function cancel(){
		uni.navigateBack()
	}
	onLoad(opt => {
		if (JSON.stringify(opt) != '{}' && opt.hasOwnProperty('type')) {
			page.type = opt.type
		}
		uni.setNavigationBarTitle({
			title: page.type === 'add' ? '添加货品' : '编辑货品'
		})
	})
</script>

<style lang="scss" scoped>
	.form {
		margin-top: 32rpx;
		background-color: #fff;
		padding: 32rpx 24rpx 32rpx 24rpx;
		border-radius: 18rpx 18rpx 18rpx 18rpx;

		.u-text-left {
			min-width: 160rpx;
		}

		// background-color: transparent;
	}

	::v-deep.uni-forms-item {
		min-height: inherit;
	}

	::v-deep.uni-forms-item .uni-forms-item__label {
		font-size: 28rpx !important;
	}

	::v-deep.uni-easyinput__placeholder-class {
		font-size: 28rpx;
	}

	::v-deep.uni-forms-item__error {
		display: none;
	}

	.fixed-b {
		position: fixed;
		left: 0;
		right: 0;
		background-color: #fff;
		padding-top: 28rpx;
		padding-right: 28rpx;
		padding-left: 28rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) + 44rpx);
		bottom: 0;
	}
</style>