<style lang="less" scoped>
  @import './Index.less';
</style>

<style lang="less">
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
.login{
  &-server{
    .ivu-select-selection, .ivu-btn{
      border-radius: 0;
      background-color: #0d253f;
      color: #e3e5e8;
      border: 0;
      span{
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
    .ivu-select-arrow{
      font-size: 18px;
    }
    .ivu-select-dropdown{
      background-color: #091529;
      border-radius: 0;
    }
    .ivu-select-item, .ivu-dropdown-item{
      color: #ffffff;
      &:hover{
        background-color:transparent;
      }
    }
    .ivu-select-item-focus{
      background-color:transparent;
    }
  }
}
</style>

<template>
  <div id="login" class="login">
    <div class="login-mark">
      <img width="125" src="@/assets/ies5_logo.svg">    
    </div>
    <div calss="login-schoolName">
      {{ schoolName }}
    </div>
    <div class="login-server">
      <h5>{{ $t('login.title.ser') }}</h5>
      <Dropdown trigger="click" @on-click="chgSerType">
          <a href="javascript:void(0)">
            <Button style="width:120px;">
              
              <span>
                {{ $t('login.serAdress.' + config.srvAdr) }}
              </span>

              <Icon type="ios-arrow-down"></Icon>
          </Button>
          </a>
          <DropdownMenu slot="list" style="width:120px">
              <DropdownItem name="China" >{{ $t('login.serAdress.China') }}</DropdownItem>
              <DropdownItem name="Global">{{ $t('login.serAdress.Global') }}</DropdownItem>
          </DropdownMenu>
      </Dropdown>
    </div>

    <div class="login-body">
        <router-view/>
    </div>

    <div class="login-footer" style="color: #fff;">
      <h5 style="padding: 7px;color: #fff;">&copy; HABOOK Group 20190000000</h5>
      <span v-if="srvAdr == 'China'" style="padding: 0 10px;">|</span>
      <a v-if="srvAdr == 'China'" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=51010402000615" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;color: #fff;"><a style="float: left;color:#fff" href="https://beian.miit.gov.cn/" target="_blank">蜀ICP备18027363号-1</a> <span v-if="srvAdr == 'China'" style="padding: 0 10px;float: left;">|</span><img src="@/assets/icon/icon_record.png" style="float:left;"/><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px;">川公网安备 51010402000615 </p></a>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'

export default {
  data(){
    return {
      schoolName: ''
    }
  },
  computed: {
    ...mapState({
      config: state => state.config
    }),
    ...mapGetters({
        srvAdr: 'config/getSrvAdr'
    }),
  },
  methods: {
    chgLoginType: function(){
      this.qrloginFlag = !this.qrloginFlag
    },
    chgSerType: function(val){
      if(this.config.srvAdr != val){
        let isProduction = process.env.NODE_ENV == 'development' ? false : true
        if(isProduction){
          let toStation = this.config[val].domainUrl.find(function(item){
            return item.station == localStorage.getItem('station')
          })
          window.open(toStation.url);
          
        } else {
          this.$store.dispatch('config/setSrvAdr', val)
        }
      }
    },
    setLoginSchoolCode: function(){ // 設定預設的學校簡碼
      let schoolCode = this.$route.query.schoolcode == undefined ? '' : this.$route.query.schoolcode;
      if(schoolCode){
        this.$api.login.getSchoolName({schoolCode: schoolCode}).then( res => {
          this.schoolName = res.name
          sessionStorage.setItem('defaultSchool', encodeURIComponent(JSON.stringify({code: res.code, name: res.name}), "utf-8"))          
        })
      }
    },
  },
  created() {
    // 統一處理預設登入學校
    this.setLoginSchoolCode()
  },
}
</script>
