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

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

  const onClickDot = (index: number, tab: any) => {
    Taro.showToast({ title: `dot索引:${index},tab值${tab.value}`, icon: 'none' });
  };

  const onClickMore = () => {
    Taro.showToast({ title: '更多操作', icon: 'none' });
  };

  return (
    <>
      <View className="group-title">基础用法</View>
      <BfTabs
        // style={{ backgroundColor: 'white' }}
        current={currValue}
        tabs={[
          { label: 'aa', value: 1, dot: true },
          {
            label: 'bbbbbbb',
            value: 2,
            bottom: <View style={{ boxSizing: 'border-box', height: 30, border: '1px solid #ddd' }}>高60</View>,
          },
          {
            label: 'ccccccccccccccccccc',
            value: 3,
            bottom: (
              <View
                style={{ boxSizing: 'border-box', width: '50%', margin: 'auto', height: 20, border: '1px solid #ddd' }}
              >
                50%宽
              </View>
            ),
          },
          {
            label: 'ddd',
            value: 4,
            bottom: (
              <View style={{ boxSizing: 'border-box', height: 60, border: '1px solid #ddd' }}>
                宽度最大为上方text的宽度
              </View>
            ),
          },
        ]}
        onChange={(val) => setCurrValue(val)}
        onClickDot={(index: number, tab: any) => {
          onClickDot(index, tab);
        }}
      />

      <BfTabs
        current={currValue}
        tabs={[
          { label: 'aaaaaaaaaaaaa', value: 1, dot: <View> 自定义dot</View> },
          { label: 'bb', value: 2 },
          { label: 'ccccccccccccc', value: 3 },
          { label: 'ddddddddddddd', value: 4 },
          { label: 'eeeeeeeeeeeee', value: 5 },
          { label: 'fffffffffffff', value: 6 },
        ]}
        onChange={(val) => setCurrValue(val)}
        showMore={true}
        onClickDot={(index: number, tab: any) => {
          onClickDot(index, tab);
        }}
        onClickMore={onClickMore}
      />

      <BfTabs
        current={currValue}
        tabs={[
          { label: 'aa', value: 1, dot: true },
          { label: 'bb', value: 2 },
          { label: 'ccccccccccccc', value: 3 },
          { label: 'ddddddddddddd', value: 4 },
          { label: 'eeeeeeeeeeeee', value: 5 },
          { label: 'fffffffffffff', value: 6 },
        ]}
        onChange={(val) => setCurrValue(val)}
        showMore={<View> 自定义更多</View>}
        onClickDot={(index: number, tab: any) => {
          onClickDot(index, tab);
        }}
        onClickMore={onClickMore}
      />

      <View className="group-title"> 固定布局，标签个数必须小于5</View>
      <BfTabs
        style={{ backgroundColor: 'white' }}
        current={currValue2}
        fixed
        tabs={[
          { label: '审批中', value: 1, dot: true },
          { label: '审批通过', value: 2 },
          { label: '审批拒绝', value: 3 },
        ]}
        onChange={(val) => setCurrValue2(val)}
        showMore={true}
        onClickDot={(index: number, tab: any) => {
          onClickDot(index, tab);
        }}
        onClickMore={onClickMore}
      />
      <View className="group-title">styleMode='bf'</View>
      <BfTabs
        current={currValue2}
        styleMode="bf"
        tabs={[
          { label: 'aa', value: 1, dot: true },
          { label: 'bb', value: 2 },
        ]}
        onChange={(val) => setCurrValue2(val)}
        showMore={true}
        onClickDot={(index: number, tab: any) => {
          onClickDot(index, tab);
        }}
        onClickMore={onClickMore}
      />
      <BfTabs
        current={currValue2}
        styleMode="bf"
        tabs={[
          { label: 'aa', value: 1, dot: true },
          { label: 'bb', value: 2 },
          { label: 'cccccc', value: 3 },
          { label: 'dddddd', value: 4 },
          { label: 'eeeeee', value: 5 },
          { label: 'ffffff', value: 6 },
        ]}
        onChange={(val) => setCurrValue2(val)}
        showMore={true}
        onClickDot={(index: number, tab: any) => {
          onClickDot(index, tab);
        }}
        onClickMore={onClickMore}
      />
      <BfTabs
        style={{ marginBottom: 20 }}
        current={currValue2}
        styleMode="bf"
        fixed
        tabs={[
          { label: '审批中', value: 1, dot: true },
          { label: '审批通过', value: 2 },
          { label: '审批拒绝', value: 3 },
        ]}
        onChange={(val) => setCurrValue2(val)}
        showMore={true}
        onClickDot={(index: number, tab: any) => {
          onClickDot(index, tab);
        }}
        onClickMore={onClickMore}
      />
    </>
  );
};