<template>
  <vxe-modal v-model="showModal" title="租户选择" show-footer>
    <div
      v-for="tenant in getUserTenants"
      :key="tenant.code"
      @click="handleClick(tenant)"
      class="p-2 mb-2 rounded flex items-center justify-between text-center border hover:cursor-pointer hover:bg-gray-100"
    >
      <div>
        <span class="font-bold">{{ tenant.name }}</span>
        <span class="ml-4">{{ tenant.code }}</span>
      </div>
      <el-icon><DArrowRight /></el-icon>
    </div>
    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
    </template>
  </vxe-modal>
</template>

<script setup>
  import { ref } from 'vue';
  import { useUserStore } from '@/stores/modules/user';

  const emits = defineEmits(['cancel', 'select']);
  const showModal = ref(false);
  const { getUserTenants } = useUserStore();

  const handleCancel = () => {
    showModal.value = false;
    emits('cancel');
  };
  const handleClick = (tenant) => {
    showModal.value = false;
    emits('select', tenant);
  };

  const openModal = () => (showModal.value = true);
  defineExpose({
    openModal,
  });
</script>
<style lang="scss" scoped></style>
