<!--
 * @Author: walker.liu
 * @Date: 2022-04-09 14:54:44
 * @Copyright（C）:  2019-2020 ZP Inc.   All rights reserved.
-->
<template>
  <div>
    <ClientOnly>
      <t-drawer
        class="token-collection-drawer"
        v-model:visible="dialogVisible"
        attach="body"
        :footer="false"
        placement="right"
        size="364px"
        :on-close="doClose"
        destroyOnClose
        :header="$t('collection.header')"
        :showOverlay="false"
        :close-btn="true"
        :preventScrollThrough="true"
        :zIndex="6000"
      >
        <template #body>
          <CollectionTable></CollectionTable>
        </template>
      </t-drawer>
    </ClientOnly>
  </div>
</template>
<script setup lang="tsx">
import CollectionTable from './collectionTable.vue';
const props = defineProps({
  visible: Boolean,
  token: String,
});
const dialogVisible = ref(false);
watch(
  () => props.visible,
  (v) => {
    dialogVisible.value = v;
  }
);
const emit = defineEmits(['update:visible']);
const doClose = () => {
  emit('update:visible', false);
};
</script>
<style lang="less" scoped>
.token-collection-drawer {
  :deep .t-drawer__content-wrapper {
    .t-drawer__body {
      padding: 0 !important;
    }
  }
  :deep .t-drawer__close-btn {
    z-index: 101;
  }
}
</style>
