<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'
import pageIcon from '@/assets/images/systemConfig/systemParamPage.png'

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">
    <div class="app-container__body">
      <IconTitle :icon="pageIcon" title="License管理" />
      <div class="box">
        <div class="line"></div>
        <div class="content">
          <DividerTitle :title-name="getHeaderName()" />
          <div class="infoContainer">
            <div class="itemLi">
              <div class="name">有效期：</div>
              <div class="value">
                {{ (infoData.startDatelicensekey && infoData.endDatelicensekey) ? `${infoData.startDatelicensekey}
                至 ${infoData.endDatelicensekey}` : '--' }}
              </div>
            </div>
            <div class="itemLi">
              <div class="name">名称：</div>
              <div class="value">{{ infoData.licname ? infoData.licname : '--' }}</div>
            </div>
            <div class="itemLi">
              <div class="name">硬盘号：</div>
              <div class="value">{{ infoData.licInfoIp ? infoData.licInfoIp : '--' }}</div>
            </div>
            <div class="itemLi">
              <div class="name">MAC地址：</div>
              <div class="value">{{ infoData.licInfoMac ? infoData.licInfoMac : '--' }}</div>
            </div>
          </div>
          <div class="but">
            <el-button :icon="(infoData.status === '2' || infoData.status === '3') ? 'Refresh' : 'Upload'"
              :loading="uploadLoading" type="primary" style="height: 40px;">{{ (infoData.status === '2' ||
            infoData.status === '3') ? '更新授权文件'
            : '上传授权文件' }}</el-button>
            <div class="upload">
              <CustomUpload v-if="!uploadLoading" @file-change="handleFileChange" />
            </div>
          </div>
          <div class="ipMacContent" v-if="infoData && infoData.ipMacList && infoData.ipMacList.length > 0">
            <DividerTitle title-name="申请License所需信息" :leftBox="true">
              <template v-slot:leftBox>
                <div class="tips">您需要提供应用所在服务器的硬盘号和MAC地址，我们再向您提供License</div>
              </template>
            </DividerTitle>
            <el-table ref="table" class="table" :data="infoData.ipMacList" stripe>
              <el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
              <el-table-column prop="ip" label="当前服务器IP地址" align="center"></el-table-column>
              <el-table-column prop="mac" label="当前服务器MAC地址" align="center"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.app-container__body {

  .box {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    background: #fff;

    .line {
      width: 100%;
      height: 2px;
      border-radius: 5px 5px 0px 0px;
      background: linear-gradient(90deg,
          rgba(33, 103, 217, 1) 0%,
          rgba(17, 200, 250, 1) 34.03%,
          rgba(33, 103, 217, 1) 64.58%,
          rgba(48, 128, 255, 1) 100%);
    }

    .content {
      padding: 28px 30px;
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;

      .infoContainer {
        width: 100%;
        border-radius: 5px;
        background: rgba(245, 252, 255, 1);
        border: 1px solid rgba(29, 178, 245, 1);
        overflow: hidden;
        background: rgba(235, 235, 235, 1);

        .itemLi {
          margin-bottom: 1px;
          display: flex;
          height: 40px;

          .name {
            margin-right: 1px;
            width: 111px;
            background: rgba(245, 252, 255, 1);
            font-size: 12px;
            line-height: 40px;
            color: rgba(148, 148, 148, 1);
            text-align: right;
          }

          .value {
            flex: 1;
            padding-left: 20px;
            background: rgba(245, 252, 255, 1);
            font-size: 12px;
            line-height: 40px;
            color: rgba(53, 64, 79, 1);
          }
        }
      }

      .but {
        position: relative;
        margin-top: 40px;
        margin-bottom: 100px;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;

        .upload {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          opacity: 0;
        }
      }

      .ipMacContent {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;

        .tips {
          font-size: 14px;
          color: rgba(253, 84, 81, 1);
        }

        .table {
          flex: 1;
        }
      }
    }
  }
}
</style>