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

<style lang="less">
.loginBox{
  .loginForm{
    .formItem{
        input, select{
            border-radius: 0;
            font-size: 12px;
        }
        .ivu-select-selection{
          border-radius: 0;
        }
    }
    .schoolAutoComplete{
      height: 170px;
      .schoolsBox{
        border-bottom: 1px solid #e9e9e9;
        padding: 5px 5px 5px 15px;
        .area{
          font-size: 12px;
          padding: 5px;
        }
      }
    }
    .ivu-select-dropdown{
      border-radius: 0;
    }
  }
}
.identityModal{
  .ivu-modal{
    .ivu-modal-content{
      background-color: #2a292e;
      padding: 12px;
      border: 1px solid #ccc;
      .ivu-modal-header, .ivu-modal-footer{
        border: 0;
      }
      .ivu-modal-footer{
        padding: 0;
      }
      .ivu-modal-header{
        padding: 5px 16px;
        p{
          color: whitesmoke;
        }
      }
      .identity-body{
        display: flex;
        justify-content: space-around;
        align-items: center;
        .ivu-btn{
          background-color: #1cc0f2;
          color: white;
          font-weight: bold;
          border: 0;
          padding: 0 22px;
        }
      }
    }        
  }
}
.demo-spin-col .ivu-spin-main{
	background-color: transparent;
	padding: 0;
}
</style>

<template>
  <div style="display: flex;
    justify-content: space-evenly;
    width: 100%;
    height: 600px;
    flex-direction: row;
    align-items: center;">
      <div style="width: 45%;
        max-width: 600px;
        height: 100%;padding: 12px;display: flex;
    justify-content: center;
    align-items: center;">
        <div style="font-size:45px;
            color: rgb(255, 255, 255);
            font-weight: bolder;
            letter-spacing: 2px;
            word-break: break-all;
            line-height: 1;
            margin-bottom: 21px;">
          Welcome to new IES5
        </div>
        <!-- <p style="color: #9e9e9e;font-size: 14px; margin-bottom: 15px;" v-text="'calc() 是一個 CSS function 作用於屬性設定是數值的時候可以進行加減乘除的運算，例如： <length> 長度、<frequency> 頻率、<angle> 角度、<time> 時間、<number> 數字或者是 <integer> 整數這幾個屬性值都可以使用 calc()。'"></p> -->
        <!-- <img style="max-width: 400px;" src="https://dozen168.com/wp-content/uploads/2019/06/%E6%B7%A1%E6%B0%B4%E6%99%AF%E9%BB%9E%E6%B7%A1%E6%B0%B4%E9%A2%A8%E6%99%AF%E6%B7%A1%E6%B0%B4%E4%BB%8B%E7%B4%B9%E6%B7%A1%E6%B0%B4%E6%97%85%E9%81%8A%E6%B7%A1%E6%B0%B4%E5%B0%8F%E5%90%83%E6%B7%A1%E6%B0%B4%E7%BE%8E%E9%A3%9F%E6%B7%A1%E6%B0%B4%E6%97%85%E9%81%8A%E6%9B%9C%E8%BC%97%E6%B7%A1%E6%B0%B4%E4%BB%8B%E7%B4%B9%E6%9B%9C%E8%BC%97%E6%B7%A1%E6%B0%B4%E6%99%AF%E9%BB%9E%E4%BB%8B%E7%B4%B9-1168x737.jpg"/> -->
      </div>
      <div style="width: 45%;
              max-width: 600px;
              height: 100%;
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              justify-content: space-evenly;
              align-items: center;">
            <div style="width: 200px;height: 200px;background-color: #69b0d0;border-radius: 4px;cursor: pointer;" @click="loginTo('teacher')">
              <img style="display: block;width: 100%;" src="@/assets/icon/teacherIcon.png">
            </div>
            <div style="width: 200px;;height: 200px;background-color: #94ca87;border-radius: 4px;cursor: pointer;" @click="loginTo('student')">
              <img style="display: block;width: 100%;" src="@/assets/icon/studentIcon.png">
            </div>
      </div>
    <!-- 提示視窗 -->
    <Modal v-model="identityFlag" width="360" :mask-closable="false" :closable="false" class-name="identityModal">
        <p slot="header">{{ $t('login.modal.title') }}</p>
        <div class="identity-body">
            <Button size="large" @click="goWhere('teacher')">{{ $t('login.modal.btn1') }}</Button>
            <Button size="large" @click="goWhere('student')">{{ $t('login.modal.btn2') }}</Button>
        </div>
        <div slot="footer"></div>
    </Modal>
  </div>
</template>
<script>
import { User } from '@/service/User'

export default {
  data() {
    return {
      defaultSchool: {
        name: '',
        code: ''
      },
      userOauth:{
        code: '',
        state: ''
      },
      identityFlag: false
    }
  },
  created() {
    // 取得學校設定簡碼
    this.setDefSchool()

    //TEAMModelID 社群登入資訊
    this.userOauth.code = this.$route.query.code == undefined ? '' : this.$route.query.code;
    this.userOauth.state = this.$route.query.state == undefined ? '' : this.$route.query.state;

    // 社群帳號登入
    if(this.userOauth.code != '' & this.userOauth.state !='' ) {
      this.putUserCode()
    } else if(this.userOauth.code != ''){ // 大雲快速登入
      this.SSOLogin(this.userOauth.code)
    }
  },
  methods: {
    putUserCode: function(){ //如果第三方登入會啟動的function
      this.$Spin.show(); //開啟加載畫面
      let redirect_uri = window.location.origin + '/login'
      this.$api.OauthLogin(this.userOauth.state, this.userOauth.code, redirect_uri).then(res=>{
        this.$Spin.hide(); //關閉加載畫面
        this.loginProcess(res, this.defaultSchool.code)
      })  
    },
    SSOLogin: function(code){ // 快速登入
      this.$Spin.show(); //開啟加載畫面
      this.$api.SSOLogin(code).then( async res=>{
        this.$Spin.hide(); // 關閉加載畫面
          if(!res.error){
            // 登入大雲開始
            this.loginProcess(res, this.defaultSchool.code)
          } else {
            this.$Message.warning(this.$t('login.sse.error.text1'));
          }

          this.$router.push({ name: 'login' })
      })
    },
    loginProcess: async function(item, schoolCode){ // 登入用function
      let result;

      await this.$api.login.loginIES(item, schoolCode).then( res => {
        result = res
      })
      console.log('////',result)
      //設定權限並登入
      let identity = localStorage.getItem('identity')
      User.login(result).then(res => {
        if(res && identity) {
          this.saveUserCodes({
            TEAMModelId: result.id,
            name:result.name,
            schoolCode: result.defaultschool
          })
          let path = identity == 'student' ? '/studentWeb' : '/home'
          this.$router.push({ path: path })
        } else {
          this.identityFlag = true;
        }
      })
    },
    saveUserCodes: function (res) {
  		this.$store.commit('setUserInfo',res)
	  },
    setDefSchool: function(){
      let defschool = sessionStorage.defaultSchool
      if(defschool){
        defschool = JSON.parse(decodeURIComponent(defschool), "utf-8")
        this.defaultSchool.code = defSchool.code
        this.defaultSchool.name = defSchool.name
      }      
    },
    goWhere: function(identity){
      localStorage.setItem('identity', identity)
      let path = identity == 'student' ? '/studentWeb' : '/home'
      this.$router.push({ path: path })
    },
    loginTo: function(identity) {
      let pathname = identity == 'student' ? 'loginStudent' : 'loginTeacher'
      this.$router.push({ name: pathname })
    }
  }
}
</script>