<template>
  <div>
    <div class="tw-bg-white tw-p-5 tw-rounded-xl tw-mb-5">
      <h3 class="section-title">授权信息</h3>
      <div>
        <a-form :labelCol="{ style: { width: '150px' } }">
          <a-form-item label="当前信息" style="margin-bottom: 5px">
            <span>{{ info.activation }}</span>
          </a-form-item>
          <a-form-item label="人数限制" style="margin-bottom: 5px">
            <span>{{ info.maxCount }}</span>
          </a-form-item>
          <a-form-item label="当前人数" style="margin-bottom: 5px">
            <span>{{ info.onlineCount }}</span>
          </a-form-item>
          <a-form-item label="过期时间" style="margin-bottom: 5px">
            <span>{{ info.expire }}</span>
          </a-form-item>
          <a-form-item label="授权模式" style="margin-bottom: 5px">
            <span>{{ info.type }}</span>
          </a-form-item>
        </a-form>
      </div>
    </div>

    <div class="tw-bg-white tw-p-5 tw-rounded-xl">
      <a-form :labelCol="{ style: { width: '150px' } }" style="width: 600px">
        <a-form-item label="授权模式">
          <a-select v-model:value="authForm.authType" style="width: 200px">
            <a-select-option value="ONLINE">在线激活</a-select-option>
            <a-select-option value="OFFLINE">离线激活</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          v-show="authForm.authType == 'ONLINE'"
          label="密匙"
          prop="accessKey"
        >
          <a-input
            v-model:value="authForm.accessKey"
            :maxlength="255"
            allowClear
          />
        </a-form-item>
        <a-form-item
          v-show="authForm.authType == 'ONLINE'"
          label="密钥"
          prop="accessSecret"
        >
          <a-input
            v-model:value="authForm.accessSecret"
            :maxlength="255"
            allowClear
          />
        </a-form-item>
        <a-form-item
          v-show="authForm.authType == 'OFFLINE'"
          label="导入授权文件"
        >
          <a-upload
            accept=".lic"
            :customRequest="customRequest"
            :showUploadList="false"
          >
            <a-button type="primary">选择文件</a-button>
          </a-upload>
        </a-form-item>
        <a-form-item v-if="authForm.authType == 'OFFLINE'" label="硬件信息">
          <a-button type="primary" @click="exportFile">导出硬件信息</a-button>
        </a-form-item>
        <a-form-item v-else>
          <a-button
            style="margin-left: 150px"
            type="primary"
            @click="submitForm"
            >保存</a-button
          >
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  getAuthInfo,
  offlineAuth,
  onlineAuth,
} from "../../api/authManagementPage";
import { message } from "ant-design-vue";
import { onMounted, reactive } from "vue";
import { downloadFileURL } from "@/utils/utils";

interface InfoType {
  activation: string;
  expire: string;
  type: string;
  maxCount: string;
  onlineCount: number;
}

interface AuthFormType {
  authType: string;
  accessKey: string;
  accessSecret: string;
}

let info: InfoType = reactive({
  activation: "",
  expire: "",
  type: "",
  maxCount: "",
  onlineCount: 0,
});

let authForm: AuthFormType = reactive({
  authType: "OFFLINE",
  accessKey: "",
  accessSecret: "",
});

onMounted(async () => {
  await fetchData();
});

async function fetchData() {
  const res = await getAuthInfo();
  if (res.data.auth == true) {
    info.activation = "已授权";
    if (info.activation == "已授权" && !res.data.expireTime) {
      info.expire = "不限制";
    } else {
      info.expire = res.data.expireTime;
    }
    if (info.activation == "已授权" && !res.data.maxOnlineUserCount) {
      info.maxCount = "不限制";
    } else {
      info.maxCount = res.data.maxOnlineUserCount;
    }
    info.onlineCount = res.data.onlineUserCount;
    info.type = res.data.type == "ONLINE" ? "在线激活" : "离线激活";
  } else {
    info.activation = "未授权";
  }
}
async function submitForm() {
  await onlineAuth(authForm);
  void message.success("操作成功");
}

// offline-auth
async function customRequest(data: { file: File }) {
  let formData = new FormData();
  formData.append("file", data.file);
  await offlineAuth(formData);
  void message.success("上传成功！");
  await fetchData();
}

async function exportFile() {
  await downloadFileURL("/api/ess/system/auth/device/info");
}
</script>
