import { Button, Dialog } from 'vant'
import { defineComponent, ref, Ref } from 'vue'
import iconDemand from './icons/demand.svg'
import styles from './index.module.less'
import classNames from 'classnames'
import detailState from '/src/pages/detail/state'
import qs from 'query-string'
import { permissionPopup } from './permission'
import * as RuntimeUtils from '/src/pages/detail/runtime'
import { postMessage } from '/src/helpers/native-message'
import { useClientType, useOriginSearch, useUpdateMember } from '../../uses'
export const confirmShow: Ref<boolean> = ref(false)

export default defineComponent({
  name: 'ColexiuDemand',
  setup() {
    const search = useOriginSearch()
    const client = useClientType()
    const buy = async () => {
      delete search.Authorization
      postMessage({
        api: 'openWebView',
        content: {
          url: location.origin + '/' + client + '/#/orderDetail?' + qs.stringify({ orderType: 'MUSIC', ...search }),
          orientation: 1,
        },
      })
    }

    const close = () => {
      permissionPopup.show = false
      RuntimeUtils.setCurrentTime(0)
      RuntimeUtils.refreshIndex(0)
    }

    return () => (
      <div style={{ position: 'relative' }}>
        <img class={styles.image} src={iconDemand} />
        <div class={styles.wrap}>
          <div class={styles.des}>
            <div class={styles.title}>该曲目为点播曲目</div>
            <div class={styles.sub}>
              点播价格 <span style={{ color: '#FF4E19' }}>¥{detailState.activeDetail?.musicPrice}</span>
              ，点播后可永久使用
            </div>
          </div>
          <div class={styles.btnWrap}>
            <Button class={classNames(styles.btn, styles.tryoutBtn)} onClick={close}></Button>
            <Button class={classNames(styles.btn, styles.demandBtn)} onClick={buy}></Button>
          </div>
        </div>
      </div>
    )
  },
})
