xntalk / xntalk-rnapp

/**
 * Created by yzdd on 2018/3/11.
 */
import React, {Component} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  TextInput,
  TouchableOpacity
} from 'react-native';
import {line, width} from "../utils/publiscStyle";
import Interactable from 'react-native-interactable';
import Row from "../components/Row";
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view'
import OperationUnitModal from "./modal/OperationUnitModal";
import {AddTBStore} from "../logics/AddTBStore";
import {observer} from 'mobx-react';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#ececf1"
  },
  topCon: {
    width: width,
    height: 35,
    backgroundColor: "rgba(51,153,255,0.2)",
    flexDirection: "row",
    alignItems: "center",
    paddingLeft: 15
  },
  font10: {
    fontSize: 12,
    color: "#3399ff",
  },
  rightCon: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  unitView: {
    flexDirection: 'row',
    alignItems: "center",
    justifyContent: "space-between",
    width,
    height: 44,
    backgroundColor: "#FFFFFF",
    paddingLeft: 15,
    paddingRight: 15
  },
  icon5: {
    width: 8,
    height: 13,
    marginLeft: 12
  },
  font11: {
    fontSize: 17,
    color: "#ea281a"
  },
  font12: {
    fontSize: 17,
    color: "#666666"
  },
  font13: {
    fontSize: 17,
    color: "#bdbdbd"
  },
  font131: {
    fontSize: 17,
    color: "#000000"
  },
  infoHeader: {
    width,
    height: 31,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: "#ececf1",
    paddingLeft: 15
  },
  font14: {
    fontSize: 14,
    color: "#666666"
  },
  infoBody: {
    width,
    backgroundColor: "#FFFFFF"
  },
  infoBodyHeader: {
    width,
    height: 44,
    flexDirection: 'row',
    alignItems: 'center',
    paddingLeft: 15,
    paddingRight: 15,
    borderBottomWidth: line,
    borderBottomColor: "#eeeeee"
  },
  font15: {
    fontSize: 17,
    color: "#bdbdbd"
  },
  inputTitle: {
    padding: 0,
    fontSize: 17,
    flex: 1,
    marginLeft: 11
  },
  inputBody: {
    width,
    height: 98,
    paddingLeft: 15,
    paddingTop: 11,
    paddingRight: 15,
    paddingBottom: 0,
    textAlignVertical: 'top',
    fontSize: 14
  },
  detail: {
    width
  },
  addItem: {
    width,
    height: 60,
    backgroundColor: "#FFFFFF",
    flexDirection: 'row',
    alignItems: 'center',
    paddingLeft: 15,
    paddingRight: 15
  },
  inputItem: {
    width: width - 39 - 15 - 12 - 15,
    height: 60,
    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"
  },
  rowContent: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    paddingLeft: 65,
    borderBottomWidth: line,
    borderBottomColor: "#eeeeee"
  },
  personList: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    paddingLeft: 15,
    paddingRight: 15,
    paddingTop: 15,
    paddingBottom: 15,
    backgroundColor: "#FFFFFF",
    width
  },
  icon7: {
    width: 57,
    height: 57
  },
  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"
  },
  font19: {
    fontSize: 17,
    color: "#bdbdbd"
  },
  itemRight: {
    width: width - 11 - 15 - 36,
    height: 61,
    borderBottomWidth: line,
    borderBottomColor: "#dddddd",
    justifyContent: 'center'
  },
  font101: {
    fontSize: 17,
    color: "#333333"
  },
  font121: {
    fontSize: 12,
    color: "#808080"
  },
  detailItem: {
    width,
    height: 61,
    backgroundColor: "#FFFFFF",
    flexDirection: 'row',
    alignItems: 'center',
    paddingLeft: 11
  },
  icon12: {
    width: 36,
    height: 36,
    marginRight: 15
  },
});
const rightArrow = require("../assests/rightArrow.png");
const addRect = require("../assests/addRect.png");
const addCircle = require("../assests/addCircle.png");
const addPerson = require("../assests/addPerson.png");
const car = require("../assests/car.png");

