import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  Image,
  StatusBar,
  Text,
  TouchableOpacity,
  PixelRatio,
  ScrollView,
  FlatList,
  ActivityIndicator,
} from 'react-native'
import { connect } from 'react-redux'
import png from '../../../../static/images/defaultimg.jpg'
import Icon from '../../../../components/Iconfont/Iconfont'
import { NavigationActions } from '../../../../utils'
import { ReturnDate } from '../../../../utils/utils'
import * as authService from '../../../../services/auth'

@connect(({ theme, ordersign }) => ({ ...theme, ...ordersign }))
class DeliveryDetail extends Component {
  constructor() {
    super()
    this.state = { activeSection: 'suibianxie', SubmitLoad: false }
  }

  _toggle(key) {
    if (this.state.activeSection == key) {
      this.setState({ activeSection: key + 'asd' })
    } else {
      this.setState({ activeSection: key })
    }
  }

  async confirmSign(data) {
    this.setState({ SubmitLoad: true })
    data.saleOutOrderItemInfoDtos.map(item => {
      item.signNum = item.mainNum
      item.persistStatus = 'upd'
    })
    const result = await authService
      .confirmSign(data.pkOrgId, data.saleOutOrderItemInfoDtos)
      .catch(err => console.log(err.response.data.message))
    if (result && result.status == '200') {
      this.props.dispatch(NavigationActions.back())
      this.props.navigation.state.params()
    }
    this.setState({ SubmitLoad: false })
  }

  renderItem(item, index) {
    return (
      <View key={index} style={{ backgroundColor: '#FFF' }}>
        <View style={{ padding: 10 }}>
          <View
            style={{
              flexDirection: 'row',
              paddingBottom: 10,
              borderBottomColor: '#EEE',
              borderBottomWidth: 1,
            }}
          >
            <Image source={png} style={{ width: 80, height: 80 }} />
            <View style={{ flex: 1, marginLeft: 10 }}>
              <Text
                numberOfLines={2}
                style={{
                  marginTop: 4,
                  fontSize: 13,
                  lineHeight: 18,
                  color: '#333',
                }}
              >
                {item.goodsDisplayName}
              </Text>
              <Text
                numberOfLines={1}
                style={{
                  marginTop: 4,
                  fontSize: 12,
                  lineHeight: 17,
                  color: '#666',
                }}
              >
                产品编码：{item.goodsCode}
              </Text>
              <TouchableOpacity
                activeOpacity={1}
                // onPress={() => this._toggle(index)}
                style={{
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                }}
              >
                <Text
                  numberOfLines={1}
                  style={{ fontSize: 12, lineHeight: 17, color: '#666' }}
                >
                  订单编号：{item.reqOrderCodes}
                </Text>
                <Icon name="icon-icon-xiala" size={18} color={'#999'} />
              </TouchableOpacity>
              {/* 下拉 */}
              {/* <Collapsible collapsed={this.state.activeSection !== index}>
                {item.b.map((orderItem, key) =>
                  this.orderIdRender(orderItem, key, item.b.length)
                )}
              </Collapsible> */}
            </View>
          </View>
        </View>
        <View
          style={{
            paddingHorizontal: 10,
            paddingBottom: 10,
            flexDirection: 'row',
            justifyContent: 'space-between',
            borderBottomColor: '#EEE',
            borderBottomWidth: 1,
          }}
        >
          <Text style={[styles.text333, { alignSelf: 'center' }]}>
            发货数量：{item.shouldAssistNum}
          </Text>
          <View
            style={{
              flexDirection: 'row',
              alignSelf: 'center',
              paddingRight: 10,
            }}
          >
            <Text style={[styles.text333, { alignSelf: 'center' }]}>
              签收数量：
            </Text>

            <Text style={styles.text333}>{item.assistNum}</Text>
          </View>
        </View>
      </View>
    )
  }

  orderIdRender(data, index, datalength) {
    return (
      <View key={index} style={{ marginBottom: 4 }}>
        <Text
          numberOfLines={1}
          style={{ fontSize: 12, lineHeight: 17, color: '#999' }}
        >
          <Text style={{ color: 'transparent' }}>订单编号：</Text>
          {data}
        </Text>
      </View>
    )
  }

  render() {
    const { appTheme, signDetailData } = this.props
    return (
      <View
        style={[
          styles.container,
          { backgroundColor: appTheme.backgroundColor },
        ]}
      >
        <StatusBar
          animated={true}
          barStyle={appTheme.barStyle}
          // barStyle={"dark-content"}
          backgroundColor={'transparent'}
          translucent={true}
        />
        {/* 头部 */}
        <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>
            {/* <TouchableOpacity
              style={{ position: "absolute", right: 10 }}
              onPress={() => {}}
            >
              <Text
                style={{
                  fontSize: 12,
                  lineHeight: 14,
                  letterSpacing: 0.14,
                  color: "#666"
                }}
              >
                复制
              </Text>
            </TouchableOpacity> */}
          </View>
        </View>

        {/* 单号行 */}
        <View
          style={{
            height: 30,
            backgroundColor: '#FFF',
            flexDirection: 'row',
            justifyContent: 'space-between',
            paddingHorizontal: 10,
          }}
        >
          <View style={{ justifyContent: 'center' }}>
            <Text style={styles.text666}>
              发货单号：<Text style={styles.text666}>
                {signDetailData.billCode}
              </Text>
            </Text>
          </View>
          <View />
          <Text style={[styles.text666, { alignSelf: 'center' }]}>
            {ReturnDate(signDetailData.billDate)}
          </Text>
        </View>
        <ScrollView
          style={{
            flex: 1,
            marginTop: 10,
          }}
        >
          <FlatList
            keyExtractor={item => item.id}
            data={signDetailData.saleOutOrderItemInfoDtos}
            extraData={this.state}
            renderItem={({ item, index }) => this.renderItem(item, index)}
          />
          {/* {data.map((sect, key) => this.renderItem(sect, key))} */}
        </ScrollView>
        <View
          style={{
            height: 45,
            backgroundColor: '#FFF',
            flexDirection: 'row',
            justifyContent: 'space-between',
          }}
        >
          <View style={{ paddingLeft: 10, alignSelf: 'center' }}>
            <Text style={styles.text999}>
              签收日期：{signDetailData.signTime
                ? ReturnDate(signDetailData.signTime, true)
                : ''}
            </Text>
            <Text style={styles.text999}>签收人：{signDetailData.siger}</Text>
          </View>
          {!this.state.SubmitLoad ? (
            <TouchableOpacity
              onPress={() => this.confirmSign(signDetailData)}
              style={{
                width: 120,
                backgroundColor: '#E14C46',
                justifyContent: 'center',
              }}
            >
              <Text
                style={{
                  fontSize: 14,
                  lineHeight: 20,
                  color: '#FFF',
                  alignSelf: 'center',
                }}
              >
                确认签收
              </Text>
            </TouchableOpacity>
          ) : (
            <View
              style={{
                width: 120,
                backgroundColor: '#E14C46',
                justifyContent: 'center',
              }}
            >
              <ActivityIndicator />
            </View>
          )}
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  text333: {
    fontSize: 12,
    lineHeight: 17,
    color: '#333',
  },
  text666: {
    fontSize: 12,
    lineHeight: 17,
    color: '#666',
  },
  text999: {
    fontSize: 12,
    lineHeight: 17,
    color: '#999',
  },
})

export default DeliveryDetail