<template>
  <el-form label-position="top" class="generator-form" @submit.prevent="onGenerate">
    <el-form-item label="Минимум">
      <el-input-number v-model="min" :controls="true" />
    </el-form-item>
    <el-form-item label="Максимум">
      <el-input-number v-model="max" :controls="true" />
    </el-form-item>
    <el-form-item label="Количество">
      <el-input-number v-model="count" :min="1" :controls="true" />
    </el-form-item>
    <el-form-item>
      <el-checkbox v-model="unique">Только уникальные значения</el-checkbox>
    </el-form-item>
    <el-button type="primary" native-type="submit" size="large">
      Сгенерировать
    </el-button>
  </el-form>
</template>

<script>
import { ElMessage } from 'element-plus'
import { generateRange } from '@/utils/random'

export default {
  name: 'RangeGenerator',
  emits: ['result'],
  data() {
    return {
      min: 1,
      max: 100,
      count: 5,
      unique: false
    }
  },
  methods: {
    onGenerate() {
      if (this.min > this.max) {
        ElMessage.error('Минимум не может быть больше максимума')
        return
      }
      if (this.count < 1) {
        ElMessage.error('Количество должно быть не меньше 1')
        return
      }
      try {
        this.$emit('result', generateRange(this.min, this.max, this.count, this.unique))
      } catch (err) {
        ElMessage.error(err.message)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.generator-form {
  max-width: 420px;
}

:deep(.el-input-number) {
  width: 100%;
}
</style>
