<template>
  <div class="x-login-switcher" @click="handleClick">
    <XIcon :size="46" :icon="icon" color="currentColor"></XIcon>
  </div>
</template>

<script>
import {XIcon} from '@newpearl/ui';
import {UserLogin, QrCodeLogin} from '@newpearl/icons';

export default {
  name: 'XLoginSwitcher',
  components: {
    XIcon
  },
  props: {
    type: {
      type: String,
      default: 'user',
      validator(v) {
        return ['user', 'qrCode'].includes(v);
      }
    },
    // 禁止切换
    disabled: Boolean
  },
  data() {
    return {};
  },
  computed: {
    icon() {
      const map = {
        user: QrCodeLogin,
        qrCode: UserLogin
      };
      return map[this.type] || QrCodeLogin;
    }
  },
  methods: {
    handleClick() {
      if (this.disabled) return;
      const type = this.type === 'user' ? 'qrCode' : 'user';
      this.$emit('change', type);
      this.$emit('update:type', type);
    }
  }
};
</script>
