import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'
import { Tabs, Tab, showToast, Icon, Popup, Grid, GridItem, Image } 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 iconCallPhone from '@common/images/icon-call-phone.png'
import iconCallMessage from '@common/images/icon-call-message.png'
import { postMessage } from '@/helpers/native-message'
import request from '@/helpers/request'
import OEmpty from '@/components/o-empty'
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,
      showMessage: false,
      selectItem: {} 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',
        query: {
          page: 'type'
        }
      })
    }
    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>
                <span>主管领导</span>
                {state.info.emergencyContact}
              </p>
              <p>
                <span>管理老师</span>
                {state.info.educationalAdministrationUsername}
              </p>
              <p>
                <span>学年制</span>
                {schoolSystem[state.info.schoolSystem]}{' '}
              </p>
              <p>
                <span>邮箱账号</span>
                {state.info.email}
              </p>
              <p class={styles.flexP}>
                <span>学校地址</span> <p>{state.info.address}</p>
              </p>
            </div>
          </div>
          <div class={[styles.teacherList]}>
            <h2 class={styles.teacherTitle}>
              <div class={styles.dot}></div>
              <p>伴学老师</p>
            </h2>
            {state.list.length > 0 ? (
              <div>
                {state.list.map((item) => (
                  <TeacherItem
                    item={item}
                    onToMsg={(item: any) => {
                      state.selectItem = item
                      state.showMessage = true
                    }}
                  ></TeacherItem>
                ))}
              </div>
            ) : (
              <OEmpty tips="暂无伴学老师" />
            )}
          </div>
        </div>

        <Popup
          v-model:show={state.showMessage}
          position="bottom"
          style={{ background: 'transparent' }}
        >
          <div class={styles.codeContainer}>
            <div class={styles.codeBottom}>
              <Icon
                name="cross"
                size={22}
                class={styles.close}
                color="#666"
                onClick={() => (state.showMessage = false)}
              />

              <h3 class={styles.title}>
                <i></i>联系方式
              </h3>
              <Grid columnNum={2} border={false}>
                <GridItem
                  onClick={() => {
                    postMessage({
                      api: 'joinChatGroup',
                      content: {
                        type: 'single', // single 单人 multi 多人
                        id: state.selectItem.imUserId
                      }
                    })
                    state.showMessage = false
                  }}
                >
                  {{
                    icon: () => <Image class={styles.shareImg} src={iconCallMessage} />,
                    text: () => <div class={styles.shareText}>发送消息</div>
                  }}
                </GridItem>
                <GridItem
                  onClick={() => {
                    postMessage({
                      api: 'callPhone',
                      content: {
                        phone: state.selectItem.phone
                      }
                    })
                    state.showMessage = false
                  }}
                >
                  {{
                    icon: () => <Image class={styles.shareImg} src={iconCallPhone} />,
                    text: () => <div class={styles.shareText}>拨打电话</div>
                  }}
                </GridItem>
              </Grid>
            </div>
          </div>
        </Popup>
      </>
    )
  }
})