<template>
  <div class="code-login">
    <div class="title">{{ codeOpt.codeNameCn }}扫码，安全登录</div>
    <div class="qr-code-content">
      <img src="@/assets/img/login/Snipaste_2023-11-08_15-51-21.png" alt="">
    </div>
    <div class="foot-title">
      其他登录方式
    </div>
    <div class="code-footer">
      <div class="logo-box"
           v-for="(item,index) in codeOptions"
           :key="index"
           @mouseenter="item.isHover = true"
           @mouseleave="item.isHover = false"
           @click="logoClick(item)"
      >
        <i class="logo-img"
           :style="{
              backgroundImage: `url(${require(`@/assets/img/login/${codeName === item.codeName || item.isHover ? item.logoImgActive : item.logoImg}`)})`,
            }" />
        <div class="logo-name">{{ item.codeNameCn }}登录</div>
      </div>

    </div>
  </div>
</template>

<script>

export default {
  name: 'CodeLogin',
  data() {
    return {
      codeName: 'weChat',
      codeOptions: [
        {
          codeName: 'weChat',
          codeNameCn: '微信',
          logoImg: 'wechat-logo.png',
          logoImgActive: 'wechat-logo-hover.png',
          isHover: false
        },
        {
          codeName: 'WeCom',
          codeNameCn: '企业微信',
          logoImg: 'wecom-logo.png',
          logoImgActive: 'wecom-logo-hover.png',
          isHover: false
        }
      ]
    }
  },
  computed: {
    // 当前选中的二维码配置类型
    codeOpt() {
      return this.codeOptions.find(i => i.codeName === this.codeName)
    }
  },
  created() {

  },
  methods: {
    logoClick(item) {
      if (this.codeName === item.codeName) return
      this.codeName = item.codeName
      console.log(item)
    }
  }


}
</script>
<style lang="scss" scoped>
.code-login {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 145px 30px 20px 30px;
  box-sizing: border-box;
  row-gap: 30px;

  .title {
    width: 100%;
    box-sizing: border-box;
    font-size: 22px;
    font-family: PingFang SC, serif;
    color: #3c3c3c;
    font-weight: bold;
  }

  .qr-code-content {
    width: 280px;
    height: 280px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .foot-title {
    font-size: 15px;
    font-family: PingFang SC;
    color: #000;
  }

  .code-footer {
    width: 100%;
    display: flex;
    align-items: center;
    column-gap: 20px;

    .logo-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      row-gap: 5px;
      cursor: pointer;

      .logo-img {
        width: 38px;
        height: 38px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: 0 0;
        transition: all 0.2s;
      }

      .logo-name {
        font-size: 13px;
        font-family: PingFang SC;
        color: #333;
      }
    }


  }
}


</style>
