import { defineComponent } from 'vue'
import iconTeacher from '@/common/images/icon_teacher.png'
import { ElTag } from 'element-plus'
import { state } from '@/state'
import { userInfo } from 'os'
import { getUserType } from '@/helpers/utils'

export default defineComponent({
  name: 'users',
  computed: {
    userInfo() {
      return state.user.data
    }
  },
  render() {
    return (
      <div class="bg-white rounded-[6px] text-center pt-[30px] pb-8 flex items-center flex-col">
        <img src={iconTeacher} class="w-[68px] h-[68px] rounded-full" />

        <p class="text-[#1A1A1A] text-lg pt-4">{this.userInfo.username}</p>

        <div class="text-[14px] text-[#666] flex items-center justify-center">
          <span
            class={[
              'flex items-center justify-center leading-6',
              getUserType() === 'STUDENT' && 'cursor-pointer'
            ]}
            onClick={() => {
              if (getUserType() === 'STUDENT') {
                this.$router.push('/studentInfo/myFollow')
              }
            }}
          >
            关注
            {getUserType() === 'TEACHER' ? (
              <b class="text-black text-xl pl-1 pb-[2px]">
                {this.userInfo.fansNum || 0}
              </b>
            ) : (
              <b class="text-black text-xl pl-1 pb-[2px]">
                {this.userInfo.starTeacherNum || 0}
              </b>
            )}
          </span>
          {/* <span class="pl-3 flex items-center justify-center leading-6">
            帖子<b class="text-black text-xl pl-1 pb-[2px]">124</b>
          </span> */}
        </div>
      </div>
    )
  }
})