@observer
export default class AddTB extends Component {
  static navigationOptions = ({navigation}) => {
    return {
      title: "新增差旅"
    }
  };

  addTBStore = new AddTBStore();

  constructor(props) {
    super(props);
    this.state = {
      damping: 1 - 0.6,
      tension: 300
    };
  }

  btnDelete = () => {

  };

  toAddDetail = () => {
    const {navigate} = this.props.navigation;
    navigate("AddDetail", {addTBStore: this.addTBStore});
  };

  //跳转到经营单元
  toUnit = () => {
    const {navigate} = this.props.navigation;
    navigate("OperationUnitModal", {addTBStore: this.addTBStore})
  };

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.topCon}>
          <Text style={styles.font10}>当天往返不算差旅，差旅应提前规划提交申请</Text>
        </View>
        <KeyboardAwareScrollView>
          <View style={{flex: 1}}>
            <TouchableOpacity style={styles.unitView} onPress={this.toUnit}>
              <Text style={styles.font11}>
                *{"  "}
                <Text style={styles.font12}>经营单元</Text>
              </Text>
              {
                this.addTBStore.unit === "" ?
                  <View style={styles.rightCon}>
                    <Text style={styles.font13}>请选择</Text>
                    <Image
                      source={rightArrow}
                      resizeMode={"contain"}
                      style={styles.icon5}
                    />
                  </View>
                  :
                  <View style={styles.rightCon}>
                    <Text style={styles.font131}>{this.addTBStore.unit}</Text>
                    <Image
                      source={rightArrow}
                      resizeMode={"contain"}
                      style={styles.icon5}
                    />
                  </View>
              }

            </TouchableOpacity>


            <View style={styles.info}>
              <View style={styles.infoHeader}>
                <Text style={styles.font14}>差旅详情</Text>
              </View>
              <View style={styles.infoBody}>
                <View style={styles.infoBodyHeader}>
                  <Text style={styles.font11}>*</Text>
                  <TextInput
                    style={[styles.inputTitle]}
                    placeholder={"差旅事由，如XX项目"}
                    placeholderTextColor={"#bdbdbd"}
                    underlineColorAndroid="transparent"
                  />
                </View>
                <TextInput
                  style={styles.inputBody}
                  placeholder={"备注，可详细描述发生的时间，地点，人员等，非必填。"}
                  placeholderTextColor={"#bdbdbd"}
                  underlineColorAndroid="transparent"
                  multiline={true}
                />
              </View>
            </View>

            <View style={styles.detail}>
              <View style={styles.infoHeader}>
                <Text style={styles.font14}>添加明细</Text>
              </View>

              <TouchableOpacity style={styles.addItem} onPress={this.toAddDetail}>
                <Image
                  source={addCircle}
                  resizeMode={"contain"}
                  style={styles.icon6}
                />
                <View style={styles.inputItem}>
                  <Text style={styles.font19}>添加明细</Text>
                </View>
              </TouchableOpacity>

              <Row
                onButtonPress={this.btnDelete}
                damping={this.state.damping}
                tension={this.state.tension}>
                <View style={styles.detailItem}>
                  <Image
                    source={car}
                    resizeMode={"contain"}
                    style={styles.icon12}
                  />
                  <View style={styles.itemRight}>
                    <Text style={styles.font101}>苏州 - 舟山</Text>
                    <Text style={styles.font121}>2018-09-09至2018-09-11</Text>
                  </View>
                </View>
              </Row>

            </View>

            <View style={styles.person}>
              <View style={styles.infoHeader}>
                <Text style={styles.font14}>审批人</Text>
              </View>

              <View style={styles.personList}>
                <Image
                  source={addPerson}
                  resizeMode={"contain"}
                  style={styles.icon7}
                />
              </View>

            </View>

          </View>
        </KeyboardAwareScrollView>
        <View style={styles.bottomGroup}>
          <View style={styles.leftSave}>
            <Text style={styles.font17}>保存</Text>
          </View>
          <TouchableOpacity style={styles.btnSave} onPress={()=>this.props.navigation.goBack()}>
            <Text style={styles.font18}>提交</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}