/* eslint-disable prefer-destructuring */
import React, { PureComponent } from 'react';
import { View, StyleSheet, Dimensions, ScrollView, Image, Text } from 'react-native';
import { WingBlank, Card, WhiteSpace, List, Button, Toast } from 'antd-mobile';
import { connect } from 'react-redux';
import PickerComponent from '../../../components/pickerComponent';
import { createAction } from '../../../utils/index';

const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
// create a component
@connect(({ userInfo, domain }) => ({ userInfo, domain }))
class UserInfoHomeScreen extends PureComponent {
  componentDidMount() {
    this.props.dispatch(createAction('domain/getUserInfo')());
  }
  onClick = () => {
    this.props.dispatch(createAction('domain/fetch')());
  };
  onPickerChange =(path) => {
    // console.log(path);
    this.props.dispatch(createAction('domain/fetchParam')(path));
  };
  onLogout = () => {
    console.log('注销');
    this.props.dispatch(createAction('domain/logout')());
  };
  onModify =() => {
    Toast.offline('功能正在完善中...', 2);
  };
  render() {
    const { list, listChildren, arrayPath, cols, userInfo } = this.props.domain;
    // console.log(arrayPath);
    console.log(userInfo);
    let datas = [];
    if (listChildren.length === 0) {
      datas = list;
    } else {
      datas = listChildren;
    }
    return (
      <View style={{ flex: 1 }}>
        {/* <View style={{ position: 'absolute', width, height, backgroundColor: '#06C1AE' }} /> */}
        <View style={styles.header}>
          <View style={styles.userContainer}>
            <Image style={styles.avatar} source={require('./touxiang.png')} />
          </View>
        </View>
        <View style={styles.card}>
          <WhiteSpace />
          <Card>
            <Card.Body>
              <List>
                <List.Item extra={userInfo.name}>姓名</List.Item>
              </List>
              <List >
                <List.Item extra={userInfo.id}>电话号码</List.Item>
              </List>
            </Card.Body>
          </Card>
          <WhiteSpace />
        </View>
        <View>
          <WhiteSpace />
          <WingBlank>
            <Button type="ghost" onClick={this.onModify}>修改密码</Button><WhiteSpace />
            <Button type="ghost" onClick={this.onLogout}>注销</Button><WhiteSpace />
          </WingBlank>
          <WhiteSpace />
        </View>
        <WingBlank>
          <View style={styles.pickerCom}>
            <PickerComponent onClick={this.onClick} onPickerChange={this.onPickerChange} data={datas} pathVal={arrayPath} cols={cols} />
          </View>
        </WingBlank>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  header: {
    backgroundColor: '#06C1AE',
    paddingBottom: 20,
  },
  icon: {
    width: 27,
    height: 27,
  },
  userContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 20,
  },
  avatar: {
    width: 80,
    height: 80,
    marginRight: 10,
    borderRadius: 40,
    borderWidth: 2,
    borderColor: '#ffffff',
  },
  pickerCom: {
    // marginTop: 100,
  },
  card: {
    // height: Dimensions.get('window').height / 2,
    marginBottom: 30,
  },
  cardText: {
    textAlign: 'right',
  },
});
export default UserInfoHomeScreen;
