<template>
  <m-dialog title="任务文件" :visible.sync="show" :footer="false">
    <m-table
      class="mt-3"
      elevation="0"
      :loading="loading"
      :headers="headers"
      :items="items"
      :total="total"
      :disable-sort="true"
      :is-tools="false"
      :show-select="false"
    >
      <template #navBtn>
        <v-btn class="buttons" rounded color="primary" @click="showUpload = true">文件上传</v-btn>
      </template>
      <template #actions="{ item }">
        <v-btn text color="primary" :loading="item.loading" @click="handleDownload(item)">下载文件</v-btn>
      </template>
    </m-table>
    <m-dialog title="文件上传" :visible.sync="showUpload" @submit="handleSubmitFiles">
      <div style="width: 500px; margin: 0 auto; min-height: 300px;">
        <div class="d-flex">
          <div class="mr-5">上传文件</div>
          <v-file-input
            v-model="file"
            label="点击上传"
            outlined
            hide-details
            dense
          ></v-file-input>
        </div>
        <div class="d-flex">
          <div class="mt-5 mr-5">上传模式</div>
          <v-radio-group
            v-model="overwriteMode"
          >
            <v-radio
              label="备份模式"
              value="backup"
            ></v-radio>
            <v-radio
              label="替换模式"
              value="replace"
            ></v-radio>
            <v-radio
              label="跳过模式"
              value="skip"
            ></v-radio>
          </v-radio-group>
        </div>
      </div>
    </m-dialog>
  </m-dialog>
</template>

<script>
import MDialog from '@/components/Dialog'
import MTable from '@/components/List/table.vue'
import {
  getTasksFileList,
  downloadTasksFileList,
  uploadTasksList
} from '@/api/dataChart'
import { downloadFile } from '@/utils'
export default {
  name: 'modelTrainFiles',
  components: {
    MDialog,
    MTable
  },
  data () {
    return {
      file: null,
      overwriteMode: 'backup',
      showUpload: false,
      show: false,
      id: null,
      loading: false,
      headers: [
        { text: '文件名', value: 'file_name' },
        { text: '文件类型', value: 'file_type' },
        { text: '文件大小', value: 'file_size_formatted' },
        { text: '操作', value: 'actions' }
      ],
      items: [],
      total: 0,
      pageInfo: {
        current: 1,
        size: 10
      }
    }
  },
  methods: {
    open (id) {
      this.id = id
      this.show = true
      this.getList()
    },
    async getList () {
      this.loading = true
      try {
        const { data } = await getTasksFileList(this.id)
        this.items = data.files.map(e => {
          return {
            ...e,
            loading: false
          }
        })
        this.total = data.directory_info.total_files
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        this.loading = false
      }
    },
    async handleDownload (item) {
      try {
        item.loading = true
        const { data, name } = await downloadTasksFileList(this.id, item.file_name)
        downloadFile(data, name)
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        item.loading = false
      }
    },
    async handleSubmitFiles () {
      if (!this.file) {
        this.$snackbar.error('请选择文件')
        return
      }
      const query = new FormData()
      query.append('file', this.file)
      query.append('overwrite_mode', this.overwriteMode)
      try {
        await uploadTasksList(this.id, query)
        this.$snackbar.success('上传成功')
        this.showUpload = false
        this.getList()
      } catch (error) {
        this.$snackbar.error(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
