<template>
    <el-drawer :title="title" :visible.sync="_multiInstanceDrawer" direction="rtl" @open="init">
        <div style="padding: 10px;">
            <el-form ref="multiInstanceForm" :model="multiInstance" label-width="80px">
                <el-form-item label="多实例类型">
                    <el-select v-model="multiInstance.isSequential" clearable>
                        <el-option
                                v-for="item in multiInstanceOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="循环次数" prop="loopCardinality">
                    <el-input v-model="multiInstance.loopCardinality" clearable/>
                </el-form-item>
                <el-form-item label="集合">
                    <el-input v-model="multiInstance.collection" clearable/>
                </el-form-item>
                <el-form-item label="元素变量">
                    <el-input v-model="multiInstance.elementVariable" clearable/>
                </el-form-item>
                <el-form-item label="完成条件">
                    <el-input v-model="multiInstance.completionCondition" clearable/>
                </el-form-item>
            </el-form>
            <div style="text-align:right">
                <el-button icon="el-icon-close" @click="_multiInstanceDrawer = false">取消</el-button>
                <el-button icon="el-icon-check" type="primary" @click="save">确定</el-button>
            </div>
        </div>
    </el-drawer>
</template>

<script>
    import mixinPanel from '../mixins/mixinPanel'

    export default {
        props: {
            multiInstanceDrawer: {
                type: Boolean,
                default: false
            },
            title: {
                type: String,
                default: ''
            }
        },
        mixins: [mixinPanel],
        computed: {
            _multiInstanceDrawer:{
                get(){
                    return this.multiInstanceDrawer
                },
                set(v){
                    this.$emit("changeMultiInstanceDrawer",v)
                }
            }
        },
        data() {
            return {
                multiInstanceOptions: [
                    // {
                    //     value: undefined,
                    //     label: ''
                    // },
                    {
                        value: true,
                        label: '串行'
                    },
                    {
                        value: false,
                        label: '并行'
                    }
                ],
                multiInstance: {
                    isSequential: '',
                    loopCardinality: '',
                    collection: '',
                    elementVariable: '',
                    completionCondition: '',
                },
            }
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                const loopCharacteristics = this.element.businessObject?.loopCharacteristics
                const isSequential = loopCharacteristics === undefined ? undefined : (loopCharacteristics.isSequential ?? false)
                const data = {}
                data.isSequential = isSequential
                data.collection = loopCharacteristics?.collection
                data.elementVariable = loopCharacteristics?.elementVariable
                data.loopCardinality = loopCharacteristics?.loopCardinality?.body
                data.completionCondition = loopCharacteristics?.completionCondition?.body

                this.multiInstance = data
            },
            save() {
                let hasMultiInstance = false
                if(this.multiInstance.isSequential === undefined || this.multiInstance.isSequential === ''){
                    delete this.element.businessObject.loopCharacteristics
                    this.multiInstance = {}
                    this.updateProperties({loopCharacteristics: undefined})
                }else{
                    let loopCharacteristics = this.element.businessObject.loopCharacteristics
                    if (!loopCharacteristics) {
                        loopCharacteristics = this.modeler.get('moddle').create('bpmn:MultiInstanceLoopCharacteristics')
                    }

                    loopCharacteristics.isSequential = this.multiInstance.isSequential

                    if(this.multiInstance.collection){
                        loopCharacteristics.set(this.descriptorPrefix + 'collection',this.multiInstance.collection)
                    }else{
                        loopCharacteristics.set(this.descriptorPrefix + 'collection',undefined)
                    }
                    if(this.multiInstance.elementVariable){
                        loopCharacteristics.set(this.descriptorPrefix + 'elementVariable',this.multiInstance.elementVariable)
                    }else{
                        loopCharacteristics.set(this.descriptorPrefix + 'elementVariable',undefined)
                    }
                    if (this.multiInstance.loopCardinality) {
                        const loopCardinality = this.modeler.get('moddle').create('bpmn:Expression', {body: this.multiInstance.loopCardinality})
                        loopCharacteristics['loopCardinality'] = loopCardinality
                    }else{
                        loopCharacteristics['loopCardinality'] = undefined
                    }
                    if (this.multiInstance.completionCondition) {
                        const completionCondition = this.modeler.get('moddle').create('bpmn:Expression', {body: this.multiInstance.completionCondition})
                        loopCharacteristics['completionCondition'] = completionCondition
                    }else{
                        loopCharacteristics['completionCondition'] = undefined
                    }
                    this.updateProperties({loopCharacteristics})
                    hasMultiInstance = true
                }
                this._multiInstanceDrawer = false
                this.$emit("saveMultiInstance", hasMultiInstance)
            }
        }
    }
</script>

<style>
    /*.muti-instance .el-form-item {
        margin-bottom: 22px;
    }*/
</style>
