xntalk / xntalk-rnapp

/**
 * Created by yzdd on 2018/3/14.
 */
import React, {Component} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  TextInput,
  Animated,
  TouchableOpacity,
  ScrollView
} from 'react-native';
import {__IOS__, height, line, publicStyle, width} from "../utils/publiscStyle";
import {DetailItem} from "../logics/AddTBStore";
import DateTimePicker from 'react-native-modal-datetime-picker';
import {observer} from 'mobx-react';
import {observable} from 'mobx';
import moment from 'moment';

import {KeyboardAwareScrollView} from "react-native-keyboard-aware-scroll-view"


const styles = StyleSheet.create({
  headerType: {
    width,
    height: 44,
    backgroundColor: "#FFFFFF",
    flexDirection: "row",
    alignItems: "center"
  },
  typeItem: {
    flex: 1,
    height: 44,
    alignItems: "center",
    justifyContent: "center"
  },
  font1: {
    fontSize: 14,
    color: "#333333"
  },
  lineBot: {
    width: 26,
    height: 4,
    backgroundColor: "#3399ff",
    borderRadius: 8,
  },
  header: {
    width,
    height: 48,
    backgroundColor: "#FFFFFF"
  },
  setView: {
    width,
    height: 174,
    backgroundColor: "#FFFFFF",
    paddingLeft: 15,
    paddingTop: 11
  },
  placeView: {
    flexDirection: "row",
    alignItems: 'center',
    paddingRight: 15,
  },
  icon8: {
    width: 28,
    height: 28
  },
  placeItem: {
    width: (width - 28 - 30) / 2,
    height: 56,
    borderBottomWidth: line,
    borderBottomColor: "#dddddd",
    justifyContent: "center",
  },
  font2: {
    fontSize: 18,
    color: "#9f9e9e"
  },
  font22: {
    fontSize: 18,
    color: "#000000"
  },
  dateView: {
    flexDirection: "row",
    alignItems: 'center',
    paddingRight: 15,
  },
  historyView: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center'
  },
  icon9: {
    width: 20,
    height: 20,
    marginRight: 17
  },
  historyItem: {
    backgroundColor: "#f3f3f3",
    borderRadius: 2,
    height: 22,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 10,
    paddingLeft: 5,
    paddingRight: 5
  },
  font4: {
    fontSize: 12,
    color: "#999999"
  },
  remarkView: {
    width,
    height: 124,
    backgroundColor: "#FFFFFF",
    marginTop: 9
  },
  remarkInput: {
    width,
    height: 124,
    paddingTop: 15,
    paddingLeft: 15,
    paddingBottom: 15,
    paddingRight: 15,
    fontSize: 16,
    textAlignVertical: 'top'
  },
  btnGroup: {
    width,
    height: 44,
    backgroundColor: "#FFFFFF",
    flexDirection: 'row',
    alignItems: 'center',
    position: 'absolute',
    top: height - (__IOS__ ? 64 : 64) - 44,
    left: 0,
  },
  font10: {
    fontSize: 16,
    color: "#000000"
  },
  btn: {
    backgroundColor: "#3399ff",
    width: 130,
    height: 44,
    alignItems: 'center',
    justifyContent: 'center'
  },
  font11: {
    fontSize: 16,
    color: "#ffffff"
  },
  leftCon: {
    flex: 1,
    paddingLeft: 15
  }
});


const typeData = [
  {id: 1, text: "汽车"},
  {id: 2, text: "火车"},
  {id: 3, text: "飞机"},
  {id: 4, text: "自驾"},
  {id: 5, text: "其他"},
];

const returnTo = require("../assests/returnTo.png");
const history = require("../assests/history.png");

@observer
export default class AddDetail extends Component {

  static navigationOptions = ({navigation}) => {
    return {
      title: "新增明细"
    }
  };

  state = {
    isDateTimePickerVisible: false,
  };

  @observable
  timeType = 0;

  _showDateTimePicker = () => this.setState({isDateTimePickerVisible: true});

  _hideDateTimePicker = () => this.setState({isDateTimePickerVisible: false});

  _handleDatePicked = (date) => {
    console.log('A date has been picked: ', date);
    if (this.timeType === 1) {
      this.detailItem.startTime = moment(date).format("YYYY-MM-DD");
    } else {
      this.detailItem.endTime = moment(date).format("YYYY-MM-DD");
    }
    this._hideDateTimePicker();
  };

  detailItem = new DetailItem();

  constructor(props) {
    super(props);
    this.state = {
      lineLeft: new Animated.Value((width / 5 - 26) / 2),
    }
  }

  selectType = (index) => {
    Animated.timing(
      this.state.lineLeft,
      {
        toValue: ((width / 5 - 26) / 2) + (index * width / 5),
        duration: 200
      }
    ).start();
  };

  //选择出发地
  toSelectPlaceStart = () => {
    const {navigate} = this.props.navigation;
    navigate("PlaceDeparture", {title: "出发地", detailItem: this.detailItem, type: 1})
  };

  //选择目的地
  toSelectPlaceEnd = () => {
    const {navigate} = this.props.navigation;
    navigate("PlaceDeparture", {title: "目的地", detailItem: this.detailItem, type: 2})
  };

