<template>
  <m-dialog title="导入训练数据" :visible.sync="show" @submit="handleSubmit">
    <MForm ref="form" :items="formItems" v-model="formValues" v-loading="loading"></MForm>
  </m-dialog>
</template>

<script>
import MDialog from '@/components/Dialog'
import MForm from '@/components/MForm'
import {
  uploadTrainingData
} from '@/api/dataChart'
export default {
  name: 'modelTrainManageUpload',
  components: {
    MDialog,
    MForm
  },
  data () {
    return {
      show: false,
      loading: false,
      formValues: {},
      formItems: [
        {
          label: '训练数据',
          key: 'file',
          type: 'upload',
          multiple: true,
          rules: [v => {
            if (!v) {
              return '请上传文件'
            }
            if (v.size > 500 * 1024) {
              return '文件大小不能超过500KB'
            }
          }]
        },
        {
          label: '文件类型',
          key: 'file_type',
          type: 'ifRadio',
          items: [
            { label: 'ddl', value: 'ddl' },
            { label: 'markdown', value: 'markdown' },
            { label: 'sql_pair_json', value: 'sql_pair_json' },
            { label: 'sql_pair', value: 'sql_pair' },
            { label: 'sql', value: 'sql' }
          ]
        }
      ]
    }
  },
  methods: {
    open () {
      this.show = true
      this.formValues = {
        file_type: 'ddl',
        file: null
      }
      this.$nextTick(() => {
        this.$refs.form.resetValidation()
      })
    },
    async handleSubmit () {
      const check = this.$refs.form.validate()
      if (!check) {
        return
      }
      this.loading = true
      try {
        const query = new FormData()
        query.append('file', this.formValues.file)
        query.append('training_data_type', this.formValues.training_data_type)
        await uploadTrainingData()
        this.$snackbar.success('导入成功')
        this.show = false
        this.$emit('success')
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
