<template>
  <div class="authorize">
    <div class="authorize_hd">
      <div class="authorize_logo" :style="authorize_logo_style">
        <img :src="config.loginLogoImg">
      </div>
      <div class="authorize_text">{{$t('hivuiLogin_authorize_title')}}</div>
    </div>
    <div class="authorize_main" :style="bgStyle">
      <div class="authorize_box">
        <h3>{{$t('hivuiLogin_authorize_box_title')}}</h3>
        <el-form ref="authorizeForm" label-width="64px">
          <el-form-item class="authorize_field" prop="machineCode" :label="$t('hivuiLogin_authorize_machine_code')">
            <el-input ref="machineCode" v-model="machineCode" type="text" :placeholder="$t('hivuiLogin_authorize_machine_code_placeholder')" readonly></el-input>
          </el-form-item>
          <el-upload
            v-show="!authorizeUploadSuccess"
            class="authorizeUpload"
            :http-request="handleUpload"
            :before-upload="beforeUpload"
            :on-change="handleChange"
            :file-list="fileList"
            :limit="2"
            :auto-upload="true"
            :show-file-list="false"
            accept=".md">
            <el-button size="small" :type="'primary'" :loading="authorizeLoading">{{$t('hivuiLogin_authorize_upload_btn')}}</el-button>
          </el-upload>
          <div class="authorize_btn_box">
            <el-button
              size="small"
              v-show="authorizeUploadSuccess"
              class="authorize_submit"
              :loading="authorizeLoading"
              type="success"
              @click="goLoginPage"
            >{{$t('hivuiLogin_authorize_upload_success')+$t('hivuiLogin_authorize_btn_text')}}</el-button>
          </div>
          
        </el-form>
        <!-- <div class="authorize_mask" v-show="authorizeUploadSuccess"></div> -->
        <div class="authorize_tips">
          <span @click="goLoginPage">{{$t('hivuiLogin_authorize_tiptext2')}}<i class="el-icon-arrow-right"></i></span>
        </div>
      </div>
    </div>
    <div class="authorize_ft" v-html="config.copyright"></div>
  </div>
</template>

