import { defineComponent } from 'vue'
import { Image } from 'vant'
import styles from './index.module.less'
import orchestraTopBg from '@/school/save-share-image/images/orchestra-top_bg.png'
import OQrcode from '@/components/o-qrcode'

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]}>
        <Image src={orchestraTopBg} class={styles.topImage} />
        <div class={[styles.shareContaienr, styles.orchestraContainer]}>
          <div class={styles.schoolName}>报名缴费</div>
          <div class={styles.shareType}>
            请截图下方二维码
            <span>登录支付宝扫码支付</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.shareContaienr, 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>
    )
  }
})