import React, { Component } from "react";
import { View, Text, ScrollView } from '@tarojs/components'
import Taro from '@tarojs/taro';
import { AtNoticebar } from 'taro-ui'
import './index.less';
import { getPublicReleaseUnread } from '../../../utils/servers/servers';

import "taro-ui/dist/style/components/icon.scss";
import "taro-ui/dist/style/components/noticebar.scss";
import "taro-ui/dist/style/components/modal.scss";
import "taro-ui/dist/style/components/list.scss";
import "taro-ui/dist/style/components/icon.scss";

class MessageNoticebar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      animationData: {},
      isOpend: false,
      isOpened: false,
      str: '',
      list: []
    }
    this.onClose = this.onClose.bind(this);
    this.getPublicReleaseUnread = this.getPublicReleaseUnread.bind(this);
    this.close = this.close.bind(this);
    this.onGotoMore = this.onGotoMore.bind(this);
  }

  componentWillMount() {
    let animation = Taro.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
    })

    this.animation = animation

    this.setState({
      animation: animation.export()
    })


    Taro.eventCenter.on('GoPuncsshIn', (data) => {
      if (data.data === 'unread') {
        this.getPublicReleaseUnread();
      }
    })

    Taro.eventCenter.on('closeMessageNoticebar', () => {
      this.close();
    })

    Taro.eventCenter.on('getMessageNoticebar', (data) => {
      this.setState({
        str: data.str,
        list: data.list
      }, () => {
        this.animation.opacity(1).step()
        this.setState({
          animation: this.animation.export(),
          isOpend: true
        })
      })
    })
  }

  onClose() {
    Taro.eventCenter.trigger('closeMessageNoticebar');
  }

  close() {
    this.animation.opacity(0).step()
    this.setState({
      animation: this.animation.export(),
      isOpend: false,
      str: '',
      list: [],
    })
  }

  getPublicReleaseUnread() {
    getPublicReleaseUnread({}).then(v => {
      if (v.error.length === 0) {
        if (v.data.length === 0) { return; }
        let str = this.state.isOpend ? this.state.str : '';
        for (let i of v.data) {
          str += i.content + '\t\t\t\t\t'
        }
        Taro.eventCenter.trigger('getMessageNoticebar', {
          str,
          list: this.state.isOpend ? [...this.state.list, ...v.data] : v.data
        });
      } else {
        Taro.showToast({ title: v.error[0].message, icon: 'none' })
      }
    }).catch(() => {
      Taro.showToast({
        title: '系统错误,请稍后再试',
        icon: 'none'
      })
    })
  }

  onGotoMore() {
    this.setState({
      isOpened: true
    })
  }

  render() {
    return (
      <View className='messageNoticebar' animation={this.state.animation}>
        {this.state.isOpend ? <View className='content'>
          <View style={{ width: '100%' }}>
            <AtNoticebar
              close
              showMore
              moreText='查看全部'
              speed='50'
              single
              icon='volume-plus'
              onClose={this.onClose}
              onGotoMore={this.onGotoMore}
            >
              <Text decode>
                {this.state.str}
              </Text>
            </AtNoticebar>
          </View>
          {/*<View className='noticebar' onClick={this.onClose}>*/}
          {/*  <AtIcon value='close' size='10'/>*/}
          {/*</View>*/}
        </View> : null}
        {this.state.isOpened ?
          <View className='messageNoticebarContent'>
            <View className='messageContent'>
              <View className='title'>未读消息</View>
              <ScrollView scrollY scrollWithAnimation scrollTop>
                <View className='list'>
                  {
                    this.state.list.map((v, k) => (
                      <View key={k} className='item'>
                        <View className='itemHead'>
                          <View className='content'>
                            <Text>{v.content}</Text>
                          </View>
                        </View>
                        <View className='itemBottom'>
                          <View className='noticeTypeName'>{v.noticeTypeName}</View>
                          <View className='createTimeFormattedDate'>{v.createTimeFormattedDate}</View>
                        </View>
                      </View>
                    ))
                  }
                </View>
              </ScrollView>
              <View className='operation' onClick={() => {
                this.setState({
                  isOpened: false,
                })
              }}>
                确定
              </View>
            </View>
          </View> : null}
      </View>
    )
  }
}

export default MessageNoticebar;