<script>
import {getMachineCode,uploadCard} from "../api/user";
import _loginLogoImg from "../assets/Logo1.png"
import _authorizeBgImg from "../assets/register/bg.png"
export default {
  name: "authorize",
  data() {
    return {
      machineCode: "",
      fileList: [], // 用来保存文件列表
      authorizeLoading: false,
      authorizeUploadSuccess: false,
      msgObj:null,
      config: {
        title: window.customSysCofig?.loginTitle||this.$t('hivuiLogin_main_def_title'),
        loginLogoImg: window.customSysCofig?.loginLogo||_loginLogoImg,
        loginLogoImg_height: window.customSysCofig?.loginLogo_h||56,
        loginLogoImg_width: window.customSysCofig?.loginLogo_w||206,
        authorizeBgImg: window.customSysCofig?.registerBgImg||_authorizeBgImg,
        copyright: window.customSysCofig?.copyright||this.$t('hivuiLogin_main_def_copyright'),
      },
    };
  },
  model: {
    prop: "value",
    event: "valuechange"
  },
  props: {
    value: {
      type: Object
    }
  },
  computed: {
    bgStyle() {
      return {
        "background-image": "url(" + this.config.authorizeBgImg + ")",
      };
    },
    authorize_logo_style(){
      return {
        "width":(this.config.loginLogoImg_width / 1920) * 100+"vw",
        "height":(this.config.loginLogoImg_height / 1920) * 100+"vw",
      }
    }
  },
  mounted() {
    getMachineCode().then((res)=>{
      this.machineCode=res.dataPack;
    });
  },
  methods: {
    //上传证书
    handleUpload() {
      let me=this;
      me.authorizeLoading=true;
      if (this.fileList.length == 0) {
        this.$message.warning(me.$t('hivuiLogin_authorize_file_empty'));
        me.authorizeLoading=false;
        return; // 阻止文件上传
      }
      let formData = new FormData();
      formData.append("files", me.fileList[0].raw);
      uploadCard(formData).then((res) => {
        me.authorizeLoading=false;
        if(res.status==200&&res.dataPack&&res.dataPack.time){
          me.authorizeUploadSuccess=true;
          me.msgObj=me.$message({
            message: ((res.msg||me.$t('hivuiLogin_authorize_upload_success'))+"<br>"+$t('hivuiLogin_authorize_time')+"："+res.dataPack.time),
            type: 'success',
            duration:0,
            showClose:true,
            dangerouslyUseHTMLString: true
          });
          /*setTimeout(()=>{
            location=window.HIVUI_SETTING.loginUrl;
          },1*1000);*/
        }
      }).catch((err)=>{
        me.authorizeLoading=false;
      });
    },
    goLoginPage() {
      this.msgObj&&this.msgObj.close();
      this.$router.push("/");
    },
    // 在上传文件前检查
    beforeUpload(file) {
      
    },
    // 文件上传改变事件
    handleChange(file, fileList) {
      this.fileList = [file]; // 保证只有一个文件在 fileList 中，覆盖旧的文件
    },
  }
};
</script>
<style lang="scss" scoped>
@function px2vw($px) {
    @return calc(#{$px} / 1920 * 100vw);
}
$headH: px2vw(130);
$footH: px2vw(172);
.authorize {
  height: 100%;
  overflow: hidden;
  .authorize_hd {
    height: $headH;
    display: flex;
    align-items: center;
    padding-top: px2vw(30);
    padding-left: px2vw(15);
    .authorize_logo {
      width: px2vw(206);
      height: px2vw(56);
      margin-right: px2vw(20);
      img {
        height: 100%;
        width: 100%;
      }
    }
    .authorize_text {
      font-size: px2vw(22);
      color: #333;
      position: relative;
      padding-left: px2vw(32);
      &:after {
        content: "";
        display: block;
        height: px2vw(40);
        width: px2vw(1);
        background-color: #7ecef4;
        position: absolute;
        top: 0;
        left: px2vw(10);
        bottom: 0;
        margin: auto;
      }
    }
  }
  .authorize_main {
    height: calc(100% - #{$headH} - #{$footH});
    position: relative;
    background: url("../assets/register/bg.png") no-repeat center center;
    background-size: cover;
    .authorize_box {
      position: absolute;
      top:0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      width: px2vw(500);
      height: px2vw(300);
      border-radius: px2vw(3);
      background-color: #fff;
      padding: 0 px2vw(40) px2vw(40);
      h3 {
        text-align: center;
        line-height: px2vw(100);
        font-size: px2vw(24);
        color: #333;
        font-weight: bold;
      }
      .authorize_field {
        margin-bottom: px2vw(22);
        line-height: px2vw(48);
        ::v-deep.el-input__inner {
          line-height: px2vw(48);
          height: px2vw(48);
        }
        ::v-deep.el-form-item__content{
          line-height: px2vw(50);
          font-size: px2vw(14);
        }
        ::v-deep.el-form-item__error{
          padding-top: px2vw(4);
        }
        .authorize_pwStrength {
          margin-top: px2vw(10);
        }
        &.authorize_row {
          ::v-deep.el-form-item__content {
            display: flex;
            align-items: center;
          }
        }
      }
      .authorize_capbtn {
        width: px2vw(200);
        height: px2vw(48);
        line-height: px2vw(48);
        padding: 0;
      }
      .authorize_btn_box{
        display: flex;
        justify-content: center;
        .authorize_submit {
          height: px2vw(40);
          line-height: px2vw(40);
          padding-top: 0;
          margin: px2vw(0) auto;
        }
      }
      .authorize_mask{
        position: absolute;
        z-index: 9999;
        height: 60px;
        width: 100%;
        left: 0;
        bottom: 40px;
      }
      .authorize_tips {
        position: absolute;
        bottom:px2vw(20);
        right:px2vw(20);
        padding-top: px2vw(20);
        span {
          color: #3486d2;
          cursor: pointer;
        }
      }
      .authorizeUpload{
        display: flex;
        justify-content: center;
        ::v-deep.el-upload-list{
          height:32px;
          overflow: hidden;
          display: flex;
          flex:1;
          .el-upload-list__item{
            line-height:32px;
            margin-top:0;
            flex:0 0 100%;
          }
        }
      }
    }
  }
  .authorize_ft {
    height: $footH;
    line-height: $footH;
    background-color: #e8f1fa;
    text-align: center;
    font-size: px2vw(16);
    color: #999;
    border-top: px2vw(1) solid #ccc;
    border-bottom: px2vw(1) solid #ccc;
    ::v-deep a{
      margin-left:5px;
      color:#0f406c;
      &:hover{
        color:#409eff;
      }
    }
  }
}
</style>