colexiu-project/src/components/col-header/modals/loganInfo.tsx

import {
  defineComponent,
  toRefs,
  reactive,
  onMounted,
  ref,
  nextTick
} from 'vue'
import {
  ElTag,
  ElDropdown,
  ElDropdownItem,
  ElDropdownMenu,
  ElMessageBox
} from 'element-plus'
import classes from './index.module.less'
import teacherHeader from '@/common/images/icon_teacher.png'
import { state } from '@/state'
import userBanner from '../images/userBanner.png'
import changeIcon from '../images/changeIcon.png'
import backIcon from '../images/backIcon.png'
import peopleIcon from '../images/peopleIcon.png'
import planIcon from '../images/planIcon.png'
import { getUserInfo, getUserType, getAuth, setAuth } from '@/helpers/utils'
import { useRouter } from 'vue-router'
import request from '@/helpers/request'
import mitt from '@/helpers/mitt'
export default defineComponent({
  name: 'loganInfo',

  props: {
    title: {
      type: String,
      default: ''
    }
  },
  setup(props, conent) {
    const states = reactive({
      title: props.title,
      user: {} as any,
      userType: '',
      showChange: false
    })
    mitt.on('mittFn',()=>{
      console.log('mittFn')
      setUser()
    })
    const router = useRouter()
    onMounted(() => {
      nextTick(() => {
        setUser()
      })
    })
    const setUser = ()=>{
      states.user = getUserInfo()
      states.userType = getUserType()
      if (states.user.userType) {
        if (
          states.user.userType.indexOf('TEACHER') != -1 &&
          states.user.userType.indexOf('STUDENT') != -1
        ) {
          states.showChange = true
        } else {
          states.showChange = false
        }
      }
    }
    const gotoPage = (val: string) => {
      router.push({ path: val })
    }
    const changeRoute = () => {
      const token = getAuth()
      let userType = ''
      let str = ''
      if (states.userType == 'TEACHER') {
        userType = 'STUDENT'
        str = '学生'
      } else {
        userType = 'TEACHER'
        str = '老师'
      }
      ElMessageBox.confirm(`是否确定切换到${str}？`, '提示', {
        type: 'warning'
      }).then(() => {
        setAuth(
          JSON.stringify({
            token,
            loginUserType: userType
          })
        )
        router.push({ path: '/' })
        window.location.reload()
      })
    }
    const logout = async () => {
      try {
        const res = await request.get('/api-auth/exit', {})
        router.push({ path: '/' })
        window.location.reload()
      } catch (e) {
        console.log(e)
      }
    }
    const changeState = (val: string) => {
      if (val == 'strudent') {
        gotoPage('/studentInfo')
      } else if (val == 'teacher') {
        gotoPage('/userInfo')
      } else if (val == 'change') {
        changeRoute()
      } else if (val == 'back') {
        logout()
      }
    }
    return {
      ...toRefs(states),
      gotoPage,
      changeRoute,
      logout,
      changeState
    }
  },
  render() {
    return (
      <>
        <ElDropdown
          onCommand={val => this.changeState(val)}
          v-slots={{
            dropdown: () => (
              <>
                <div class={classes.dropdownWrap}>
                  <div class={classes.dropdownWrapUser}>
                    <div class={classes.userInfoWrap}>
                      <img
                        src={
                          this.user.heardUrl
                            ? this.user.heardUrl
                            : teacherHeader
                        }
                        class={classes.userHeader}
                        alt=""
                      />
                      <p class={classes.title}>{this.user.username}</p>
                    </div>
                    <img src={userBanner} alt="" />
                  </div>

                  {this.userType == 'TEACHER' ? (
                    <div class={classes.dropdownInfo}>
                      <div class={classes.dropdownItem}>
                        <p class={classes.dropdownItemTitle}>
                          {this.user.fansNum || 0}
                        </p>
                        <p class={classes.dropdownItemsubTitle}>粉丝</p>
                      </div>
                      <div class={classes.dropdownItem}>
                        <p class={classes.dropdownItemTitle}>
                          {this.user.musicSheetNum || 0}
                        </p>
                        <p class={classes.dropdownItemsubTitle}>乐谱</p>
                      </div>
                      {/* <div class={classes.dropdownItem}>
                      <p class={classes.dropdownItemTitle}>134</p>
                      <p class={classes.dropdownItemsubTitle}>帖子</p>
                    </div> */}
                    </div>
                  ) : null}

                  <ElDropdownMenu>
                    {this.userType == 'TEACHER' ? (
                      <ElDropdownItem command="teacher">
                        <img
                          class={classes.dropdownImg}
                          src={peopleIcon}
                          alt=""
                        />{' '}
                        个人中心
                      </ElDropdownItem>
                    ) : (
                      <ElDropdownItem command="strudent">
                        <img
                          class={classes.dropdownImg}
                          src={peopleIcon}
                          alt=""
                        />{' '}
                        个人中心
                      </ElDropdownItem>
                    )}
                    {/* <ElDropdownItem  onClick={gotoPage('')}><img class={classes.dropdownImg} src={planIcon} alt="" /> 创作中心</ElDropdownItem> */}
                    {this.showChange ? (
                      <ElDropdownItem command="change">
                        <img
                          class={classes.dropdownImg}
                          src={changeIcon}
                          alt=""
                        />{' '}
                        角色切换
                      </ElDropdownItem>
                    ) : null}

                    <ElDropdownItem command="back" class="backItem">
                      <div class="backWrap">
                        <img
                          class={classes.dropdownImg}
                          src={backIcon}
                          alt=""
                        />{' '}
                        退出登录
                      </div>
                    </ElDropdownItem>
                  </ElDropdownMenu>
                </div>
              </>
            )
          }}
        >
          <div class={classes.userInfoWrap}>
            <p class={classes.title}>{this.user.username}</p>
            <img
              src={this.user.heardUrl ? this.user.heardUrl : teacherHeader}
              class={classes.userHeader}
              alt=""
            />
          </div>
        </ElDropdown>
      </>
    )
  }
})