import React, { Component } from 'react'
import {
  StyleSheet,
  ScrollView,
  View,
  Text,
  Image,
  Dimensions,
  StatusBar,
  TouchableOpacity,
  PixelRatio,
  FlatList,
} from 'react-native'
import { connect } from 'react-redux'

import png from '../../../static/images/defaultimg.jpg'
import Icon from '../../../components/Iconfont/Iconfont'
import { NavigationActions, createAction } from '../../../utils'
import Checkbox from '../../../components/checkbox/index'
import CountNum from '../../../components/CountNum'
import Collapsible from 'react-native-collapsible'
import { ImageBaseUrl } from '../../../utils/fetch/Fetchx'
import dataModel from '../../common/datamodel/dataModel'
import { accSub } from '../../../utils/utils'
import Setting from '../../mine/Setting'

const { width, height } = Dimensions.get('window')
@connect(({ theme, attention, orderlist }) => ({
  ...theme,
  ...attention,
  ...orderlist,
}))
class Unpaid extends Component {
  constructor(props) {
    super(props)
    this.state = {
      topNavIndex: 2,
      listIndex: true,
      selectAll: false,
    }
  }

  // 头部
  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>
          {/* <TouchableOpacity
            style={{ position: "absolute", right: 10 }}
            onPress={() => this.setState({ listIndex: !this.state.listIndex })}
          >
            <Text
              style={{
                fontSize: 14,
                lineHeight: 20,
                letterSpacing: 0.17,
                color: "#666"
              }}
            >
              {this.state.listIndex ? "展开" : "收起"}
            </Text>
          </TouchableOpacity> */}
        </View>
      </View>
    )
  }

  componentDidMount() {
    let date = new Date().getTime()
    this.props.dispatch(createAction('attention/getAttentionList')())
    this.props.dispatch(
      createAction('orderlist/getOrderList')({
        listData: [],
        pageInfo: { page: 0, size: 20 },
        touchCode: 0,
        searchInfo: {
          search_IN_saleModel: '01,03',
          search_GTE_orderDate_date: date - 7 * 24 * 3600 * 1000,
          search_LT_orderDate_date: date,
        },
      })
    )
  }

  replenList(item, index) {
    return (
      <View style={{ marginBottom: 10 }}>
        <View
          style={{
            flexDirection: 'row',
            padding: 10,
            backgroundColor: '#FFF',
          }}
        >
          <View style={{ flex: 1 }}>
            <View
              style={{
                flexDirection: 'row',
                paddingBottom: 10,
              }}
            >
              {/* {this.state.topNavIndex == 1 ? null : (
                <Checkbox
                  checkBoxColor={"#CCC"}
                  checked={item.isChecked}
                  size={26}
                  onChange={bool => {
                    item.isChecked = bool;
                    if (
                      this.props.attentData &&
                      this.props.attentData.every(
                        item => item.isChecked == true
                      )
                    ) {
                      this.setState({ selectAll: true });
                    } else {
                      this.setState({ selectAll: false });
                    }
                  }}
                />
              )} */}
              <Image
                source={
                  item.goodsImg ? { uri: ImageBaseUrl + item.goodsImg } : png
                }
                style={{ width: 80, height: 80, marginLeft: 10 }}
              />
              <View style={{ marginLeft: 10, flex: 1 }}>
                <Text style={{ fontSize: 14, lineHeight: 20, color: '#333' }}>
                  {item.goodsDisplayName}
                </Text>
                <Text
                  style={{
                    fontSize: 12,
                    lineHeight: 17,
                    color: '#666',
                    marginVertical: 3,
                  }}
                >
                  编码：{item.goodsCode}
                </Text>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                  }}
                >
                  {/* <Text style={{ fontSize: 12, lineHeight: 17, color: '#666' }}>
                    库存：{item.stock || 0} {item.mainNumUnitName}
                  </Text> */}
                  <View style={{ flexDirection: 'row' }}>
                    <TouchableOpacity
                      onPress={() => {
                        this.props.dispatch(
                          createAction('attention/delAttention')(item.id)
                        )
                      }}
                    >
                      <Icon
                        name="icon-icon-qingkong"
                        size={22}
                        color={'#666'}
                      />
                    </TouchableOpacity>
                    <TouchableOpacity
                      onPress={() => {
                        let postData = dataModel(
                          item,
                          CUSTOMERINFO.id,
                          CUSTOMERINFO.customerRankCode
                        )
                        this.props.dispatch(
                          createAction('shoppingcart/addShop')(postData)
                        )
                      }}
                    >
                      <Icon
                        name="icon-icon-gouwuche"
                        size={22}
                        color={'#666'}
                        style={{ marginLeft: 30 }}
                      />
                    </TouchableOpacity>
                  </View>
                </View>
              </View>
            </View>

            {/* <View
              style={{
                flexDirection: "row",
                justifyContent: "space-between",
                paddingTop: 10,
                marginLeft: 30,
                borderTopWidth: 1 / PixelRatio.get(),
                borderTopColor: "#EEE"
              }}
            >
              <View style={{ flexDirection: "row" }}>
                <CountNum
                  defaultValue={4}
                  size={24}
                  callback={nv => console.log(nv)}
                />
                <Text
                  style={{
                    fontSize: 12,
                    lineHeight: 17,
                    color: "#666",
                    alignSelf: "center",
                    marginLeft: 10
                  }}
                >
                  主数量：20
                </Text>
              </View>
              <Text
                style={{
                  fontSize: 12,
                  lineHeight: 17,
                  color: "#666",
                  alignSelf: "center"
                }}
              >
                金额：<Text style={{ fontSize: 14, color: "#E70013" }}>
                  {CURRENCY.currencySign}72000.00
                </Text>
              </Text>
            </View> */}
          </View>
        </View>
        {/* <Collapsible collapsed={this.state.listIndex}>
          <View style={{ paddingHorizontal: 10 }}>
            <View
              style={{
                paddingVertical: 10,
                flexDirection: "row",
                justifyContent: "space-between",
                borderBottomWidth: 1,
                borderBottomColor: "#EEE"
              }}
            >
              <Text style={{ fontSize: 12, lineHeight: 17, color: "#666" }}>
                {this.state.topNavIndex !== 1
                  ? `建议补货数量：100`
                  : `2018-12-12  已订购100件`}
              </Text>
              {this.state.topNavIndex !== 1 ? (
                <Text style={{ fontSize: 12, lineHeight: 17, color: "#666" }}>
                  在途量：15件
                </Text>
              ) : null}
            </View>
            <View
              style={{
                paddingTop: 10,
                flexDirection: "row",
                justifyContent: "space-between"
              }}
            >
              <Text style={{ fontSize: 12, lineHeight: 17, color: "#666" }}>
                {this.state.topNavIndex !== 1
                  ? `安全库存天数：100件`
                  : `建议补货数量：100`}
              </Text>
              <Text style={{ fontSize: 12, lineHeight: 17, color: "#666" }}>
                {this.state.topNavIndex !== 1
                  ? `日均销量：100件`
                  : `在途量：15件`}
              </Text>
            </View>
          </View>
        </Collapsible> */}
      </View>
    )
  }

  selectAll(bool) {
    for (let item of this.props.attentData) {
      if (item && !item.isChecked) {
        item.isChecked = bool
      } else {
        item.isChecked = bool
      }
    }

    this.props.dispatch(
      createAction('attention/updateAttention')({
        attentData: this.props.attentData,
      })
    )
    this.setState({ selectAll: bool })
  }

  render() {
    const { appTheme, attentData, listData } = this.props
    const { topNavIndex } = this.state
    let newListData = []
    if (
      listData &&
      listData.length > 0 &&
      listData[1] &&
      Object.keys(listData[1]).length > 0
    ) {
      listData.sort((a, b) => b.orderDate - a.orderDate)
      newListData = listData.slice(0, 20)
    }
    let FlatData = [],
      mapObj = {}
    if (topNavIndex == 1) {
      if (newListData && newListData.length > 0) {
        newListData.map(data => {
          if (data.reqOrderItems && data.reqOrderItems.length > 0) {
            data.reqOrderItems.map(item => {
              item.saleOrgName = data.saleOrgName
              item.saleOrgCode = data.saleOrgCode
              item.saleOrgId = data.saleOrgId
              mapObj[item.goodsId] = item
            })
          }
        })
        for (let objdata in mapObj) {
          FlatData.push(mapObj[objdata])
        }
      } else {
        FlatData = []
      }
    } else if (topNavIndex == 2) {
      FlatData = attentData
    }

    return (
      <View
        style={[
          styles.container,
          { backgroundColor: appTheme.backgroundColor },
        ]}
      >
        <StatusBar
          animated={true}
          barStyle={appTheme.barStyle}
          // barStyle={"dark-content"}
          backgroundColor={'transparent'}
          translucent={true}
        />
        {/* 头部导航 */}
        {this.header()}

        {/* 二级导航 */}
        <View
          style={{
            flexDirection: 'row',
            backgroundColor: '#FFF',
            paddingVertical: 5,
            paddingHorizontal: 10,
            borderBottomColor: '#eee',
            borderBottomWidth: 1 / PixelRatio.get(),
          }}
        >
          {/* <TouchableOpacity
            onPress={() => this.setState({ topNavIndex: 0, data: data1 })}
            style={{
              flex: 1,
              alignItems: "center"
            }}
          >
            <View
              style={{
                paddingVertical: 4,
                borderBottomColor:
                  this.state.topNavIndex == 0 ? "#E70013" : "transparent",
                borderBottomWidth: 2
              }}
            >
              <Text
                style={{
                  fontSize: 14,
                  lineHeight: 20,
                  letterSpacing: 0.17,
                  color: this.state.topNavIndex == 0 ? "#E70013" : "#333"
                }}
              >
                快速补货(99+)
              </Text>
            </View>
          </TouchableOpacity> */}
          <TouchableOpacity
            onPress={() => this.setState({ topNavIndex: 1, selectAll: false })}
            style={{ flex: 1, alignItems: 'center' }}
          >
            <View
              style={{
                paddingVertical: 4,
                borderBottomColor:
                  this.state.topNavIndex == 1 ? '#E70013' : 'transparent',
                borderBottomWidth: 2,
              }}
            >
              <Text
                style={{
                  fontSize: 14,
                  lineHeight: 20,
                  letterSpacing: 0.17,
                  color: this.state.topNavIndex == 1 ? '#E70013' : '#333',
                }}
              >
                最近购买
              </Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => {
              attentData.map(data => (data.isChecked = false))
              this.setState({ topNavIndex: 2, selectAll: false })
            }}
            style={{ flex: 1, alignItems: 'center' }}
          >
            <View
              style={{
                paddingVertical: 4,
                borderBottomColor:
                  this.state.topNavIndex == 2 ? '#E70013' : 'transparent',
                borderBottomWidth: 2,
              }}
            >
              <Text
                style={{
                  fontSize: 14,
                  lineHeight: 20,
                  letterSpacing: 0.17,
                  color: this.state.topNavIndex == 2 ? '#E70013' : '#333',
                }}
              >
                关注商品
              </Text>
            </View>
          </TouchableOpacity>
        </View>

        {/* 列表 */}
        <FlatList
          keyExtractor={(item, index) => index}
          data={FlatData}
          extraData={this.state}
          renderItem={({ item, index }) => this.replenList(item, index)}
        />

        {/* 底部加入购物车 */}
        {/* <View
          style={{
            height: 45,
            flexDirection: "row",
            borderTopColor: "#EEE",
            borderTopWidth: 1
          }}
        >
          <View
            style={{
              flex: 2,
              backgroundColor: "#FFF",
              flexDirection: "row",
              justifyContent: "space-between",
              paddingHorizontal: 10
            }}
          >
            <View style={{ flexDirection: "row", alignSelf: "center" }}>
              <View
                style={{
                  marginBottom: 4
                }}
              >
                {this.state.topNavIndex == 1 ? null : (
                  <Checkbox
                    checkBoxColor={"#CCC"}
                    checked={this.state.selectAll}
                    size={26}
                    onChange={bool => this.selectAll(bool)}
                    label={
                      <Text
                        style={{
                          alignSelf: "center",
                          marginBottom: 2,
                          marginLeft: 2,
                          color: "#333"
                        }}
                      >
                        全选
                      </Text>
                    }
                    labelStyle={{
                      fontSize: 14,
                      lineHeight: 20,
                      color: "#333",
                      alignSelf: "center"
                    }}
                  />
                )}
              </View>
            </View>
            <Text
              style={{
                alignSelf: "center",
                fontSize: 13,
                lineHeight: 18,
                color: "#333"
              }}
            >
              合计：<Text
                style={{
                  fontSize: 16,
                  color: "#E70013",
                  alignSelf: "center"
                }}
              >
                {CURRENCY.currencySign}72000.00
              </Text>
            </Text>
          </View>
          <View
            style={{
              flex: 1,
              backgroundColor: "#E70013",
              justifyContent: "center"
            }}
          >
            <Text
              style={{
                alignSelf: "center",
                fontSize: 14,
                lineHeight: 20,
                color: "#FFF"
              }}
            >
              加入购物车
            </Text>
          </View>
        </View> */}
      </View>
    )
  }
}

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

export default Unpaid