<template>
  <div class="w-full h-screen bg-gray-50 flex justify-center">
    <div class="w-1/2">
      <div class="mt-5">
        <el-icon>
          <Cpu />
        </el-icon>
        <span class="ml-2 mb-2 text-xl">机器码</span>
        <el-input v-model="machineCode" :rows="8" type="textarea" />
      </div>

      <div class="mt-5">
        <el-icon>
          <Document />
        </el-icon>
        <span class="ml-2 mb-2 text-xl">授权码</span>
        <el-input
          v-model="licenseCode"
          :rows="8"
          placeholder="授权码"
          type="textarea"
        />
      </div>
      <div class="mt-5">
        <el-icon>
          <Clock />
        </el-icon>
        <span class="ml-2 mb-2 text-xl">有效期</span>
        <div class="mt-3 mb-2">
          授权结束时间 {{ formatDate(value) }}，请记得留意过期时间
        </div>
        <el-countdown :value="value" format="DD [天] HH:mm:ss" />
      </div>
      <div class="mt-5">
        <el-button
          v-preReClick
          size="large"
          type="primary"
          @click="updateLicense"
          >更新授权
        </el-button>
        <el-button
          v-preReClick
          size="large"
          type="primary"
          @click="router.push('/')"
          >返回系统
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { formatDate } from '@/utils/format'
import {
  getMachineCode,
  updateLicenseCode,
  getValidityPeriod
} from '@/api/license'

const machineCode = ref('')
const licenseCode = ref('')
const value = ref(new Date(2024, 10, 1).getTime())

const router = useRouter()

const updateLicense = async () => {
  const res = await updateLicenseCode({
    licenseCode: licenseCode.value
  })
  if (res.code === 100000) {
    getEndTime()
    ElMessage.success(res.message)
    // const data = await getValidityPeriod()
    // console.log(data)
  }
}

const getEndTime = async () => {
  const data = await getValidityPeriod()
  value.value = data.data.endDate * 1000
}

onMounted(async () => {
  const res = await getMachineCode()
  if (res.code === 100000) {
    machineCode.value = res.data.machineCode
  }
  getEndTime()
})
</script>
