import { defineComponent } from 'vue'
import styles from './index.module.less'
import OQrcode from '@/components/the-qrcode'
import iconLogo from '../images/icon-logo.png'

export default defineComponent({
  name: 'qrcode-payment',
  props: {
    url: {
      type: String,
      default: ''
    },
    pay_channel: {
      type: String,
      default: 'wx_pub'
    }
  },
  setup(props) {
    return () => (
      <div class={[styles.saveShareImage]}>
        <div style={{ overflow: 'hidden' }}>
          <div class={styles.schoolName}></div>
        </div>
        <img src={iconLogo} class={styles.iconLogo} />
        <div class={styles.shareSection}>
          <div class={[styles.shareContaienr]}>
            <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>
      </div>
    )
  }
})
