import { defineComponent } from 'vue';
import styles from './index.module.less';
import OQrcode from '@/components/m-qrcode';

export default defineComponent({
  name: 'qrcode-payment',
  props: {
    url: {
      type: String,
      default: ''
    },
    pay_channel: {
      type: String,
      default: 'wx_pub'
    },
    orderType: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    return () => (
      <div class={[styles.saveShareImage]}>
        <div class={[styles.shareContaienr]}>
          <div class={styles.schoolName}>
            {props.orderType === 'VIP' ? '会员购买' : '报名缴费'}
          </div>
          <div class={styles.shareType}>
            请截图下方二维码
            <span>
              登录{props.pay_channel === 'wx_pub' ? '微信' : '支付宝'}扫码支付
            </span>
          </div>

          <div class={styles.qrcodeSection}>
            <OQrcode text={props.url} logoSize={'small'} size={'100%'} />
          </div>

          <div class={styles.memo}>请在30分钟内扫码支付</div>
        </div>

        <div class={[styles.tips]}>
          <div class={styles.tipsTitle}>使用说明：</div>
          <div class={styles.tipsContent}>
            1.打开{props.pay_channel === 'wx_pub' ? '微信' : '支付宝'}扫一扫
            <br />
            2.选择相册中的二维码
            <br />
            3.请在30分钟内扫码支付
          </div>
        </div>
      </div>
    );
  }
});