<template>
	<view class="topTitle">耗材信息</view>
	<view class="addConsumables">
		<view>
			<view>
				<view>单位</view>
				<view><input type="text" placeholder="请输入单位" v-model="datas.form.conUnit" name="" id="" /></view>
			</view>
			<view>
				<view>耗材名称</view>
				<view><input type="text" placeholder="请输入耗材名称" v-model="datas.form.conName" name="" id="" /></view>
			</view>
			<view>
				<view>耗材价格</view>
				<view><input class="uni-input" placeholder="请输入耗材价格" type="digit" v-model="datas.form.price" /></view>
			</view>
			<view>
				<view>预警值</view>
				<view><input type="number" placeholder="请输入预警值" v-model="datas.form.conWarning" name="" id="" /></view>
			</view>
			<view>
				<view>是否检测耗材</view>
				<up-switch size="20" :inactive-value="0" :active-value="1" v-model="datas.form.isStock"></up-switch>
			</view>


			<view v-if="!datas.form.id" style="justify-content: space-between">
				<view>耗材类型</view>
				<view style="width: 54%" @tap="datas.show = !datas.show">
					{{ datas.consGroupName || '请选择耗材类型' }}
				</view>
				<uni-icons type="bottom" size="16"></uni-icons>
			</view>
		</view>
	</view>
	<template v-if="datas.form.id">
		<view class="tips-wrap">
			<view class="content">
				<u-icon name="error-circle-fill" color="#e6a23c" size="30"></u-icon>
				<view class="info">
					<text class="t1">提示</text>
					<text class="t2">换算值为第二单位*第二单位转换数量=第一单位</text>
				</view>
			</view>
		</view>
		<view class="form-wrap">
			<view class="form">
				<view class="row">
					<view class="label">第二单位</view>
					<view class="ipt">
						<u-input placeholder="请输入第二单位" v-model="datas.form.conUnitTwo"></u-input>
					</view>
				</view>
				<view class="row">
					<view class="label">第二单位转换数量</view>
					<view class="ipt">
						<u-input placeholder="请输入第二单位转换数量" v-model="datas.form.conUnitTwoConvert"></u-input>
					</view>
				</view>
				<view class="row">
					<view class="label">默认入库单位</view>
					<view class="ipt">
						<u-radio-group v-model="datas.form.defaultUnit">
							<u-radio :name="item" :label="item" v-for="(item, index) in unitList"
								:key="index"></u-radio>
						</u-radio-group>
					</view>
				</view>
			</view>
		</view>
	</template>
	<view class="bottombutton">
		<up-button type="primary" style="background-color: #318afe; color: #fff" @tap="sumbit" :plain="true"
			text="保存"></up-button>
	</view>
	<up-picker :show="datas.show" :columns="datas.typeList" keyName="name" @cancel="datas.show = false"
		@confirm="confirmConsGroup"></up-picker>
	<!-- 消息提示 -->
	<up-toast ref="uToastRef"></up-toast>
	<u-picker :show="unitShow" :columns="unitList"></u-picker>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';

	import {
		getConsGrpupList,
		addCons,
		editCons
	} from '@/http/api/cons.js';

	let datas = reactive({
		show: false,
		form: {
			conUnit: '',
			conName: '',
			price: '',
			conWarning: 999,
			consGroupId: null,
			conUnitTwo: '', // 第二单位
			conUnitTwoConvert: '', // 第二单位转换数量
			defaultUnit: '',
			isStock: 1,
		},
		consGroupName: '',
		typeList: []
	});

	onLoad((options) => {
		if (options && options.item) {
			let obj = JSON.parse(decodeURIComponent(options.item));
			datas.form = obj;

			unitList.value = [];
			if (datas.form.conUnit !== '') {
				unitList.value.push(datas.form.conUnit);
			}
			if (datas.form.conUnitTwo !== '') {
				unitList.value.push(datas.form.conUnitTwo);
			}
			console.log('datas.form', datas.form);
			console.log('unitList.value', unitList.value);
		} else {
			gettbConsTypeList();
		}
		uni.setNavigationBarTitle({
			title: !datas.form.id ? '添加耗材' : '编辑耗材'
		});
	});

	/**
	 * 获取耗材类别
	 */
	let gettbConsTypeList = () => {
		getConsGrpupList({
			page: 1,
			size: 30
		}).then((res) => {
			datas.typeList = [res];
		});
	};

	function confirmConsGroup(e) {
		datas.show = false;
		datas.form.consGroupId = e.value[0].id;
		datas.consGroupName = e.value[0].name;
	}

	let sumbit = async () => {
		let conUnitdata = datas.form.conUnit.replace(/(^\s*)|(\s*$)/g, '');
		if (!conUnitdata) {
			uni.$utils.showToast('单位不能为空');
			return;
		}
		if (!datas.form.price) {
			uni.$utils.showToast('价格不能为空');
			return;
		}
		if (!datas.form.consGroupId) {
			uni.$utils.showToast('耗材类型不能为空');
			return;
		}
		if (!datas.form.id) {
			await addCons({
				...datas.form
			});
		} else {
			await editCons({
				...datas.form
			});
		}
		uni.navigateBack();
	};

	// 显示选择单位
	const unitShow = ref(false);
	// 单位列表
	const unitList = ref([]);
