import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  Image,
  Text,
  StatusBar,
  Alert,
  ImageBackground,
  PixelRatio,
  TouchableOpacity,
  ScrollView,
} from 'react-native'
import { connect } from 'react-redux'
import { createAction, NavigationActions } from '../../utils'
import Icon from '../../components/Iconfont/Iconfont'
import CodePush from 'react-native-code-push'
import Background from '../../static/images/mine-background.png'
import TX from '../../static/images/mine-TX.png'
import { ScaleUtil } from '../../utils/utils'
import MineHome_0 from '../../static/images/MineHome-0.png'
import MineHome_1 from '../../static/images/MineHome-1.png'
import MineHome_2 from '../../static/images/MineHome-2.png'
import MineHome_3 from '../../static/images/MineHome-3.png'
import MineHome_4 from '../../static/images/MineHome-4.png'
import MineHome_5 from '../../static/images/MineHome-5.png'
import { ppHOC, POC, extHOC } from './highComponent'
import { isIphoneX } from '../common/theme/config'

// @CodePush({
//   checkFrequency: CodePush.CheckFrequency.ON_APP_RESUME,
//   installMode: CodePush.InstallMode.ON_NEXT_RESUME
// })
@connect(({ theme, mine_header }) => ({ ...theme, ...mine_header }))
class MineHome extends Component {
  constructor(props) {
    super(props)
    this.state = {
      huanfu: '',
    }
  }

  static navigationOptions = {
    tabBarLabel: ({ tintColor }) => (
      <Text
        style={{
          alignSelf: 'center',
          marginBottom: 2,
          fontSize: 10,
          lineHeight: 14,
          letterSpacing: 0.12,
          color: tintColor,
        }}
      >
        我的
      </Text>
    ),
    tabBarIcon: ({ focused, tintColor }) =>
      tintColor == '#333' ? (
        <View style={{ paddingTop: 7 }}>
          <Icon name="icon-icon-wode" size={28} color={tintColor} />
        </View>
      ) : (
        <View style={{ paddingTop: 7 }}>
          <Icon name="icon-icon-wodexuanzhong" size={28} color={tintColor} />
        </View>
      ),
  }

  hotDog() {
    //   //访问慢,不稳定
    CodePush.checkForUpdate().then(update => {
      if (!update) {
        Alert.alert('提示', '已是最新版本--', [
          {
            text: 'Ok',
            onPress: () => {
              console.log('点了OK')
            },
          },
        ])
      } else {
        CodePush.sync({
          // deploymentKey:
          //   "ODZaOd9nY_uCJ1PiwkHL-CUb23lr8504fd21-5b83-418e-89df-e737a5111208",
          // updateDialog: {
          //   optionalIgnoreButtonLabel: "稍后",
          //   optionalInstallButtonLabel: "立即更新",
          //   optionalUpdateMessage: "有新版本了，是否更新？",
          //   title: "更新提示"
          // },
          updateDialog: true,
          installMode: CodePush.InstallMode.IMMEDIATE,
        })
      }
    })
  }

  codePushStatusDidChange(status) {
    switch (status) {
      case codePush.SyncStatus.CHECKING_FOR_UPDATE:
        console.log('Checking for updates.')
        break
      case codePush.SyncStatus.DOWNLOADING_PACKAGE:
        console.log('Downloading package.')
        break
      case codePush.SyncStatus.INSTALLING_UPDATE:
        console.log('Installing update.')
        break
      case codePush.SyncStatus.UP_TO_DATE:
        console.log('Up-to-date.')
        break
      case codePush.SyncStatus.UPDATE_INSTALLED:
        console.log('Update installed.')
        break
    }
  }

  codePushDownloadDidProgress(progress) {
    console.log(
      progress.receivedBytes + ' of ' + progress.totalBytes + ' received.'
    )
  }

  componentDidMount = () => {
    const date = new Date().getTime()
    // 信用当前可用余额
    // this.RequestOthers('mine_header/CreditSaga', {
    //   customer: CUSTOMERINFO.id,
    // })
    // 费用当前可用余额
    // this.RequestOthers('mine_header/CastBalSaga', {
    //   search_customer: CUSTOMERINFO.id,
    //   search_billDate_date: date,
    // })
    //  可用财务组织、销售组织
    this.RequestOthers('mine/getCusSup', {
      customerId: CUSTOMERINFO.id,
      customerRankCode: CUSTOMERINFO.customerRankCode,
      comeFrom: 'castBalance',
    })

    // 账户余额
    this.RequestOthers('mine_header/MaxBalanceSaga', {
      customerId: CUSTOMERINFO.id,
    })
  }

