import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'
import { Tabs, Tab, showToast, Icon } from 'vant'
import { defineComponent, reactive, ref, onMounted } from 'vue'
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
    })
    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
          }
        })
        state.list = data.rows
      } catch (e: any) {
        showToast(e.message)
      }
    }
    onMounted(() => {
      getSchoolDetail()
      getTeacherList()
    })
    return () => (
      <>
        <div class={styles.schoolWrap}>
          <img src={schoolBg} class={styles.schoolBg} alt="" />
          <OHeader border={false} background={'transparent'}></OHeader>
          <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 onClick={gotoEidt}>
                地址：{state.info.address} <Icon class={styles.eidtIcon} name="edit"></Icon>
              </p>
              <p>学年制：{schoolSystem[state.info.schoolSystem]} </p>
              <p>邮箱：{state.info.email}</p>
              <p>管理老师：{state.info.educationalAdministrationUsername}</p>
              <p>负责人：{state.info.emergencyContactPosition}</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>
      </>
    )
  }
})