<template>
  <div class='app-container'>
    <!-- 搜索 -->
    <el-form :model="form" ref="formRef" inline>
      <el-form-item label="文件名：">
        <el-input v-model="form.name" placeholder="请选择文件名" />
      </el-form-item>
      <el-form-item label="创建时间：">
        <el-date-picker v-model="form.createdAt" type="date" value-format="YYYY-MM-DD" placeholder="请选择创建时间" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="getSearch">搜索</el-button>
        <el-button icon="Refresh" @click="getRefresh">重置</el-button>
        <el-button type="primary" plain icon="plus" @click="dialogVisible = true">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <el-table :data="tableData" v-loading="loading">
      <el-table-column label="序号" type="index" align="center" width="100" />
      <el-table-column label="文件名" prop="name" align="center" />
      <el-table-column label="下载路径" prop="path" align="center" />
      <el-table-column label="创建时间" prop="createTime" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" v-copyText="scope.row.path" v-copyText:callback="copyTextSuccess">复制</el-button>
          <el-button link type="danger" @click="getDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" v-model:page="form.pageNum" v-model:limit="form.pageSize"
      @pagination="getList" />
    <!-- 弹窗 -->
    <el-dialog v-model="dialogVisible" title="新增" width="500px" :before-close="getClose">
      <el-form :model="dialogForm" ref="dialogFormRef" :rules="rules">
        <el-form-item label="文件名称：" prop="name">
          <el-input v-model="dialogForm.name" placeholder="请输入文件名称" />
        </el-form-item>
        <el-form-item label="上传文件：" prop="path">
          <el-input v-model="dialogForm.path" placeholder="请点击上传 或 手动填写路径">
            <template #append>
              <UploadFile @upload="upload" />
            </template>
          </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="getSubmit">确定</el-button>
        <el-button @click="getClose">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { list, submit, remove } from '@/api/os/upload'
import { reactive } from 'vue'

const { proxy } = getCurrentInstance()

// 遮罩层
const loading = ref(false)
// 表单
const form = ref({
  pageNum: 1,
  pageSize: 10
})
// 总数据
const total = ref(0)
// 列表
const tableData = ref([])
// 弹窗
const dialogVisible = ref(false)
const dialogForm = ref({})
// 校验
const rules = reactive({
  name: [{
    required: true, message: '请输入文件名称', trigger: 'blur'
  }],
  path: [{
    required: true, message: '请点击上传 或 手动填写路径', trigger: 'change'
  }]
})

// 列表
function getList() {
  loading.value = true
  list(form.value).then(res => {
    if (res.code === 200) {
      tableData.value = res.rows
      total.value = res.total
      loading.value = false
    }
  })
}

// 搜索
function getSearch() {
  form.value.pageNum = 1
  getList()
}

// 重置
function getRefresh() {
  form.value = {
    pageNum: 1,
    pageSize: 10
  }
  getList()
}

// 上传
function upload(e) {
  dialogForm.value.name = e.name
  dialogForm.value.path = e.file
}

// 确定
function getSubmit() {
  proxy.$refs.dialogFormRef.validate(valid => {
    if (valid) {
      submit(dialogForm.value).then(res => {
        if (res.code === 200) {
          proxy.$modal.msgSuccess('提交成功！')
          dialogVisible.value = false
          getList()
        }
      })
    } else {
      return false
    }
  })
}

// 关闭弹窗
function getClose() {
  proxy.resetForm('dialogFormRef')
  dialogVisible.value = false
}

// 删除
function getDelete(row) {
  proxy.$modal.confirm(`是否删除文件名为${row.name}的数据？`).then(() => {
    return remove(row.id)
  }).then(() => {
    getList()
    proxy.$modal.msgSuccess('删除成功！')
  }).catch(() => { })
}

// 复制成功
function copyTextSuccess() {
  proxy.$modal.msgSuccess("复制成功");
}

getList()
</script>