<template>
  <view>
    <view class="base-info">
      <view class="base-info-user">
        <image :src="getAvatarUrl(userInfo.avatarUrl)" />
        <view class="base-info-user-content">
          <view class="base-info-user-name-role">
            <view class="nickname-role" @click="showRole">
              <h1>{{ userInfo.nickName }}</h1>
              <view class="role-view">
                {{ userInfo.role }}
              </view>
              <svg-inverted-triangle />
            </view>
            <view class="base-info-user-name-role-edit">
              <navigator url="/pages/inspector/personalData/index">
                <svg-edit />
              </navigator>
            </view>
          </view>
          <view class="phone-school-edu">
            <view>
              {{ userInfo.phone }}&nbsp;|&nbsp;{{ userInfo.gradSchool }}&nbsp;|&nbsp;{{
                userInfo.degree
              }}
            </view>
            <!--            <view>{{ userInfo.gradSchool }}</view>-->
            <!--            <view>{{ userInfo.degree }}</view>-->
          </view>
        </view>
      </view>
      <view class="user-tags">
        <view
          v-for="label in userLabels"
          :key="label.text"
          :style="{ color: label.color, backgroundColor: label.bgColor }"
        >
          {{ label.text }}
        </view>
      </view>
    </view>
    <uni-popup ref="roleRef" background-color="white" borderRadius="15px 15px 0 0">
      <view class="role-view">
        <h1>请选择身份</h1>
        <view class="role-view-items">
          <view v-for="item in roleList" :key="item.value" @click="selectRole(item)">
            {{ item.text }}
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
import { computed, inject, onBeforeMount, type Ref, ref } from 'vue'
import type { UserInfo } from '@/types/inspector/mine'
import { getUserInfo, queryUserRoles, switchRole } from '@/api/inspector/mine'
import { getAvatarUrl, getCache, setCache } from '@/utils'
import { getAuthUrlApi } from '@/api/login'
import { user } from '@/store'
import db from '@/utils/db'

const roleRef = ref(null)

const userInfo = inject<Ref<UserInfo>>('userInfo')

const roleList = ref<any[]>([])

const { getUserInfo: getLoginUserInfo } = user()

const queryRole = async () => {
  const { data } = await queryUserRoles({ phone: userInfo.value.phone })
  roleList.value = (data ?? []).map(item => {
    return {
      text: '家长', // item.adminType === 16 ? '家长' : '督学师',
      value: item.adminType,
    }
  })
}
onBeforeMount(() => {
  queryRole()
})

const colors = [
  {
    color: '#FF8624',
    bgColor: '#FFF7F0',
  },
  {
    color: '#0CC25C',
    bgColor: '#F1FFF7',
  },
  {
    color: '#5553FF',
    bgColor: '#F2F2FF',
  },
  {
    color: '#FF3C58',
    bgColor: '#FFF3F5',
  },
  {
    color: '#328EFF',
    bgColor: '#FFF7F0',
  },
]

const userLabels = computed(() => {
  return (userInfo.value.label ?? '').split(',').map((label, index) => {
    const _colorObj = colors[index % colors.length]
    return {
      text: label,
      color: _colorObj.color,
      bgColor: _colorObj.bgColor,
    }
  })
})

const showRole = () => {
  if (roleList.value.length === 1 || roleList.value.length === 0) {
    return
  }
  roleRef.value.open('bottom')
}

const selectRole = async item => {
  userInfo.value.role = item.text
  const res = await switchRole(item.value)
  db.set('token', res.data)
  const data = await getLoginUserInfo()
  if (!data.openid) {
    // 初次注册
    const authRes = await getAuthUrlApi()
    // #ifdef H5
    window.location.href = authRes.data
    // #endif
    // if (data.adminType === 16) {
    //   const authRes = await getAuthUrlApi();
    //   // #ifdef H5
    //   window.location.href = authRes.data;
    //   // #endif
    // } else {
    //   uni.reLaunch({
    //     url: '/pages/inspector/schedule/index',
    //   });
    // }
  } else {
    let adminType = db.get('userInfo').adminType
    uni.reLaunch({
      url: '/pages/home/index',
    })
    // if (adminType === 16) {
    //   uni.reLaunch({
    //     url: '/pages/home/index',
    //   });
    // } else if (adminType === 6) {
    //   uni.reLaunch({
    //     url: '/pages/inspector/schedule/index',
    //   });
    // }
  }

  roleRef.value.close()
}
</script>

<style scoped lang="scss">
.base-info {
  display: flex;
  width: 690rpx;
  flex-direction: column;
  align-items: center;
  background-color: white;
  margin: 0 auto;
  border-radius: 20rpx;
  padding: 30rpx 30rpx 20rpx 30rpx;
  box-sizing: border-box;

  &-user {
    display: flex;
    padding-bottom: 20rpx;

    align-items: center;
    gap: 20rpx;
    align-self: stretch;
    justify-content: space-between;

    & > image {
      width: 100rpx;
      height: 100rpx;
      border-radius: 100px;
    }

    &-content {
      width: 510rpx;
    }

    &-name-role {
      width: 510rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: 50rpx;

      .nickname-role {
        display: flex;
        align-items: center;

        & > h1 {
          color: #333333;
          font-size: 30rpx;
          font-style: normal;
          font-weight: 500;
          line-height: 45rpx; /* 150% */
        }

        .role-view {
          display: flex;
          height: 30rpx;
          padding: 0 10rpx;
          justify-content: center;
          align-items: center;
          gap: 10rpx;
          border-radius: 6rpx;
          background: #835dff;
          color: #fff;
          font-size: 22rpx;
          font-style: normal;
          font-weight: 400;
          line-height: 30rpx; /* 136.364% */
          margin-left: 10rpx;
        }

        & > svg {
          width: 30rpx;
          height: 30rpx;
        }
      }

      &-edit {
        svg {
          width: 30rpx;
          height: 30rpx;
        }
      }
    }

    .phone-school-edu {
      display: flex;
      flex-wrap: nowrap;

      & > view {
        //border-right: 1px solid #999999;
        font-size: 24rpx;
        color: #666666;
        padding: 0 10rpx;
        line-height: 36rpx;

        //&:last-child {
        //  border-right: none;
        //}
      }
    }
  }

  .user-tags {
    width: 100%;
    display: flex;
    gap: 10rpx;
    flex-wrap: wrap;
    padding: 0 30rpx;
    font-size: 26rpx;
    justify-content: flex-start;

    & > view {
      padding: 6rpx 16rpx;
      border-radius: 6rpx;
    }
  }
}

.role-view {
  padding: 30rpx;

  & > h1 {
    color: #333333;
    font-size: 32rpx;
    font-style: normal;
    font-weight: 540;
    line-height: normal;
  }

  &-items {
    text-align: center;
    color: #0a1f13;
    font-size: 32rpx;
    font-style: normal;
    font-weight: 400;
    line-height: normal;

    & > view {
      padding: 30rpx 0;
      border-bottom: 2rpx solid rgba(238, 238, 238, 0.8);
    }
  }
}
</style>
