<template>
  <div class="license">
    <div>
      <img
        src="@/assets/images/empower-logo.png"
        style="margin: 30px 0 50px 60px"
        alt=""
      />
      <img src="@/assets/images/empower.png" width="95%" alt="" />
    </div>
    <div class="login">
      <a-alert :message="$t('LICENSE_TIPS')" banner />
      <a-collapse
        v-model="activeName"
        :bordered="false"
        expand-icon-position="right"
        class="collapse-header-divide"
        :show-arrow="false"
      >
        <a-collapse-panel key="a" :header="$t('BASE_INFO')">
          <a-form-model
            ref="addForm"
            :model="addForm"
            :label-col="{ span: 6 }"
            :wrapper-col="{ span: 12 }"
            class="addForm"
          >
            <!-- <a-form-model-item prop="licenseCode" :label="$t('APPLICATION_ID')">
              <a-input
                v-model="appId"
                :placeholder="$t('PLACEENTER')"
                disabled
                style="width: 100%"
                allow-clear
              />
            </a-form-model-item>
            <a-icon
              type="setting"
              style="
                margin-left: 10px;
                position: relative;
                top: -40px;
                left: 75%;
              "
              :title="$t('GENERATE_ID')"
              @click="handAppId"
            /> -->
            <a-form-model-item prop="licenseCode" :label="$t('LICENSE_CODE')">
              <a-input
                v-model="addForm.licenseCode"
                :placeholder="$t('PLACEENTER')"
                disabled
                allow-clear
              />
            </a-form-model-item>
            <a-form-model-item
              prop="companyName"
              :label="$t('LICENSE_COMPANY')"
            >
              <a-input
                v-model="addForm.companyName"
                :placeholder="$t('PLACEENTER')"
                disabled
                allow-clear
              />
            </a-form-model-item>
            <a-form-model-item
              prop="onlineUserNum"
              :label="$t('LICENSE_ONLINE_USER')"
            >
              <a-input
                v-model="addForm.onlineUserNum"
                :placeholder="$t('PLACEENTER')"
                disabled
                allow-clear
              />
            </a-form-model-item>
            <a-form-model-item
              prop="effectTime"
              :label="$t('TAKE_EFFECT_TIME')"
            >
              <a-input
                v-model="addForm.effectTime"
                :placeholder="$t('PLACEENTER')"
                disabled
                allow-clear
              />
            </a-form-model-item>
            <a-form-model-item prop="expireTime" :label="$t('FAILURE_TIME')">
              <a-input
                v-model="addForm.expireTime"
                :placeholder="$t('PLACEENTER')"
                disabled
                allow-clear
              />
            </a-form-model-item>
            <a-form-model-item prop="contactInfo" :label="$t('LICENSE_PHONE')">
              <a-input
                v-model="addForm.contactInfo"
                :placeholder="$t('PLACEENTER')"
                disabled
                allow-clear
              />
            </a-form-model-item>
            <a-form-model-item prop="description" :label="$t('LICENSE_REMARK')">
              <a-input
                v-model="addForm.description"
                :placeholder="$t('PLACEENTER')"
                disabled
                allow-clear
              />
            </a-form-model-item>
            <a-form-model-item
              prop="mainBoardSerial"
              :label="$t('MACHINE_CODE')"
            >
              <a-input
                v-model="addForm.mainBoardSerial"
                :placeholder="$t('PLACEENTER')"
                disabled
                rows="6"
                type="textarea"
                allow-clear
              />
            </a-form-model-item>
          </a-form-model>
          <div class="footer">
            <a-upload
              list-type="picture"
              :show-upload-list="false"
              :action="action"
              @change="handleChange"
            >
              <a-button type="primary">
                <a-icon type="cloud-upload" />{{ $t("UPLOAD_AUTHORIZATION") }}
              </a-button>
            </a-upload>
            <a-button type="primary" @click="handSave">
              <a-icon type="cloud-upload" />{{ $t("CONFIRM") }}
            </a-button>
            <a-button @click="handCance">
              <Icon type="icon-dir-f-rollback" :size="18" />{{ $t("CANCEL") }}
            </a-button>
          </div>
        </a-collapse-panel>
      </a-collapse>
    </div>
  </div>
</template>

<script>
import { Icon } from "@mega-design/ui-vue";
import ApiConstant from "@/api/ApiConstant";

