<template>
  <view class="role_page">
    <!-- <nchl-custom-title
      title="选择角色"
      :objStyle="`color:#fff;background-color:#325A9E;`"
    /> -->
    <view class="page_title">请选择角色登录</view>
    <view v-if="list?.length" class="role_list">
      <view v-for="(i, index) in list" :key="index" class="select_item" @click="handleSelect(i)">
        <view class="select_item_content">
          <!-- <image :src="`/static/svg/${item?.icon}.svg`" mode="widthFix" /> -->
          <view>
            {{ i?.name }}
          </view>
        </view>
        <uni-icons
          type="checkmarkempty"
          v-if="i?.id === selectedOrgEd?.id"
          size="20"
          color="#43CF7C"
        ></uni-icons>
        <uni-icons v-else type="right" size="15" color="#B5B5B5"></uni-icons>
      </view>
    </view>
    <view v-else class="role_empty">
      <image src="/static/svg/404Error.svg" mode="heightFix" />
      <view class="role_empty_des">
        当前用户没有绑定角色 <br />
        请联系管理员~
      </view>
      <view class="role_empty_btn">
        <nchl-button label="退出登录" @click="handleLogout" size="md" />
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { useWeAppAuthStore } from '@/common'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { setTabBar } from '@/common/libraries/setTabBar'
import { getApiLoading } from '@/common/libraries/apiLoading'
import { Apis } from '@/gen/Apis'
const auth = useWeAppAuthStore()
const selectedOrgEd = ref<{ id?: number }>({})
const list = ref<{ name?: string; id?: number }[]>([])

const handleSelect = (e: { id?: number }) => {
  auth?.handleSelect(e, () => {
    auth?.me()
  })
}

const handleLogout = () => {
  getApiLoading(Apis.Auth.UnBindUser, {}).then(() => {
    auth.data = {
      user: { id: 0, username: '' },
      orgs: [],
      selectedOrg: {}
    }
    uni.reLaunch({
      url: '/pages/login'
    })
  })
}

onShow(() => {
  list.value = auth?.data?.orgs || []
})

onLoad(() => {
  selectedOrgEd.value = auth?.data?.selectedOrg || {}
  console.log(auth?.data?.selectedOrg, 'selectedOrg')
})
</script>

<style lang="scss" scoped>
.role_page {
  .page_title {
    font-size: 48rpx;
    padding: 60rpx 40rpx 40rpx 40rpx;
    font-weight: 400;
    color: #000;
  }
  .select_item {
    display: flex;
    align-items: center;
    padding: 33rpx 0;
    border-bottom: 1rpx solid #eee;
    .select_item_content {
      flex: 1;
      display: flex;
      align-items: center;
      font-size: 30rpx;
      color: #333;
    }
    image {
      width: 66rpx;
      margin-right: 13rpx;
    }
  }
}
.role_list {
  padding: 0 40rpx;
}
.role_empty {
  text-align: center;
  padding: 80rpx 40rpx 0 40rpx;
  image {
    width: 300rpx;
    height: 300rpx;
  }
  .role_empty_des {
    color: #999;
    font-size: 33rpx;
    line-height: 46rpx;
    padding: 40rpx 0;
  }
  .role_empty_btn {
    padding: 150rpx 80rpx 0 80rpx;
  }
}
</style>
