import { Cell, CellGroup, Grid, GridItem, Image, List, Tag } from 'vant'
import { defineComponent, onMounted, reactive } from 'vue'
import styles from './index.module.less'
import iconTeacher from '@common/images/icon_teacher.png'
import iconMessage from '@common/images/icon-muit-message.png'
import { postMessage } from '@/helpers/native-message'
import request from '@/helpers/request'
import { state } from '@/state'
import { openDefaultWebView } from '../../../state'

export default defineComponent({
  name: 'my-orchestra',
  props: {
    orchestraId: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    console.log('🚀 ~ props', props)
    const onMessage = async (item: any) => {
      console.log(item)
      postMessage({
        api: 'joinChatGroup',
        content: {
          type: 'multi', // single 单人 multi 多人
          id: item.imGroupId
        }
      })
    }
    const openClassDetail = (item: any) => {
      openDefaultWebView(`/classDetail?classId=${item.id}`)
    }
    const data = reactive({
      pages: {
        page: 1,
        rows: 20
      },
      classList: [] as any[],
      loading: false,
      finished: false
    })
    const modelData = reactive({
      orchestra: {} as any,
      orchestraStatus: false
    })
    const getClassList = async () => {
      data.loading = true
      try {
        const res: any = await request.post(`${state.platformApi}/classGroup/page`, {
          data: {
            ...data.pages,
            orchestraId: props.orchestraId
          }
        })
        console.log(data)
        data.pages.page += 1
        if (Array.isArray(res?.data?.rows)) {
          const list = res.data.rows.map((n: any) => {
            return {
              ...n,
              courseNum: Number(n.courseScheduleNum) - Number(n.completeCourseScheduleNum)
            }
          })
          data.classList = ([] as any[]).concat(data.classList, list)
          data.finished = res.data.rows.length == 0 ? true : false
        }
      } catch {}
      data.loading = false
    }
    onMounted(() => {
      getClassList()
    })
    return () => (
      <div class={styles.myClass}>
        <List
          v-model:loading={data.loading}
          finishedText="没有更多数据"
          finished={data.finished}
          onLoad={getClassList}
          immediateCheck={false}
        >
          {Array.isArray(data.classList) &&
            data.classList.map((item: any) => (
              <div class={styles.itemDiv} onClick={() => openClassDetail(item)}>
                <Cell center label={item.orchestraName}>
                  {{
                    icon: () => (
                      <Image
                        src={item.teacherAvatar || iconTeacher}
                        class={styles.iconImg}
                        fit="cover"
                      />
                    ),
                    title: () => (
                      <div class={styles.content}>
                        <div class={['van-ellipsis', styles.teacherName]}>{item.teacherName}</div>
                        <div class={styles.tag}>
                          {item.name}
                        </div>
                      </div>
                    ),
                    value: () => (
                      <Image
                        class={styles.messageImg}
                        src={iconMessage}
                        onClick={(e: Event) => {
                          e.stopPropagation()
                          onMessage(item)
                        }}
                      />
                    )
                  }}
                </Cell>
                <Grid border={false} columnNum={3} class={styles.grid}>
                  <GridItem>
                    <p class={styles.title}>{item.preStudentNum || 0}</p>
                    <p class={styles.name}>学生人数</p>
                  </GridItem>
                  <GridItem>
                    <p class={[styles.title]}>{item.courseNum || 0}</p>
                    <p class={styles.name}>剩余课时</p>
                  </GridItem>
                  <GridItem>
                    <p class={styles.title}>{item.courseScheduleNum || 0}</p>
                    <p class={styles.name}>总课时</p>
                  </GridItem>
                </Grid>
              </div>
            ))}
        </List>
      </div>
    )
  }
})