<template>
  <el-dialog title="自动生成" :visible.sync="dialogVisible" width="500px" :before-close="generationHandleClose">
    <div class="auto-generation">
      <span>计算模型</span>
      <el-select v-model="formulaValue" placeholder="请选择">
        <el-option v-for="item in formulaOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
      </el-select>
    </div>
    <div class="auto-generation">
      <span>公式展示</span>
      <el-input v-model="formulaDisplay" placeholder="公式展示"></el-input>
    </div>
    <div class="auto-generation">
      <span>添加方式</span>
      <el-radio-group v-model="addModeValue">
        <el-radio v-for="item in addModeOptions" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
      </el-radio-group>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="generationHandleClose">取 消</el-button>
      <el-button type="primary" @click="generationHandelClick">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addModeOptions, formulaOptions } from './index'
import { useMessage } from '@/utils/element-ui'
export default {
  name: 'AutomaticGeneration',
  components: {},
  data() {
    // 这里存放数据
    return {
      dialogVisible: false,
      formulaValue: '时长模型',
      formulaOptions,
      formulaDisplay: '',
      addModeValue: '1',
      addModeOptions
    }
  },
  mounted() {},
  methods: {
    openGenerationDialog() {
      this.dialogVisible = true
    },
    generationHandleClose() {
      this.dialogVisible = false
    },
    generationHandelClick() {
      useMessage('success', '生成成功', 1000)
      this.dialogVisible = false
      let automaticGeneration = {
        formulaValue: this.formulaValue,
        formulaDisplay: this.formulaDisplay,
        addModeValue: this.addModeValue
      }
      this.$emit('generationHandelClick', automaticGeneration)
    }
  }
}
</script>

<style lang="scss">
@import './index.scss';
</style>
