<template>
	<div>
		<a-form ref='form' :model='form' label-width='120px' size='small'>
			<a-form-item :label="$t('fmeamanager.snakerflow.id')">
				<a-input v-model='form.name' disabled/>
			</a-form-item>
			<a-form-item :label="$t('fmeamanager.snakerflow.display-name')">
				<a-input v-model='form.displayName'></a-input>
			</a-form-item>
<!--			<a-form-item :label="$t('fmeamanager.snakerflow.form')">-->
<!--				<a-input v-model='form.form'></a-input>-->
<!--			</a-form-item>-->
<!--			<a-form-item :label="$t('fmeamanager.snakerflow.participant')">-->
<!--				<a-input v-model='form.assignee' disabled/>-->
<!--			</a-form-item>-->
<!--			<a-form-item :label="$t('fmeamanager.snakerflow.participant-processing-class')">-->
<!--				<a-input v-model='form.assignmentHandler'></a-input>-->
<!--			</a-form-item>-->
<!--			<a-form-item :label="$t('fmeamanager.snakerflow.task-type')">-->
<!--				<a-select v-model='form.taskType'>-->
<!--					<a-select-option value='Major'>{{ $t('fmeamanager.snakerflow.host-task') }}</a-select-option>-->
<!--					<a-select-option value='Aidant'>{{ $t('fmeamanager.snakerflow.co-organizer-task') }}</a-select-option>-->
<!--				</a-select>-->
<!--			</a-form-item>-->
			<a-form-item :label="$t('fmeamanager.snakerflow.type-of-participation')">
				<a-select v-model='form.performType'>
					<a-select-option value='ANY'>{{ $t('fmeamanager.snakerflow.general-participation') }}</a-select-option>
					<a-select-option value='ALL'>{{ $t('fmeamanager.snakerflow.countersign-participation') }}</a-select-option>
				</a-select>
			</a-form-item>
<!--			<a-form-item label='前置拦截器'>
				<a-input v-model='form.preInterceptors'></a-input>
			</a-form-item>
			<a-form-item label='后置拦截器'>
				<a-input v-model='form.postInterceptors'></a-input>
			</a-form-item>
			<a-form-item label='提醒时间'>
				<a-input v-model='form.reminderTime'></a-input>
			</a-form-item>
			<a-form-item label='重复提醒间隔'>
				<a-input v-model='form.reminderRepeat'></a-input>
			</a-form-item>
			<a-form-item label='期待完成时间'>
				<a-input v-model='form.expireTime'></a-input>
			</a-form-item>
			<a-form-item label='是否自动完成'>
				<a-select v-model='form.autoExecute'>
					<a-select-option value='N'>否</a-select-option>
					<a-select-option value='Y'>是</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item label='回调处理'>
				<a-input v-model='form.callback'></a-input>
			</a-form-item>
			<a-form-item label='宽度'>
				<a-input-number v-model='form.width' :step='5' :step-strictly='true'></a-input-number>
			</a-form-item>
			<a-form-item label='高度'>
				<a-input-number v-model='form.height' :step='5' :step-strictly='true'></a-input-number>
			</a-form-item>-->