  // 跳转
  NavigateToOthers(routeName, params) {
    this.props.dispatch(
      NavigationActions.navigate({ routeName: routeName, params: params })
    )
  }

  // 请求
  RequestOthers(actionName, actionSearch) {
    this.props.dispatch(createAction(actionName)(actionSearch))
  }

  skinChange = () => {
    if (this.state.huanfu == 0) {
      this.RequestOthers('theme/getTheme', { getColor: 'black' })
      this.state.huanfu = 1
    } else {
      this.RequestOthers('theme/getTheme', { getColor: 'white' })
      this.state.huanfu = 0
    }
  }

  logout = () => {
    this.RequestOthers('app/logout')
  }

  TouchList(item) {
    let returnVal = [],
      ImageView = []
    for (let i = 0; i < item.length; i++) {
      if (item[i].text == '应付对账') {
        ImageView = (
          <Image source={MineHome_0} style={{ width: 28, height: 28 }} />
        )
      } else if (item[i].text == '费用对账') {
        ImageView = (
          <Image source={MineHome_1} style={{ width: 28, height: 28 }} />
        )
      } else if (item[i].text == '基本信息') {
        ImageView = (
          <Image source={MineHome_2} style={{ width: 28, height: 28 }} />
        )
      } else if (item[i].text == '客户收货地址') {
        ImageView = (
          <Image source={MineHome_3} style={{ width: 28, height: 28 }} />
        )
      } else if (item[i].text == '客户联系人') {
        ImageView = (
          <Image source={MineHome_4} style={{ width: 28, height: 28 }} />
        )
      } else if (item[i].text == '我的供应商') {
        ImageView = (
          <Image source={MineHome_5} style={{ width: 28, height: 28 }} />
        )
      }

      returnVal.push(
        <TouchableOpacity
          key={i}
          onPress={() => item[i].onTouch()}
          style={{
            paddingVertical: 10,
            flexDirection: 'row',
            justifyContent: 'space-between',
            borderTopWidth: 1 / PixelRatio.get(),
            borderTopColor: '#EEE',
          }}
        >
          <View
            style={{
              flexDirection: 'row',
            }}
          >
            {/* <View
              style={{
                width: 19,
                height: 19,
                backgroundColor: "#FD325A",
                marginRight: 10
              }}
            /> */}
            {ImageView}
            <Text
              style={{
                fontSize: 14,
                lineHeight: 20,
                color: '#333',
                marginLeft: 5,
                alignSelf: 'center',
              }}
            >
              {item[i].text}
            </Text>
          </View>
          <Icon name="icon-icon-jianjinzhishiqi" size={24} color={'#CCC'} />
        </TouchableOpacity>
      )
    }
    return (
      <View
        style={{
          marginTop: 10,
          paddingHorizontal: 10,
          backgroundColor: '#FFF',
        }}
      >
        {returnVal}
      </View>
    )
  }

