<script setup name="BasicInfo">
import { ref } from 'vue'
const props = defineProps({
	label: {
		type: String
	},
	name: {
		type: String
	}
})
const visiblePopover = ref(false)
const formRef = ref()
const form = ref({
	图标: '',
	名称: 'test@example.com',
	分组: 'Lolowan',
	谁可以发起该流程: '100',
	管理员: '',
	说明: ''
})
const options = [
	{
		value: 'Option1',
		label: 'Option1'
	},
	{
		value: 'Option2',
		label: 'Option2'
	},
	{
		value: 'Option3',
		label: 'Option3'
	},
	{
		value: 'Option4',
		label: 'Option4'
	},
	{
		value: 'Option5',
		label: 'Option5'
	}
]
const rules = {
	图标: [
		{
			required: true,
			message: '请选择图标'
		}
	],
	名称: [
		{
			required: true,
			message: '请输入名称'
		}
	],
	分组: [
		{
			required: true,
			message: '请选择分组'
		}
	],
	管理员: [
		{
			required: true,
			message: '请选择管理员'
		}
	]
}
// const submitHandler = (cb: ((value: any) => any)) => {
const validate = () => {
	return new Promise((resolve, reject) => {
		formRef.value.validate((valid, errObj) => {
			if (valid) {
				console.error('valid 成功')
				// cb?.(form.value)
				resolve(form.value)
				// return form.value
				return
			}
			return reject([props.name, errObj])
		})
	})
}
defineExpose({
	formRef,
	validate
})
</script>

<template>
	<div class="base-info">
		<div class="base-info-panel">
			<el-form ref="formRef" :model="form" :rules="rules" label-position="top">
				<el-form-item label="图标" prop="图标">
					<el-space>
						<div class="icon-shower">
							<img src="https://lf3-ea.bytetos.com/obj/goofy/ee/approval/approval-admin/image/iconLib/v5/cart.svg" alt="" />
						</div>
					</el-space>

					<el-popover placement="right-end" :width="450" trigger="focus" class="base-popover" :visible="visiblePopover">
						<div class="icon-selector__dialog__content">
							<div class="icon-selector-list">
								<div v-for="item in 27" :key="item" class="icon-selector-item" @click="visiblePopover = !visiblePopover">
									<img src="https://lf3-ea.bytetos.com/obj/goofy/ee/approval/approval-admin/image/iconLib/v5/cart.svg" alt="" />
								</div>
							</div>
						</div>
						<template #reference>
							<el-link :underline="false" @click="visiblePopover = !visiblePopover">修改</el-link>
						</template>
					</el-popover>
				</el-form-item>
				<el-form-item label="名称" prop="名称">
					<el-input v-model="form.名称" clearable></el-input>
				</el-form-item>
				<el-form-item label="说明" prop="说明">
					<el-input v-model="form.说明" clearable></el-input>
				</el-form-item>
				<el-form-item label="分组" prop="分组">
					<el-select v-model="form.分组">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="谁可以发起该流程（默认全员）" prop="谁可以发起该流程">
					<div class="add-btn">
						<el-icon :size="18"><Plus /></el-icon>
					</div>
					<div></div>
				</el-form-item>
				<el-form-item label="管理员" prop="管理员">
					<div class="add-btn">
						<el-icon :size="18"><Plus /></el-icon>
					</div>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<style scoped lang="scss">
.basic-info-wrap {
	//background: var(--el-color-danger);
}
.flow-name {
	padding-right: 4px;
	color: var(--el-color-danger);
}

.base-info {
	margin: 0 auto;
	padding: 24px 0;
	height: 100%;
	text-align: center;
	overflow-y: auto;
	background-color: #eff0f1;
	&-panel {
		display: inline-block;
		width: 1128px;
		padding: 24px 288px;
		background-color: #fff;
		text-align: left;
	}
}

.icon-selector__dialog__content {
	height: 384px;
	overflow-x: visible;
	overflow-y: scroll;
	scrollbar-width: none;
	-ms-overflow-style: none;
	.icon-selector-list {
		display: grid;
		grid-template-columns: repeat(5, 64px);
		grid-template-rows: repeat(auto, 64px);
		grid-gap: 16px;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
		.icon-selector-item {
			width: 64px;
			height: 64px;
			padding: 8px;
			border: 1px solid #d0d3d6;
			box-sizing: border-box;
			border-radius: 6px;
			cursor: pointer;
			&:hover {
				border-color: #3370ff;
			}
			img {
				width: 100%;
				height: 100%;
				border-radius: 4px;
				overflow: hidden;
			}
		}
	}
}

.icon-shower {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.add-btn {
	width: 48px;
	height: 48px;
	font-family: PingFang SC, Microsoft YaHei;
	font-size: 14px;
	line-height: 20px;
	background-color: #eff0f1;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
