import { defineUI } from "queenjs";
import  Toolbar  from "./MaterialToolbar"
import { css, cx } from "@linaria/core";
import { Button } from "ant-design-vue";
import AssetsList from "@/components/AssetsList";
import { any } from "vue-types";
import MaterialItem from "./MaterialItem";
import { onMounted } from "vue";
import { MaterialController } from "@/modules/resource/controllers/MaterialController";


export default defineUI({
    props: {
        Controller: any<MaterialController>().isRequired,
    },
    slots: {
        Toolbar,
        AssetsList,
        MaterialItem,
    },

    setup(props, { slots }) {
        onMounted(() => {
             props.Controller.getCurrControl().loadPage(1);
        });

        return ()=>{
            const state = props.Controller.state;
            const control = props.Controller.getCurrControl()
            
            return (<div class={rootStyles}>
            <h3 class="text-22px">我的素材</h3>
            <slots.Toolbar Controller={props.Controller} />

            <slots.AssetsList
              columns={6}
              class="mt-30px"
              control={control}
              item={(record: any) => (
                <slots.MaterialItem
                  record={record}
                  use={ state.currTab == "task" ? "task" : "show"}
                  onDelete={() => props.Controller.onItemClick("delete", record)}
                  onDownload={() =>props.Controller.onItemClick("download", record)}
                  onPreview={() =>props.Controller.onItemClick("preview", record)}
                />
              )}
            />
          </div>);
        }
    },

})

const rootStyles = css`
  .btn_tab {
    padding: 3px 5px;
    &:hover,
    &.active {
      color: @inf-primary-color;
    }
  }
`;