<template>
  <a-card>
    <div v-if="!serverOpen" :class="$style.sysRegisterNot">未启用注册码服务！</div>
    <div v-if="serverOpen" :class="$style.sysRegisterBox">
      <div :class="$style.registerTitle">注册服务信息</div>
      <div :class="$style.registerContent">
        <div :class="$style.registerInfo">
          <div :class="$style.infoTitle"
            >注册码信息<a-button :class="$style.serverBtn" @click="refreshRegisterInfo"
              >刷新</a-button
            ></div
          >
          <div :class="$style.infoBlock">
            <div v-for="(item, index) in serverLicenseInfos" :key="index" :class="$style.infoItem">
              <ul>
                <li v-for="i in item.itemInfos" :key="i.name">{{ i.notes }}：{{ i.value }}</li>
              </ul>
            </div>
          </div>
        </div>
        <div :class="$style.registerInfo">
          <div :class="$style.infoTitle">注册服务信息</div>
          <div :class="$style.infoBlock">
            <div v-for="(item, index) in serverInfos" :key="index" :class="$style.serviceItem">
              <ul>
                <li>服务名称：{{ item.serverId }}</li>
                <li>机器名：{{ item.hostName }}</li>
                <li>IP：{{ item.ips?.join(',') }}</li>
                <li>MAC：{{ item.macs?.join(',') }}</li>
                <li>描述信息：{{ item.errorMsg?.localMessage }}</li>
                <li
                  ><a-upload
                    :file-list="[]"
                    :custom-request="(file) => uploadRegisterCode(file, item)"
                  >
                    <a-button>
                      上传注册码
                    </a-button>
                  </a-upload></li
                >
              </ul>
            </div>
          </div>
        </div>
        <div :class="$style.registerInfo">
          <div :class="$style.infoTitle">授权节点信息</div>
          <div :class="$style.infoBlock">
            <div
              v-for="(item, index) in appInfos"
              :key="index"
              :class="[$style.serviceItem, item.appId === currentAppId ? $style.currentItem : '']"
            >
              <div :class="$style.serviceInfo">
                <sd-icon
                  v-if="item.valid"
                  type="check-circle"
                  theme="filled"
                  :class="$style.serviceSuccess"
                />
                <sd-icon
                  v-else
                  type="exclamation-circle"
                  theme="filled"
                  :class="$style.serviceError"
                />
              </div>
              <ul>
                <li>节点名称：{{ item.appId }}</li>
                <li>节点IP：{{ item.appName }}</li>
                <li>最近注册时间：{{ moment(item.regTime).format('YYYY-MM-DD HH:mm:ss') }}</li>
                <li>注册状态：{{ item.valid ? '成功' : '失败' }}</li>
                <li>描述信息：{{ item.errorMsg }}</li>
                <li v-if="!item.valid"
                  ><a-button @click="destoryApplicationNode(item)">删除节点</a-button></li
                >
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </a-card>
</template>

<script>
import moment from 'moment'
import axios from '@/common/services/axios-instance'
import { Modal, message } from 'ant-design-vue'
import ControlService from './control-service'
import components from './_import-components/sd-register-server-import'

export default {
  name: 'SdRegisterServer',
  metaInfo: {
    title: '注册码',
  },
  components,
  data() {
    return {
      serverOpen: true, // 是否启用注册码服务
      currentAppId: null, // 当前app节点
      serverLicenseInfos: [], // 注册码信息
      serverInfos: [], // 注册服务信息
      appInfos: [], // 授权节点信息
    }
  },
  created() {
    this.getRegisterInfo()
  },
  methods: {
    moment,
    // 获取注册码信息
    getRegisterInfo() {
      ControlService.getRegisterInfo().then((res) => {
        if (res.data.msg !== null) {
          this.serverOpen = false
        }
        this.currentAppId = res.data.currentAppId
        this.serverLicenseInfos = res.data.serverLicenseInfos
        this.serverInfos = res.data.serverInfos
        this.appInfos = res.data.appInfos
      })
    },
    // 刷新注册码信息
    refreshRegisterInfo() {
      const data = {}
      ControlService.refreshRegisterInfo(data).then((res) => {
        if (res.data?.valid) {
          message.info('刷新成功！')
          this.getRegisterInfo()
        }
      })
    },
    // 上传注册码
    uploadRegisterCode(file, item) {
      const formData = new FormData()
      formData.append('registerServerId', item.serverId)
      formData.append('Filedata', file.file)
      axios
        .post('api/framework/v1/app-register/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
        })
        .then((res) => {
          if (res.data?.valid) {
            const delayTime = 10
            message.info(`上传成功！${delayTime}秒后自动刷新服务注册信息！`, delayTime)
            setTimeout(() => {
              this.getRegisterInfo()
            }, delayTime * 1000)
          }
        })
    },
    // 删除节点
    destoryApplicationNode(item) {
      Modal.confirm({
        title: '删除',
        content: '确认删除此应用节点？',
        okText: '确定',
        okType: 'danger',
        onOk: () => {
          const data = {
            registerAppId: item.appId,
          }
          ControlService.destoryApplicationNode(data).then((res) => {
            if (res.data?.valid) {
              message.info('删除成功！')
              this.getRegisterInfo()
            }
          })
        },
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.sys-register-not {
  font-size: 36px;
  text-align: center;
  vertical-align: middle;
}
.sys-register-box {
  padding: 20px 16px;
  .register-title {
    padding: 14px 16px;
    background: rgb(255, 255, 255);
    border-bottom: 1px solid rgb(237, 240, 245);
  }
  .register-content {
    padding: 40px 70px;
    .register-info {
      margin-bottom: 30px;
      .info-title {
        padding-bottom: 8px;
        margin-bottom: 21px;
        font-size: 16px;
        font-weight: 500;
        color: rgb(51, 51, 51);
        border-bottom: 1px solid #dfe2e8;
        .server-btn {
          float: right;
          padding: 4px 8px;
          margin-top: -8px;
          color: #337ab7;
          cursor: pointer;
          background: #f4f8ff;
          border: 1px solid #ddd;
        }
      }
      .info-block {
        overflow: hidden;
        clear: both;
        .info-item {
          position: relative;
          width: 49%;
          padding: 9px 16px;
          ul {
            padding: 0;
            list-style: none;
            li {
              margin-bottom: 10px;
            }
          }
        }
        .service-item {
          position: relative;
          width: 49%;
          padding: 9px 16px;
          margin-bottom: 16px;
          border: 1px solid #dfe2e8;
          border-radius: 4px;
          box-shadow: 0 1px 8px 0 rgb(173 178 187 / 30%);
          .service-info {
            position: absolute;
            top: 9px;
            right: 9px;
            width: 24px;
            height: 24px;
            font-size: 24px;
            line-height: 24px;
            .service-success {
              color: $alert-success-icon-color;
            }
            .service-error {
              color: $alert-error-icon-color;
            }
          }
          ul {
            padding: 0;
            list-style: none;
            li {
              padding-bottom: 10px;
              margin-bottom: 5px;
              word-break: break-all;
              border-bottom: 1px dotted #ddd;
            }
          }
        }
        .current-item {
          border: 1px solid #0957f5;
        }
      }
    }
  }
}
</style>
