import { defineComponent } from 'vue'
import styles from './index.module.less'
import iconTeacher from '@/common/images/icon_teacher.png'
import { ElButton, ElRate, ElTag } from 'element-plus'

export default defineComponent({
  name: 'item',
  props: {
    item: {
      type: Object,
      default: {}
    }
  },
  computed: {
    subjects() {
      const { subjectName } = this.item
      return subjectName.split(',')
    }
  },
  render() {
    const item = this.item
    return (
      <div
        class={[
          'py-3 pl-3 pr-5 flex justify-between bg-white rounded-md  hover:drop-shadow-lg transition-all'
        ]}
      >
        <div class="flex items-center">
          <img src={iconTeacher} class="w-[54px] h-[54px] rounded-full" />

          <div class="pl-5">
            <div class="flex items-center">
              <span class="text-base pr-1 text-[#333]">{item.userName}</span>
              {/* <ElRate
                modelValue={item.starGrade}
                disabled
                textColor="#ffc459"
                class={[styles.rate, '!h-4']}
              /> */}
            </div>
            <div class="pt-1">
              {this.subjects.map(subject => (
                <ElTag
                  effect="dark"
                  size="small"
                  color="#FFF1DE"
                  style={{
                    borderColor: '#FFF1DE',
                    color: '#FF8C00',
                    marginRight: '5px'
                  }}
                >
                  {subject}
                </ElTag>
              ))}
            </div>
          </div>
        </div>

        <div class="flex items-center">
          {/* <div class="flex pr-16 text-[#333] text-base leading-none">
            <p class="pr-5 mr-5 border-r">
              <span class="text-[#999] pr-2">粉丝</span>
              {item.fansNum}
            </p>
            <p>
              <span class="text-[#999] pr-2">已上课时</span>
              {item.expTime}
            </p>
          </div> */}

          <ElButton
            type="primary"
            plain
            size="small"
            disabled
            class="!bg-white hover:!text-[#2DC7AA] !border-[#2DC7AA]"
          >
            已关注
          </ElButton>
        </div>
      </div>
    )
  }
})
