import { defineComponent } from 'vue'
import styles from './index.module.less'
import iconTeacher from '@/common/images/icon_teacher.png'
import {
  ElButton,
  ElImage,
  ElMessage,
  ElMessageBox,
  ElRate,
  ElTag
} from 'element-plus'
// import iconVip from '../images/icon_vip.png'
import iconVip from '../../user-info/images/icon_vip.png'
import iconVipDefault from '../../user-info/images/icon_vip_default.png'
import request from '@/helpers/request'

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

export default defineComponent({
  name: 'item',
  props: {
    item: {
      type: Object,
      default: {}
    },
    getList: {
      type: Function,
      default: () => {}
    }
  },
  computed: {
    subjects() {
      const { subjectName } = this.item
      return subjectName.split(',') || []
    }
  },
  methods: {
    async onUnLike() {
      // console.log(this.item)
      ElMessageBox.confirm('确定取消关注吗？', '提示').then(async () => {
        try {
          await request.get('/api-website/student/starOrUnStar', {
            params: {
              userId: this.item.userId,
              starStatus: 0
            }
          })
          ElMessage.success('取消关注成功')
          this.getList()
        } catch {
          //
        }
      })
    },
    checkBadge(type: string) {
      // tag : 老师点亮图标
      // STYLE:个人风采
      // VIDEO：视频课
      // LIVE：直播课，
      // MUSIC：曲目 逗号隔开
      let status = false
      const { teacher } = this.item
      switch (type) {
        case 'STYLE':
        case 'VIDEO':
        case 'LIVE':
        case 'MUSIC':
          if (teacher && teacher.tag) {
            status = teacher.tag.indexOf(type) > -1
          }
          break
        case 'VIP':
          if (teacher) {
            status = teacher.isVip > 0
          }
          break
        default:
          status = false
          break
      }
      return status
    }
  },
  render() {
    const item = this.item
    return (
      <div class="w-[334px] rounded-[10px] mb-4 m-auto user-shadow relative">
        <div class="bg-[#CFF2FF] absolute right-4 top-5 text-[#0089B9] text-xs py-0.5 px-2 rounded-[10px]">
          老师
        </div>
        <div class="p-[18px] flex">
          <ElImage
            src={item.avatar || iconTeacher}
            class="w-12 h-12 rounded-full border-2 border-[#2DC7AA] object-cover"
          />
          <div class="flex flex-col pl-5">
            <p class="text-base text-[#333] font-semibold leading-tight pb-0">
              {item.userName}
            </p>
            <div class="flex items-center">
              {/* <ElImage
                src={
                  this.checkBadge('VIP')
                    ? getAssetsHomeFile('icon_vip.png')
                    : getAssetsHomeFile('icon_vip_default.png')
                }
                class="h-7 -ml-1"
              /> */}
              <img
                src={
                  this.checkBadge('STYLE')
                    ? getAssetsHomeFile('icon_cert.png')
                    : getAssetsHomeFile('icon_cert_default.png')
                }
                class="h-[26px] -ml-1"
              />
              <img
                src={
                  this.checkBadge('VIDEO')
                    ? getAssetsHomeFile('icon_video.png')
                    : getAssetsHomeFile('icon_video_default.png')
                }
                class="h-[26px] px-1"
              />
              <img
                src={
                  this.checkBadge('LIVE')
                    ? getAssetsHomeFile('icon_live.png')
                    : getAssetsHomeFile('icon_live_default.png')
                }
                class="h-[26px] px-1"
              />
              <img
                src={
                  this.checkBadge('MUSIC')
                    ? getAssetsHomeFile('icon_music.png')
                    : getAssetsHomeFile('icon_music_default.png')
                }
                class="h-[26px] px-1"
              />
            </div>
          </div>
        </div>
        <p class="mx-4 mb-3">
          {this.subjects.map(subject => (
            <ElTag
              effect="dark"
              size="small"
              color="#E0FEF9"
              round
              style={{
                borderColor: '#E0FEF9',
                color: '#1B967E',
                margin: '0 4px 8px'
              }}
            >
              {subject}
            </ElTag>
          ))}
        </p>

        <div class="border-[#E7E6E6] border-t block mx-2.5 pt-1 pb-2 text-center">
          <ElButton
            type="text"
            plain
            size="small"
            class="!bg-white !text-[#999999] hover:!text-[#FF8B00]"
            onClick={this.onUnLike}
          >
            取消关注
          </ElButton>
        </div>
      </div>
    )
  }
})