<template>
	<!-- 添加设备报修 -->
	<view class="add-form-container">
		<u-form :model="form" ref="formRef" label-width="160rpx">
			<u-form-item label="点检描述" prop="describes" required>
				<u-input v-model="form.describes" placeholder="请输入点检描述" />
			</u-form-item>
			<u-form-item :label="`${type=='DEVICE'?'设备' : '模具'}编码`" prop="deviceNumber" required>
				<u-input v-model="form.deviceNumber" :placeholder="`请输入${type=='DEVICE'?'设备' : '模具'}编码`" @blur="blur"
					@confirm='blur()' />
				<view class="right-button" @click="chickRightButton">
					扫描
				</view>
			</u-form-item>
			<u-form-item :label="`${type=='DEVICE'?'设备' : '模具'}名称`" prop="deviceName" required class="disabled">
				<u-input v-model="form.deviceName" :placeholder="`请输入${type=='DEVICE'?'设备' : '模具'}名称`" disabled />
			</u-form-item>
			<u-form-item label="点检人" prop="name" required class="disabled">
				<u-input v-model=" store.name" placeholder="请输入点检人" disabled />
			</u-form-item>
			<u-form-item label="班次" prop="classes" required>
				<view class="select" @click="openSingleColumn('classes',form.classes,maintenanceShift)">
					<view class="input" v-if='form.classes'>
						{{form.classesName}}
					</view>
					<view class="placeholder" v-else>
						{{`请选择班次`}}
					</view>
					<u-icon name="arrow-right" color="#aaaaaa" size="28"></u-icon>
				</view>
			</u-form-item>
		</u-form>
		<view class="list">
			<!-- <view class="title">
				<span></span>备件
			</view> -->
			<view class="item " v-for="(item,index) in subList" :key="index">
				<view class="item-box">
					<view class="spare-title">
						<view class="title-txt">
							{{item.name}}
						</view>
					</view>
					<u-row gutter="16">
						<u-col :span="12">
							<view class="dec">
								<view class="">
									设备部位名称:
								</view>
								<view>{{item.equipmentParts}}</view>
							</view>
							<view class="dec">
								<!-- <view style="margin-right: 20rpx;">是否符合:</view><u-switch v-model="item.isConform1"></u-switch> -->
								<u-radio-group v-model="item.isConform" @change="radioGroupChange">
									<!-- <u-radio 
													@change="radioChange" 
													v-for="(item, index) in list" :key="index" 
													:name="item.name"
													:disabled="item.disabled"
												>
													{{item.name}}
												</u-radio> -->
									<u-radio name="TRUE">符合</u-radio>
									<u-radio name="FALSE">不符合</u-radio>
								</u-radio-group>

							</view>

							<!-- <view class="dec">
							    <view style="margin-right: 20rpx;">是否符合:</view>
							    <input type="radio" v-model="item.isConform1" value="true"> 是
							    <input type="radio" v-model="item.isConform1" value="false"> 否
							</view> -->
						</u-col>
					</u-row>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="btns">
				<button class="reset" @click="reset">重置</button>
				<button class="sure" @click="submit" :loading='loading' :disabled='loading'>确定</button>
			</view>
			<view style="height: constant(safe-area-inset-bottom); height: env(safe-area-inset-bottom);"></view>
		</view>
		<u-select v-model="singleColumnShow" mode="single-column" :default-value='singleColumnDefaultValue'
			:list="singleColumnList" @confirm="chooseSingleColumn" @cancle='singleColumnShow = false'></u-select>
	</view>
</template>

