import Taro, { Component, Config } from '@tarojs/taro';
import { View, Button } from '@tarojs/components';
import TctModal from '@/components/modal';
import { TctTextarea } from '../../index';

import './index.scss';

interface ModalProps {}
interface ModalState {}

class Modal extends Component<ModalProps, ModalState> {
  config: Config = {
    navigationBarTitleText: 'modal',
  };

  state = {
    isOpened: false,
    text: '11111111',
  };

  onOpen = () => {
    this.setState({ isOpened: true });
  };

  onClose = () => {
    this.setState({ isOpened: false });
  };

  onClickBtn = (e) => {
    e.stopPropagation();
  };

  onTextField = (e) => {
    this.setState({ text: e.detail.value });
  }

  render() {
    const { isOpened, text } = this.state;

    const content = (
      <View className="modal-content">
        <View>Title Modal</View>
        <Button onClick={this.onClickBtn}>这里可以自定义传入组件哦</Button>
      </View>
    );

    const style = 'background-color: rgba(0, 244, 125, 0.5);';

    return (
      <View>
        <TctModal
          customStyle={style}
          isOpened={isOpened}
          touchClose
          onClose={this.onClose}
        >
          {content}
        </TctModal>
        <View onClick={this.onOpen}>点我打开弹窗</View>
        <TctTextarea
          value={text}
          onInput={e => this.onTextField(e)}
        />
      </View>
    );
  }
}

export default Modal;