import { Button } from 'vant'
import { defineComponent } from 'vue'
import iconMembership from './imgs/membership.png'
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 default defineComponent({
  name: 'ColexiuMember',
  setup() {
    const query: any = getQuery();
    const buy = () => {
      delete query.Authorization
      postMessage({
        api: 'openWebView',
        content: {
          url: location.origin + '/' + state.systemType + '/#/memberCenter?' + qs.stringify({ ...query }),
          orientation: 1,
        },
      })
    }

    const close = () => {
      permissionPopup.show = false
    }
    return () => (
      <div>
        <img class={styles.image} src={iconMembership} />
        <div class={styles.wrap}>
          <div class={styles.des}>
            <div class={styles.title}>请开通会员</div>
            <div class={styles.sub}>开通会员后可完整使用该曲目</div>
          </div>
          <div class={styles.btnWrap}>
            <Button class={[styles.btn, styles.tryoutBtn]} onClick={close}></Button>
            <Button
              class={[
                styles.btn,
                styles.membershipBtn,
                { [styles.discounts]: (query.discounts as unknown) == 1 },
              ]}
              onClick={buy}
            ></Button>
          </div>
        </div>
      </div>
    )
  },
})
