import ColHeader from '@/components/col-header'
import { defineComponent } from 'vue'
import styles from './teacher-home.module.less'
import Single from './components/single'
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 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'
      }
    })
  },
  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
              })
            }}
          />
        </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>
        <Single userInfo={this.userInfo} />
      </div>
    )
  }
})
