import { Button, Cell, Icon, Image, Rate, Toast } from 'vant'
import { defineComponent } from 'vue'
import styles from './teacher-header.module.less'
import { postMessage } from '@/helpers/native-message'
import iconTeacher from '@common/images/icon_teacher.png'
import musicCert from '@common/images/music_cert.png'
import teacherCert from '@common/images/teacher_cert.png'
import request from '@/helpers/request'

export const getAssetsHomeFile = (fileName: string) => {
  const path = `../images/${fileName}`
  const modules = import.meta.globEager('../images/*')
  return modules[path].default
}

export default defineComponent({
  name: 'teacher-header',
  props: {
    userInfo: {
      type: Object,
      default: {}
    },
    teacherId: {
      type: String || Number,
      default: ''
    }
  },
  computed: {
    subjectNameList() {
      const userInfo: any = this.userInfo
      const subjectName = userInfo.subjectName
      return subjectName ? subjectName.split(',') : []
    },
    starGrade() {
      const { starGrade } = this.userInfo as any
      return Number(starGrade) || 0
    }
  },
  methods: {
    async onStart() {
      // 关注与取消关注
      try {
        const star = this.userInfo.isStar ? 0 : 1
        await request.get('/api-student/teacher/starOrUnStar', {
          params: {
            userId: this.teacherId,
            starStatus: star
          }
        })
        // const str = star ? '关注成功' : '已取消关注'
        this.userInfo.isStar = star
        let count = star ? this.userInfo.fansNum + 1 : this.userInfo.fansNum - 1
        this.userInfo.fansNum = count <= 0 ? 0 : count
        // Toast(str)
      } catch {}
    }
  },
  render() {
    return (
      <>
        <div class={styles.headerContent}>
          <div class={styles.headerCount}>
            <Cell
              class={styles['open-teacher-info']}
              border={false}
              center
              v-slots={{
                icon: () => (
                  <div
                    style={{ position: 'relative', lineHeight: 0 }}
                    onClick={() => {
                      // 判断是否在直播中
                      if (this.userInfo.liveing === 1) {
                        postMessage({
                          api: 'joinLiveRoom',
                          content: {
                            roomId: this.userInfo.roomUid,
                            teacherId: this.userInfo.userId
                          }
                        })
                      }
                    }}
                  >
                    <Image
                      class={styles.userLogo}
                      src={this.userInfo.heardUrl || iconTeacher}
                      fit="cover"
                    />
                    {this.userInfo.liveing === 1 && (
                      <p class={styles.liveTag}>直播中</p>
                    )}
                  </div>
                )
              }}
            >
              <div class={styles['teacher-info']}>
                <div class={styles['teacher-name']}>
                  <div class={styles.teacherCert}>
                    <span style={{ display: 'inline-block' }}>
                      {this.userInfo.username ||
                        `游客${this.userInfo.userId || ''}`}
                    </span>

                    {this.userInfo.entryFlag === 1 && (
                      <Image
                        class={styles.cert}
                        src={teacherCert}
                        // fit="contain"
                      />
                    )}
                    {this.userInfo.musicianFlag === 1 && (
                      <Image
                        class={styles.cert}
                        src={musicCert}
                        // fit="contain"
                      />
                    )}
                  </div>
                </div>
                {/* <p class={styles.piNameSubject}>
                          {this.subjectNameList.map((item: any) => (
                            <span class={styles.subject}>{item}</span>
                          ))}
                        </p> */}
                <div class={styles.level}>
                  {this.starGrade ? (
                    <Rate
                      readonly
                      modelValue={this.starGrade}
                      iconPrefix="iconfont"
                      color="#FFC459"
                      void-icon="star_default"
                      icon="star_active"
                      size={15}
                    />
                  ) : (
                    <span style={{ fontSize: '12px', color: '#999999' }}>
                      暂无评分
                    </span>
                  )}
                </div>
              </div>
            </Cell>
            <p class={styles.piNameSubject}>
              <Image
                class={styles.subjectSection}
                src={getAssetsHomeFile('icon_subject.png')}
                fit="contain"
              />
              <div class={styles.subjectList}>
                {this.subjectNameList.map((item: any) => (
                  <span class={styles.subject}>{item}</span>
                ))}
              </div>
            </p>
            <div class={styles['teacher-bottom']}>
              <div class={styles['teacher-data']}>
                <div class={styles['teacher-data_item']}>
                  粉丝 <span>{this.userInfo.fansNum || 0}</span>
                </div>
                <div class={styles['teacher-data_item']}>
                  已上课时 <span>{this.userInfo.expTime || 0}</span>
                </div>
              </div>
              <div class={styles.teacherOperation}>
                <Button
                  type="primary"
                  size="small"
                  plain={!!this.userInfo.isStar}
                  round
                  class={styles.btn}
                  onClick={this.onStart}
                >
                  {!this.userInfo.isStar && <Icon name="plus" />}

                  {this.userInfo.isStar ? '已关注' : '关注'}
                </Button>
                <Button
                  type="primary"
                  size="small"
                  round
                  style={{ marginLeft: '5px' }}
                  class={styles.btn}
                  onClick={() => {
                    postMessage({
                      api: 'joinChatGroup',
                      content: {
                        type: 'single', // single 单人 multi 多人
                        id: this.teacherId
                      }
                    })
                  }}
                >
                  <Icon name="chat-o" style={{ marginRight: '3px' }} />
                  聊天
                </Button>
              </div>
            </div>
          </div>
        </div>
      </>
    )
  }
})
