import { Cell, Icon, Image, Rate } from 'vant'
import { defineComponent } from 'vue'
import styles from './practice-item.module.less'

import iconEdu from './images/icon_edu.png'
import iconMusicMan from './images/icon_music_man.png'
import iconNew from './images/icon_new.png'

import iconTeacher from '@/common/images/icon_teacher.png'

export default defineComponent({
  name: 'practiceItem',
  props: {
    item: {
      type: Object,
      default: {}
    },
    onClick: {
      type: Function,
      default: (item: any) => {}
    }
  },
  computed: {
    subjectNameList() {
      const { configSubject } = this.item
      return configSubject ? configSubject.split(',') : []
    },
    starGrade() {
      const { starGrade } = this.item
      return Number(starGrade) || 0
    }
  },
  render() {
    return (
      <Cell
        center
        border={false}
        class={styles.practiceItem}
        onClick={() => {
          this.onClick(this.item)
        }}
        v-slots={{
          icon: () => (
            <div class={styles.piCoverContainer}>
              <Image
                class={styles.piCover}
                fit="cover"
                src={this.item.avatar || iconTeacher}
              />
              {/* <Image src={iconMusicMan} class={styles.tag} /> */}
              {/* <Image src={iconNew} class={styles.tag} /> */}
            </div>
          ),
          title: () => (
            <div>
              <div class={[styles.piTitle, 'van-ellipsis']}>
                <p class={styles.piNameSubject}>
                  <span class={styles.piName}>
                    {this.item.userName || `游客${this.item.teacherId || ''}`}
                  </span>
                  {/* {this.subjectNameList.map(
                    (item: string, index: number) =>
                      index <= 1 && <span class={styles.subject}>{item}</span>
                  )} */}
                </p>
                {this.starGrade ? (
                  <Rate
                    readonly
                    modelValue={this.starGrade}
                    iconPrefix="iconfont"
                    color="#FFC459"
                    void-icon="star_default"
                    icon="star_active"
                    size={11}
                  />
                ) : (
                  <span style={{ fontSize: '12px', color: '#999999' }}>
                    暂无评分
                  </span>
                )}
              </div>

              <div class={styles.piContent}>
                {this.item.schoolSubject && (
                  <p class={styles.edu}>
                    <Icon
                      size={14}
                      name={iconEdu}
                      style={{ paddingRight: '5px' }}
                    />
                    <span>{this.item.schoolSubject}</span>
                  </p>
                )}

                <p class={styles.courseInfo}>
                  <span class={styles.classNum}>
                    已上课程
                    <i>{this.item.expTime}</i>节
                  </span>
                  <span class={styles.priceTime}>
                    {this.item.subjectPrice > 0 && (
                      <>
                        <i>¥{this.item.subjectPrice}</i>/
                      </>
                    )}
                    {this.item.courseMinutes}
                    分钟
                  </span>
                </p>
              </div>
            </div>
          )
        }}
      />
    )
  }
})