import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'
import { Tabs, Tab, showToast, Icon } from 'vant'
import { defineComponent, reactive, ref, onMounted, onDeactivated } from 'vue'
import eidtIcon from './images/eidt-icon.png'
import styles from './index.module.less'
import schoolBg from './images/school-bg.png'
import logoIcon from './images/logo.png'
import { useRouter } from 'vue-router'
import { state as globalState } from '@/state'
import TeacherItem from './modals/teacher-item'
import { schoolSystem } from '@/constant/index'
import request from '@/helpers/request'

export default defineComponent({
  name: 'school-detail',
  setup() {
    const router = useRouter()
    const state = reactive({
      list: [],
      info: {} as any,
      heightV: 0 as number,
      scrollTop: 0 as number
    })
    const getSchoolDetail = async () => {
      const schoolId = (globalState.user.data.schoolInfos || [])
        .map((item) => {
          return item.id
        })
        .join(',')
      try {
        const { data } = await request.get(`/api-school/school/detail/${schoolId}`, {})
        state.info = data
      } catch (e: any) {
        showToast(e.message)
      }
    }
    const gotoEidt = () => {
      // /school-eidt
      router.push({ path: '/school-eidt' })
    }
    const getTeacherList = async () => {
      // const schoolId = (globalState.user.data.schoolInfos || [])
      //   .map((item) => {
      //     return item.id
      //   })
      //   .join(',')
      try {
        const { data } = await request.post(`/api-school/teacher/page`, {
          data: {
            page: 1,
            rows: 9999,
            delFlag: false
          }
        })
        state.list = data.rows
      } catch (e: any) {
        showToast(e.message)
      }
    }
    onMounted(() => {
      window.addEventListener('scroll', handleScroll)
      getSchoolDetail()
      getTeacherList()
    })
    onDeactivated(() => {
      window.removeEventListener('scroll', handleScroll)
    })
    const getHeight = (dataHeight: number) => {
      state.heightV = dataHeight
    }
    const handleScroll = () => {
      const scrollTop =
        window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
      state.scrollTop = scrollTop
    }
    return () => (
      <>
        <div class={styles.schoolWrap}>
          <OSticky onGetHeight={getHeight}>
            <OHeader
              border={false}
              background={state.heightV > state.scrollTop ? 'transparent' : '#fff'}
            >
              {{
                right: () => (
                  <Icon style={{ fontSize: '24px' }} name={eidtIcon} onClick={gotoEidt}></Icon>
                )
              }}
            </OHeader>
          </OSticky>
          {/* <img src={schoolBg} class={styles.schoolBg} alt="" /> */}
          <div class={styles.absWrap}>
            <div class={styles.schoolMainTitle}>
              <div class={styles.schoolMainLeft}>
                <img src={state.info.logo ? state.info.logo : logoIcon} alt="" />
              </div>
              <div class={styles.schoolMainRight}>
                <p class={styles.schoolMainTitle}>{state.info.name}</p>
                <p class={styles.schoolMainSub}>
                  {state.info.provinceName}
                  {state.info.cityName}
                </p>
              </div>
            </div>
            <div class={styles.detailInfo}>
              <p>地址：{state.info.address}</p>
              <p>学年制：{schoolSystem[state.info.schoolSystem]} </p>
              <p>邮箱：{state.info.email}</p>
              <p>管理老师：{state.info.educationalAdministrationUsername}</p>
              <p>负责人：{state.info.emergencyContact}</p>
            </div>
          </div>
          <div class={styles.teacherList}>
            <h2 class={styles.teacherTitle}>
              <div class={styles.dot}></div>
              <p>伴学指导</p>
            </h2>
            <div>
              {state.list.map((item) => (
                <TeacherItem item={item}></TeacherItem>
              ))}
            </div>
          </div>
        </div>
      </>
    )
  }
})
