import { BfTabs } from '@bud-fe/react-taro-ui';
import { View } from '@tarojs/components';
import React, { useState } from 'react';

export default () => {
  const [currValue, setCurrValue] = useState(1);
  const [currValue2, setCurrValue2] = useState(1);

  return (
    <>
      <View className="group-title">基础用法</View>
      <BfTabs
        style={{ backgroundColor: 'white' }}
        current={currValue}
        tabs={[
          { label: 'aaaaaaaaaaaa', value: 1 },
          { label: '的洪水泛滥浑善达克符合当时', value: 2 },
          { label: '风刀霜剑符合介绍了快点恢复', value: 3 },
          { label: 'ddd', value: 4 },
          { label: 'eee', value: 5 },
          { label: 'fff', value: 6 },
        ]}
        onChange={(val) => setCurrValue(val)}
      />

      <View className="group-title">固定布局，标签个数必须小于5</View>
      <BfTabs
        style={{ backgroundColor: 'white' }}
        current={currValue2}
        fixed
        tabs={[
          { label: '审批中', value: 1 },
          { label: '审批通过', value: 2 },
          { label: '审批拒绝', value: 3 },
        ]}
        onChange={(val) => setCurrValue2(val)}
      />
      <View className="group-title">styleMode='bf'</View>
      <BfTabs
        current={currValue2}
        styleMode="bf"
        tabs={[
          { label: 'aaaaaaaaaaaa', value: 1 },
          { label: '的洪水泛滥浑善达克符合当时', value: 2 },
          { label: '风刀霜剑符合介绍了快点恢复', value: 3 },
          { label: 'ddd', value: 4 },
          { label: 'eee', value: 5 },
          { label: 'fff', value: 6 },
        ]}
        onChange={(val) => setCurrValue2(val)}
      />
      <BfTabs
        style={{ marginBottom: 20 }}
        current={currValue2}
        styleMode="bf"
        fixed
        tabs={[
          { label: '审批中', value: 1 },
          { label: '审批通过', value: 2 },
          { label: '审批拒绝', value: 3 },
        ]}
        onChange={(val) => setCurrValue2(val)}
      />
    </>
  );
};