  render() {
    const { appTheme, creditBalance, CastDdlData, maxBalData } = this.props
    // 对账
    const duizhang = [
      {
        text: '应付对账',
        onTouch: () => this.NavigateToOthers('PayReconciliation'),
      },
      {
        text: '费用对账',
        onTouch: () => {
          this.RequestOthers('mine/getOrgans', { searchMore: true })
          this.RequestOthers('mine/getCusSup', {
            customerId: CUSTOMERINFO.id,
            customerRankCode: CUSTOMERINFO.customerRankCode,
            forUse: 'CostReconciliation',
          })
        },
      },
    ]

    const basicInfo = [
      {
        text: '基本信息',
        onTouch: () =>
          this.RequestOthers('mine/getBasic', { customerId: CUSTOMERINFO.id }),
      },
      {
        text: '客户收货地址',
        onTouch: () =>
          this.RequestOthers('mine/getCusAdd', { customerId: CUSTOMERINFO.id }),
      },
      {
        text: '客户联系人',
        onTouch: () =>
          this.RequestOthers('mine/getContacts', {
            customerId: CUSTOMERINFO.id,
          }),
      },
      // {
      //   text: '付款单登记',
      //   onTouch: () => this.NavigateToOthers('PaymentRegister'),
      // },
      // {
      //   text: '支付单',
      //   onTouch: () => this.NavigateToOthers('RechargeHome'),
      // },
    ]

    const mySupplier = [
      {
        text: '我的供应商',
        onTouch: () =>
          this.RequestOthers('mine/getCusSup', {
            customerId: CUSTOMERINFO.id,
            customerRankCode: CUSTOMERINFO.customerRankCode,
            comeFrom: 'supplier',
            toOthers: true,
          }),
      },
    ]
    return (
      <View
        style={[
          styles.container,
          { backgroundColor: appTheme.backgroundColor },
        ]}
      >
        <StatusBar
          animated={true}
          barStyle={appTheme.barStyle}
          // barStyle={"dark-content"}
          backgroundColor={'transparent'}
          translucent={true}
        />
        <View style={{ paddingBottom: 10, backgroundColor: '#FFF' }}>
          <ImageBackground
            source={Background}
            style={{ height: isIphoneX() ? 159 : 135 }}
          >
            <View
              style={{
                marginTop: isIphoneX() ? 35 : 30,
                paddingHorizontal: 10,
                flexDirection: 'row',
                justifyContent: 'space-between',
                backgroundColor: 'transparent',
              }}
            >
              <Icon
                name="icon-shezhi"
                size={26}
                color={'#FFF'}
                onPress={() => this.NavigateToOthers('Setting')}
              />
              {/* <Icon name="icon-xitong" size={20} color={"#FFF"} /> */}
            </View>
            <View
              style={{
                position: 'absolute',
                top: '30%',
                alignSelf: 'center',
                backgroundColor: 'transparent',
              }}
            >
              <Image
                source={TX}
                style={{
                  width: 60,
                  height: 60,
                  marginLeft: 5,
                  alignSelf: 'center',
                }}
              />
              <Text
                style={{
                  fontSize: 14,
                  lineHeight: 15,
                  color: '#FFF',
                }}
              >
                {/* {USERINFO.userName} */}
                {CUSTOMERINFO.name}
              </Text>
            </View>
          </ImageBackground>
          {CUSTOMERINFO.customerRankCode == 1 ? (
            <View
              style={{
                marginTop: 20,
                flexDirection: 'row',
              }}
            >
              {/* <TouchableOpacity
                onPress={() => this.NavigateToOthers('Account')}
                style={{
                  flex: 1,
                  paddingVertical: 8,
                  alignItems: 'center',
                }}
              >
                <Text
                  style={{ fontSize: 14, lineHeight: 20, color: '#E14C46' }}
                >
                  {CURRENCY.currencySign}
                  {ScaleUtil(maxBalData || 0, CURRENCY.currencyAmountScale)}
                </Text>
                <Text
                  style={{
                    marginTop: 7,
                    fontSize: 14,
                    lineHeight: 20,
                    color: '#333',
                  }}
                >
                  账户
                </Text>
              </TouchableOpacity> */}
              <View style={{ height: 52, backgroundColor: '#EEE', width: 1 }} />
              {/* <TouchableOpacity
                onPress={() => {
                  this.RequestOthers('mine/getOrgans', { forUse: 'tiaozhuan' })
                }}
                style={{
                  flex: 1,
                  paddingVertical: 10,
                  alignItems: 'center',
                }}
              >
                <Text
                  style={{ fontSize: 14, lineHeight: 20, color: '#E14C46' }}
                >
                  {CURRENCY.currencySign}
                  {ScaleUtil(CastDdlData, CURRENCY.currencyAmountScale)}
                </Text>
                <Text
                  style={{
                    marginTop: 7,
                    fontSize: 14,
                    lineHeight: 20,
                    color: '#333',
                  }}
                >
                  费用
                </Text>
              </TouchableOpacity> */}
              <View style={{ height: 52, backgroundColor: '#EEE', width: 1 }} />
              {/* <TouchableOpacity
                onPress={() => {
                  this.NavigateToOthers('Credit')
                }}
                style={{
                  flex: 1,
                  paddingVertical: 10,
                  alignItems: 'center',
                }}
              >
                <Text
                  style={{ fontSize: 14, lineHeight: 20, color: '#E14C46' }}
                >
                  {CURRENCY.currencySign}
                  {ScaleUtil(creditBalance, CURRENCY.currencyAmountScale)}
                </Text>
                <Text
                  style={{
                    marginTop: 7,
                    fontSize: 14,
                    lineHeight: 20,
                    color: '#333',
                  }}
                >
                  信用
                </Text>
              </TouchableOpacity> */}
            </View>
          ) : null}
        </View>

        <ScrollView style={{ flex: 1 }}>
          {/* {CUSTOMERINFO.customerRankCode == 1 ? this.TouchList(duizhang) : null} */}
          {this.TouchList(basicInfo)}
          {this.TouchList(mySupplier)}
          {/* {this.TouchList([
            { text: "换肤", onTouch: () => this.skinChange() },
            {
              text: "更新",
              onTouch: () => this.hotDog()
            }
          ])} */}
        </ScrollView>
      </View>
    )
  }
}

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

// MineHome = CodePush(MineHome);

export default MineHome