import { defineComponent, nextTick, onMounted, ref, watch } from 'vue';
import logo from '@common/images/smallLogo.png';
//@ts-ignore
import QRCode from 'qrcode';
import styles from './index.module.less';

export default defineComponent({
  props: {
    text: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: '200px'
    },
    logoSize: {
      type: String,
      default: 'default'
    }
  },
  setup(props) {
    const canvas = ref();

    const init = () => {
      QRCode.toCanvas(
        canvas.value,
        props.text,
        {
          margin: 1
        },
        (error: any) => {
          if (error) console.log(error);
          console.log('success');
        }
      );
    };
    watch(
      () => props.text,
      () => {
        init();
      }
    );
    onMounted(() => {
      nextTick(() => {
        init();
      });
    });
    return () => (
      <div
        class={styles.qrcode}
        style={{ width: props.size, height: props.size }}>
        <canvas ref={canvas} class={styles.qrcodeCanvas}></canvas>
        <img
          src={logo}
          class={[
            styles.qrcodeLogo,
            props.logoSize === 'small' && styles.small
          ]}
        />
      </div>
    );
  }
});
