import Taro, { Component } from '@tarojs/taro'
import { View, Swiper, SwiperItem, Image } from '@tarojs/components'
import { queryNewsList } from '@/services/news'
import dayjs from 'dayjs'
import { connect } from '@tarojs/redux'

@connect(state => ({ ...state.city, ...state.user }))
export default class SwiperBanner extends Component {
  static options = {
    addGlobalClass: true,
  };

  state = {
    list: [],
  }

  componentDidMount() {
    console.log('资讯componentDidMount')
    this.getNewsData()
  }

  componentDidShow() {
    console.log('资讯componentDidShow')
    this.getNewsData()
  }

  componentDidHide() {
    this.setState({
      list: []
    })
  }

  getNewsData() {
    const payload = {
      pageNumber: 1,
      pageSize: 999,
      cityId: this.props.curCity.id,
    }
    queryNewsList(payload).then(res => {

      this.setState({
        list: res.records || [],
      })

    })
  }


  render() {
    if (!this.state.list.length) return null;
    const { newImg } = this.props
    console.log(newImg,'newImg')
    return (
      <View className="notice-box" >
        <View style="display: flex;align-items: center;">
          <View className="left-text">
            {newImg  && <Image style="width:76rpx ; height:76rpx" src={newImg} >{console.log(newImg,'newImg')}</Image>}
            {!newImg  && <View><View className="up"> 地产</View >
              <View className="down"> 头条</View ></View >}
          </View >
          <Swiper
            className='notice-swiper'
            circular
            vertical="true"
            autoplay
            interval={3000}
          >
            {
              this.state.list.map((item, inx) => {
                return (
                  <SwiperItem key={`news-${inx}`}>
                    <View className="notice-text" onClick={() => this.props.onClick(item)}>
                      <View className="date"><View className="dot"></View>{dayjs(item.createDate).format('YYYY-MM-DD')}</View>
                      {item.newsName}
                    </View>
                  </SwiperItem>
                )
              })
            }
          </Swiper>
        </View>
        {this.state.list.length > 1 &&
          <View className="notice-more" onClick={this.props.onClickMore}>
            更多 <Text className="iconfont icon-more"></Text>
          </View>
        }
      </View>
    )
  }
}
