import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  StatusBar,
  TouchableOpacity,
  Text,
  FlatList,
  ScrollView,
} from 'react-native'
import { connect } from 'react-redux'
import { NavigationActions, createAction } from '../../../utils'
import { ReturnDate } from '../../../utils/utils'

@connect(({ theme, announce }) => ({ ...theme, ...announce }))
class AllAnnounce extends Component {
  constructor() {
    super()
  }

  AnnounceRender(item) {
    const effectivedate = ReturnDate(item.item.effectivedate, true)
    const disabledate = ReturnDate(item.item.disabledate, true)
    return (
      <TouchableOpacity
        onPress={() => {
          this.props.dispatch(
            NavigationActions.navigate({
              routeName: 'AnnounceDetail',
              params: item,
            })
          )
        }}
        style={{ backgroundColor: '#FFF', padding: 10, marginTop: 10 }}
      >
        <Text numberOfLines={1} style={styles.headerText}>
          {item.item.title}
        </Text>
        {/* <View style={{ paddingRight: 15 }}>
          <Text numberOfLines={2} style={styles.contentText}>
            2018年1月6日，第五届中国家居产业发展年会暨2017年度中国家居产业“大雁奖”颁奖盛
          </Text>
        </View> */}
        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            marginTop: 11,
          }}
        >
          <Text style={styles.footerText}>生效日期：{effectivedate}</Text>
          <Text style={styles.footerText}>截止日期：{disabledate}</Text>
        </View>
      </TouchableOpacity>
    )
  }

  render() {
    const { appTheme, announceContent } = this.props
    return (
      <ScrollView
        tabLabel={this.props.tabLabel}
        style={styles.container}
        showsHorizontalScrollIndicator={false}
      >
        <FlatList
          data={announceContent.content}
          extraData={this.state}
          keyExtractor={(item, index) => index}
          renderItem={item => this.AnnounceRender(item)}
        />
      </ScrollView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingHorizontal: 10,
    paddingBottom: 10,
    backgroundColor: '#f5f5f5',
  },
  headerText: {
    flex: 1,
    fontSize: 14,
    lineHeight: 20,
    letterSpacing: 0.17,
    color: '#333',
  },
  contentText: {
    flex: 1,
    marginTop: 4,
    fontSize: 12,
    lineHeight: 17,
    letterSpacing: 0.14,
    color: '#666',
  },
  footerText: {
    fontSize: 12,
    lineHeight: 17,
    letterSpacing: 0.14,
    color: '#999',
  },
})

export default AllAnnounce