<!-- 远程升级 -->
<template>
  <div class="page">
    <el-card shadow="never" class="page-full-part">
      <h1 class="mb14">当前系统版本号：{{ tableData.currentVersion }}</h1>
      <el-card>
        <template #header>
          <div class="card-header flex justify-between">
            <h4>可升级系统列表</h4>
            <el-button size="small" class="ml6" type="primary" @click="dialogVisible = true" v-auth="'upgrade'">本地升级</el-button>
            <!-- <el-upload
							ref="upload"
							class="upload-demo"
							:action="action"
							:limit="1"
							:on-exceed="handleExceed"
							:auto-upload="false"
						>
							<template #trigger>
								<el-button type="primary">本地升级</el-button>
							</template>
							<el-button class="ml-3" type="success" @click="submitUpload">
								upload to server
							</el-button>
							<template #tip>
								<div class="el-upload__tip text-red">
									limit 1 file, new file will cover the old file
								</div>
							</template>
						</el-upload> -->
          </div>
        </template>
        <el-table :data="tableData.availableVersions" style="width: 100%" v-loading="loading">
          <el-table-column label="序号" align="center" width="100">
            <template #default="{ $index }">{{ params.pageSize * (params.pageNum - 1) + ($index + 1) }} </template>
          </el-table-column>
          <el-table-column label="版本号" v-col="'version'" align="center" prop="version" width="160" show-overflow-tooltip />
          <el-table-column label="描述" v-col="'description'" align="center" prop="description" show-overflow-tooltip />
          <el-table-column label="发布时间" v-col="'createdAt'" align="center" prop="createdAt" width="240">
            <template #default="scope">
              {{ dayjs(scope.row.releaseDate).format("YYYY-MM-DD HH:mm:ss") }}
            </template>
          </el-table-column>
          <el-table-column label="操作" v-col="'handle'" width="180" align="center" fixed="right">
            <template #default="scope">
              <el-button size="small" type="success" link @click="handleUpgrade(scope.row)" v-auth="'upgrade'">升级</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-card>

    <!-- 本地上传弹窗 -->
    <el-dialog v-model="dialogVisible" title="上传升级包" center>
      <div v-loading="uploadLoading">
        <el-upload :on-change="handleChange" ref="upload" :auto-upload="false" class="upload-demo" drag action="action">
          <el-icon class="el-icon--upload">
            <ele-UploadFilled />
          </el-icon>
          <div class="el-upload__text">Drop file here or <em>click to upload</em></div>
          <!-- <template #tip>
						<div class="el-upload__tip">jpg/png files with a size less than 500kb</div>
					</template> -->
        </el-upload>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button :disabled="uploadLoading" @click="dialogVisible = false">Cancel</el-button>
          <el-button :disabled="uploadLoading || !file" type="primary" @click="submitUpload"> 上传升级包 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import type { UploadProps, UploadInstance } from "element-plus";

import api from "/@/api/system";
import { useSearch } from "/@/hooks/useCommon";
import dayjs from "dayjs";

const { params, tableData, getList, loading } = useSearch(api.upgrade.getList, "list", { keyWord: "" });

getList();

const dialogVisible = ref(false);
const uploadLoading = ref(false);

const upload = ref<UploadInstance>();

const file = ref<File | null>(null);

const handleChange: UploadProps["onChange"] = (uploadFile) => {
  file.value = uploadFile.raw!;
};
const submitUpload = () => {
  uploadLoading.value = true;
  const formData = new FormData();
  formData.append("file", file.value!);
  api.upgrade
    .upgradeFile(formData)
    .then(() => {
      ElMessage.success("上传成功");
      dialogVisible.value = false;
    })
    .catch(() => {
      ElMessage.error("上传失败");
    })
    .finally(() => {
      uploadLoading.value = false;
    });
};

/**
 * 升级版本
 */
const handleUpgrade = (row: any) => {
  ElMessageBox.confirm("确定要升级系统吗？此操作不可逆。", "升级确认", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "已开始执行升级任务",
      });
      api.upgrade
        .upgrade({
          targetVersion: row.version,
        })
        .then((res: any) => {
          getList();
          setTimeout(() => {
            if (res.data.error) {
              ElMessage.error(res.data.message);
            } else {
              ElMessage.success("升级成功");
              getList();
            }
          }, 1000);
        })
        .catch(() => {
          ElMessage.error("升级失败");
        });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消升级",
      });
    });
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
  min-height: 200px !important;
}
</style>