  //选择时间
  selectTime = (type) => {
    this.timeType = type;
    this._showDateTimePicker();
  };

  //交换地点
  changePlace = () => {
    let pre = this.detailItem.startPlace;
    this.detailItem.startPlace = this.detailItem.endPlace;
    this.detailItem.endPlace = pre;
  };
  //设置出发时间和结束时间
  toSetPlace = (place) => {
    console.log(place, place.split("-")[0])
    let prePlace = place.split("-")[0].trim();
    let endPlace = place.split("-")[1].trim();
    console.log(prePlace, endPlace);
    this.detailItem.startPlace = [{name: prePlace}];
    this.detailItem.endPlace = [{name: endPlace}];
  }

  render() {
    return (
      <KeyboardAwareScrollView>
        <View style={{
          backgroundColor: "#ececf1",
          width,
          height: height - (__IOS__ ? 64 : 64),
        }}>
          <View style={[styles.header, publicStyle.borderBottomStyle]}>
            <View style={styles.headerType}>
              {
                typeData.map((v, i) => {
                  return (
                    <TouchableOpacity key={i} style={styles.typeItem} onPress={() => this.selectType(i)}>
                      <Text style={styles.font1}>{v.text}</Text>
                    </TouchableOpacity>
                  )
                })
              }
            </View>
            <Animated.View style={[styles.lineBot, {marginLeft: this.state.lineLeft}]}/>
          </View>

          <View style={styles.setView}>
            <View style={styles.placeView}>
              <TouchableOpacity style={[styles.placeItem, {alignItems: 'flex-start'}]}
                                onPress={this.toSelectPlaceStart}>
                {
                  this.detailItem.startPlace ?
                    <Text style={styles.font22}>{this.detailItem.startPlace[0].name}</Text>
                    :
                    <Text style={styles.font2}>出发地</Text>
                }
              </TouchableOpacity>
              <TouchableOpacity onPress={this.changePlace}>
                <Image
                  source={returnTo}
                  resizeMode={"contain"}
                  style={styles.icon8}
                />
              </TouchableOpacity>
              <TouchableOpacity style={[styles.placeItem, {alignItems: 'flex-end'}]} onPress={this.toSelectPlaceEnd}>
                {
                  this.detailItem.endPlace ?
                    <Text style={styles.font22}>{this.detailItem.endPlace[0].name}</Text>
                    :
                    <Text style={styles.font2}>目的地</Text>
                }
              </TouchableOpacity>
            </View>
            <View style={styles.dateView}>
              <TouchableOpacity style={[styles.placeItem, {height: 50, alignItems: 'flex-start'}]}
                                onPress={() => this.selectTime(1)}>
                {
                  this.detailItem.startTime === "" ?
                    <Text style={styles.font2}>开始日期</Text>
                    :
                    <Text style={styles.font22}>{this.detailItem.startTime}</Text>
                }

              </TouchableOpacity>
              <View style={styles.icon8}/>
              <TouchableOpacity style={[styles.placeItem, {height: 50, alignItems: 'flex-end'}]}
                                onPress={() => this.selectTime(2)}>
                {
                  this.detailItem.endTime === "" ?
                    <Text style={styles.font2}>结束日期</Text>
                    :
                    <Text style={styles.font22}>{this.detailItem.endTime}</Text>
                }
              </TouchableOpacity>
            </View>
            <View style={styles.historyView}>
              <Image
                source={history}
                resizeMode={"contain"}
                style={styles.icon9}
              />
              <ScrollView
                horizontal={true}
                showsHorizontalScrollIndicator={false}
              >
                {
                  [1, 2, 3, 4, 5].map((v, i) => {
                    return (
                      <TouchableOpacity key={i} style={styles.historyItem} onPress={() => this.toSetPlace("苏州 - 舟山")}>
                        <Text style={styles.font4}>苏州 - 舟山</Text>
                      </TouchableOpacity>
                    )
                  })
                }

              </ScrollView>
            </View>
          </View>

          <View style={styles.remarkView}>
            <TextInput
              style={styles.remarkInput}
              placeholder={"添加备注（非必填）"}
              placeholderTextColor={"#bdbdbd"}
              underlineColorAndroid="transparent"
              multiline={true}
            />
          </View>

        </View>
        <View style={styles.btnGroup}>
          <View style={styles.leftCon}>
            <Text style={styles.font10}>继续添加</Text>
          </View>
          <TouchableOpacity style={styles.btn}>
            <Text style={styles.font11}>完成</Text>
          </TouchableOpacity>
        </View>
        <DateTimePicker
          isVisible={this.state.isDateTimePickerVisible}
          onConfirm={this._handleDatePicked}
          onCancel={this._hideDateTimePicker}
          cancelTextIOS={"取消"}
          confirmTextIOS={"确定"}
          customTitleContainerIOS={
            <View style={{alignItems: 'center', justifyContent: 'center'}}>

            </View>
          }
          maximumDate={new Date()}
        />
      </KeyboardAwareScrollView>
    );
  }
}