<template>
  <el-dialog
    :title="$t(key('multi_battery_input'))"
    :visible.sync="visibleProxy"
    width="520px"
    :close-on-click-modal="false"
    @open="onOpen"
  >
    <el-form>
      <el-form-item :label="$t(key('input_rule'))">
        <el-input v-model="inputValue" type="textarea" :rows="8" />
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button size="mini" @click="visibleProxy = false">{{ $t(key('cancel')) }}</el-button>
      <el-button size="mini" type="primary" @click="onConfirm">{{ $t(key('confirm')) }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { i18nMixin } from '@/composables/useI18n'

export default {
  name: 'BatteryInputDialog',
  mixins: [i18nMixin('page.planning_production.production_monitoring.rework_management')],
  props: {
    visible: { type: Boolean, default: false },
    value: { type: String, default: '' }
  },
  data () {
    return {
      inputValue: ''
    }
  },
  computed: {
    visibleProxy: {
      get () { return this.visible },
      set (value) { this.$emit('update:visible', value) }
    }
  },
  methods: {
    onOpen () {
      this.inputValue = this.value
    },
    onConfirm () {
      this.$emit('confirm', this.inputValue)
      this.visibleProxy = false
    }
  }
}
</script>
