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'
import { useEventTracking } from '@/helpers/hooks'

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: 'rgba(55, 205, 177, 0)',
      headColor: '#fff',
      height: 'auto' as any,
      backIconColor: 'white',
      homeContaiterHeight: ''
    }
  },
  async created() {},
  async mounted() {
    this.getTeacherDetail()
    // 监听页面返回
    listenerMessage('webViewOnResume', () => {
      this.getTeacherDetail()
    })
    useEventListener(document, 'scroll', evt => {
      const { y } = useWindowScroll()
      // this.background = `rgba(255, 255, 255, ${y.value / 100})`
      // console.log(y.value) 142
      if (y.value > 52) {
        this.headColor = '#000'
        this.background = '#fff'
        this.backIconColor = 'black'
      } else {
        this.background = 'transparent'
        this.headColor = '#fff'
        this.backIconColor = 'white'
      }
    })
    useEventTracking('达人风采')
  },
  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 ref="headers">
          <ColHeader
            background={this.background}
            border={false}
            color={this.headColor}
            backIconColor={this.backIconColor as any}
            onHeaderBack={() => {
              this.$nextTick(() => {
                const { height } = useRect((this as any).$refs.headers)
                this.height = height
                // this.homeContaiterHeight = `calc(100vh - var(--van-tabs-line-height) - ${height}px - 15px)`
              })
            }}
          />
        </div>
        <img class={styles.bgImg} src={this.userInfo.heardUrl} />
        <div class={styles.bg}></div>
        <div class={styles.teacherHeader}>
          <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">
            <div style={{ minHeight: this.homeContaiterHeight }}>
              {this.tabs === 'single' && <Single userInfo={this.userInfo} />}
            </div>
          </Tab>
          <Tab title="陪练课" name="practice">
            <div style={{ minHeight: this.homeContaiterHeight }}>
              {this.tabs === 'practice' && (
                <Practice userInfo={this.userInfo} />
              )}
            </div>
          </Tab>
          <Tab title="直播课" name="live">
            <div style={{ minHeight: this.homeContaiterHeight }}>
              {this.tabs === 'live' && <Live />}
            </div>
          </Tab>
          <Tab title="视频课" name="video">
            <div style={{ minHeight: this.homeContaiterHeight }}>
              {this.tabs === 'video' && <VideoList />}
            </div>
          </Tab>
          <Tab title="乐谱" name="music">
            <div style={{ minHeight: this.homeContaiterHeight }}>
              {this.tabs === 'music' && <Music />}
            </div>
          </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>
    )
  }
})
