<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :append-to-body="true"
    :close-on-click-modal="false"
    :before-close="handleClose"
    :width="width"
  >
    <component
      :is="pluginComponent"
      ref="plugin"
      :type="type"
      :code="code"
      :setting-json="pluginData"
      :workingsubclass-code="code"
      @submit="handleChildSubmit"
    />
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">{{ $t(key('cancel')) }}</el-button>
      <el-button type="primary" size="small" @click="handleFormSubmit">{{ $t(key('confirm')) }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { i18nMixin } from '@/composables/useI18n'
import WaitPlugin from './wait-setting-plugin.vue'
import JsonPlugin from './json-setting-plugin.vue'
import FormationPlugin from './formation-setting-plugin.vue'
import DeviceSettingPlugin from './device-setting-plugin.vue'
import NonStandardSettingPlugin from './non-standard-setting-plugin.vue'

export default {
  name: 'ProcessStepSettingDialog',
  components: {
    WaitPlugin,
    JsonPlugin,
    FormationPlugin,
    DeviceSettingPlugin,
    NonStandardSettingPlugin
  },
  mixins: [i18nMixin('page.production_master_data.process_model.process_step')],
  props: {
    type: { type: String, default: '' },
    code: { type: String, default: '' },
    title: { type: String, default: '' },
    width: { type: String, default: '50%' },
    visible: { type: Boolean, default: false },
    pluginData: { default: '' }
  },
  computed: {
    pluginComponent () {
      if (this.type === 'WaitPlugin') return 'WaitPlugin'
      if (this.type === 'FormationPlugin') return 'FormationPlugin'
      if (this.type === 'DvPlugin' || this.type === 'OcvrPlugin') return 'DeviceSettingPlugin'
      if (this.type === 'NonStandardProcessSettingPlugin') return 'NonStandardSettingPlugin'
      return 'JsonPlugin'
    }
  },
  methods: {
    handleClose () {
      this.$emit('close')
    },
    handleFormSubmit () {
      this.$refs.plugin && this.$refs.plugin.handleFormSubmit()
    },
    handleChildSubmit (data) {
      this.$emit('submit', data)
    }
  }
}
</script>
