<template>
  <div>
    <el-dialog
      title="پیکربندی چند نمونه"
      :visible.sync="dialogVisible"
      width="500px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      class="muti-instance"
      @closed="$emit('close')"
    >
      <el-alert
        type="info"
        :closable="false"
        show-icon
        style="margin-bottom: 20px"
      >
        <template #title>
          همانطور که توسط مشخصات BPMN 2.0 لازم است، اجرای والد مورد استفاده برای ایجاد اجرا برای هر نمونه، متغیرهای زیر را ارائه می دهد:<br>
          nrOfInstances: تعداد کل نمونه ها.<br>
          nrOfActiveInstances：در حال حاضر فعال (یعنی برجسته)، تعداد موارد. برای چند نمونه متوالی، این مقدار همیشه 1 است.<br>
          nrOfCompletedInstances：تعداد نمونه های تکمیل شده<br>
          loopCounter：شاخص نمونه داده شده در حلقه برای هر.<br>
        </template>
      </el-alert>
      <x-form ref="xForm" v-model="formData" :config="formConfig" />
    </el-dialog>
  </div>
</template>

<script>
import mixinPanel from '../../../common/mixinPanel'
import { formatJsonKeyValue } from '../../../common/parseElement'
export default {
  mixins: [mixinPanel],
  data() {
    return {
      dialogVisible: true,
      formData: {}
    }
  },
  computed: {
    formConfig() {
      const _this = this
      return {
        inline: false,
        item: [
          {
            xType: 'input',
            name: 'collection',
            label: 'جمع آوری',
            tooltip: 'ویژگی ها به صورت عبارات حل می شوند. اگر عبارت به جای یک مجموعه به یک رشته تبدیل شود، <br ​​/> چه با یک مقدار رشته ایستا پیکربندی شده باشد و چه عبارت به یک رشته ارزیابی شود، رشته<br /> به عنوان یک نام متغیر در نظر گرفته می شود و برای مجموعه واقعی را از متغیر فرآیند دریافت کنید.'
          },
          {
            xType: 'input',
            name: 'elementVariable',
            label: 'متغیر عنصر',
            tooltip: 'قبل از ایجاد هر کار کاربر، یک متغیر فرآیند (محلی) با متغیر عنصر به عنوان برچسب و یک آیتم در مجموعه به عنوان مقدار ایجاد می‌شود و از متغیر فرآیند محلی برای تعیین تکلیف کاربر استفاده می‌شود. <br /> به طور کلی، این رشته باید با متغیر شخص مشخص شده یکسان باشد.'
          },
          {
            xType: 'radio',
            name: 'isSequential',
            label: 'راه اجرا',
            dic: [{ label: 'سریال', value: true }, { label: 'موازی', value: false }]
          },
          {
            xType: 'input',
            name: 'completionCondition',
            label: 'شرط تکمیل',
            tooltip: 'یک فعالیت چند نمونه ای زمانی پایان می یابد که همه نمونه ها تکمیل شوند، با این حال می توان یک عبارت را نیز برای ارزیابی در پایان هر نمونه مشخص کرد. هنگامی که عبارت به درستی ارزیابی می شود، تمام نمونه های باقی مانده از بین می روند و فعالیت چند نمونه ای خاتمه می یابد و این روند ادامه می یابد. به عنوان مثال، ${nrOfCompletedInstances/nrOfInstances >= 0.6 }، <br ​​/> به این معنی است که وقتی کار 60٪ کامل شد، گره تکمیل می شود.'
          }
        ],
        operate: [
          { text: 'مطمئن', show: true, click: _this.save },
          { text: 'خالی', show: true, click: () => { _this.formData = {} } }
        ]
      }
    }
  },
  mounted() {
    const cache = JSON.parse(JSON.stringify(this.element.businessObject.loopCharacteristics ?? {}))
    cache.completionCondition = cache.completionCondition?.body
    this.formData = formatJsonKeyValue(cache)
  },
  methods: {
    updateElement() {
      if (this.formData.isSequential !== null && this.formData.isSequential !== undefined) {
        let loopCharacteristics = this.element.businessObject.get('loopCharacteristics')
        if (!loopCharacteristics) {
          loopCharacteristics = this.modeler.get('moddle').create('bpmn:MultiInstanceLoopCharacteristics')
        }
        loopCharacteristics['isSequential'] = this.formData.isSequential
        loopCharacteristics['collection'] = this.formData.collection
        loopCharacteristics['elementVariable'] = this.formData.elementVariable
        if (this.formData.completionCondition) {
          const completionCondition = this.modeler.get('moddle').create('bpmn:Expression', { body: this.formData.completionCondition })
          loopCharacteristics['completionCondition'] = completionCondition
        }
        this.updateProperties({ loopCharacteristics: loopCharacteristics })
      } else {
        delete this.element.businessObject.loopCharacteristics
      }
    },
    save() {
      this.updateElement()
      this.dialogVisible = false
    }
  }
}
</script>

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