import { defineComponent, ref, reactive, onMounted } from 'vue';
import styles from './index.module.less';
import popBox from './select_courseware_box.png';
import popClose from './selce_courseware_close.png';
import icon_btn from './select_btn.png';
import { postMessage } from '@/helpers/native-message';

export default defineComponent({
  name: 'SelectCoursewarePop',
  emits: ['close', 'select'],
  setup(props, { emit }) {
    const close = () => {
      // postMessage({
      //   api: 'goBack'
      // });
      emit('close');
    };

    onMounted(() => {
      // vipMember
    });
    return () => (
      <div
        class={styles.popBox}
        onClick={(e: Event) => e.stopPropagation()}
        onTouchmove={(e: TouchEvent) => e.stopPropagation()}>
        <div class={styles.popBody}>
          <img class={styles.popBg} src={popBox} />
          <img
            class={styles.popClose}
            src={popClose}
            onClick={(e: Event) => {
              close();
            }}
          />
          <div class={styles.list} id="list">
            {/* 该功能为乐器AI专属权益，领取即可<span>查看所有课件</span>
            ，是否立即领取 */}
            立即开通<span style={{ color: '#FF5A56' }}>"乐器AI学练工具"</span>
          </div>
          <div class={styles.btnGroup}>
            <img
              class={styles.btn}
              src={icon_btn}
              onClick={() => {
                postMessage({
                  api: 'openWebView',
                  content: {
                    url: `${
                      location.origin.includes('localhost')
                        ? 'https://test.lexiaoya.cn'
                        : location.origin
                    }/classroom-app/#/member-center`,
                    orientation: 1
                  }
                });
                close();
              }}
            />
          </div>
        </div>
      </div>
    );
  }
});