<template>
	<div class="node-wrap">
		<div class="node-wrap-box" @click="show">
			<div class="title" style="background: #ff943e">
				<el-icon class="icon"><user-filled /></el-icon>
				<span>{{ nodeConfig.nodeName }}</span>
				<el-icon class="close" @click.stop="delNode()"><close /></el-icon>
			</div>
			<div class="content">
				<span v-if="toText(nodeConfig)">{{ toText(nodeConfig) }}</span>
				<span v-else class="placeholder">请选择</span>
			</div>
		</div>
		<add-node v-model="nodeConfig.childNode"></add-node>
		<el-drawer v-model="drawer" title="审批人设置" destroy-on-close append-to-body :size="600" class="aDrawer">
			<template #header>
				<div class="node-wrap-drawer__title">
					<label v-if="!isEditTitle" @click="editTitle"
						>{{ form.nodeName }}<el-icon class="node-wrap-drawer__title-edit"><edit /></el-icon
					></label>
					<el-input v-if="isEditTitle" ref="nodeTitle" v-model="form.nodeName" clearable @blur="saveTitle" @keyup.enter="saveTitle"></el-input>
				</div>
			</template>
			<el-container>
				<el-main>
					<el-form label-position="top" class="aForm">
						<el-form-item label="审批类型" style="margin-bottom: 8px">
							<el-radio-group v-model="form.typeOfApprover">
								<el-radio label="1">人工审批</el-radio>
								<el-radio label="2">自动通过</el-radio>
								<el-radio label="3">自动拒绝</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-form>

					<div v-show="form.typeOfApprover === '1'" class="self-radio-group">
						<el-radio-group v-model="radio1">
							<el-radio-button label="1">设置审批人</el-radio-button>
							<el-radio-button label="2">表单权限</el-radio-button>
							<el-radio-button v-if="false" label="3">操作权限</el-radio-button>
						</el-radio-group>
					</div>

					<div v-show="form.typeOfApprover === '1'">
						<!-- 设置审批人 -->
						<el-form v-show="radio1 == '1'" label-position="top" class="aForm">
							<el-form-item label="">
								<div class="item-wrap approver" style="width: 100%">
									<div class="approver-list">
										<div class="approver-wrapper">
											<div class="header">
												<span>审批人员类型</span>
											</div>
											<div class="main-content">
												<el-radio-group v-model="form.setType" class="main-content-radio">
													<el-radio :label="Number(1)">指定成员</el-radio>
													<el-radio :label="Number(2)">主管</el-radio>
													<el-radio :label="Number(3)">角色</el-radio>
													<el-radio :label="Number(4)">发起人自选</el-radio>
													<el-radio :label="Number(5)">发起人自己</el-radio>
													<el-radio :label="Number(6)">连续多级主管</el-radio>
												</el-radio-group>
											</div>
										</div>
									</div>
								</div>
							</el-form-item>

							<el-form-item v-if="form.setType == 1" label="选择成员">
								<el-button type="primary" :icon="Plus" round @click="selectHandle(1, form.nodeUserList)">选择人员</el-button>
								<div class="tags-list">
									<el-tag v-for="(user, index) in form.nodeUserList" :key="user.id" closable @close="delUser(index)">{{ user.name }}</el-tag>
								</div>
							</el-form-item>

							<el-form-item v-if="form.setType == 2" label="指定主管">
								发起人的第 <el-input-number v-model="form.examineLevel" :min="1" /> 级主管
							</el-form-item>

							<el-form-item v-if="form.setType == 3" label="选择角色">
								<el-button type="primary" :icon="Plus" round @click="selectHandle(2, form.nodeRoleList)">选择角色</el-button>
								<div class="tags-list">
									<el-tag v-for="(role, index) in form.nodeRoleList" :key="role.id" type="info" closable @close="delRole(index)">{{
										role.name
									}}</el-tag>
								</div>
							</el-form-item>

							<el-form-item v-if="form.setType == 4" label="发起人自选">
								<el-radio-group v-model="form.selectMode">
									<el-radio :label="1">自选一个人</el-radio>
									<el-radio :label="2">自选多个人</el-radio>
								</el-radio-group>
							</el-form-item>

							<el-form-item v-if="form.setType == 7" label="连续主管审批终点">
								<el-radio-group v-model="form.directorMode">
									<el-radio :label="0">直到最上层主管</el-radio>
									<el-radio :label="1">自定义审批终点</el-radio>
								</el-radio-group>
								<p v-if="form.directorMode == 1">直到发起人的第 <el-input-number v-model="form.directorLevel" :min="1" /> 级主管</p>
							</el-form-item>
							<el-divider></el-divider>
							<el-form-item label="">
								<el-checkbox v-model="form.termAuto" label="超时自动审批"></el-checkbox>
							</el-form-item>
							<template v-if="form.termAuto">
								<el-form-item label="审批期限（为 0 则不生效）"> <el-input-number v-model="form.term" :min="0" /> 小时 </el-form-item>
								<el-form-item label="审批期限超时后执行">
									<el-radio-group v-model="form.termMode">
										<el-radio :label="0">自动通过</el-radio>
										<el-radio :label="1">自动拒绝</el-radio>
									</el-radio-group>
								</el-form-item>
							</template>
							<el-divider></el-divider>
							<el-form-item label="多人审批时审批方式">
								<el-radio-group v-model="form.examineMode">
									<p style="width: 100%"><el-radio :label="1">按顺序依次审批</el-radio></p>
									<p style="width: 100%"><el-radio :label="2">会签 (可同时审批，每个人必须审批通过)</el-radio></p>
									<p style="width: 100%"><el-radio :label="3">或签 (有一人审批通过即可)</el-radio></p>
								</el-radio-group>
							</el-form-item>
						</el-form>

						<!-- 表单设置 -->
						<div v-show="radio1 == '2'">
							<el-table ref="multipleTableRef" :data="form.tableData" style="width: 100%">
								<el-table-column align="center">
									<template #header> 全选 </template>
									<template #default="scope">
										<el-checkbox />{{scope.row.checked}}
									</template>
								</el-table-column>
								<el-table-column property="title" label="表单字段" align="center" />
							</el-table>
						</div>

						<!-- 操作权限 -->
						<el-form v-show="radio1 == '3'" label-position="top" class="aForm">
							<el-form-item label="" style="margin-bottom: 28px">
								<div style="display: flex; flex-direction: column">
									<el-checkbox label="允许转交" />
									<el-checkbox label="允许加签/减签" />
									<el-checkbox label="允许回退" />
								</div>
							</el-form-item>

							<el-form-item label="提示: ">
								<div><el-text type="primary">*</el-text>&nbsp;若审批人设置为连续多级上级、连续多级部门负责人时，允许的加签 / 减签不能生效。</div>
								<div><el-text type="primary">*</el-text>&nbsp;若多人审批方式为依次审批时，允许的加签 / 减签不能生效。</div>
							</el-form-item>
						</el-form>
					</div>
				</el-main>
				<el-footer>
					<el-button type="primary" @click="save">保存</el-button>
					<el-button @click="drawer = false">取消</el-button>
				</el-footer>
			</el-container>
		</el-drawer>
	</div>
