import ColHeader from '@/components/col-header'
import { defineComponent } from 'vue'
import styles from './teacher-home.module.less'
import { Tab, Tabs } from 'vant'
import Single from './components/single'
import Practice from './components/practice'
import Live from './components/live'
import VideoList from './components/video'
import Music from './components/music'
import request from '@/helpers/request'
import { listenerMessage } from '@/helpers/native-message'
import { useEventListener, useWindowScroll } from '@vueuse/core'
import TeacherHeader from './model/teacher-header'
import { useRect } from '@vant/use'

export const getAssetsHomeFile = (fileName: string) => {
  const path = `./images/${fileName}`
  const modules = import.meta.globEager('./images/*')
  return modules[path].default
}

export default defineComponent({
  name: 'teacherHome',
  data() {
    // 先取session中的数据，没有再取参数，默认为老师风采
    const tabs = sessionStorage.getItem('teacherHomeTabs') || ''
    const query = this.$route.query
    return {
      teacherId: query.teacherId as string,
      tabs: tabs || query.tabs || 'single',
      userInfo: {} as any,
      background: 'transparent',
      height: 'auto' as any
    }
  },
  async created() {},
  async mounted() {
    this.getTeacherDetail()
    // 监听页面返回
    listenerMessage('webViewOnResume', () => {
      this.getTeacherDetail()
    })
    useEventListener(document, 'scroll', evt => {
      const { y } = useWindowScroll()
      if (y.value > 45) {
        this.background = '#37cdb1'
      } else {
        this.background = 'transparent'
      }
    })
  },
  methods: {
    async getTeacherDetail() {
      try {
        const res = await request.get('/api-student/teacher/queryTeacherHome', {
          params: {
            userId: this.teacherId
          }
        })
        this.userInfo = res.data
      } catch {}
    }
  },
  render() {
    return (
      <div class={styles['teacher-record']}>
        <div class={styles.teacherHeader}>
          <div ref="headers">
            <ColHeader
              background={this.background}
              border={false}
              color="#fff"
              backIconColor="white"
              onHeaderBack={() => {
                this.$nextTick(() => {
                  const { height } = useRect((this as any).$refs.headers)
                  this.height = height
                })
              }}
            />
          </div>
          <TeacherHeader userInfo={this.userInfo} teacherId={this.teacherId} />
        </div>
        <Tabs
          color="var(--van-primary)"
          background="#f8f9fc"
          shrink
          lineWidth={20}
          sticky
          offsetTop={this.height}
          v-model:active={this.tabs}
          onChange={() => {
            sessionStorage.setItem('teacherHomeTabs', this.tabs as string)
          }}
        >
          <Tab title="个人风采" name="single">
            {this.tabs === 'single' && <Single userInfo={this.userInfo} />}
          </Tab>
          <Tab title="陪练课" name="practice">
            {this.tabs === 'practice' && <Practice userInfo={this.userInfo} />}
          </Tab>
          <Tab title="直播课" name="live">
            {this.tabs === 'live' && <Live />}
          </Tab>
          <Tab title="视频课" name="video">
            {this.tabs === 'video' && <VideoList />}
          </Tab>
          <Tab title="乐谱" name="music">
            {this.tabs === 'music' && <Music />}
          </Tab>
        </Tabs>

        {/* <div class={styles.container}>
          {this.tabs === 'single' && <Single userInfo={this.userInfo} />}
          {this.tabs === 'practice' && <Practice userInfo={this.userInfo} />}
          {this.tabs === 'live' && <Live />}
          {this.tabs === 'video' && <VideoList />}
          {this.tabs === 'music' && <Music />}
        </div> */}
      </div>
    )
  }
})
