<template>
  <el-container class="gva-table-box">
    <el-header>
      <el-form
        inline
        :model="searchData"
      >
        <el-form-item label="名称">
          <el-input v-model="searchData.name" />
        </el-form-item>
        <el-form-item label="类型">
          <el-select
            v-model.number="searchData.genre"
            placeholder="请选择"
            style="width: 240px"
            clearable
          >
            <el-option
              v-for="item in fileTypes"
              :key="item.ID"
              :label="item.name"
              :value="item.ID"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="GetFileList">查询</el-button>
          <el-button @click="ResetFileList">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="fileDialog = true">文件上传</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <el-table
        :data="filesData"
        max-height="600"
        height="600"
      >
        <el-table-column
          prop="name"
          label="名称"
        />
        <el-table-column
          prop="fileGenre.name"
          label="类型"
        />
        <el-table-column
          label="上传时间"
        >
          <template #default="scope">
            {{ dayjs(scope.row.CreatedAt).format("YYYY-MM-DD HH:mm:ss") }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              icon="Download"
              type="primary"
              link
              @click="xiazai(scope.row)"
            >
              下载
            </el-button>
            <el-button
              icon="delete"
              type="primary"
              link
              @click="removeFile(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination
          :current-page="searchData.pageInfo.page"
          :page-size="searchData.pageInfo.pageSize"
          :page-sizes="[10, 30, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
      <el-dialog
        v-model="fileDialog"
        title="文件上传"
        width="800"
        align-center
      >
        <div>
          <el-select
            v-model.number="filesType"
            placeholder="请选择类型"
            style="width: 240px"
          >
            <el-option
              v-for="item in fileTypes"
              :key="item.ID"
              :label="item.name"
              :value="item.ID"
            />
          </el-select>
          <el-upload
            ref="uploadRef"
            class="upload-demo"
            drag
            multiple
            :auto-upload="false"
            :file-list="files"
            :on-change="handleChange"
            :on-remove="handleRemove"
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              在这里放下文件 或 <em>点击上传</em>
            </div>
            <template #tip>
              文件不能大于500MB
            </template>
          </el-upload>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="fileDialog = false">取消</el-button>
            <el-button
              type="primary"
              @click="submitUpload"
            >
              确定上传
            </el-button>
          </div>
        </template>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/pinia/modules/user'
import { createDailyFile, deleteDailyFile, fileDownload, queryDailyFileList } from '@/api/dailyFile'
import { getFileType } from '@/api/file'
import { dayjs, ElMessage, ElMessageBox } from 'element-plus'

const userStore = useUserStore()
const user = userStore.userInfo

const filesData = ref()

const searchData = ref({
  id: user.ID,
  name: '',
  genre: null,
  pageInfo: {
    page: 1,
    pageSize: 10
  },
})

const total = ref(0)

// 分页
const handleSizeChange = (val) => {
  searchData.value.pageInfo.pageSize = val
  queryData()
}

const handleCurrentChange = (val) => {
  searchData.value.pageInfo.page = val
  queryData()
}

const fileTypes = ref()

const queryData = async() => {
  await queryDailyFileList(searchData.value).then(res => {
    filesData.value = res.data.list
    total.value = res.data.total
  })
  await getFileType().then(res => {
    fileTypes.value = res.data
  })
}

// 查询
const GetFileList = async() => {
  await queryDailyFileList(searchData.value).then(res => {
    filesData.value = res.data.list
    total.value = res.data.total
  })
}

const ResetFileList = async() => {
  searchData.value = {
    id: user.ID,
    name: '',
    genre: null,
    pageInfo: {
      page: 1,
      pageSize: 10
    },
  }
  await queryData()
}

// 文件上传
const fileDialog = ref(false)

const files = ref()

const filesType = ref(1)

const handleChange = (file, fileList) => {
  files.value = fileList
}
// 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。function(file, fileList)
const handleRemove = (file, fileList) => {
  files.value = fileList
}

const submitUpload = async() => {
  // 判断是否有文件再上传
  if (filesType.value === 0) {
    return ElMessage.warning('请选取文件类型后再上传')
  }
  if (files.value.length === 0) {
    return ElMessage.warning('请选取文件后再上传')
  }
  // 下面的代码将创建一个空的FormData对象:
  const formData = new FormData()
  // 你可以使用FormData.append来添加键/值对到表单里面；
  files.value.forEach((file) => {
    formData.append('file', file.raw)
  })
  formData.append('id', user.ID)
  formData.append('genre', filesType.value)
  // 自定义的接口也可以用ajax或者自己封装的接口
  await createDailyFile(formData).then(res => {
    if (res.code === 0) {
      ElMessage.success('上传成功')
    }
  })
  await queryData()
  fileDialog.value = false
}

// 文件下载
const xiazai = async(val) => {
  await fileDownload(val).then(res => {
    console.log(res)
    const link = document.createElement('a')
    const href = window.URL.createObjectURL(res) // 创建下载的链接
    link.href = href
    link.download = val.name // 下载后文件名
    document.body.appendChild(link)
    link.click() // 点击下载
    document.body.removeChild(link) // 下载完成移除元素
    window.URL.revokeObjectURL(href) // 释放掉blob对象
  })
}

// 文件删除
const removeFile = async(val) => {
  ElMessageBox.confirm(
    '你确定进行删除操作吗?',
    '删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
      await deleteDailyFile(val).then(res => {
        if (res.code === 0) {
          ElMessage.success('删除成功')
        }
      })
      await queryData()
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

onMounted(() => {
  queryData()
})
</script>

<style scoped lang="scss">

</style>
