import { state } from '@/state'
import { 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 '../images/icon_course_introduction.png'
import iconList from '../images/icon_course_list.png'
import videoStop from '../images/icon_video_stop.png'
import iconAlbum from '@common/images/icon_album_active.png'
import iconMusic from '@common/images/icon_music_active.png'
import { ArrowRight } from '@element-plus/icons-vue'

export default defineComponent({
  name: 'course-preview',
  computed: {
    userInfo() {
      const videoDetail = createState.lessonGroup
      const users = state.user.data || {}
      console.log(users)
      return {
        id: users.userId,
        username: users.username || `游客${users.userId || ''}`,
        headUrl: users.heardUrl,
        lessonName: videoDetail.lessonName,
        buyNum: 0,
        payType: videoDetail.payType,
        lessonDesc: videoDetail.lessonDesc,
        lessonPrice: videoDetail.lessonPrice,
        lessonCoverUrl:
          videoDetail.lessonCoverTemplateUrl || videoDetail.lessonCoverUrl,
        lessonNum: createState.lessonList.length
      }
    },
    lessonList() {
      return createState.lessonList || []
    }
  },
  render() {
    console.log(this.userInfo)
    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">
              {this.userInfo.lessonName}
            </div>
            <div class={[styles.userInfo, 'mx-[14px] py-[14px]']}>
              <div class="flex" style={{ alignItems: 'center' }}>
                <ElImage
                  class={styles.avatar}
                  src={this.userInfo.headUrl || defaultIcon}
                  fit=""
                />
                <div class={styles.name}>
                  <div class={styles.userName}>
                    {this.userInfo.username || `游客${this.userInfo.id || ''}`}
                  </div>
                </div>
              </div>
              {this.userInfo.payType === 'VIP' ? (
                <div class={[styles.info]}>
                  <div>
                    <span class={styles.memberIcon}>会员</span>/
                    {this.userInfo.lessonNum}
                    课时
                  </div>
                  <div class={styles.buyNum}>
                    {this.userInfo.buyNum}人已学习
                  </div>
                </div>
              ) : (
                <div class={styles.info}>
                  <div>
                    ￥{this.userInfo.lessonPrice}/{this.userInfo.lessonNum}
                    课时
                  </div>
                  <div class={styles.buyNum}>
                    {this.userInfo.buyNum}人已学习
                  </div>
                </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">
            {createState.lessonList.map((item: any) => (
              <>
                <div class="flex">
                  <div class={styles.videoImg}>
                    <ElImage
                      class="align-middle h-[70px] w-[100px] rounded overflow-hidden"
                      src={item.coverUrl}
                      fit="cover"
                    />
                    <ElIcon class={styles.videoStop} size={26}>
                      <img src={videoStop} />
                    </ElIcon>
                  </div>

                  <div class={[styles.videoTitle, '!h-[70px]']}>
                    <p
                      class={[
                        styles.videoTitleText,
                        'whitespace-nowrap overflow-hidden text-ellipsis'
                      ]}
                    >
                      {item.videoTitle}
                    </p>
                    <p class={[styles.videoTitleContent]}>
                      {item.videoContent}
                    </p>
                  </div>
                </div>

                {item.relationList &&
                  item.relationList.map((info: any) => (
                    <div
                      class={[
                        styles.infoVideo,
                        info.relationMusicAlbum === 'ALBUM'
                          ? styles.albumInfo
                          : styles.musicInfo
                      ]}
                    >
                      <div>
                        <img
                          src={
                            info.relationMusicAlbum === 'ALBUM'
                              ? iconAlbum
                              : iconMusic
                          }
                        />
                        {info.relationMusicAlbum === 'ALBUM' ? (
                          <span>专辑：{info.musicAlbumName}</span>
                        ) : (
                          <span>曲目：{info.musicAlbumName}</span>
                        )}
                      </div>
                      <ElIcon>
                        <ArrowRight />
                      </ElIcon>
                    </div>
                  ))}
              </>
            ))}
          </div>
        </div>
      </div>
    )
  }
})