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

export default () => {
  const [baseOpened, setBaseOpened] = useState(false);
  const [topOpened, setTopOpened] = useState(false);

  return (
    <>
      <Button className="group-title" onClick={() => setBaseOpened(true)}>
        基本用法
      </Button>
      <Button className="group-title" onClick={() => setTopOpened(true)}>
        postion="top"
      </Button>

      <BfModal
        isOpened={baseOpened}
        styleMode="bf"
        title="标题"
        slotRight={<View style={{ color: 'red' }}>custom</View>}
        subTitle="副标题"
        onClose={() => {
          console.log('onClose');
          setBaseOpened(false);
        }}
        actionConfig={{
          mode: 'doubleBtn',
          onCancel: () => {
            console.log('onCancel');
            setBaseOpened(false);
          },
          onConfirm: () => {
            console.log('onConfirm');
            setBaseOpened(false);
          },
        }}
      >
        <View style={{ height: 200 }}>这里是内容</View>
      </BfModal>
      <BfModal isOpened={topOpened} title="标题" postion="top" onClose={() => setTopOpened(false)}>
        <View style={{ height: 200 }}>这里是内容</View>
      </BfModal>
    </>
  );
};