<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 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: ''
	},
	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: 190rpx;
				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>