</script>
<style>
	page {
		background-color: #f9f9f9;
	}
</style>
<style scoped lang="less">
	.topTitle {
		font-weight: 400;
		font-size: 32rpx;
		color: #333333;
		margin: 32rpx 28rpx;
	}

	.addConsumables {
		width: 694rpx;
		background: #ffffff;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		margin: 32rpx;
		padding: 24rpx;
		box-sizing: border-box;

		>view {
			>view {
				width: 646rpx;
				height: 84rpx;
				background: #fcfcfc;
				border: 2rpx solid #f9f9f9;
				margin-top: 32rpx;
				.df;

				>view:first-child {
					width: 240rpx;
					height: 84rpx;
					line-height: 84rpx;
					// text-align: left;
					padding-left: 24rpx;
					background: #f9f9f9;
					border-radius: 8rpx 0rpx 0rpx 8rpx;
					border: 2rpx solid #f9f9f9;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 32rpx;
					color: #333333;
				}
			}
		}
	}

	.bottombutton {
		margin-top: 84rpx;
		padding: 0 24rpx;

		>button {
			width: 530rpx;
			height: 80rpx;
			border-radius: 56rpx 56rpx 56rpx 56rpx;
		}
	}

	.status {
		margin: 0 32rpx;
		position: absolute;
		// top: 100%;
		left: 0;
		right: 0;
		z-index: 10;
		background-color: #fff;
	}

	.df() {
		display: flex;
		align-items: center;
	}

	.tips-wrap {
		--pColor: #e6a23c;
		--iColor: #fdf6ec;
		padding: 0 28upx;

		.content {
			display: flex;
			align-items: center;
			padding: 28upx;
			background-color: var(--iColor);

			.info {
				display: flex;
				flex-direction: column;
				padding-left: 10px;
				gap: 8upx;

				.t1 {
					font-size: 32upx;
					color: var(--pColor);
				}

				.t2 {
					font-size: 24upx;
					color: var(--pColor);
				}
			}
		}
	}

	.form-wrap {
		padding: 28upx 28upx 0;

		.form {
			padding: 28upx;
			background-color: #fff;
			border-radius: 16upx;
		}

		.row {
			height: 84upx;
			display: flex;
			gap: 20upx;
			align-items: center;
			background-color: #fcfcfc;
			padding: 0 20upx;

			&:not(:last-child) {
				margin-bottom: 28upx;
			}

			.label {
				font-size: 32upx;
				color: #333;
			}

			.ipt {
				flex: 1;
			}
		}
	}
</style>