<script setup lang="ts">
	import { ref } from 'vue'
	import { postAction } from '../../common/http';
	import { showToast } from 'vant';


	const form = ref({ type: 'Normal', evidence: [{ chooses: [{}] }] } as any)
	const showPicker = ref(false)
	const popuList = ref([] as any[])
	const dataType = ref('' as any)

	const pickerOpen = () => {
		if (dataType.value === 'necessary') {
			popuList.value = [{ text: '是', value: true }, { text: '否', value: false }]
		}
	}

	const pickerConfirm = (val : any) => {
		form.value[dataType.value] = val.selectedValues[0]
		showPickerCancel()
	}
	const showPickerCancel = () => {
		showPicker.value = false
	}

	const onSubmit = () => {
		postAction('/process', form.value).then((res : any) => {
			if (res.code === 200) {
				showToast('提交成功！')
				window.history.back()
			}
		})
	}

	const onChange = (val : any) => {
		form.value = { type: val, evidence: [{}] }
	}
	const typeChange = (item : any) => {
		if (item.type === 'Select') {
			item.chooses = [{ value: '' }]
		} else {
			item.chooses = []
		}
	}
</script>

<template>
	<view class="flex">
		<van-nav-bar title="工序详情" />
		<view class="content">
			<van-form @submit="onSubmit">
				<van-cell-group inset>
					<van-field name="类型" label="类型" colon label-width="6em">
						<template #input>
							<van-radio-group v-model="form.type" direction="horizontal" @change="onChange">
								<van-radio name="Normal">普通</van-radio>
								<van-radio name="Special">特殊</van-radio>
							</van-radio-group>
						</template>
					</van-field>
					<van-field v-model="form.name" name="工序名称" label="工序名称" colon label-width="6em"
						:rules="[{ required: true, message: '请填写工序名称' }]" />
					<van-field v-model="form.serialNum" name="序号" label="序号" colon label-width="6em"
						:rules="[{ required: true, message: '请填写序号' }]" />

					<van-field name="需上传项" label="需上传项" colon label-width="6em">
						<template #input>
							<van-icon name="add" color="red" size="25" @click="form.evidence.push({})" />
						</template>
					</van-field>
					<!-- 普通 -->
					<view class="card" v-for="(item,index) in form.evidence" :key="index">
						<van-field v-model="item.name" name="上传项名称" label="上传项名称" colon label-width="6em"
							:rules="[{ required: true, message: '请填写上传项名称' }]" />
						<van-field name="类型" label="类型" colon label-width="6em">
							<template #input>
								<van-radio-group v-model="item.type" direction="horizontal" @change="typeChange(item)">
									<van-radio name="Input">填空</van-radio>
									<van-radio name="Select">选择</van-radio>
								</van-radio-group>
							</template>
						</van-field>
						<template v-if="item.type=='Input'">
							<van-field name="填写内容" label="填写内容" colon label-width="6em">
								<template #input>
									<van-checkbox-group v-model="item.contentType" direction="horizontal"
										shape="square">
										<van-checkbox name="Text">文字</van-checkbox>
										<van-checkbox name="File">图片</van-checkbox>
									</van-checkbox-group>
								</template>
							</van-field>
							<van-field name="是否必填" label="是否必填" colon label-width="6em">
								<template #input>
									<van-radio-group v-model="item.necessary" direction="horizontal">
										<van-radio :name="true">是</van-radio>
										<van-radio :name="false">否</van-radio>
									</van-radio-group>
								</template>
							</van-field>
						</template>
						<template v-if="item.type=='Select'">
							<view v-for="(itemSecond,indexSecond) in item.chooses" :key="indexSecond">
								<van-field v-model="itemSecond.value" name="选项内容" label="选项内容" class="bor-a" colon
									:rules="[{ required: true, message: '请填写' }]" label-width="6em">
									<template #button>
										<van-icon name="add" color="red" size="25"
											@click.stop="item.chooses.push({value:''})" v-if="indexSecond===0" />
										<van-icon name="clear" color="red" size="25"
											@click.stop="item.chooses.splice(index,1)" v-else />
									</template>
								</van-field>
							</view>
							<van-field name="是否必填" label="是否必填" colon label-width="6em">
								<template #input>
									<van-radio-group v-model="item.necessary" direction="horizontal">
										<van-radio :name="true">是</van-radio>
										<van-radio :name="false">否</van-radio>
									</van-radio-group>
								</template>
							</van-field>
						</template>
					</view>
					<!-- 特殊 -->
					<view v-if="form.type=='Special'">
						<van-field name="后续操作" label="后续操作" colon label-width="6em" :rules="[{ required: true, message: '请选择' }]">
							<template #input>
								<van-radio-group v-model="form.nextStep" direction="horizontal">
									<van-radio name="NeedFix">出厂质检</van-radio>
									<van-radio name="ChangeCraft">更换工艺</van-radio>
									<van-radio name="JustInsert">仅插入</van-radio>
								</van-radio-group>
							</template>
						</van-field>
						<van-field v-model="form.externalOrderAlert" name="订单超过" label="订单超过" type="number" colon
							label-width="6em" :rules="[{ required: true, message: '请填写上传项名称' }]">
							<template #button>
								次审核
							</template>
						</van-field>
						<van-field v-model="form.internalOrderAlert" name="现货超过" label="现货超过" type="number" colon
							label-width="6em" :rules="[{ required: true, message: '请填写上传项名称' }]">
							<template #button>
								次审核
							</template>
						</van-field>
					</view>
				</van-cell-group>

				<view style="margin: 16px;">
					<van-button round block type="primary" native-type="submit">
						提交
					</van-button>
				</view>
			</van-form>
		</view>
	</view>

	<!--选择框-->
	<van-popup v-model:show="showPicker" round position="bottom" @open="pickerOpen">
		<van-picker show-toolbar :columns="popuList" @confirm="pickerConfirm" @cancel="showPickerCancel"
			ref="pickerRef" />
	</van-popup>
</template>

<style scoped lang="scss">
	.flex {
		display: flex;
		flex-direction: column;
		height: 100vh;
		width: 100vw;

		.van-nav-bar {
			width: 100%;
		}

		.content {
			flex: 1;
			padding: 0 10rpx;

			.radio-label {
				margin-right: 15px;
			}

			.card {
				border-bottom: 1rpx solid #d7d7d7;
			}

			::v-deep .van-field {
				font-size: 16px;
			}

			::v-deep .van-field__label {
				text-align: end;
			}
		}
	}

	.bor-a {
		::v-deep .van-field__control {
			text-align: center;
			border-bottom: 1px solid #d7d7d7;
		}
	}

	::v-deep .van-field__control {
		text-align: center;
		font-size: 16px;
	}

	.bor {
		::v-deep .van-field__control {
			text-align: end;
			border: 1px solid #d7d7d7;
		}
	}

	::v-deep .van-cell {
		padding: 12rpx 0;
	}

	::v-deep .van-cell-group--inset {
		margin: 0;
	}
</style>