<template>
	<view class="fs-p30">
		<tui-form ref="form" :showMessage="false">
			<view class="fs-radius__sm">
				<tui-input label="耗材类型" placeholder="请选择" v-model="formData.classifyName" disabled @click="pickerOpen(1)"></tui-input>
				<tui-input label="类 别" placeholder="请选择"  v-model="formData.typeName" disabled @click="pickerOpen(2)"></tui-input>
				<tui-input label="类别明细" placeholder="请选择"  v-model="formData.typeDetailName" disabled @click="pickerOpen(3)"></tui-input>
				<tui-input label="使用数量" placeholder="请输入" type="digit" v-model="formData.userCount"></tui-input>
				<tui-input label="单 位" placeholder="请选择"  v-model="formData.unitName" :borderBottom="false" disabled @click="pickerOpen(4)"></tui-input>
			</view>
		</tui-form>
		<view class="fs-mt60 fs-flex__center">
			<tui-button shape="circle" width="500rpx" height="80rpx" shadow @click="onSubmit">确 定</tui-button>
		</view>
	</view>
	<tui-picker :show="pickerShow" radius :pickerData="pickerList[pickerType]" textField="label" valueField="value" @hide="pickerHide" @change="pickerChange"></tui-picker>
</template>

<script>
import { apiMaterialBigTypeList, apiMaterialMidTypeList, apiMaterialDetailTypeList, apiTypeList } from '@/api/app'
const rules = [
	{
		name: "classifyName",
		rule: ["required"],
		msg: ["请选择耗材类型"]
	},
	{
		name: "typeName",
		rule: ["required"],
		msg: ["请选择类别"]
	},
	{
		name: "typeDetailName",
		rule: ["required"],
		msg: ["请选择类别明细"]
	},
	{
		name: "userCount",
		rule: ["required","isAmount"],
		msg: ["请输入数量","数量必须是数字"]
	},
	{
		name: "unitName",
		rule: ["required"],
		msg: ["请选择单位"]
	}
]
export default {
	data() {
		return {
			formData: {
				classifyId: 0,
				classifyName: '',
				typeId: 0,
				typeName: '',
				typeDetailId: 0,
				typeDetailName: '',
				unitName: '',
				userCount: ''
			},
			pickerList: [],
			pickerShow: false,
			pickerType: 0
		}
	},
	onLoad(options) {
		this.getMaterialBigTypeList()
		this.getTypeList()
	},
	methods: {
		// 提交记录
		onSubmit() {
			this.$refs.form.validate(this.formData, rules).then(res => {
				if (!res.isPass) {
					uni.$tui.toast(res.errorMsg)
					return
				}
				let detailList = uni.getStorageSync('detailList')
				if (detailList) {
					detailList.push(this.formData)
				} else {
					detailList = [this.formData]
				}
				uni.setStorageSync('detailList', detailList)
				uni.navigateBack()
			})
		},
		// 查询耗材类型列表
		getMaterialBigTypeList() {
			apiMaterialBigTypeList().then(res => {
				this.pickerList[1] = res.data
			})
		},
		// 查询耗材类别列表
		getMaterialMidTypeList(id) {
			apiMaterialMidTypeList({data:{material_type_id:id}}).then(res => {
				this.pickerList[2] = res.data
			})
		},
		// 查询耗材类别详情
		getMaterialDetailTypeList(id) {
			apiMaterialDetailTypeList({data:{parent_type_id:id}}).then(res => {
				this.pickerList[3] = res.data
			})
		},
		// 查询单位列表
		getTypeList() {
			apiTypeList({data:{dict_type: 'materialUnitId'}}).then(res => {
				this.pickerList[4] = res.data
			})
		},
		// 打开选择框
		pickerOpen(type) {
			this.pickerShow = true
			this.pickerType = type
		},
		// 关闭选择框
		pickerHide() {
			this.pickerShow = false
		},
		// 选择选择框
		pickerChange(event) {
			switch (this.pickerType) {
				case 1:
					this.formData.classifyId = event.value
					this.formData.classifyName = event.label
					this.formData.typeId = 0
					this.formData.typeName = ''
					this.formData.typeDetailId = 0
					this.formData.typeDetailName = ''
					// 查询类别列表
					this.getMaterialMidTypeList(event.value)
					break
				case 2:
					this.formData.typeId = event.value
					this.formData.typeName = event.label
					this.formData.typeDetailId = 0
					this.formData.typeDetailName = ''
					// 查询类别详情列表
					this.getMaterialDetailTypeList(event.value)
					break
			    case 3:
					this.formData.typeDetailId = event.value
					this.formData.typeDetailName = event.label
					break
			    case 4:
					this.formData.unitName = event.label
					break
			}
		}
	}
}
</script>

<style lang="scss" scoped>

</style>
