<script lang="ts" setup>
  import { List, Card, Statistic, Button, Tooltip } from 'ant-design-vue';
  import { onMounted, 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 Dropdown from '/@/components/Dropdown/src/Dropdown.vue';
  import { DropMenu } from '/@/components/Dropdown';
  import { MoreActionEvent } from './config/config';
  import { useModal } from '/@/components/Modal';
  import PanelDetailModal from './components/PanelDetailModal.vue';
  import { getDataBoardList, deleteDataBoard } from '/@/api/dataBoard';
  import { DataBoardRecord } from '/@/api/dataBoard/model';
  import { ViewType } from './config/panelDetail';
  import { useRouter } from 'vue-router';

  const ListItem = List.Item;
  const router = useRouter();

  const { createMessage } = useMessage();

  const dataBoardList = ref<DataBoardRecord[]>([]);
  //分页相关
  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 = (record: DataBoardRecord) => {
    clipboardRef.value = record.openUrl;
    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 getDatasource = async () => {
    try {
      const { total, items } = await getDataBoardList({
        page: unref(paginationProp).current,
        pageSize: unref(paginationProp).pageSize,
      });
      dataBoardList.value = items;
      paginationProp.value.total = total;
    } catch (error) {
    } finally {
    }
  };

  const handleMenuEvent = (event: DropMenu, record: DataBoardRecord) => {
    if (event.event === MoreActionEvent.EDIT) handleEdit(record);
    if (event.event === MoreActionEvent.DELETE) handleRemove(record);
  };

  const handleEdit = (record: DataBoardRecord) => {
    openModal(true, {
      isEdit: true,
      ...record,
    });
  };

  const handleOpenDetailModal = () => {
    openModal();
  };

  const handleRemove = async (record: DataBoardRecord) => {
    // TODO 删除确认
    try {
      await deleteDataBoard([record.id]);
      createMessage.success('删除成功');
      await getDatasource();
    } catch (error) {
      createMessage.error('删除失败');
    }
  };

  const [registerModal, { openModal }] = useModal();

  const handleViewBoard = (record: DataBoardRecord) => {
    router.push(`/data/board/detail/${record.id}`);
  };

  onMounted(() => {
    getDatasource();
  });
</script>

<template>
  <PageWrapper>
    <div class="flex mb-6 items-center">
      <div class="text-lg mr-6 font-bold">自定义看板</div>
      <Button type="primary" @click="handleOpenDetailModal">创建看板</Button>
    </div>
    <List
      :pagination="paginationProp"
      :data-source="dataBoardList"
      :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" @click="handleViewBoard(item)">
            <template #extra>
              <Dropdown
                :trigger="['click']"
                @menu-event="(event) => handleMenuEvent(event, item)"
                :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>{{ item.name }}</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>
                    {{ item.viewType === ViewType.PRIVATE_VIEW ? '私有看板' : '公共看板' }}
                  </span>
                  <span v-if="item.viewType === ViewType.PUBLIC_VIEW">
                    <Tooltip title="分享链接">
                      <ShareAltOutlined class="ml-2" @click="handleCopyShareUrl(item)" />
                    </Tooltip>
                  </span>
                </div>
                <div>{{ item.updateTime || item.createTime }}</div>
              </div>
            </section>
          </Card>
        </ListItem>
      </template>
    </List>
    <PanelDetailModal @register="registerModal" @change="getDatasource" />
  </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>