import { state } from '@/state'
import { dayjs, ElIcon, ElImage } from 'element-plus'
import { defineComponent } from 'vue'
import { createState } from '../createState'
import styles from './index.module.less'
import defaultIcon from '@common/images/icon_teacher.png'
import iconIn from '../../video-operation/images/icon_course_introduction.png'
import iconList from '../../video-operation/images/icon_course_list.png'
import videoStop from '../../video-operation/images/icon_video_stop.png'
import iconTimer from '@common/images/icon_timer2.png'
import request from '@/helpers/request'
import CoursePlanStep from '@/components/course-plan-step'

interface UserType {
  headUrl: string
  username: string
  startTime?: string
  id?: number
  buyNum?: number
  lessonPrice: number
  lessonNum?: number
  lessonDesc?: string
  lessonCoverUrl: string
  lessonName: string
}
export default defineComponent({
  name: 'course-preview',
  computed: {
    userInfo() {
      const startTime = createState.live.coursePlanList[0].startTime
      const endTime = createState.live.coursePlanList[0].endTime
      return {
        headUrl: state.user.data?.headUrl,
        username:
          state.user.data?.username || `游客${state.user.data?.userId || ''}`,
        startTime:
          `${dayjs(startTime).format('YYYY-MM-DD')} ${dayjs(startTime).format(
            'HH:mm'
          )}~${dayjs(endTime).format('HH:mm')}` || '',
        buyNum: 0,
        lessonPrice: createState.live.coursePrice,
        lessonNum: createState.live.courseNum,
        lessonDesc: createState.live.courseIntroduce,
        lessonCoverUrl:
          createState.live.backgroundPic ||
          createState.live.backgroundPicTemplate,
        lessonName: createState.live.name
      } as UserType
    },
    courseInfo() {
      let tempArr = [] as any
      const coursePlanList = createState.live.coursePlanList || []
      coursePlanList.forEach((item: any) => {
        tempArr.push({
          courseTime: `${dayjs(item.startTime).format('YYYY-MM-DD')} ${dayjs(
            item.startTime
          ).format('HH:mm')}~${dayjs(item.endTime).format('HH:mm')}`,
          coursePlan: item.plan
        })
      })
      return tempArr || []
    }
  },
  render() {
    return (
      <div class={[styles['course-preview'], 'pb-3']}>
        <div class={styles.userDetail}>
          <ElImage
            class={[styles.banner]}
            src={this.userInfo.lessonCoverUrl}
            fit="cover"
          />

          <div class="bg-white">
            <div class="p-[14px] text-lg text-[#1a1a1a] font-semibold leading-none">
              <div class="overflow-hidden whitespace-nowrap text-ellipsis">
                {this.userInfo.lessonName}
              </div>
              <span class="flex items-center text-[13px] pt-2">
                <ElIcon size={16} style={{ marginRight: '5px' }}>
                  <img src={iconTimer} />
                </ElIcon>
                开课时间：
                {this.userInfo.startTime}
              </span>
            </div>
            <div class={[styles.userInfo, 'mx-[14px] py-[14px]']}>
              <div class="flex">
                <ElImage
                  class={styles.avatar}
                  src={this.userInfo.headUrl || defaultIcon}
                  fit=""
                />
                <div class={styles.name}>
                  {this.userInfo.username || `游客${this.userInfo?.id || ''}`}

                  <div class={styles.buyNum}>
                    {this.userInfo.buyNum}人已购买
                  </div>
                </div>
              </div>
              <div class={styles.info}>
                ￥{this.userInfo.lessonPrice}/{this.userInfo.lessonNum}
                课时
              </div>
            </div>
          </div>
        </div>

        <div
          class={[
            styles['section-detail'],
            'mt-[10px] mx-[14px] rounded-lg bg-white'
          ]}
        >
          <div class="flex items-center py-3 px-[10px] text-[#333333] text-base">
            <ElIcon size={18} class="mr-2">
              <img src={iconIn} />
            </ElIcon>
            课程介绍
          </div>

          <div class="mx-[10px] pt-[10px] pb-4 text-sm text-[#7A7A7A] border-t border-t-[#EBEBEB]">
            {this.userInfo.lessonDesc}
          </div>
        </div>

        <div
          class={[
            styles['section-detail'],
            'mt-[10px] mx-[14px] rounded-lg bg-white'
          ]}
        >
          <div class="flex items-center py-3 px-[10px] text-[#333333] text-base">
            <ElIcon size={18} class="mr-2">
              <img src={iconList} />
            </ElIcon>
            课程安排
          </div>

          <div class="mx-[10px] pt-[10px] pb-4 text-sm text-[#7A7A7A] border-t border-t-[#EBEBEB] flex flex-col">
            <CoursePlanStep courseInfo={this.courseInfo} />
          </div>
        </div>
      </div>
    )
  }
})
