<script lang="ts" setup>
  import { List, Card, Statistic } from 'ant-design-vue';
  import { ref, unref } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { MoreOutlined, ShareAltOutlined } from '@ant-design/icons-vue';
  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useRouter } from 'vue-router';
  import Dropdown from '/@/components/Dropdown/src/Dropdown.vue';
  import { DropMenu } from '/@/components/Dropdown';
  import { MoreActionEvent } from './config/config';
  const ListItem = List.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 dropMenuList: DropMenu[] = [
    {
      text: '编辑',
      event: MoreActionEvent.EDIT,
      icon: 'ant-design:edit-outlined',
    },
    {
      text: '删除',
      event: MoreActionEvent.DELETE,
      icon: 'ant-design:delete-outlined',
    },
  ];

  const handleMenuEvent = (event: DropMenu) => {
    if (event.event === MoreEvent.EDIT) {
      handleEdit();
    }
  };

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

  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
                :trigger="['click']"
                @menu-event="handleMenuEvent"
                :drop-menu-list="dropMenuList"
              >
                <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>