<template>
  <div class="main-page">
    <div class="headline">
      <Icon type="icon-cur-a-t-safetycertificate" :size="80" />
      <div class="text" v-text="$t('LICENCE_THANKS')">
        {{ $t("LICENCE_THANKS") }}
      </div>
    </div>
    <div class="error-content">
      <h3 class="headerTitle" v-text="$t('PRODUCT_LICENSE_INFO')">
        {{ $t("PRODUCT_LICENSE_INFO") }}
      </h3>
      <p>
        <span v-text="$t('LICENSE_CODE')">{{ $t("LICENSE_CODE") }}</span
        >:
        <span v-if="licenceInfo">{{ licenceInfo.licenseCode }}</span>
      </p>
      <!-- <p>
        <span v-text="$t('APPLICATION_ID')">{{ $t("APPLICATION_ID") }}</span
        >:
        <span v-if="licenceInfo">{{ licenceInfo.appId }}</span>
      </p> -->
      <p>
        <span v-text="$t('LICENSE_COMPANY')">{{ $t("LICENSE_COMPANY") }}</span
        >:
        <span v-if="licenceInfo">{{ licenceInfo.companyName }}</span>
      </p>
      <p>
        <span v-text="$t('LICENSE_ONLINE_USER')">{{
          $t("LICENSE_ONLINE_USER")
        }}</span
        >:
        <span v-if="licenceInfo">{{ licenceInfo.onlineUserNum }}</span>
      </p>
      <p>
        <span v-text="$t('TAKE_EFFECT_TIME')">{{ $t("TAKE_EFFECT_TIME") }}</span
        >:
        <span v-if="licenceInfo">{{ licenceInfo.effectTime }}</span>
      </p>
      <p>
        <span v-text="$t('FAILURE_TIME')">{{ $t("FAILURE_TIME") }}</span
        >:
        <span v-if="licenceInfo">{{ licenceInfo.expireTime }}</span>
      </p>
      <p>
        <span v-text="$t('IP_ADDRESS')">{{ $t("IP_ADDRESS") }}</span
        >:
        <span v-if="licenceInfo">{{ licenceInfo.ipAddress }}</span>
      </p>
      <p>
        <span v-text="$t('MAC_ADDRESS')">{{ $t("MAC_ADDRESS") }}</span
        >:
        <span v-if="licenceInfo">{{ licenceInfo.macAddress }}</span>
      </p>
      <p>
        <span v-text="$t('LICENSE_PHONE')">{{ $t("LICENSE_PHONE") }}</span
        >:
        <span v-if="licenceInfo">{{ licenceInfo.contactInfo }}</span>
      </p>
      <p>
        <span v-text="$t('LICENSE_REMARK')">{{ $t("LICENSE_REMARK") }}</span
        >:
        <span v-if="licenceInfo">{{ licenceInfo.description }}</span>
      </p>
      <p style="word-break: break-all; overflow: hidden">
        <span style="float: left" v-text="$t('MACHINE_CODE')">{{
          $t("MACHINE_CODE")
        }}</span
        >:
        <span v-if="licenceInfo" style="float: right; width: 83.5%">
          {{ licenceInfo.mainBoardSerial }}</span
        >
      </p>
    </div>
    <div class="footer">
      <a-button :disabled="!isShow" @click="handUninstall">
        <a-icon type="delete" /> {{ $t("UNINSTALL") }}
      </a-button>
      <a-button
        v-if="hasAuth('PRODUCT_LICENSE_INFO:UPLOAD	')"
        type="primary"
        @click="handOpen"
      >
        <a-icon type="to-top" /> {{ $t("LICENCE_UPLOAD") }}
      </a-button>
    </div>
  </div>
</template>
<script>
import { Icon } from "@mega-design/ui-vue";
import ApiConstant from "@/api/ApiConstant";

export default {
  components: {
    Icon,
  },
  data() {
    return {
      uploadUrl: `${ApiConstant.PREFIX_CORE}/api/license`,
      issuedTime: "",
      expiryTime: "",
      isShow: false,
      licenceInfo: null,
    };
  },
  mounted() {
    this.initPageData();
  },
  methods: {
    initPageData() {
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/license/info`)
        .then((res) => {
          this.isShow =
            res.data.data === null
              ? false
              : res.data.data.licenseCheckData.licenseCode != null;
          this.licenceInfo = {
            description:
              res.data.data === null ? "无" : res.data.data.description || "无",
            effectTime:
              res.data.data === null ? "无" : res.data.data.effectTime || "无",
            expireTime:
              res.data.data === null ? "无" : res.data.data.expireTime || "无",
            companyName:
              res.data.data === null
                ? "无"
                : res.data.data.licenseCheckData.companyName || "无",
            contactInfo:
              res.data.data === null
                ? "无"
                : res.data.data.licenseCheckData.contactInfo || "无",
            onlineUserNum:
              res.data.data === null
                ? "无"
                : res.data.data.licenseCheckData.onlineUserNum || "无",
            licenseCode:
              res.data.data === null
                ? "无"
                : res.data.data.licenseCheckData.licenseCode || "无",
            macAddress:
              res.data.data === null
                ? "无"
                : res.data.data.licenseCheckData.macAddress || "无",
            ipAddress:
              res.data.data === null
                ? "无"
                : res.data.data.licenseCheckData.ipAddress || "无",
            appId:
              res.data.data === null
                ? "无"
                : res.data.data.licenseCheckData.appId || "无",
            mainBoardSerial:
              res.data.data === null
                ? "无"
                : res.data.data.licenseCheckData.mainBoardSerial || "无",
          };
        });
    },
    handUninstall() {
      this.$confirm({
        title: this.$t("UNINSTALL"),
        content: this.$t("UNINSTALL_INFO"),
        okType: "warning",
        okText: this.$t("CONFIRM"),
        cancelText: this.$t("CANCEL"),
        centered: false,
        icon: "exclamation-circle",
        onOk: () => {
          this.$axios
            .post(`${ApiConstant.PREFIX_CORE}/api/license/uninstall`)
            .then((res) => {
              this.$message.success(this.$t("UNINSTALL_SUCCEE"));
              this.initPageData();
            });
        },
      });
    },
    handOpen() {
      window.open(`${window.location.origin}/license`);
    },
  },
};
</script>
<style lang="scss">
.main-page {
  width: 70%;
  margin: auto;
  padding: 80px 0;
  .headline {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    .text {
      margin-top: 20px;
      color: #333;
      font-size: 16px;
      min-height: 100%;
      height: 100%;
      border: none;
    }
    i {
      color: #0fd19c;
      font-size: 80px;
    }
  }
  .error-content {
    margin-top: 25px;
    padding: 30px 60px;
    background: #f8f8f9;
    border-radius: 8px;
    .headerTitle {
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    p {
      span:nth-child(1) {
        font-weight: bold;
        padding-right: 3px;
        color: #333;
        display: inline-block;
        width: 160px !important;
        text-align: right;
      }
      span:nth-child(2) {
        color: #666;
        margin-left: 10px;
      }

      margin-bottom: 4px;
      line-height: 19px;
    }
  }
  .footer {
    margin-top: 20px;
    text-align: center;
  }
}
</style>
