<script lang="ts" setup>
import { FloatButton, Tooltip } from 'ant-design-vue';

import MIcon from '#/components/icon/icon.vue';

const viewMode = defineModel<'excel' | 'list'>({ default: 'list' });

function toggle() {
  viewMode.value = viewMode.value === 'list' ? 'excel' : 'list';
}
</script>

<template>
  <Tooltip
    :title="viewMode === 'list' ? '切换到 Excel 视图' : '切换到列表视图'"
    placement="left"
  >
    <FloatButton
      :style="{ right: '24px', bottom: '84px' }"
      shape="circle"
      :type="viewMode === 'excel' ? 'primary' : 'default'"
      @click="toggle"
    >
      <template #icon>
        <MIcon
          :icon="
            viewMode === 'list'
              ? 'mdi:table-large'
              : 'ant-design:unordered-list-outlined'
          "
          size="20"
        />
      </template>
    </FloatButton>
  </Tooltip>
</template>
