<script setup lang="ts">
import { onMounted, ref, unref, watch } from "vue";
import { httpList } from "/@/api/interest/role";
import { useResponseHandle } from "/@/hooks";

const props = defineProps<{
  currentRole: Record<string, string>;
  companyNo: string
}>();

const emit = defineEmits(["changeCurrentRole"]);

const responseHandle = useResponseHandle();
const list = ref<Array<Record<string, string>>>([]);

async function requesetRoleList() {
  const { code, data, message } = await httpList({ size: 1000, level: 2, companyNo: props.companyNo });

  responseHandle({
    code,
    message,
    handler: () => {
      list.value = data.list;
      emit("changeCurrentRole", unref(list)[0]);
    }
  });
}

watch(() => props.companyNo, () => {
  if (!props.companyNo) return
  requesetRoleList()
}, {
  immediate: true
})
</script>

<template>
  <ElScrollbar class="border-r border-#dcdfe6">
    <div class="px-1 py-0.5 m-1.5 hover:color-blue hover:bg-#f7f7f7 cursor-pointer duration-200"
      :class="currentRole.id === role.id && 'color-blue bg-#f7f7f7'" v-for="role in list" :key="role.id"
      v-if="list.length > 0" @click="() => emit('changeCurrentRole', role)">
      {{ role.role_name }}
    </div>
    <p class="text-center pt-[10x] select-none" v-else>暂无数据</p>
  </ElScrollbar>
</template>
