<template>
  <MDialog title="模型训练" width="600px" :visible.sync="visible" :footer="!readonly" @submit="onSubmit">
    <MForm ref="form" :items="formItems" v-model="formValues"></MForm>
  </MDialog>
</template>

<script>
import MDialog from '@/components/Dialog'
import MForm from '@/components/MForm'
import {
  createTrainingData,
  updateTrainingData
} from '@/api/dataChart'
export default {
  name: 'modelTrainManage',
  components: {
    MDialog,
    MForm
  },
  data () {
    return {
      visible: false,
      readonly: false,
      formValues: {
        training_data_type: 'sql',
        question: '',
        content: ''
      },
      kinds: {
        sql: {
          text: 'SQL语句内容',
          key: 'sql'
        },
        documentation: {
          text: '文档内容',
          key: 'content'
        },
        ddl: {
          text: 'DDL语句内容', // ddl类型
          key: 'ddl'
        },
        error_sql: {
          text: 'SQL语句内容',
          key: 'error_sql'
        }
      }
    }
  },
  computed: {
    formItems () {
      const isSql = this.formValues.training_data_type === 'sql' || this.formValues.training_data_type === 'error_sql'
      return [
        {
          label: '数据类型',
          key: 'training_data_type',
          type: 'ifRadio',
          items: [
            { label: 'sql', value: 'sql', readonly: this.readonly },
            { label: 'documentation', value: 'documentation', readonly: this.readonly },
            { label: 'ddl', value: 'ddl', readonly: this.readonly },
            { label: 'error_sql', value: 'error_sql', readonly: this.readonly }
          ],
          rules: [v => this.readonly || !!v || '请选择数据类型'],
          change: (val) => {
            this.$nextTick(() => {
              this.$refs.form.resetValidation()
            })
          }
        },
        {
          label: `提问内容 ${isSql ? '*' : ''}`,
          key: 'question',
          readonly: this.readonly,
          hide: this.formValues.training_data_type !== 'sql' && this.formValues.training_data_type !== 'error_sql',
          type: 'textarea',
          rules: [v => !isSql || this.readonly ? true : !!v || '请输入提问内容']
        },
        {
          label: this.kinds[this.formValues.training_data_type].text,
          key: 'content',
          readonly: this.readonly,
          rows: 10,
          type: 'textarea',
          rules: [v => this.readonly || !!v || '请输入回答内容']
        }
      ]
    }
  },
  methods: {
    open (item, readonly = false) {
      this.readonly = readonly
      this.visible = true
      if (!item) {
        this.formValues = {
          training_data_type: 'sql'
        }
        this.$nextTick(() => {
          this.$refs.form.resetValidation()
        })
        return
      }
      this.formValues = { ...item }
      this.$nextTick(() => {
        this.$refs.form.resetValidation()
      })
    },
    async onSubmit () {
      if (!this.$refs.form.validate()) return
      // const a = {
      //   data: {
      //     training_data_type: '选择的类型',
      //     question: '问题内容', // sql和error_sql类型必填
      //     content: '文档内容', // documentation类型
      //     ddl: 'DDL语句内容' // ddl类型
      //     sql: 'SQL语句内容', // sql和error_sql类型
      //   }
      // }
      const { content, question, training_data_type: type } = this.formValues
      const query = {
        id: this.formValues.id,
        training_data_type: type,
        [this.kinds[type].key]: content,
        question: type === 'sql' || type === 'error_sql' ? question : undefined
      }
      try {
        if (this.formValues.id) {
          await updateTrainingData(query)
        } else {
          await createTrainingData({
            data: query
          })
        }

        this.$snackbar.success('创建成功')
        this.visible = false
        this.$emit('success')
      } catch (error) {
        this.$snackbar.error(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