<script setup lang="ts">
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		getCurrentInstance
	} from 'vue'

	import * as deviceApi from "@/api/device.js"
	import * as moldApi from "@/api/mold.js"
	import * as spotCheckOrderApi from "@/api/spotCheckOrder.js"
	import * as dictApi from "@/api/dict.js"
	import { useCountStore } from '@/store'

	const { proxy } = getCurrentInstance()
	// 获取自定义的store
	const store = useCountStore()

	const loading = ref(false)
	const type = ref('')
	const list = ref([{
		name: 'apple',
		disabled: false
	},
	{
		name: 'banner',
		disabled: false
	},
	{
		name: 'orange',
		disabled: false
	}])
	const form = ref({
		describes: "",
		deviceNumber: '',
		deviceName: '',
		maintenances: '',
		classes: '',
		classesName: ''
	})
	const singleColumnShow = ref(false)
	const singleColumnDefaultValue = ref([])
	const singleColumnList = ref([])
	const field = ref('')
	const maintenanceShift = ref([])
	const subList = ref([])
	// 扫描设备条码
	function chickRightButton(field) {
		uni.scanCode({
			success: function (res) {
				form.value.deviceNumber = res.result
				getDetailsByNumber()
				getSubList()
			}
		});
	}
	function blur() {
		if (form.value.deviceNumber) {
			getDetailsByNumber()
			getSubList()
		}
	}
	// 根据设备/模具号查询信息
	function getDetailsByNumber() {
		const data = {
			number: form.value.deviceNumber,
			flag: 2
		}
		if (type.value == 'MOLD') {
			moldApi.getMoldDetailsByNumber(data).then((res) => {
				if (res.data) {
					form.value.deviceName = res.data.name
				} else {
					proxy.$modal.showToast(`找不到该${type.value == 'DEVICE' ? '设备' : '模具'}`)
				}
			}).catch(() => { })
		} else {
			deviceApi.getDeviceDetailsByNumber(data).then((res) => {
				if (res.data) {
					form.value.deviceName = res.data.name
				} else {
					proxy.$modal.showToast(`找不到该${type.value == 'DEVICE' ? '设备' : '模具'}`)
				}
			}).catch(() => { })
		}

	}
	// 根据设备获取二级列表
	function getSubList() {
		const data = {
			number: form.value.deviceNumber
		}
		deviceApi.getSubList(data).then((res) => {
			if (res.data) {
				subList.value = res.data
				subList.value.forEach(item => {
					item.isConform = 'TRUE'
				})
			} else {
				proxy.$modal.showToast(`找不到该${type.value == 'DEVICE' ? '设备' : '模具'}`)
			}
		}).catch(() => { })
	}
	// 触发提交表单
	function submit() {
		// 校验
		if (!form.value.describes) {
			proxy.$modal.showToast('请输入点检描述')
			return;
		}
		if (!form.value.deviceNumber) {
			proxy.$modal.showToast(`请输入${type.value == 'DEVICE' ? '设备' : '模具'}编码`)
			return;
		}
		if (!form.value.classes) {
			proxy.$modal.showToast('请选择班次')
			return;
		}
		if (subList.value.length == 0) {
			proxy.$modal.showToast('该设备无检修项目')
			return;
		}
		// subList.value.forEach(item=>{
		// 	item.isConform = !item.isConform1 ? 'FALSE' : 'TRUE'
		// })
		const data = {
			describes: form.value.describes,
			deviceNumber: form.value.deviceNumber,
			maintenances: form.value.maintenances,
			classes: form.value.classes,
			subList: subList.value,
			type: type.value
		}
		proxy.$modal.confirm('是否添加点检工单').then(() => {
			proxy.$modal.loading('加载中')
			loading.value = true
			spotCheckOrderApi.spotCheckOrderCreate(data, type.value).then((res) => {
				proxy.$modal.closeLoading()
				if (res.data) {
					proxy.$modal.showToast('添加成功')
					setTimeout(() => {
						proxy.$tab.navigateBack()
						loading.value = false
					}, 1500)
				} else {
					if (res.msg) {
						proxy.$modal.showToast(res.msg)
					} else {
						proxy.$modal.showToast('添加失败')
					}
					loading.value = false
				}
			}).catch(() => {
				proxy.$modal.closeLoading()
				loading.value = false
			})
		})

	}
	// 重置
	function reset() {
		form.value = {
			describes: "",
			deviceNumber: '',
			deviceName: '',
			maintenances: '',
			classes: ''
		}
	}

	// 单列模式
	function openSingleColumn(fieldName, val, list) {
		singleColumnList.value = list
		field.value = fieldName
		if (val) {
			singleColumnDefaultValue.value = [list.findIndex(item => item.value == val)]
		} else {
			singleColumnDefaultValue.value = []
		}
		singleColumnShow.value = true
	}
	// 单列模式点击确定之后
	function chooseSingleColumn(e) {
		form.value[field.value] = e[0].value
		if (field.value == 'classes') {
			form.value.classesName = e[0].label
		}
		singleColumnShow.value = false
	}
	onLoad(async (option) => {
		if (option.type) type.value = option.type;
		maintenanceShift.value = await dictApi.getDict('maintenance_shift')
		form.value.maintenances = uni.getStorageSync('user').nickname
	})

	function radioGroupChange(e) {
		console.log(e);
	}
</script>

<style lang="scss" scoped>
	.add-form-container {
		min-height: calc(100vh - 140rpx);
		background: white;
		padding: 0px 0rpx 140rpx;
	}

	.u-form-item {
		padding: 20rpx 30rpx;
	}

	.disabled {
		background: #f5f5f5;
	}

	.list {
		padding: 30rpx 30rpx;

		.item {
			display: flex;
			margin-bottom: 20rpx;

			.item-box {
				background: #F5F5F5;
				border-radius: 12rpx;
				flex: 1;
				width: 0rpx;
			}

			.spare-title {
				padding: 20rpx 30rpx;
				border-bottom: 1px solid #e4e4e4;

				.title-txt {
					color: #409eff;
					font-size: 30rpx;
					font-weight: bold;
				}
			}

			.dec {
				color: #9c9c9c;
				padding: 20rpx 30rpx 20rpx;
				display: flex;
				align-items: center;
			}

		}
	}


	.select {
		display: flex;
		align-items: center;
		height: 72rpx;
		width: 100%;

		.input {
			flex: 1;
			font-size: 28rpx;
			color: #000000;
		}

		.placeholder {
			flex: 1;
			font-size: 28rpx;
			color: rgb(192, 196, 204);

		}
	}

	.footer {
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;
	}

	.btns {
		display: flex;


		button {
			flex: 1;
		}

		.sure {
			background: #409eff;
			color: white;
			border-radius: 0px;

			&::after {
				border: 1px solid #409eff;
				border-radius: 0px;
			}
		}

		.reset {
			background: #F5F5F5;
			border-radius: 0px;

			&::after {
				border-radius: 0px;
			}
		}
	}

	.right-button {
		background: #409eff;
		color: white;
		padding: 0rpx 30rpx;
		border-radius: 16rpx;
		text-align: center;
		font-size: 28rpx;
	}
</style>