import Taro, { Component } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import './index2.scss'
export default class TopPie extends Component {
  constructor (props) {
    super(props)
    this.state = {
      newsList: [],
      isAnimateShow: false,
    }
  }


  componentWillMount () {
    this.getNewNews()
  }

  getNewNews () {
    Taro.api.news.adminformationlist({
      hide_status: 1
    }).then(res => {
      this.setState({
        newsList: res.list || []
      }, () => {
        let that = this
        setInterval(() => {
          const { newsList } = that.state
          let newArr = [...newsList]
          that.setState({
            isAnimateShow: true
          })
          setTimeout(() => {
            newArr.push(newsList[0])
            newArr.shift()
            that.setState({
              newsList: [...newArr],
              isAnimateShow: false
            })
          }, 1000)
        }, 3000)
      })
    })
  }

  render () {
    const { newsList, isAnimateShow } = this.state
    const newsArr = [newsList[0], newsList[1], newsList[2]]
    const newsIcon = require('./img/i_news.png')
    const curItems = newsArr.map((item, index) => {
      return (
        <Navigator url={'/pagesMore/news/indexDtl?id=' + item.id} className="slb-li" key={index}>
          <View className="text">{item.title}</View>
        </Navigator>
      )
    })
    return (
      <View className="scoped-loop-box">
        <Image src={newsIcon} className="slb-icon" />
        <View className="slb-right">
          <View className="slb-wrap">
            <View className={isAnimateShow ? 'slb-ul loop' : 'slb-ul'}>
              {curItems}
            </View>
          </View>
        </View>
      </View>
    )
  }
}