import { Cell, Grid, GridItem, Image } from 'vant'
import { defineComponent, toRefs } 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 { openDefaultWebView, state } from '../../../state'

export default defineComponent({
  name: 'my-orchestra',
  props: {
    orchestraName: {
      type: String,
      default: ''
    },
    list: {
      type: Object,
      default: () => []
    }
  },
  setup(props) {
    const { orchestraName } = toRefs(props)
    console.log('🚀 ~ orchestraName', orchestraName.value)
    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 { list } = toRefs(props)
    return () => (
      <div class={styles.myClass}>
        {Array.isArray(list.value) &&
          list.value.map((item: any) => (
            <div class={styles.itemDiv} onClick={() => openClassDetail(item)}>
              <Cell center>
                {{
                  icon: () => (
                    <Image
                      src={item.teacherAvatar || iconTeacher}
                      class={styles.iconImg}
                      fit="cover"
                    />
                  ),
                  title: () => (
                    <>
                      {state.platformType == 'TEACHER' ? (
                        <>
                          <div class={styles.content}>
                            <div class={['van-ellipsis', styles.teacherName]}>
                              {item.classGroupName}
                            </div>
                          </div>
                          <div class="van-ellipsis van-cell__label">{orchestraName.value}</div>
                        </>
                      ) : (
                        <>
                          <div class={styles.content}>
                            <div class={['van-ellipsis', styles.teacherName]}>
                              {item.teacherName}
                            </div>
                          </div>
                          <div class="van-cell__label">
                            <span class={styles.tag}>{item.classGroupName}</span>
                          </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.studentNum || 0}</p>
                  <p class={styles.name}>学生人数</p>
                </GridItem>
                <GridItem>
                  <p class={[styles.title]}>{item.totalCourseNum - item.completeCourseNum || 0}</p>
                  <p class={styles.name}>剩余课时</p>
                </GridItem>
                <GridItem>
                  <p class={styles.title}>{item.totalCourseNum || 0}</p>
                  <p class={styles.name}>总课时</p>
                </GridItem>
              </Grid>
            </div>
          ))}
      </div>
    )
  }
})