<!-- @desc:登录页  @auth:洪旭东  @time:2022-04-25 15:27 -->
<style lang="less">
@import './login.less';
</style>

<template>
  <div class="login">

      <div class="lang-class">
        <!--语言-->
        <SelectPop v-model="lang" ref="lang" :multiple="false"
                   :show-clear-flag="false"
                   :show-item-clear="false"
                   :show-toolbar="false"
                   :show-filter="false"
                   :options="langList"
                   labelKey="label"
                   valueKey="key"
                   @on-select="changeLang" style="width: 90px">
        </SelectPop>
      </div>

      <!--  中间部分  -->
      <div class="form-class">
        <!--    左侧部分    -->
        <div class="login-left">
          <img :src="login_logo" style="margin:47px 0 0 58px"/>
          <div style="font-family: PingFang SC;font-size: 44px;font-weight: 500;line-height: 61.6px;text-align: left;color: #FFFFFF;margin:180px 0 0 70px">泛家居建陶行业云服务</div>
          <div style="margin:40px 0 0 70px;display: flex">
            <Button shape="circle" class="left-button" style="color:rgba(19, 19, 19, 1);">免费体验</Button>
            <Button shape="circle" class="left-button" style="margin-left: 20px" ghost>了解产品</Button>
          </div>
        </div>
        <!--    右侧部分    -->
        <div class="login-right">
          <div style="width: 500px;">
            <!--    欢迎登录      -->
            <div style="height:100px;padding: 10px 26px 6px 26px;display:flex;flex-direction:column;gap: 10px;">
              <div style="font-family: 'PingFang SC';font-weight: 500;font-size: 47px;line-height: 47px;color: #333333">欢迎登录</div>
              <div style="font-family: 'PingFang SC';font-weight: 400;font-size: 16px;line-height: 24px;color: #6E7484">东科智云</div>
            </div>
            <!--    登录表单      -->
            <div style="padding: 26px;display:flex;flex-direction:column;gap: 28px">
              <div class="tab-class">
                <div :class="active == 0? 'btn-active-class':'btn-class' " id="user" @click="changeMode">账号登录</div>
                <div :class="active == 1? 'btn-active-class':'btn-class' " id="scan" @click="changeMode">扫码登录</div>
              </div>
              <div v-show="active == 0" class="content">
                <!--登录界面-->
                <login-form v-if="step == 0" @on-success-valid="handleSubmit" :loading="loading"></login-form>
                <!--选择公司-->
                <div v-if="step == 1" style="overflow-y: auto;overflow-x:hidden;height: 300px;margin-bottom: 40px">
                  <DkButton v-for="(item,index) in joinedCpList" icon="iconfont iconfont icon-branch" :key="index"
                            ref="save" type="text"
                            style="margin-right: 10px;" @click="chooseCp(item)">
                    <div style="display: flex;margin-left: 20px">
                      <div>{{ item.cpName }}</div>
                    </div>
                  </DkButton>
                </div>
              </div>
              <div v-show="active == 1" id="scan-login" style="text-align: center; padding: 21px">
                <img :src="qrcodeUrl" style="width: 250px;height: 250px" v-if="qrcodeUrl"/>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="copy-right">
        版权所有Copyright 2024 by 东科智云 | 备案号：京ICP备15085789号-1
      </div>
  </div>
</template>

<script>
import LoginForm from './login-form'
import {mapActions} from 'vuex'
import dk_logo from '@/assets/images/dongke_logo.png'
import dk_mini from '@/assets/images/iboss_mini.png'
import login_logo from '@/assets/images/new-logo.png'
import {localRead, localSave} from "@/libs/base/util";
import {getQrCode, checkLoginOpenId} from '@/api/system/user/login'
import uuidv4 from 'uuid/v4'
import config from "@/config";
import {request} from "@/api/base";

