<script setup name="License">
import { onMounted, ref, toRefs } from 'vue'
import { ElMessage } from "element-plus";
import CustomUpload from "@/components/CustomUpload/index.vue";
import { getlicinfo, uploadlic } from '@/api/systemConfig/license.js'

const infoData = ref({})
const uploadLoading = ref(false)

// 获取数据
const getlicinfoFunc = async () => {
  const { data } = await getlicinfo({})
  infoData.value = data
}

// 获取状态说明
const getHeaderName = () => {
  const { status, msg } = infoData.value
  if (status === '1') {
    return '您未上传License'
  } else if (status === '2') {
    return `您上传License有误(${msg})`
  } else if (status === '3') {
    return '您已上传有效的License'
  }
}

// 上传回调
const handleFileChange = (file) => {
  uploadLoading.value = true;
  const formData = new FormData();
  formData.append('file', file.raw);
  uploadlic(formData).then(res => {
    const { flag } = res
    if (flag) {
      uploadLoading.value = false;
      ElMessage.success((infoData.status === '2' || infoData.status === '3') ? '文件更新成功' : '文件上传成功');
      getlicinfoFunc()
    }
    uploadLoading.value = false;
  }).catch(err => {
    uploadLoading.value = false;
  })
}

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

<template>
  <div class="app-container scroller">
    <PageTitle>
      <template #title>License管理</template>
    </PageTitle>
    <div class="app-container__body">
      <div class="infoContainer">
        <div class="document">
          <div class="document-left">
            <img class="licenseBg" src="@/assets/images/systemConfig/Lisencebg.png" alt="license" />
            <img class="mask" v-if="infoData.status === '3'" src="@/assets/images/systemConfig/rightMask.png" alt="mask" />
          </div>
          <div class="document-right">
            <div class="title-header">{{ getHeaderName() }}</div>
            <div class="title-item">有效期：
              {{ ( infoData.startDatelicensekey && infoData.endDatelicensekey ) ? `${ infoData.startDatelicensekey } 至 ${ infoData.endDatelicensekey }` : '--' }}
            </div>
            <div class="title-item">名称：{{ infoData.licname ? infoData.licname : '--' }}</div>
            <div class="title-item">硬盘号：{{ infoData.licInfoIp ? infoData.licInfoIp : '--' }}</div>
            <div class="title-item">MAC地址：{{ infoData.licInfoMac ? infoData.licInfoMac : '--' }}</div>
            <div class="but">
              <el-button :icon="(infoData.status === '2' || infoData.status === '3') ? 'Refresh' : 'Upload'"
                :loading="uploadLoading"
                type="primary">{{ (infoData.status === '2' || infoData.status === '3') ? '更新授权文件' : '上传授权文件' }}</el-button>
              <div class="upload">
                <CustomUpload v-if="!uploadLoading" @file-change="handleFileChange" />
              </div>
            </div>
          </div>
        </div>
        <div class="ipMacContent" v-if="infoData && infoData.ipMacList && infoData.ipMacList.length > 0">
          <div class="title">申请License所需信息</div>
          <div class="tips">您需要提供应用所在服务器的硬盘号和MAC地址，我们再向您提供License</div>
          <div class="point_content">
            <el-row class="title_row">
              <el-col :span="6">序号</el-col>
              <el-col :span="10">当前服务器IP地址</el-col>
              <el-col :span="8">当前服务器MAC地址</el-col>
            </el-row>
            <el-row class="content_row" v-for="(item,index) in infoData.ipMacList" :key="index">
              <el-col :span="6">{{ index + 1 }}</el-col>
              <el-col :span="10">{{ item.ip }}</el-col>
              <el-col :span="8">{{ item.mac }}</el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.app-container__body {
  align-items: center;
  justify-content: center;
  .infoContainer {
    margin-top: -8%;
    min-width: 668px;
    .document {
      width: 100%;
      display: flex;
      &-left {
        margin-right: 84px;
        position: relative;
        height: 310px;
        .licenseBg {
          height: 100%;
        }
        .mask {
          position: absolute;
          bottom: 6px;
          right: 6px;
          width: 70px;
          height: 70px;
        }
      }
      &-right {
        padding-top: 50px;
        .title-header {
          font-weight: 700;
          font-size: 18px;
          color: #333;
          position: relative;
          margin-bottom: 20px;
        }
        .title-item {
          color: #333;
          margin-bottom: 10px;
        }
        .but {
          position: relative;
          margin-top: 20px;
          position: relative;
          overflow: hidden;
          .upload {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            opacity: 0;
          }
        }
      }
    }
    .ipMacContent {
      margin-top: 100px;
      .title {
        font-size: 16px;
        color: #333;
        margin-bottom: 4px;
      }
      .tips {
        color: #858f9e;
        margin-bottom: 11px;
      }
      .point_content {
        border: 1px solid #d8d8d8;
        border-radius: 4px;
        background: hsla(0, 0%, 100%, 0.6);
        padding: 10px 30px 2px;
        .title_row {
          color: #333;
          margin-bottom: 10px;
        }
        .content_row {
          color: #858f9e;
          margin-bottom: 8px;
        }
      }
    }
  }
}
</style>