<template>
  <div ref="drawer">
    <div
      class="flex items-center justify-between px-4 h-50px"
      style="border-bottom: 1px solid #eee"
    >
      <NodeHead :node-name="listTitle" />
      <a-button @click="show" class="w-74px !p-0 !rounded">{{ title }}</a-button></div
    >
    <a-drawer
      v-if="data.visible"
      :getContainer="() => $refs.drawer"
      placement="top"
      :closable="false"
      :mask="false"
      :open="true"
      :visible="true"
      :bodyStyle="{
        padding: 0,
      }"
      height="100%"
    >
      <div
        class="flex items-center justify-between px-4 h-50px"
        style="border-bottom: 1px solid #eee"
      >
        <NodeHead :node-name="title" />
        <div class="close-icon" @click="close">+</div>
      </div>
      <div class="list-box" v-if="props.list && props.list.length > 0">
        <component
          :is="componentName"
          v-for="(item, index) in props.list"
          class="picked"
          :key="index"
          :item="item"
          @click="abolish(item.id)"
        >
          <template #check>
            <a-checkbox
              size="small"
              :checked="true"
              :disabled="props.disabledIds && props.disabledIds.includes(item.id) ? true : false"
            />
          </template>
        </component>
      </div>
      <EmptyBox v-else />
    </a-drawer>
  </div>
</template>

<script setup lang="ts">
  import { computed, reactive } from 'vue';
  import UserCard from './card/UserCard.vue';
  import RoleCard from './card/RoleCard.vue';
  import PostCard from './card/PostCard.vue';
  import { EmptyBox, NodeHead } from '/@/components/ModalPanel/index';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  const emits = defineEmits(['abolish']);

  const props = withDefaults(
    defineProps<{
      type: String;
      list: Array<{ id: string }>;
      disabledIds?: Array<string>;
    }>(),
    {
      type: () => {
        return '';
      },
      list: () => {
        return [];
      },
    },
  );

  let data = reactive({
    visible: false,
  });
  const componentName = computed(() => {
    if (props.type == 'user') {
      return UserCard;
    } else if (props.type == 'role') {
      return RoleCard;
    } else if (props.type == 'post') {
      return PostCard;
    } else {
      return UserCard;
    }
  });
  const title = computed(() => {
    if (props.type == 'user') {
      return t('已选用户');
    } else if (props.type == 'role') {
      return t('已选角色');
    } else if (props.type == 'post') {
      return t('已选岗位');
    } else {
      return '';
    }
  });
  const listTitle = computed(() => {
    if (props.type == 'user') {
      return t('用户列表');
    } else if (props.type == 'role') {
      return t('角色列表');
    } else if (props.type == 'post') {
      return t('岗位列表');
    } else {
      return '';
    }
  });
  async function show() {
    data.visible = true;
  }
  function close() {
    data.visible = false;
  }
  function abolish(id: string) {
    if (props.disabledIds && props.disabledIds.includes(id)) return;
    emits('abolish', id);
  }
</script>
<style scoped>
  :deep(.ant-drawer-content-wrapper) {
    width: 100% !important;
    box-shadow: -4px 4px 12px 0 rgb(0 0 0 / 15%);
  }

  :deep(.ant-drawer-open) {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 20;
  }
</style>
