import { Cell, CellGroup, Image } from 'vant'
import { defineComponent } from 'vue'
import styles from './index.module.less'
import { orderStatus } from '../orderStatus'

import iconTeacher from '@common/images/icon_teacher.png'
import request from '@/helpers/request'
import { moneyFormat } from '@/helpers/utils'

export default defineComponent({
  name: 'OrderVideo',
  props: {
    item: {
      type: Object,
      default: {}
    }
  },
  computed: {
    album() {
      const courseInfo = this.item.courseInfo || []
      const albumList = [] as any
      courseInfo.map((course: any) => {
        course.musicAlbumInfos &&
          course.musicAlbumInfos.map((info: any) => {
            if (info.relationType === 'ALBUM') {
              const index = albumList.findIndex(
                (album: any) => album.musicAlbumId === info.musicAlbumId
              )
              index === -1 && albumList.push(info)
            }
          })
      })

      return this.item.relationType === 'GIFT' ? [...albumList] : []
    },
    music() {
      const courseInfo = this.item.courseInfo || []
      const albumList = [] as any
      courseInfo.map((course: any) => {
        course.musicAlbumInfos &&
          course.musicAlbumInfos.map((info: any) => {
            if (info.relationType === 'MUSIC') {
              const index = albumList.findIndex(
                (album: any) => album.musicAlbumId === info.musicAlbumId
              )
              index === -1 && albumList.push(info)
            }
          })
      })
      return this.item.relationType === 'GIFT' ? [...albumList] : []
    }
  },
  render() {
    const item = this.item
    console.log(item)
    return (
      <div class={styles.videoOrder}>
        <CellGroup border={false}>
          <Cell
            center
            v-slots={{
              title: () => (
                <div class={[styles.title, 'van-ellipsis']}>
                  <span class={styles.tag}>视频课</span>
                  {item.courseGroupName}
                </div>
              )
            }}
          />
          <Cell
            center
            title={item.teacherName}
            titleClass={styles.teacher}
            v-slots={{
              icon: () => (
                <Image
                  class={styles.userLogo}
                  src={item.avatar || iconTeacher}
                />
              ),
              default: () => (
                <span class={styles.price}>
                  <i>¥</i>
                  {moneyFormat(item.coursePrice)}
                </span>
              )
            }}
          />
        </CellGroup>

        {this.album.length > 0 && (
          <CellGroup border={false}>
            <Cell
              center
              v-slots={{
                title: () => (
                  <div
                    class={[styles.title, 'van-ellipsis']}
                    style={{ display: 'flex', alignItems: 'center' }}
                  >
                    <span class={styles.line}></span>
                    附带专辑
                  </div>
                ),
                value: () => <span class={styles.titleSong}>· 赠送</span>
              }}
            />

            {this.album.map((album: any) => (
              <Cell
                center
                v-slots={{
                  icon: () => <Image src={album.cover} class={styles.img} />
                }}
                title={album.name}
                titleClass={styles.titleClass}
                label={album.remark || ''}
                labelClass={[styles.labelClass, 'van-ellipsis']}
              />
            ))}
          </CellGroup>
        )}
        {this.music.length > 0 && (
          <CellGroup border={false}>
            <Cell
              center
              v-slots={{
                title: () => (
                  <div
                    class={[styles.title, 'van-ellipsis']}
                    style={{ display: 'flex', alignItems: 'center' }}
                  >
                    <span class={styles.line}></span>
                    附带乐谱
                  </div>
                ),
                value: () => <span class={styles.titleSong}>· 赠送</span>
              }}
            />

            {this.music.map((album: any) => (
              <Cell
                center
                v-slots={{
                  icon: () => <Image src={album.cover} class={styles.img} />
                }}
                title={album.name}
                titleClass={styles.titleClass}
                label={'作者：' + (album.remark || '')}
                labelClass={[styles.labelClass, 'van-ellipsis']}
              />
            ))}
          </CellGroup>
        )}
      </div>
    )
  }
})
