<template>
  <div>
    <x-form ref="xForm" v-model="formData" :config="formConfig">
      <template #executionListener>
        <el-badge :value="executionListenerLength">
          <el-button size="small" @click="dialogName = 'executionListenerDialog'">ویرایش</el-button>
        </el-badge>
      </template>
    </x-form>
    <executionListenerDialog
      v-if="dialogName === 'executionListenerDialog'"
      :element="element"
      :modeler="modeler"
      @close="finishExecutionListener"
    />
  </div>
</template>

<script>
import mixinPanel from '../../common/mixinPanel'
import mixinExecutionListener from '../../common/mixinExecutionListener'
import { commonParse } from '../../common/parseElement'
export default {
  mixins: [mixinPanel, mixinExecutionListener],
  data() {
    return {
      formData: {}
    }
  },
  computed: {
    formConfig() {
      return {
        inline: false,
        item: [
          {
            xType: 'input',
            name: 'id',
            label: 'شناسه گره',
            rules: [{ required: true, message: 'شناسه نمی تواند خالی باشد' }]
          },
          {
            xType: 'input',
            name: 'name',
            label: 'نام گره'
          },
          {
            xType: 'input',
            name: 'documentation',
            label: 'توضیحات گره'
          },
          {
            xType: 'slot',
            name: 'executionListener',
            label: 'اجرای شنونده'
          },
          {
            xType: 'switch',
            name: 'async',
            label: 'ناهمگام',
            activeText: 'آره',
            inactiveText: 'نه'
          }
        ]
      }
    }
  },
  watch: {
    'formData.async': function(val) {
      if (val === '') val = null
      this.updateProperties({ 'flowable:async': val })
    }
  },
  created() {
    this.formData = commonParse(this.element)
  }
}
</script>

<style>

</style>
