/*
 * @Description:
 * @Author: lanzhisheng
 * @Date: 2022-04-08 11:19:37
 * @LastEditTime: 2022-04-08 16:17:56
 * @LastEditors: lanzhisheng
 */
import React, { FC } from "react";
import { useState } from "react";
import { View, Text } from "@tarojs/components";

interface propsType {
  data: [];
  onClick: any;
  defaultValue: number;
}

const TabsRadius: FC<propsType> = (props) => {
  const { data, onClick, defaultValue } = props;
  const [tiaocangKey, setTiaocangKey] = useState(defaultValue || 1);

  const tiaocangTab = (key) => {
    setTiaocangKey(key);
    onClick(key);
  };

  return (
    <View className="at-col">
      {data.map((item, index) => (
        <Text
          className={`${
            data?.length === 1
              ? "choose1 choose3"
              : index === 0
              ? "choose1"
              : index === data?.length - 1
              ? "choose3"
              : "choose2"
          } ${tiaocangKey == item?.id ? " active" : ""}`}
          onClick={() => {
            tiaocangTab(item?.id);
          }}
        >
          {item?.name}
        </Text>
      ))}
      {/* <Text
        className={`choose1 ${tiaocangKey == 0 ? " active" : ""}`}
        onClick={() => {
          tiaocangTab(0);
        }}
      >
        全部
      </Text>
      <Text
        className={`choose2 ${tiaocangKey == 1 ? " active" : ""}`}
        onClick={() => {
          tiaocangTab(1);
        }}
      >
        买入
      </Text>
      <Text
        className={`choose3 ${tiaocangKey == 2 ? " active" : ""}`}
        onClick={() => {
          tiaocangTab(2);
        }}
      >
        卖出
      </Text> */}
    </View>
  );
};
export default TabsRadius;