import loading from "@/components/Provider/Loading";
import { useArticle } from "@/modules";
import { css } from "@linaria/core";
import { List } from "ant-design-vue";
import { defineComponent, onMounted } from "vue";
import { object } from "vue-types";
import dayjs from "dayjs";
import { uploader } from "@/modules/objects";
export default defineComponent({
  props: {
    data: object<CategoryItem>(),
  },
  setup(props) {
    const data: any = props.data || {};
    const artStore = useArticle();
    artStore.listController.state.list = [];

    onMounted(() => {
      initDetail();
    });

    const initDetail = async () => {
      loading.show("");

      artStore.listController.state.query = JSON.stringify({
        cid: data._id,
      });
      await artStore.listController.loadPage(1);
      loading.hidden();
    };
    const isImage = (url: string) => {
      const last = url.lastIndexOf(".");
      const fileExt = url.substring(last + 1);
      if (["jpg", "jpeg", "png", "gif", "webp"].includes(fileExt)) {
        return true;
      }
      return false;
    };
    return () => {
      return (
        <div class={page}>
          <div class={"list_content"}>
            <List
              grid={{ column: 1, gutter: 0 }}
              dataSource={artStore.listController.state.list}
              rowKey={(item) => item._id}
              renderItem={({ item, index }) => {
                const isImg = isImage(item.summary);
                return (
                  <List.Item>
                    <div class={"list_item"}>
                      <div class={"info"}>
                        <div class={"time"}>
                          {dayjs(item.createTime).format("YYYY.MM.DD")}
                        </div>
                        <div class={"name"}>{item.title}</div>
                      </div>
                      {isImg ? (
                        <a
                          class={"download"}
                          href={item.summary}
                          target="_blank"
                        >
                          下载
                        </a>
                      ) : (
                        <a class={"download"} href={item.summary}>
                          下载
                        </a>
                      )}
                    </div>
                  </List.Item>
                );
              }}
              pagination={{
                hideOnSinglePage: true,
                current: artStore.listController.state.page * 1,
                pageSize: artStore.listController.state.size,
                total: artStore.listController.state.total,
                onChange: (v) => {
                  artStore.listController.loadPage(v);
                },
              }}
            ></List>
          </div>
        </div>
      );
    };
  },
});

const page = css`
  .list_content {
    .ant-list-pagination {
      text-align: center;
      .ant-pagination-item-active {
        background: var(--vt-c-primary);
        border-color: var(--vt-c-primary);
        a {
          color: #fff;
        }
      }
    }
    .ant-list-item {
      margin-bottom: 1px;
    }
    .list_item {
      display: flex;
      align-items: center;
      padding: 20px 24px;
      background-color: #fff;
      .info {
        flex: 1;
        display: flex;
        align-items: center;
        overflow: hidden;
        .time {
          font-size: 16px;
          color: #666666;
        }
        .name {
          flex: 1;
          width: 0;
          padding: 0 48px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 16px;
          font-weight: 400;
          color: #333333;
        }
      }
      .download {
        padding: 4px 14px;
        color: var(--vt-c-primary);
        border: 1px solid var(--vt-c-primary);
        border-radius: 4px;
        transition: all 0.2s ease-in-out;
        &:hover {
          color: #fff;
          background-color: var(--vt-c-primary);
        }
      }
    }
  }
`;
