import { defineComponent } from 'vue'
import { Popup, Button, Swipe, SwipeItem } from 'vant'
import state from '/src/pages/detail/state'
import appstate from '/src/state'
import { postMessage } from '/src/helpers/native-message'
import styles from './index.module.less'
import { setTongjiTag } from '/src/helpers/utils'

const modules = (import.meta as any).globEager('./static/*/*.jpg')

export default defineComponent({
  name: 'DetailFee',
  data() {
    return {
      content: '您尚未开通云练习服务，请联系乐团老师开通',
    }
  },
  methods: {
    getContent() {
      // 是否有待未激活会员
      const isExistPendingMember = appstate.user?.isExistPendingMember
      if (isExistPendingMember) {
        this.content = '您购买的云练习尚未激活，请联系乐团老师进行激活'
      }
      return this.content
    },
    open() {
      if (appstate.openKey) {
        const detail: any = appstate.openKey ? appstate.modularDetail[appstate.openKey] : null
        if (detail) {
          setTongjiTag(['_trackEvent', '云练习', '操作', detail.name + '｜前往购买页面'])
        }
      } else {
        setTongjiTag(['_trackEvent', '云练习', '操作', '前往购买页面'])
      }
      // postMessage({
      //   api: 'openWebView',
      //   content: {
      //     url: location.origin + '/#/member',
      //     orientation: 1,
      //   }
      // })
    },
  },
  render() {
    const detail: any = appstate.openKey ? appstate.modularDetail[appstate.openKey] : null
    return (
      <div class={styles.fee}>
        <Popup
          show={state.feeShow}
          get-container="body"
          closeable
          onClickCloseIcon={() => (state.feeShow = false)}
          class={styles.fractionContainer}
        >
          <div class={styles.fraction}>
            <div class={styles.title}>{detail?.name}</div>
            <div class={styles.content}>
              <div class={styles.detail}></div>
              {detail?.images.length ? (
                <Swipe class={styles.swipe} autoplay={2000} show-indicators={false}>
                  {detail?.images.map((img: string) => (
                    <SwipeItem>
                      <img src={modules[img].default} />
                    </SwipeItem>
                  ))}
                </Swipe>
              ) : null}
              <div class={styles.tipMember}>{this.getContent()}</div>
              <div class={styles.tips}>{detail?.desc}</div>
              {/* <div class={styles.ctrls}>
              <Button color="#01c1b5" round onClick={this.open}>
              确定
              </Button>
            </div> */}
            </div>
          </div>
        </Popup>
      </div>
    )
  },
})
