xntalk / xntalk-rnapp

/**
 * Created by yzdd on 2018/3/26.
 */
import React, {Component} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  TextInput,
  SectionList,
  TouchableOpacity
} from 'react-native';
import {line, publicStyle, width} from "../../utils/publiscStyle";
import {AddConsumptionDetailsStore} from "../../logics/AddConsumptionDetailsStore";
import {observer} from 'mobx-react';

const styles = StyleSheet.create({
  info: {
    width,
    height: 34,
    backgroundColor: "#FFFFFF",
    flexDirection: "row",
    alignItems: 'center',
    justifyContent: "space-between",
    paddingLeft: 15,
    paddingRight: 15,
    borderBottomWidth: 1,
    borderBottomColor: "#eeeeee"
  },
  font1: {
    fontSize: 12,
    color: "#999999"
  },
  item: {
    width,
    height: 56,
    backgroundColor: "#FFFFFF",
    paddingLeft: 15
  },
  itemWrap: {
    width: width - 15,
    height: 56,
    flexDirection: "row",
    alignItems: "center",
    borderTopColor: "#eeeeee",
    borderTopWidth: 1,
    paddingRight: 15
  },
  circle: {
    width: 20,
    height: 20,
    borderRadius: 20,
    borderWidth: line,
    borderColor: "#eeeeee"
  },
  icon1: {
    width: 36,
    height: 36,
    marginRight: 15,
    marginLeft: 10
  },
  itemCon: {
    flex: 1
  },
  icon2: {
    width: 13,
    height: 11,
    marginLeft: 6
  },
  itemConTop: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  font3: {
    fontSize: 17,
    color: "#333333"
  },
  font4: {
    fontSize: 12,
    color: "#808080"
  },
  addItem: {
    width,
    height: 57,
    backgroundColor: "#FFFFFF",
    flexDirection: 'row',
    alignItems: 'center',
    paddingLeft: 15,
    paddingRight: 15
  },
  inputItem: {
    width: width - 39 - 15 - 12 - 15,
    height: 57,
    borderBottomWidth: line,
    borderBottomColor: "#eeeeee",
    justifyContent: 'center'
  },
  icon6: {
    width: 39,
    height: 37,
    marginRight: 12
  },
  addInput: {
    fontSize: 17,
    padding: 0,
    textAlignVertical: "center",
    flex: 1
  },
  font16: {
    fontSize: 17,
    color: "#333333"
  },
  font19: {
    fontSize: 17,
    color: "#bdbdbd"
  },
  bottomGroup: {
    width,
    height: 44,
    backgroundColor: "#FFFFFF",
    flexDirection: 'row'
  },
  leftSave: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    paddingLeft: 15
  },
  font17: {
    fontSize: 16,
    color: "#000000"
  },
  font18: {
    fontSize: 16,
    color: "#ffffff"
  },
  btnSave: {
    width: 129,
    height: 44,
    alignItems: 'center',
    justifyContent: "center",
    backgroundColor: "#3399ff"
  },
});

const bangong = require("../../assets/bangong.png");
const car = require("../../assets/car.png");
const food = require("../../assets/food.png");
const fuli = require("../../assets/fuli.png");
const other = require("../../assets/other.png");
const shangwu = require("../../assets/shangwu.png");
const zhusu = require("../../assets/zhusu.png");
const addCircle = require("../../assets/addCircle.png");
const fujian = require("../../assets/fujian.png");

const sections = [
  {
    key: "2017-12-21  星期五",
    data: [{type: bangong, fujian: false}, {type: car, fujian: false}, {type: food, fujian: true},]
  },
  {
    key: "2017-12-20  星期五",
    data: [{type: fuli, fujian: true}, {type: other, fujian: false}, {type: shangwu, fujian: true},]
  },
  {key: "2017-12-19  星期五", data: [{type: zhusu, fujian: false},]},
  {key: "2017-12-18  星期五", data: [{type: zhusu, fujian: false},]},
  {key: "2017-12-17  星期五", data: [{type: zhusu, fujian: false},]}
];
@observer
export default class AddConsumptionDetails extends Component {

  static navigationOptions = ({navigation}) => {
    return {
      title: "添加消费明细"
    }
  };

  addConsumptionDetailsStore = new AddConsumptionDetailsStore();

  componentWillMount() {
    this.addConsumptionDetailsStore.from(sections);
  }

  _renderItem = (info) => {
    console.log(info)
    return <Item navigation={this.props.navigation} info={info}/>
  };

  sectionHeader = (info) => {
    return (
      <View style={styles.info}>
        <Text style={styles.font1}>2017-12-21 星期五</Text>
        <Text style={styles.font1}>支出:20.00</Text>
      </View>
    )
  };

  add = () => {
    const {goBack} = this.props.navigation;
    goBack();
  };


  render() {
    return (
      <View style={publicStyle.container}>
        <View style={{flex: 1}}>
          <SectionList
            renderItem={this._renderItem}
            renderSectionHeader={this.sectionHeader}
            sections={this.addConsumptionDetailsStore.list.slice(0)}
            keyExtractor={(item, index) => index}
            bounces={false}
            showsVerticalScrollIndicator={false}
          />
        </View>
        <View style={styles.bottomGroup}>
          <View style={styles.leftSave}>
            <Text style={styles.font17}>¥240.00</Text>
          </View>
          <TouchableOpacity style={styles.btnSave} onPress={this.add}>
            <Text style={styles.font18}>添加</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

@observer
class Item extends Component {
  touchSelect = () => {
    const {info} = this.props;
    info.item.isSelect = !info.item.isSelect;
  }

  render() {
    const {info} = this.props;
    console.log("info", info);
    return (
      <TouchableOpacity style={styles.item} onPress={this.touchSelect}>
        <View style={[styles.itemWrap, info.index === 0 ? {borderTopWidth: 0} : {}]}>
          {
            info.item.isSelect ?
              <View style={[styles.circle, {backgroundColor: "#3399ff"}]}/>
              :
              <View style={styles.circle}/>
          }

          <Image
            resizeMode={"contain"}
            source={info.item.type}
            style={styles.icon1}
          />
          <View style={styles.itemCon}>
            <View style={styles.itemConTop}>
              <Text style={styles.font3}>餐饮</Text>
              {
                info.item.fujian &&
                <Image
                  source={fujian}
                  resizeMode={"contain"}
                  style={styles.icon2}
                />
              }

            </View>
            <Text style={styles.font4} numberOfLines={1}>差旅费-餐饮-产品&项目&研发</Text>
          </View>
          <Text style={styles.font2}>20.00</Text>
        </View>
      </TouchableOpacity>
    )
  }
}