export default {
  components: {
    LoginForm
  },
  data() {
    let self = this
    return {
      tabName: 'name1',
      loading: false,
      type: '',
      dk_logo,
      dk_mini,
      login_logo,
      active: 0,// 默认在账户登录
      lang: self.$config.currentLang,
      langList: self.$config.languages,
      getQrCode: getQrCode,
      checkLoginOpenId: checkLoginOpenId,
      loginUuid: null,
      qrcodeUrl: null,
      interval: null,
      step: 0,// 用于跳转到选择公司页面
      joinedCpList: [], // 公司数据源
      joinedCps:[],// 加入公司
    }
  },
  methods: {
    ...mapActions([
      'handleLogin',
      'afterLogin',
      'updateCompany',
      'updateToken',
      'changeCp',
      'getInfoAfterLogin',
      'handleAfterLoginInfo'
    ]),
    /**
     * @desc   : 切换登录页签
     * @author : 周兴
     * @date   : 2022/8/4 16:29
     */
    changeMode(e) {
      if (e.target.id == 'user') {
        this.active = 0;
        clearInterval(this.interval)
      } else {
        this.active = 1;
        let _this = this
        this.interval = setInterval(() => {
          _this.checkLoginOpenId(_this.loginUuid).then(r => {
            let res = r.data
            if (res.code === _this.$config.SUCCESS_CODE) {
              clearInterval(_this.interval)
              _this.afterLogin(res.data)
              this.$router.push({
                name: this.$config.homeName
              })
            } else if (res.code === 1015) {
              _this.$Message.warning(res.message)
            }
          })
        }, 3000)
      }
    },
    /**
     * @desc   : 切换语言
     * @author : 周兴
     * @date   : 2022/12/21 13:01
     */
    changeLang() {
      // 设置语言的缓存
      localSave('local', this.lang);
      this.$i18n.locale = this.lang
    },
    /**
     * @desc   : 选择公司
     * @author : 周兴
     * @date   : 2024/3/19 14:18
     */
    async chooseCp(e) {
      if(e){
        await this.updateCompany(e);
        // 点击切换公司
        this.changeCp(this.joinedCps).then(res=>{
          // 更新token
          this.updateToken(res.data);
          setTimeout(()=>{
            // 登录后获取信息
            this.getInfoAfterLogin().then(r => {
              if (r.code == this.$config.SUCCESS_CODE) {
                this.handleAfterLoginInfo(r.data);
                this.$router.push({
                  name: this.$config.homeName
                })
              }
            });
          },50)
        })
      }
    },
    /**
     *   @desc   : 密码账号登录提交
     *   @date   : 2022/5/13 16:52
     *   @author : 洪旭东
     */
    async handleSubmit({userCode, userPwd, appCode}) {
      this.loading = true
      this.handleLogin({userCode, userPwd, appCode}).then(res => {
        this.$Message.destroy()
        if (res.code === this.$config.SUCCESS_CODE) {
          if (res.data) {
            clearInterval(this.interval)
            // 如果当前公司为空，加入公司有值，那么打开选择公司的页面
            if (!res.data.company) {
              let joinedCpList = []
              if (res.data.joinedCpList && res.data.joinedCpList.length > 0) {
                joinedCpList = res.data.joinedCpList;
                this.joinedCps = res.data.joinedCps;
              }
              // 加入体验公司
              joinedCpList = joinedCpList.union(this.$config.expCp);
              this.joinedCpList = joinedCpList;
              console.log('dd',this.$config.expCp,this.joinedCpList)
              this.step = 1;
            } else {
              (async () => {
                // 登录后更新相关信息
                await this.afterLogin(res.data)
                // 登录后获取信息
                this.getInfoAfterLogin(res.data).then(r => {
                  if (r.code == this.$config.SUCCESS_CODE) {
                    this.handleAfterLoginInfo(r.data);
                    this.$router.push({
                      name: this.$config.homeName
                    })
                  }
                });
              })();
            }
          }
        } else {
          let message = res.message
          this.$Message.warning({content: message})
        }

        this.loading = false
      })

    },
  },
  created() {
    localSave('tagNaveList', '[]'); // 清除顶部tag
    let lang = localRead('local');
    if (lang) {
      this.lang = lang
    } else {
      // 如果缓存中没有再存默认值
      this.lang = this.$config.currentLang
      localSave('local', this.lang);// 设置语言的缓存
    }

    //生成uuid并获取二维码
    this.loginUuid = uuidv4()
    this.getQrCode(this.loginUuid).then(r => {
      let res = r
      if (res.code === this.$config.SUCCESS_CODE) {
        this.qrcodeUrl = res.data
      } else {
        this.$Message.warning(res.message)
      }
    })
  },
  beforeDestroy() {
    clearInterval(this.interval)
  },
  mounted() {
    let message = this.$route.params.message
    //处理token过期
    if (message != undefined) {
      // this.$Message.destroy()
      this.$Message.info(message)
    }
  }
}
</script>

<style scoped>
.copy-right{
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  position:fixed;
  bottom: 20px;
}
.login-left{
  width: 825px;
  height:700px;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
  background: url('../../assets/images/left-bgimg.png') no-repeat,radial-gradient(45.91% 94.06% at 12.61% 5.94%, #597EFF 0%, #1750BD 82.72%);
  background-position: right;
}

.login-right{
  background-color: #FFFFFF;
  width: 555px;
  height:700px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}

.left-button{
  height:60px;
  width: 150px;
  font-size: 20px!important;
  font-weight: 500;
  line-height: 40px;
}
.lang-class {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 90px;
}

/*登录表格标题左右分布*/
/deep/ .ivu-tabs-tab {
  width: 100%;
  margin-right: 0;
}

/deep/ .ivu-tabs-nav {
  width: 50%;
}

/*登录样式*/
.login_body {
  margin: 0 auto;
  width: fit-content;
}

/deep/ .xm-select-size > xm-select {
  border: none;
  background: transparent;
}

/*表头样式*/
.login_title {
  display: inline-block;
  line-height: 50px;
  float: left;
  font-size: 33px;
  color: rgba(0, 0, 0, .85);
  font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
  font-weight: 600;
}

/*页面脚部图片*/
.login_foot_pic {
  width: 100%;
  display: flex;
  justify-content: space-around;
  position: fixed;
  bottom: 50px;
}

/deep/ .ivu-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-class {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1380px;
  border-radius: 24px;
}

/deep/ .ivu-btn-text {
  width: 100%;
  height: 60px;
  font-size: 20px !important;
  background: #ffffff;
  display: flex;
  justify-content: left;
  align-items: center;
  margin: 20px 20px;
}


/deep/ .ivu-btn .ivu-btn-text > span {
  width: calc(100% - 50px);
}
.close-div-class{
  width: 105px!important;
}

</style>
