import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  Image,
  StatusBar,
  Dimensions,
  PixelRatio,
  TouchableOpacity,
  Text,
  FlatList,
  ScrollView,
} from 'react-native'
import { connect } from 'react-redux'
import StatusBacg from '../../static/images/Order-status.png'
import LogPng from '../../static/images/LogPng.png'
import Icon from '../../components/Iconfont/Iconfont'
import { NavigationActions, createAction } from '../../utils'
import { ScaleUtil, ReturnDate } from '../../utils/utils'
import redblue from '../../static/images/ic-redblue.png'
import { ImageBaseUrl } from '../../utils/fetch/Fetchx'

const { width, height } = Dimensions.get('window')
@connect(({ theme }) => ({ ...theme }))
class OrderLog extends Component {
  // 头部
  header() {
    return (
      <View
        style={{
          height: HEADERSTYLE.height,
          paddingTop: HEADERSTYLE.paddingTop + 5,
          backgroundColor: '#fff',
          borderBottomColor: '#eee',
          borderBottomWidth: 1 / PixelRatio.get(),
        }}
      >
        <View
          style={{
            flex: 1,
            justifyContent: 'center',
          }}
        >
          <TouchableOpacity
            style={{ position: 'absolute', left: 10, flexDirection: 'row' }}
            onPress={() => this.props.dispatch(NavigationActions.back())}
          >
            <Icon
              name="icon-icon-fanhui"
              size={20}
              color={'#666'}
              style={{ marginTop: 4 }}
            />
            <Text
              style={{
                fontSize: 14,
                lineHeight: 20,
                color: '#666',
                alignSelf: 'center',
              }}
            >
              返回
            </Text>
          </TouchableOpacity>
          <Text
            style={{
              alignSelf: 'center',
              fontSize: 18,
              lineHeight: 25,
              letterSpacing: 0.19,
              color: '#333',
            }}
          >
            操作日志
          </Text>
        </View>
      </View>
    )
  }

  logInfo(item, index, maxlen) {
    return (
      <View
        style={{
          height: 60,
          paddingVertical: 10,
          marginLeft: 10,
          borderBottomColor: '#CCC',
          borderBottomWidth: maxlen == index ? 0 : 1 / PixelRatio.get(),
        }}
      >
        <Text
          style={{
            fontSize: 13,
            lineHeight: 18,
            color: '#333',
            marginBottom: 4,
          }}
        >
          {item.orderDescription}
        </Text>
        <Text
          style={{
            fontSize: 12,
            lineHeight: 17,
            color: '#666',
          }}
        >
          {ReturnDate(item.creationTime)}
        </Text>
      </View>
    )
  }

  render() {
    // const { appTheme } = this.props;
    const { logData } = this.props.navigation.state.params
    return (
      <View
        style={[
          styles.container,
          { backgroundColor: '#FFF' },
          // { backgroundColor: appTheme.backgroundColor }
        ]}
      >
        {this.header()}
        <View style={{ height: 10, backgroundColor: '#F7F7F7' }} />
        <View
          style={{
            backgroundColor: '#FFF',
            paddingVertical: 15,
            paddingLeft: 10,
            flexDirection: 'row',
          }}
        >
          <View style={{ width: 35, paddingTop: 10 }}>
            <Image
              source={LogPng}
              style={{ width: 20, height: 20, alignSelf: 'center' }}
            />
            <View
              style={{
                width: 1,
                backgroundColor: '#DDD',
                flex: 1,
                alignSelf: 'center',
              }}
            />
            {logData.map((item, index) => {
              if (index != 0) {
                return (
                  <View
                    key={index}
                    style={{
                      width: 6,
                      height: 6,
                      position: 'absolute',
                      alignSelf: 'center',
                      marginTop: 17,
                      top: 60 * index,
                      backgroundColor: '#CCC',
                      borderRadius: 6,
                    }}
                  />
                )
              }
            })}
          </View>

          <FlatList
            keyExtractor={(item, index) => index}
            data={logData}
            style={{ flex: 1 }}
            extraData={this.state}
            renderItem={({ item, index }) =>
              this.logInfo(item, index, logData.length - 1)
            }
          />
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
})

export default OrderLog