import ColResult from '@/components/col-result'
import { Cell, CellGroup, List, Image, Icon } from 'vant'
import { defineComponent } from 'vue'
import styles from './live.module.less'
import iconLive from '../images/icon-live.png'
// import icon3 from '../images/icon3.png'
// import iconTimer from '@common/images/icon_timer2.png'
import iconTeacher from '@common/images/icon_teacher.png'
// import iconSuccess from '@common/images/icon_success.png'
import request from '@/helpers/request'
import dayjs from 'dayjs'
import { state } from '@/state'
import Tips from './tips'
import { moneyFormat } from '@/helpers/utils'

export default defineComponent({
  name: 'live',
  data() {
    const query = this.$route.query
    return {
      list: [],
      dataShow: true, // 判断是否有数据
      loading: false,
      finished: false,
      params: {
        teacherId: query.teacherId,
        groupStatus: 'APPLY',
        page: 1,
        rows: 20
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    formatTime(time: string) {
      const timeStr = dayjs(time || new Date())
      // const weekStr = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
      // console.log(timeStr.day())

      return timeStr.format('YYYY-MM-DD HH:mm')
    },
    async getList() {
      try {
        const params: any = {
          ...this.params
        }
        if (state.version) {
          params.version = state.version || '' // 处理ios审核版本
          params.platform = 'ios-student'
        }
        const res = await request.post(
          '/api-student/courseGroup/queryPageCourseGroup',
          {
            data: {
              ...params
            }
          }
        )
        this.loading = false
        const result = res.data || {}
        // 处理重复请求数据
        if (this.list.length > 0 && result.pageNo === 1) {
          return
        }
        this.list = this.list.concat(result.rows || [])
        this.finished = result.pageNo >= result.totalPage
        this.params.page = result.pageNo + 1
        this.dataShow = this.list.length > 0
      } catch {
        this.dataShow = false
        this.finished = true
      }
    },
    onDetail(item: any) {
      this.$router.push({
        path: '/liveDetail',
        query: {
          groupId: item.courseGroupId
        }
      })
    }
  },
  render() {
    return (
      <>
        <Tips
          type="LIVE"
          class={styles.tips}
          title="什么是直播课？"
          content="直播课是现代教育领域中一种广受欢迎的课程形式，它集实时互动、多媒体展示和高度便利性于一体，为学习者带来了独特且丰富的学习体验。特别是在管乐直播课中，教师可以通过播放经典音乐作品，加深学生对音乐之美的感知与理解。对于那些需要具体操作演示的教学内容，直播课能够提供清晰直观的视角，让教师的每一个动作细节都展现在学生面前，确保学习效果。直播课程的内容围绕特定主题精心设计，旨在满足不同学习者的需求，促进知识与技能的有效传递。"
        />
        {this.dataShow ? (
          <List
            class={styles.liveList}
            v-model:loading={this.loading}
            immediateCheck={false}
            finished={this.finished}
            finishedText=" "
          >
            {this.list.map((item: any) => (
              <CellGroup
                class={styles.liveGroup}
                border={false}
                onClick={() => this.onDetail(item)}
              >
                <div class={styles.liveTop}>
                  <img src={iconLive} class={styles.iconLive} />
                  <span>开课时间： {this.formatTime(item.courseStartTime)} </span>
                </div>
                <div class={styles.liveCenter}>
                  <Image
                    class={styles.liCover}
                    src={item.backgroundPic}
                    fit="cover"
                  />
                  <span class={styles.subjectName}>{item?.subjectName}</span>
                </div>

                <div class={styles.liContent}>
                  <div class={[styles.liTitle, 'van-ellipsis']}>
                    {item.courseGroupName}
                  </div>
                  <div class={styles.users}>
                    {/* <div class={styles.user}>
                      <img src={item.avatar || iconTeacher} />
                      <span>{item.teacherName || `游客${item.teacherId || ''}`}</span>
                    </div> */}
                    <div class={styles.lean}>
                      <span class={styles.num}>
                        {item.studentCount}人学习
                      </span>
                    </div>
                    <div class={styles.price}>
                      {item.coursePrice > 0 && (
                        <>
                          <span class={styles.priceNum}>
                            <i>¥</i>
                            {moneyFormat(
                              item.coursePrice, '0.00'
                            )}
                          </span>
                        </>
                      )}
                      <span class={styles.label}>
                        {item.coursePrice > 0 && '/'}
                        {item.courseNum}课时
                      </span>
                    </div>
                  </div>
                </div>
              </CellGroup>
            ))}
          </List>
        ) : (
          <ColResult btnStatus={false} classImgSize="SMALL" tips="暂无直播课" />
        )}
      </>
    )
  }
})