export default {
  name: "License",
  components: { Icon },
  layout: "none",
  data() {
    return {
      action: `${ApiConstant.PREFIX_CORE}/api/license/analysis`,
      activeName: "a",
      form: null,
      appId: "",
      isAppId: false,
      addForm: {},
      // 表格列配置项
      columns: [
        {
          dataIndex: "ip",
          title: () => this.$t("IP_ADDRESS"),
          width: 300,
        },
        {
          dataIndex: "mac",
          title: () => this.$t("MAC_ADDRESS"),
          width: 300,
        },
      ],
    };
  },
  computed: {},
  mounted() {
    // this.init();
  },
  methods: {
    // 获取应用id
    // init() {
    //   this.$axios
    //     .get(`${ApiConstant.PREFIX_CORE}/api/license/app-id`, {
    //       headers: { Authorization: "" },
    //     })
    //     .then((res) => {
    //       this.appId = res.data.data;
    //       this.isAppId = !this.appId;
    //     });
    // },
    // handAppId() {
    //   if (this.appId) {
    //     this.$confirm({
    //       title: this.$t("TIPS"),
    //       content: this.$t("APPLICATION_ID_TIPS"),
    //       okType: "warning",
    //       okText: this.$t("CONFIRM"),
    //       cancelText: this.$t("CANCEL"),
    //       centered: false,
    //       icon: "exclamation-circle",
    //       onOk: () => {
    //         this.$axios({
    //           url: `${ApiConstant.PREFIX_CORE}/api/license/app-id`,
    //           method: "post",
    //           headers: { Authorization: "" },
    //         }).then((res) => {
    //           this.$message.success(this.$t("GENERATED_SUCCESS"));
    //           this.appId = res.data.data;
    //           this.isAppId = !this.appId;
    //         });
    //       },
    //     });
    //   } else {
    //     this.$axios({
    //       url: `${ApiConstant.PREFIX_CORE}/api/license/app-id`,
    //       method: "post",
    //       headers: { Authorization: "" },
    //     }).then((res) => {
    //       this.$message.success(this.$t("GENERATED_SUCCESS"));
    //       this.appId = res.data.data;
    //       this.isAppId = !this.appId;
    //     });
    //   }
    // },
    handleChange(info) {
      if (info.file.status === "done") {
        this.form = new FormData();
        this.form.set("file", info.file.originFileObj);
        this.addForm = {
          description: info.file.response.data.description,
          effectTime: info.file.response.data.effectTime,
          expireTime: info.file.response.data.expireTime,
          companyName: info.file.response.data.licenseCheckData.companyName,
          contactInfo: info.file.response.data.licenseCheckData.contactInfo,
          onlineUserNum: info.file.response.data.licenseCheckData.onlineUserNum,
          licenseCode: info.file.response.data.licenseCheckData.licenseCode,
          mainBoardSerial:
            info.file.response.data.licenseCheckData.mainBoardSerial,
        };
      }
    },
    handSave() {
      if (this.form != null) {
        this.$axios
          .post(`${ApiConstant.PREFIX_CORE}/api/license/install`, this.form)
          .then((res) => {
            this.$message.success(this.$t("AUTHORIZATION_SUCCEEDED"));
            this.$router.push({
              path: "/login",
            });
          });
      } else {
        this.$message.error(this.$t("PLEASE_SELECT_FILE_FIRST"));
      }
    },
    handCance() {
      this.$router.push({
        path: "/login",
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import (optional, once) "../../../theme";

.license {
  background: #f1f3f3;
  padding: 20px 60px;
  display: flex;
  .login {
    width: 800px;
    padding: 20px;
    margin-left: 100px;
    margin-top: 90px;
  }
  /deep/.ant-table .ant-table-content > .ant-table-body {
    min-width: 648px;
    width: 648px;
  }
  /deep/.ant-collapse-header {
    border-bottom: 0;
    padding-left: 20px;
    font-size: 16px;
    font-weight: 700;
    &::before {
      content: "";
      display: inline-block;
      width: 4px;
      height: 1em;
      vertical-align: -0.125em;
      margin-right: 12px;
      background: linear-gradient(
        180deg,
        fade(@primary-color, 65%),
        @primary-color
      );
    }
  }
  /deep/.ant-collapse {
    padding: 10px 20px 20px 20px;
  }
  /deep/.ant-collapse-item {
    border-bottom: 0;
  }
  .footer {
    margin: 40px 0;
    display: flex;
    justify-content: center;
    /deep/.ant-btn-primary {
      margin-left: 8px;
    }
  }
}
</style>
