import { Button, View } from "@tarojs/components";
import react, { useEffect, useState } from "react";
import { Image, Uploader } from "@antmjs/vantui";
import { Skeleton } from "@antmjs/vantui";

import "./index.scss";
import Taro from "@tarojs/taro";
import { getTable } from "../../../../utils/index";
import moment from "moment";
import { Empty } from '@antmjs/vantui'


const CheckinDetail = () => {
  const [checkArr, setcheckArr] = useState([]);

  useEffect(() => {
    // 设置标题
    definePageConfig({
      navigationBarTitleText: "打卡记录",
    });
    getcheckArr();
  }, []);

  const getcheckArr = () => {
    Taro.cloud.callFunction({
      name: "getOpenid",
      complete: async (res: any) => {
        let openid: any = res?.result?.event?.userInfo?.openId;
        let postData = {
          tableName: "userInfo",
          keyValue: {
            openId: openid,
          },
          okFun: (res: any) => {
            console.log("res", res);
            let _id = res?.data?._id;
            setcheckArr(res?.data?.[0]?.checkInArr?.splice(-4).reverse() ?? []); //最近4条记录
            // setcheckArr(res?.data?.[0]?.checkInArr ?? []); //全部记录
          },
        };
        getTable({ ...postData });
      },
    });
  };

  const checkCom = () => {
    return checkArr.map((item: any) => {
      return (
        <View className="checkCom">
          {/* 备注 */}
          {item?.remark && <View>{item?.remark}</View>}

          {/* 图片展示 */}
          <View>
            <Uploader
              fileList={[
                {
                  url: item?.imageUrl,
                  name: "",
                },
              ]}
              // onAfterRead={() => {}}
              // onDelete={() => {}}
              deletable={false}
              disabled={true}
              showUpload={false}
              previewSize={350} //预览大小
            />
            {/* <Image
              width="80%"
              height="80px"
              fit="cover"
              src={item?.imageUrl}
            /> */}
          </View>

          <View className="checkBottom">
            {/* 打卡日期 */}
            {item?.checkTime && (
              <View>
                {moment(item?.checkTime).format("YYYY-MM-DD HH:mm:ss")}
              </View>
            )}
            {/* lbs定位 */}
            {item?.location && <View>{item?.location}</View>}
            {/* 删除按钮 */}
            {/* {!item?.isDelete&&  <View style={{color:'red',marginLeft:'10px'}}>删除</View>} */}
          </View>
        </View>
      );
    });
  };

  return (
    <View>
      {checkArr?.length > 0 ? (
        <View className="CheckinDetail">{checkCom()}</View>
      ) : (
        <View>
          {/* 骨架屏 */}
          {/* <Skeleton title={true} row={3} /> */}
          {/* 空态 */}
          <Empty description="" />
        </View>
      )}
    </View>
  );
};

export default CheckinDetail;
