import { defineComponent } from 'vue'
import iconTeacher from '@/common/images/icon_teacher.png'
import { ElButton, ElDialog, ElTag } from 'element-plus'
import { state } from '@/state'
import { getUserType } from '@/helpers/utils'
import styles from './index.module.less'
import OpenMember from '@/views/user-info/components/open-member'

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: 'users',
  computed: {
    userInfo() {
      return state.user.data
    }
  },
  data() {
    return {
      memberStatus: false
    }
  },
  render() {
    return (
      <div class={['text-center pb-8 relative overflow-hidden', styles.users]}>
        <div class="bg-[#FFE7CF] absolute left-6 top-0 text-[#AB5400] text-xs py-0.5 px-2 rounded-[10px]">
          学生
        </div>

        <img
          src={this.userInfo.heardUrl || iconTeacher}
          class="w-[68px] h-[68px] rounded-full border-2 border-[#2DC7AA] border-solid mt-6 mx-auto object-cover"
        />

        <p class="text-[#333] text-lg font-medium pt-4 flex items-center justify-center">
          {this.userInfo.username}

          <img
            src={
              this.userInfo.isVip
                ? getAssetsHomeFile('icon_vip.png')
                : getAssetsHomeFile('icon_vip_default.png')
            }
            class="h-[26px]"
          />
        </p>

        <div class={this.userInfo.isVip !== 1 ? 'mt-5' : ''}>
          {this.userInfo.isVip !== 1 && (
            <ElButton
              round
              type="primary"
              size="large"
              class="!px-4"
              onClick={() => {
                this.memberStatus = true
              }}
            >
              开通会员
            </ElButton>
          )}
        </div>

        <div class="text-base text-[#999] mx-[25px] mt-9 flex items-center justify-center pt-10 border-t border-solid border-[#E7E6E6]">
          <span
            class="flex items-center justify-center flex-col leading-6 cursor-pointer flex-1"
            onClick={() => {
              if (getUserType() === 'STUDENT') {
                this.$router.push('/studentInfo/myFollow')
              }
            }}
          >
            <b class="text-[#333333] text-[28px] pl-1 pb-1">
              {this.userInfo.starTeacherNum || 0}
            </b>
            关注
          </span>
        </div>

        <ElDialog
          modelValue={this.memberStatus}
          onUpdate:modelValue={val => (this.memberStatus = val)}
          closeOnClickModal={false}
          closeOnPressEscape={false}
        >
          <OpenMember />
        </ElDialog>
      </div>
    )
  }
})