bluenote/src/pages/editor-pages/editor-media/index.tsx

import { useState } from "react";
import { View } from "@tarojs/components";
import PageCustom from "@/components/page-custom/index";
import NavBarNormal from "@/components/NavBarNormal/index";

import KnowledgePicker from '@/components/KnowledgePicker'
import Taro, { useUnload } from "@tarojs/taro";
import { uploadImage } from "@/utils/http";
import { useComponentStore } from "@/store/componentStore";

import type { TMediaType } from "@/types/index";
import { EComponentType, EKnowlegeTypes } from "@/consts/enum";

import UploaderGrid from '@/components/UploaderGrid'
import BottomBar from "@/components/BottomBar";
import { TKnowledgeItem } from "@/types/knowledge";


interface Props {
  editMode?: boolean;
}

export default function Index({ editMode }: Props) {
  
  
  let currentComponent = useComponentStore((state) => state.currentComponent);
  
  const { saveComponent } = useComponentStore();
  const loading = useComponentStore((state) => state.loading);

  const [mediaValue, setMediaValue] = useState<TMediaType[]>(
    currentComponent?.data?.media ?? []
  );


  const handleSubmit = async () => {
    if(!currentComponent?.data?.id){
      return
    }
    if (loading) {
      return;
    }
    const c = {
      data: {
        media: mediaValue,
        layout: currentComponent.data.layout ?? 'mini',
        id: currentComponent.data.id,
        index: currentComponent.data.index,
      },
      enabled: currentComponent?.enabled ?? true,
      type: EComponentType.media,
    };

    await saveComponent(c);
    Taro.navigateBack();
  };

  let isUploading = false;
  const handleChooseMedia = () => {
    Taro.chooseMedia({
      count: 9,
      mediaType: ["image", "video"],
      sourceType: ["album", "camera"],
      async success(res) {
        isUploading = true;
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFiles;
        const arr: TMediaType[] = [];
        for (let t of tempFilePaths) {
          Taro.showLoading();
          const res = await uploadImage(t.tempFilePath);
          Taro.hideLoading();
          if (res?.publicUrl) {
            arr.push({
              duration: t.duration,
              height: t.height,
              width: t.width,
              size: t.size,
              url: res.publicUrl,
              fileType: t.fileType,
            });
            console.log(arr);
          }else{
            Taro.showModal({
              title: '上传异常',
              content: '文件上传失败',
              showCancel: false,
            })
          }
        }
        setMediaValue([...mediaValue, ...arr]);
        isUploading = false;
      },
      fail(err) {
        console.log(err);
        isUploading = false;
      },
    });
  };

  const handleDeleteMedia = (index: number, current: TMediaType) => {
    const results = mediaValue.filter((item) => item.url !== current.url);
    setMediaValue([...results]);
  };
  const [showPopup, setShowPopup] = useState(false);

  const showKnowlegePopup = ()=> {
    setShowPopup(true)
  }
  
  const onPicked = (picked?: TKnowledgeItem[]) => {
    if(picked){
      const r = picked.map( item => {
        return {
          size: item.fileSize,
          url: item.picUrl,
          fileType: item.type,
        }
      })
      if(r.length){
        setMediaValue([...mediaValue, ...r])
      }
    }
  }

  return (
    <PageCustom isflex={false} bgColor="global-light-green-bg">
      <NavBarNormal
      >
        图片/视频
      </NavBarNormal>
    
      <View className="flex flex-col w-full px-16 pt-12 gap-12">
        <View className="text-primary" onClick={showKnowlegePopup}>知识库导入</View>
        <UploaderGrid onNewUpload={handleChooseMedia}  list = {mediaValue} onChange={()=> {}} onDelete={handleDeleteMedia} />
      </View>
      <KnowledgePicker types={[EKnowlegeTypes.image]} multi onPicked={onPicked} setShow={setShowPopup} show={showPopup}></KnowledgePicker>
      <BottomBar>
          <View className="button-rounded button-primary flex-1" onClick={handleSubmit}>保存</View>
        </BottomBar>
    </PageCustom>
  );
}