/*
 * @Description:
 * @Author: jiass
 * @Date: 2022-01-25 13:29:21
 * @LastEditTime: 2022-04-08 16:17:45
 * @LastEditors: lanzhisheng
 */
import React, { FC } from "react";
import { useState } from "react";
import { View, ScrollView } from "@tarojs/components";

const SharesView: FC<any> = (props) => {
  const { data, onClick, onBottom, style, columns, hasMore } = props;
  const [hasScrollY, sethasScrollY] = useState(false);

  const handleGo = (item) => {
    onClick(item);
  };

  const onScrollToLower = () => {
    if (hasScrollY && hasMore) {
      onBottom && onBottom();
    }
  };

  const onScroll = (e) => {
    if (e.detail.deltaY) {
      sethasScrollY(true);
    } else {
      sethasScrollY(false);
    }
  };

  return (
    <ScrollView
      scrollX={true}
      scrollY={true}
      scrollAnchoring={true}
      enableFlex={true}
      onScroll={(e) => {
        onScroll(e);
      }}
      lowerThreshold={50}
      onScrollToLower={onScrollToLower}
      className="container"
      style={style}
    >
      <View className="tbody">
        <View className="tbodyContent">
          {columns.map((itemS) => (
            <View className="Stock_value">{itemS?.name}</View>
          ))}
        </View>
        {data.map((item) => (
          <View
            className="tbodyContent"
            key={item}
            onClick={() => {
              handleGo(item);
            }}
          >
            {columns.map((itemS) => (
              <View className="Stock_value">
                {itemS.render
                  ? itemS.render(item[itemS.sortField], item)
                  : item[itemS.sortField]}
              </View>
            ))}
          </View>
        ))}
      </View>
    </ScrollView>
  );
};
export default SharesView;