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

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}>
          {!state.isSelect && (
            <div class="flex items-baseline">
              <h3 class="text-22px m-0">我的素材</h3>
              <span class="ml-5px text-gray-300 text-12px">
                (图片支持jpg、png、gif、svg，不超过5M，视频支持mp4，不超过200M)
              </span>
            </div>
          )}

          <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" : (state.isSelect? "select": "show")}
                onDelete={() => props.Controller.onItemClick("delete", record)}
                  onDownload={() =>props.Controller.onItemClick("download", record)}
                  onUse={()=>props.Controller.onItemClick("use", record)}
                  onPreview={() =>props.Controller.onItemClick("preview", record)}
              />
            )}
          />
          </div>);
        }
  },

})

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