import ColHeader from '@/components/col-header'
import { useEventListener } from '@vant/use'
import { Button, Icon, Image, Sticky } from 'vant'
import { defineComponent, Transition } from 'vue'
import styles from './cert-info.module.less'
import { teacherState } from './teacherState'
/**
 * 动态引入文件
 * @param fileName 文件名
 * @param path 文件路径
 */
export const getAssetsHomeFile = (fileName: string) => {
  const path = `./images/${fileName}`
  const modules = import.meta.globEager('./images/*')
  return modules[path].default
}

export default defineComponent({
  name: 'cert-info',
  // data() {
  //   return {
  //     headStatus: false
  //   }
  // },
  methods: {
    onClick() {
      if (teacherState.authStatus) {
        return
      }
      teacherState.authStatus = true
    }
  },
  render() {
    return (
      <div class={styles['cert-info']}>
        <div class={styles.certWrapper}>
          <div class={styles.section}>
            <div class={styles.title}>
              <img src={getAssetsHomeFile('1.png')} />
              什么是酷乐秀音乐达人？
            </div>

            <p class={styles.content}>
              酷乐秀音乐人是酷乐秀优质的内容创作提供者，包含乐谱歌单达人，教学视频分享达人，演奏MLog达人，直播up达人
            </p>

            <div class={styles.operation}>
              <div class={styles.item}>
                <img src={getAssetsHomeFile('logo1.png')} />
                <p>乐谱歌单</p>
              </div>
              <div class={styles.item}>
                <img src={getAssetsHomeFile('logo2.png')} />
                <p>教学视频</p>
              </div>
              <div class={styles.item}>
                <img src={getAssetsHomeFile('logo3.png')} />
                <p>演奏MLog</p>
              </div>
              <div class={styles.item}>
                <img src={getAssetsHomeFile('logo4.png')} />
                <p>直播up达人</p>
              </div>
            </div>
          </div>

          <div class={styles.section}>
            <div class={styles.title}>
              <img src={getAssetsHomeFile('2.png')} />
              酷乐秀能为达人提供哪些服务？
            </div>

            <p class={styles.content}>
              酷乐秀提供现金激励，商业分成等福利政策，帮助达人内容变现，
              提供流量扶持等政策，帮助达人推广优质內容。
            </p>
          </div>

          <div class={styles.section}>
            <div class={styles.title}>
              <img src={getAssetsHomeFile('3.png')} />
              成为酷乐秀达人的意义是什么？
            </div>

            <p class={styles.content}>
              酷乐秀给所有热爱音乐热爱分享热爱转播技能的达人一个分享交流创作的平台，让音乐圈无圈，让爱好者无界。
            </p>
          </div>
        </div>

        <Sticky position="bottom" offsetBottom={0}>
          <div class={styles['btn-group']}>
            <div
              class={[
                styles.btn,
                teacherState.authStatus ? styles.disabled : null
              ]}
              onClick={this.onClick}
            ></div>
          </div>
        </Sticky>
      </div>
    )
  }
})
