import { Button, 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'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'my-orchestra',
  props: {
    orchestraData: {
      type: Object,
      default: () => ({})
    },
    orchestraName: {
      type: String,
      default: ''
    },
    list: {
      type: Object,
      default: () => []
    }
  },
  setup(props) {
    const router = useRouter()
    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) => {
      console.log('🚀 ~ item', item)
      if (state.platformType == 'STUDENT') return
      postMessage({
        api: 'open_app_page',
        content: {
          action: 'app',
          pageTag: 'classDetail',
          url: '',
          params: JSON.stringify({ classId: item.classGroupId })
        }
      })
    }
    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 class={styles.userContainer}>
                {{
                  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}>
                            {item.teacherName ? (
                              <div class={['van-ellipsis', styles.teacherName]}>
                                {item.teacherName}
                              </div>
                            ) : (
                              <div style={{ color: 'rgba(178,178,178,1)' }}>暂无伴学老师</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 class={'gridBorderRight'}>
                  <p class={styles.title}>{item.studentNum || 0}</p>
                  <p class={styles.name}>学员人数</p>
                </GridItem>
                <GridItem class={'gridBorderRight'}>
                  <p class={[styles.title]}>{item.notStartCourseNum || 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>
          ))}

        {state.platformType == 'STUDENT' && (
          <div class="btnGroup" style="padding-top: 12px; text-align: center;">
            {(props.orchestraData?.status === 'REGISTER' ||
              props.orchestraData?.status === 'LEARNING') && (
              <span
                class={styles.returnOrchestra}
                onClick={() => {
                  router.push({
                    path: '/apply-withdrawal',
                    query: {
                      id: props.orchestraData?.orchestraId
                    }
                  })
                }}
              >
                申请退团
              </span>
            )}
            {props.orchestraData?.status === 'AUTH' && (
              <span class={styles.returnOrchestra}>申请退团中</span>
            )}
          </div>
        )}
      </div>
    )
  }
})
