<script lang="ts" setup>
  import { List, Card, Statistic, Dropdown, Menu } from 'ant-design-vue';
  import { ref, unref } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import {
    MoreOutlined,
    ShareAltOutlined,
    EditOutlined,
    DeleteOutlined,
  } from '@ant-design/icons-vue';
  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useRoute, useRouter } from 'vue-router';
  const ListItem = List.Item;
  const MenuItem = Menu.Item;

  const router = useRouter();
  const { createMessage } = useMessage();

  const data = ref([{ title: 1 }, { title: 2 }, { title: 3 }]);
  //分页相关
  const page = ref(1);
  const pageSize = ref(36);
  const total = ref(0);
  const paginationProp = ref({
    showSizeChanger: false,
    showQuickJumper: true,
    pageSize,
    current: page,
    total,
    showTotal: (total) => `总 ${total} 条`,
    onChange: pageChange,
    onShowSizeChange: pageSizeChange,
  });

  function pageChange(p, pz) {
    page.value = p;
    pageSize.value = pz;
  }
  function pageSizeChange(_current, size) {
    pageSize.value = size;
  }

  const { clipboardRef } = useCopyToClipboard();
  const handleCopyShareUrl = () => {
    clipboardRef.value = '123';
    unref(clipboardRef) && createMessage.success('复制成功');
  };

  const handleEdit = () => {
    router.push('/data/board/detail');
  };

  const handleRemove = () => {};
</script>

<template>
  <PageWrapper>
    <template #header> 自定义看板 </template>
    <List
      :pagination="paginationProp"
      :data-source="data"
      :grid="{ gutter: 5, column: 4, xs: 1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 3 }"
    >
      <template #renderItem="{ item }">
        <ListItem>
          <Card class="data-card cursor-pointer">
            <template #extra>
              <Dropdown>
                <template #overlay>
                  <Menu>
                    <MenuItem key="edit" @click="handleEdit">
                      <EditOutlined />
                      <span>编辑</span>
                    </MenuItem>
                    <MenuItem key="remove" @click="handleRemove">
                      <DeleteOutlined />
                      <span>删除</span>
                    </MenuItem>
                  </Menu>
                </template>
                <MoreOutlined class="rotate-90 transform cursor-pointer" />
              </Dropdown>
            </template>
            <!-- <template #cover>title</template> -->
            <section>
              <div class="flex justify-between items-center">
                <div>设备看板名</div>
                <div class="flex content-center">
                  <Statistic value="12">
                    <template #suffix>
                      <span class="text-sm">个组件</span>
                    </template>
                  </Statistic>
                </div>
              </div>
              <div class="flex justify-between mt-4">
                <div>
                  <span>看板类型</span>
                  <span>
                    <ShareAltOutlined @click="handleCopyShareUrl" />
                  </span>
                </div>
                <div>2021-02-11 12:00:00</div>
              </div>
            </section>
          </Card>
        </ListItem>
      </template>
    </List>
  </PageWrapper>
</template>

<style scoped>
  .data-card:deep(.ant-card-head) {
    padding: 0;
    height: 40px;
    min-height: 40px;
  }
  .data-card:deep(.ant-card-extra) {
    padding: 8px;
  }
</style>