import { Button, PageHeader, Space, Table, message } from "ant-design-vue";
import { defineComponent, onMounted } from "vue";

import loading from "@/components/Provider/Loading";
import Modal from "@/components/Provider/Modal";
import { useArticle, useCategory } from "@/modules";

import * as dayjs from "dayjs";
import { object } from "vue-types";
import ListEditModal from "./ListEditModal";
const preNames = [
  "美术系",
  "动画系",
  "工业设计系",
  "视觉传达设计系",
  "环境设计系",
];
export default defineComponent({
  props: {
    data: object<CategoryItem>(),
  },
  setup(props) {
    const data: any = props.data || {};
    const artStore = useArticle();
    const cateStore = useCategory();
    const preCategory = cateStore.categories.find((e) => {
      return e._id == data.pid;
    });
    let preName = preCategory?.name || "";
    if (!preNames.includes(preName)) {
      preName = "";
    }
    onMounted(() => {
      initList();
    });

    const initList = async () => {
      loading.show("");
      artStore.listController.state.query = JSON.stringify({ cid: data._id });
      await artStore.listController.loadPage(1);
      loading.hidden();
    };
    const columns = [
      {
        title: "名称",
        dataIndex: "title",
      },
      {
        title: "创建时间",
        dataIndex: "createTime",
        customRender({ record }: any) {
          return dayjs(record.createTime).format("YYYY-MM-DD");
        },
      },
      {
        title: "操作",
        customRender: ({ record }: any) => {
          return (
            <Space>
              <Button
                type="link"
                onClick={() => {
                  editItem(record);
                  console.log(record);
                }}
              >
                编辑
              </Button>
              <Button
                danger
                type="link"
                onClick={() => {
                  artStore.deleteArticle(record);
                  console.log(record);
                }}
              >
                删除
              </Button>
            </Space>
          );
        },
      },
    ];

    const editItem = async (item?: any) => {
      let listItem = undefined;
      if (item._id) {
        const res = await artStore.listController.itemDetail(item._id);
        if (res.errorNo != 200) {
          message.warn("未查询到数据！");
          return;
        }
        listItem = res.result;
      }

      const itemData: any = await Modal.show(
        <ListEditModal data={listItem} />,
        {
          title: item._id ? `编辑${data?.name}` : `添加${data?.name}`,
          fullscreen: true,
        }
      );
      if (!itemData._id) {
        itemData.cid = data._id;
      }
      artStore.addOrUpdateArticle(itemData);
    };

    return () => {
      const titleName = preName ? `${preName}-${data.name}` : data?.name;
      return (
        <div>
          <PageHeader title={titleName}>
            {{
              extra: () => {
                return (
                  <Button
                    type="primary"
                    onClick={() => {
                      editItem({});
                    }}
                  >
                    + 添加{data?.name}
                  </Button>
                );
              },
            }}
          </PageHeader>
          <Table
            bordered
            size="small"
            pagination={{
              size: "small",
              showSizeChanger: false,
              pageSize: artStore.listController.state.size,
              total: artStore.listController.state.total,
              onChange: (v) => artStore.listController.loadPage(v),
            }}
            columns={columns}
            dataSource={artStore.listController.state.list}
          ></Table>
        </div>
      );
    };
  },
});