<!--			<a-card>-->
<!--				<div slot='header' class='clearfix'>-->
<!--					<span>{{ $t('fmeamanager.snakerflow.extended-attributes') }}</span>-->
<!--					<a-dropdown style='float: right; padding: 3px 0' @command='handleCommand'>-->
<!--						<a-button type='text'>{{ $t('workbench.add') }}<i class='el-icon-arrow-down el-icon&#45;&#45;right'></i></a-button>-->
<!--						<a-menu slot='dropdown'>-->
<!--							<a-menu-item v-for='item in dropdownData' :key='item.name' :command='item.name'-->
<!--										 :icon='item.icon'>-->
<!--								{{ item.label }}-->
<!--							</a-menu-item>-->
<!--						</a-menu>-->
<!--					</a-dropdown>-->
<!--				</div>-->
<!--				<div>-->
<!--					<a-row v-for='item in attrList' :key='item.key' style='margin-bottom: 12px;'>-->
<!--						<a-col :span='10'-->
<!--							   style='height: 32px;display: flex;align-items: center;position: relative;z-index: 99999;'>-->
<!--             <span>{{ getLabel(item.key) }}&nbsp;-->
<!--               <a-tooltip :content='getTooltip(item.key)'>-->
<!--                <i class='el-icon-info'></i>-->
<!--               </a-tooltip>-->
<!--             </span>-->
<!--						</a-col>-->
<!--						<a-col :span='12'>-->
<!--							<a-input v-model='field[item.key]' size='small'></a-input>-->
<!--						</a-col>-->
<!--						<a-col :span='2' style='height: 32px;display: flex;align-items: center;padding-left: 10px;'>-->
<!--							<i class='el-icon-remove' @click='handleRemoveFieldAttr(item.key)'></i>-->
<!--						</a-col>-->
<!--					</a-row>-->
<!--				</div>-->
<!--			</a-card>-->
		</a-form>
	</div>
</template>

<script>
export default {
	props: {
		value: {
			type: Object,
			default() {
				return {};
			}
		},
		extendAttrConfig: { // 扩展属性配置
			type: Object
		}
	},
	data() {
		return {
			form: this.value,
			attrKey: '',
			field: this.value.field || {},
			mDropdownData: [
				{
					label: '用户标识',
					name: 'userKey',
					icon: '',
					tips: '参与者处理类可根据用户标识获取参与者'
				},
				{
					label: '用户组标识',
					name: 'groupKey',
					icon: '',
					tips: '参与者处理类可根据用户组标识获取参与者'
				},
				{
					label: '候选用户',
					name: 'candidateUsers',
					icon: '',
					tips: '候选用户(提供给上一节点选择下一节点参与者的用户标识)'
				},
				{
					label: '候选用户组',
					name: 'candidateGroups',
					icon: '',
					tips: '候选用户组(提供给上一节点选择下一节点参与者的用户组标识)'
				},
				{
					label: '候选人处理类',
					name: 'candidateHandler',
					icon: '',
					tips: '获取候选人的处理类'
				},
				{
					label: '额外属性1',
					name: 'attr1',
					icon: '',
					tips: '其他扩展属性1'
				},
				{
					label: '额外属性2',
					name: 'attr2',
					icon: '',
					tips: '其他扩展属性2'
				},
				{
					label: '额外属性3',
					name: 'attr3',
					icon: '',
					tips: '其他扩展属性3'
				}
			]
		};
	},
	computed: {
		attrList() {
			if (!this.field) {
				return [];
			}
			return Object.keys(this.field).map(key => {
				return {
					key: key,
					value: this.field[key]
				};
			});
		},
		dropdownData() {
			if (!this.extendAttrConfig || !this.extendAttrConfig.items || !this.extendAttrConfig.items.length) {
				return this.mDropdownData;
			}
			return this.extendAttrConfig.items;
		}
	},
	watch: {
		form: {
			handler(n) {
				this.$emit('change', n);
			},
			deep: true
		},
		value: {
			handler(n) {
				this.form = n;
			},
			deep: true
		},
		field: {
			handler(n) {
				this.$set(this.form, 'field', JSON.parse(JSON.stringify(this.field)));
			},
			deep: true
		}
	},
	methods: {
		handleCommand(command) {
			this.$set(this.field, command, '');
		},
		handleRemoveFieldAttr(key) {
			this.$delete(this.field, key);
		},
		getLabel(name) {
			const res = this.dropdownData.find(item => {
				return item.name === name;
			});
			if (res) {
				return res.label;
			}
			return '';
		},
		getTooltip(name) {
			const res = this.dropdownData.find(item => {
				return item.name === name;
			});
			if (res) {
				return res.tips || res.label;
			}
			return '';
		}
	}
};
</script>

<style scoped>

</style>
