import { ZoBarrage } from '@lylb/tzo-ui';

import Taro from '@tarojs/taro';
import { ZoBarrage } from '@lylb/tzo-ui';
export default class Index extends Taro.Component {
  constructor() {
    super(...arguments);
    this.state = {
      keepRun: true,
      list: [
        {
          txt: '我我我领取了法拉利5元优惠券',
          img: 'https://icebreaker.top/_ice/img/avatar.166c088.jpg',
          color: 'red',
        },
        {
          txt: 'xx刚刚领取了兰博基尼5元优惠券',
        },
        {
          txt: 'xx刚刚领取了兰博基尼5元优惠券',
        },
        {
          txt: 'xx刚刚领取了兰博基尼5元优惠券',
        },
        {
          txt: 'xx刚刚领取了兰博基尼5元优惠券',
          color: 'red',
        },
      ],
      item: null,
    };
  }
  handleClick = () => {
    this.setState({
      item: {
        txt: '我是新添加的数据',
        color: '#000000',
      },
    });
  };
  changeStatus = () => {
    const { keepRun } = this.state;
    this.setState({
      keepRun: !keepRun,
    });
  };
  render() {
    const { list, item, keepRun } = this.state;
    return (
      <View>
        <ZoBarrage list={list} item={item} keepRun={keepRun} />
        <View onClick={this.handleClick}>添加弹幕</View>
        <View onClick={this.changeStatus}>停止/运行弹幕</View>
      </View>
    );
  }
}