<template>
  <m-dialog title="表名清单" :visible.sync="show" :footer="false">
    <MTable
      elevation="0"
      :items="items"
      :headers="headers"
      :loading="loading"
      :total="items.length"
      :show-select="false"
      :is-tools="false"
    >
      <template #navBtn>
        <v-btn class="mr-3" color="primary" rounded @click="handleAdd">在线提交表名</v-btn>
        <UploadBtn color="primary" accept=".txt" @change="handleChangeFile">上传表清单文件</UploadBtn>
      </template>
    </MTable>
    <!-- <div
      style="min-height: 300px;"
      v-loading="loading"
    >
      <v-list
        subheader
      >
        <v-list-item
          v-for="item in items"
          :key="item"
        >
          <v-list-item-content>
            <v-list-item-title>{{ item }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </div> -->
    <ModelTrainTableSubmit ref="modelTrainTableSubmitRefs" @success="getData"></ModelTrainTableSubmit>
  </m-dialog>
</template>

<script>
import MTable from '@/components/List/table'
import UploadBtn from '@/components/UploadBtn'
import MDialog from '@/components/Dialog'
import ModelTrainTableSubmit from './modelTrainTableSubmit'
import {
  getDataBaseList,
  uploadDataTasksList
} from '@/api/dataChart'
// import loading from '@/directives/loading'
export default {
  name: 'modelTrainTable',
  components: {
    MTable,
    MDialog,
    UploadBtn,
    ModelTrainTableSubmit
  },
  data () {
    return {
      show: false,
      loading: false,
      items: [],
      headers: [
        { text: '表名', value: 'table_name' }
      ],
      id: null
    }
  },
  methods: {
    open (id) {
      this.id = id
      this.show = true
      this.getData()
    },
    async getData () {
      try {
        this.loading = true
        const { data } = await getDataBaseList({
          task_id: this.id
        })
        this.items = data.tables.map(e => ({
          table_name: e
        }))
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        this.loading = false
      }
    },
    handleAdd () {
      this.$refs.modelTrainTableSubmitRefs.open(this.id)
    },
    async handleChangeFile (file) {
      const query = new FormData()
      query.append('file', file)
      this.loading = true
      try {
        await uploadDataTasksList(this.id, query)
        this.$snackbar.success('更新成功')
        this.getData()
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
