import Modal from "@/components/Provider/Modal";
import { useArticle } from "@/modules";
import { css } from "@linaria/core";
import {
  Button,
  Card,
  PageHeader,
  Space,
  Table,
  message,
} from "ant-design-vue";
import { defineComponent } from "vue";
import EditBanner from "./EditBanner";
import Image from "@/components/Image";
export default defineComponent({
  setup() {
    const artStore = useArticle();
    artStore.bannerList.loadPage(1);
    const columns = [
      {
        title: "名称",
        dataIndex: "name",
      },
      {
        title: "图片",
        dataIndex: "cover",
        width: "600px",
        customRender: ({ record }: any) => {
          return <Image class={"cover_img"} src={record.cover} />;
        },
      },
      {
        title: "链接/文章",
        dataIndex: "content",
        customRender: ({ record }: any) => {
          if (record.url) {
            return (
              <a href={record.url} target="_blank">
                {record.url}
              </a>
            );
          }
          return record.name;
        },
      },
      {
        title: "操作",
        customRender: ({ record }: any) => {
          return (
            <Space>
              <Button
                type="link"
                onClick={() => {
                  editItem(record);
                }}
              >
                编辑
              </Button>
              <Button
                danger
                type="link"
                onClick={() => {
                  artStore.deleteBanner(record);
                }}
              >
                删除
              </Button>
            </Space>
          );
        },
      },
    ];
    const editItem = async (item?: any) => {
      if (artStore.bannerList.state.list.length >= 10) {
        message.warn("轮播图过多，请先删除一部分再添加");
        return;
      }
      let listItem = undefined;
      if (item._id) {
        const res = await artStore.bannerList.itemDetail(item._id);
        if (res.errorNo != 200) {
          message.warn("未查询到数据！");
          return;
        }
        listItem = res.result;
      }

      const itemData: any = await Modal.show(<EditBanner data={listItem} />, {
        title: item._id ? `编辑轮播` : `添加轮播`,
      });

      artStore.addOrUpdateBanner(itemData);
    };
    return () => (
      <Card class={Page}>
        <PageHeader title={"首页轮播"}>
          {{
            extra: () => {
              return (
                <Button
                  type="primary"
                  onClick={() => {
                    editItem({});
                  }}
                >
                  ＋ 添加轮播
                </Button>
              );
            },
          }}
        </PageHeader>
        <Table
          class={"banner_table"}
          bordered
          size="small"
          pagination={{
            size: "small",
            showSizeChanger: false,
            hideOnSinglePage: true,
            pageSize: artStore.bannerList.state.size,
            total: artStore.bannerList.state.total,
            // onChange: (v) => artStore.bannerList.loadPage(v),
          }}
          columns={columns}
          dataSource={artStore.bannerList.state.list}
        ></Table>
      </Card>
    );
  },
});
const Page = css`
  height: 100%;
  .banner_table {
    .cover_img {
      max-width: 300px;
      height: 100px;
      object-fit: contain;
    }
  }
`;
