import { View, Image } from "@tarojs/components";
import Taro from "@tarojs/taro";
interface Props {
  urls: string[];
}
export default ({ urls }: Props) => {
  const handlePreview = (e: any, index: number) => {
    e.stopPropagation();
    console.log(e, index, urls)
    Taro.previewMedia({
      current: index,
      //@ts-ignore
      sources: urls.map((item) => {
        return {
          url: item,
          type: "image",
        };
      }),
    });
  };
  if (urls.length === 0) {
    return <></>;
  }
  if (urls.length === 1) {
    return (
      <View className="w-full max-h-156 overflow-hidden rounded-8" onClick={(e) => handlePreview(e, 0)}>
        <Image
          src={urls[0]}
          mode="widthFix"
          className="w-full rounded-8"
        ></Image>
      </View>
    );
  }
  return (
    <View className="flex justify-center">
      <View className="bg-white rounded-12 grid grid-cols-3 gap-6 justify-center w-full">
        {urls.map((pic: string, index) => {
          return (
            <View
              className="w-80 h-80 overflow-hidden rounded-8"
              onClick={(e) => handlePreview(e, index)}
            >
              <Image
                src={pic}
                mode="widthFix"
                className="w-full rounded-8"
              ></Image>
            </View>
          );
        })}
      </View>
    </View>
  );
};