</template>

<script>
import addNode from './addNode'
import { Plus } from '@element-plus/icons-vue'
import { mapState } from 'pinia' //引入映射函数
import useFlowStore from '@/store/modules/flow'

export default {
	components: {
		addNode
	},
	inject: ['select'],
	props: {
		modelValue: { type: Object, default: () => {} }
	},
	data() {
		return {
			nodeConfig: {},
			drawer: false,
			isEditTitle: false,
			form: {},
			radio1: '1'
		}
	},
	computed: {
		Plus() {
			return Plus
		},
		...mapState(useFlowStore, ['processForm']) //映射函数，取出processForm
	},
	watch: {
		modelValue() {
			this.nodeConfig = this.modelValue
		}
	},
	mounted() {
		this.nodeConfig = this.modelValue
	},
	methods: {
		show() {
			this.form = {}
			const initOperateTable = JSON.parse(this.processForm)
			// const initOperateTable = _initOperateTable.map(item => (item.checked = false))

			this.form = JSON.parse(JSON.stringify(this.nodeConfig))
			this.form.tableData = initOperateTable
			this.drawer = true
		},
		editTitle() {
			this.isEditTitle = true
			this.$nextTick(() => {
				this.$refs.nodeTitle.focus()
			})
		},
		saveTitle() {
			this.isEditTitle = false
		},
		save() {
			this.$emit('update:modelValue', this.form)
			this.drawer = false
		},
		delNode() {
			this.$emit('update:modelValue', this.nodeConfig.childNode)
		},
		delUser(index) {
			this.form.nodeUserList.splice(index, 1)
		},
		delRole(index) {
			this.form.nodeRoleList.splice(index, 1)
		},
		selectHandle(type, data) {
			this.select(type, data)
		},
		toText(nodeConfig) {
			if (nodeConfig.setType == 1) {
				if (nodeConfig.nodeUserList && nodeConfig.nodeUserList.length > 0) {
					const users = nodeConfig.nodeUserList.map(item => item.name).join('、')
					return users
				} else {
					return false
				}
			} else if (nodeConfig.setType == 2) {
				return nodeConfig.examineLevel == 1 ? '直接主管' : `发起人的第${nodeConfig.examineLevel}级主管`
			} else if (nodeConfig.setType == 3) {
				if (nodeConfig.nodeRoleList && nodeConfig.nodeRoleList.length > 0) {
					const roles = nodeConfig.nodeRoleList.map(item => item.name).join('、')
					return '角色-' + roles
				} else {
					return false
				}
			} else if (nodeConfig.setType == 4) {
				return '发起人自选'
			} else if (nodeConfig.setType == 5) {
				return '发起人自己'
			} else if (nodeConfig.setType == 7) {
				return '连续多级主管'
			}
		}
	}
}
</script>

<style lang="scss">
// 审批类型
.self-radio-group {
	margin-bottom: 8px;
	.el-radio-group {
		//padding: 1.5px;
		width: 100%;
		line-height: 30px;
		background-color: var(--el-fill-color-darker);
		border-radius: var(--el-border-radius-small);
		.el-radio-button {
			flex: 1;
		}
		.el-radio-button__inner {
			width: 100%;
		}
	}
}

// 审批人员类型
.approver-wrapper {
	border: 1px solid #e4e5e7;
	border-radius: 6px;
	overflow: hidden;
	.header {
		padding: 0 16px;
		background: #f5f6f7;
		height: 36px;
		line-height: 36px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		span {
			color: #1f2329;
			font-weight: 600;
		}
	}
	.main-content-radio {
		padding: 10px 16px;
		width: 100%;

		&.el-radio-group {
			display: flex;
			flex-wrap: wrap;
			.el-radio {
				width: 33.33%;
				margin-right: 0px;
			}
		}
	}
}

// 表单表头样式
.aForm {
	&.el-form {
		.el-form-item {
			.el-form-item__label {
				color: #1f2329;
				font-weight: 600;
			}
		}
	}
}

.tags-list {
	.el-tag {
		margin-right: 10px;
	}
}
</style>
