import { Button } from 'vant'
import { defineComponent, ref, Ref } from 'vue'
import iconDemand from './imgs/demand.svg'
import iconColse from './imgs/close.svg'
import styles from './index.module.less'
import qs from 'query-string'
import { permissionPopup } from './permission'
import { postMessage } from "/src/utils/native-message"
import { getQuery } from "/src/utils/queryString";
import state from "/src/state";

export const confirmShow: Ref<boolean> = ref(false)

export default defineComponent({
  name: 'memberAndDemand',
  setup() {
    const query: any = getQuery();
    const buy = async () => {
      delete query.Authorization
      let params: any = { orderType: 'MUSIC', ...query }
      if (permissionPopup.musicId) {
        params.id = permissionPopup.musicId
      }
      postMessage({
        api: 'openWebView',
        content: {
          url: location.origin + '/' + state.systemType + '/#/orderDetail?' + qs.stringify(params),
          orientation: 1,
        },
      })
    }

    // 去购买会员
    const buyMenber = () => {
      delete query.Authorization
      postMessage({
        api: 'openWebView',
        content: {
          url: location.origin + '/' + state.systemType + '/#/memberCenter',
          orientation: 1,
        },
      })
    }

    const close = () => {
      permissionPopup.show = false
    }

    return () => (
      <div style={{ position: 'relative' }}>
        <img class={styles.closeBtn} src={iconColse} onClick={close} />
        <img class={styles.image} src={iconDemand} />
        <div class={styles.wrap}>
          <div class={styles.des}>
            <div class={[styles.title, styles.andTitle]}>该曲目为会员曲目，可以单曲购买哦</div>
            <div class={[styles.sub, styles.andSub]}>
              开通酷乐秀会员海量曲目尽情练习
              <br />
              单曲点播仅需{' '}
              <span style={{ color: '#FF4E19' }}>
                ¥{permissionPopup.musicPrice || state.musicPrice}
              </span>
              ，点播后可永久使用
            </div>
          </div>
          <div class={styles.btnWrap}>
            <Button class={[styles.btn, styles.membershipBtn]} onClick={buyMenber}></Button>
            <Button class={[styles.btn, styles.demandBtn]} onClick={buy}></Button>
          </div>
        </div>
      </div>
    )
  },
})
