import { useArticle } from "@/modules";
import { css } from "@linaria/core";
import loading from "@/components/Provider/Loading";
import { defineComponent, onMounted, reactive, watch } from "vue";
import { object } from "vue-types";
import { Empty } from "ant-design-vue";

export default defineComponent({
  props: {
    data: object<CategoryItem>(),
  },
  setup(props, { emit }) {
    const data: any = props.data || {};
    const artStore = useArticle();
    const state = reactive({
      data: {} as any,
      loading: true,
    });
    watch(
      () => props.data?._id,
      () => {
        initDetail();
      }
    );
    onMounted(() => {
      initDetail();
    });

    const initDetail = async () => {
      loading.show("");
      artStore.listController.state.query = JSON.stringify({
        cid: data._id,
      });
      await artStore.listController.loadPage(1);
      const item = artStore.listController.state.list[0] || {};
      if (item._id) {
        const detRes = await artStore.getArticleDetail(item);
        if (detRes) {
          state.data = detRes;
        }
      }
      state.loading = false;
      loading.hidden();
    };
    return () => {
      return (
        <div class={page}>
          <div innerHTML={state.data.content}></div>
          {!state.loading && !state.data.content && (
            <div class={"ant-list-empty-text"}>
              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            </div>
          )}
        </div>
      );
    };
  },
});
const page = css`
  line-height: 1.5;
`;
