xntalk / xntalk-rnapp

/**
 * Created by yzdd on 2018/3/17.
 */
import React, {Component} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  TextInput,
  TouchableOpacity,
  Animated,
  ImageBackground,
  ScrollView,
  FlatList
} from 'react-native';
import {height, line, publicStyle, width} from "../utils/publiscStyle";

const styles = StyleSheet.create({
  headerTop: {
    width,
    height: 217 - 64,
    backgroundColor: "rgb(41,40,45)",
    paddingLeft: 15,
    justifyContent: "center"
  },
  font1: {
    fontSize: 24,
    color: "#ffffff",
    marginBottom: 6
  },
  font2: {
    fontSize: 12,
    color: "#ffffff",
    marginBottom: 2
  },
  statusView: {
    width: 55,
    height: 25,
    backgroundColor: "#ff9900",
    borderTopLeftRadius: 50,
    borderBottomLeftRadius: 50,
    position: "absolute",
    right: 0,
    top: 22,
    paddingLeft: 8,
    justifyContent: "center"
  },
  font4: {
    fontSize: 14,
    color: "#ffffff",
    backgroundColor: "transparent"
  },
  header: {
    width,
    height: 44,
    paddingLeft: 15,
    flexDirection: 'row',
    alignItems: 'center'
  },
  headerType: {
    width,
    height: 40,
    flexDirection: "row",
    alignItems: "center"
  },
  typeItem: {
    flex: 1,
    height: 40,
    alignItems: "center",
    justifyContent: "center"
  },
  font11: {
    fontSize: 14,
    color: "#333333"
  },
  lineBot: {
    width: 26,
    height: 4,
    backgroundColor: "#3399ff",
    borderRadius: 8,
  },
  detailSetup: {
    flex: 1,
    backgroundColor: "#FFFFFF"
  },
  setupItem: {
    width,
    height: 79,
    flexDirection: "row",
    alignItems: 'center'
  },
  leftTime: {
    width: 92 - 23 - 16,
    height: 79,
    alignItems: 'center'
  },
  lineBall: {
    width: 16,
    height: 79,
    alignItems: 'center'
  },
  ball1: {
    width: 16,
    height: 16,
    backgroundColor: "#52c26e",
    borderRadius: 16
  },
  line: {
    width: 1,
    backgroundColor: "#eeeeee"
  },
  font5: {
    fontSize: 10,
    color: "#999999",
    marginBottom: 3
  },
  icon11: {
    width: 51,
    height: 51,
    marginLeft: 16
  },
  portView: {
    width: width - 53 - 16 - 34,
    marginLeft: 17,
    marginRight: 17,
    height: 75,
    flexDirection: 'row',
    alignItems: 'center'
  },
  portMess: {
    flex: 1,
    marginLeft: 12,
    marginRight: 11
  },
  font6: {
    fontSize: 15,
    color: "#000000",
    backgroundColor: "transparent",
    marginBottom: 4
  },
  font7: {
    fontSize: 12,
    color: "#333333"
  },
  font8: {
    fontSize: 12,
    lineHeight: 15,
    backgroundColor: "transparent"
  },
  font9: {
    color: "#666666"
  },
  detailSetupItem: {
    height: 12 + 79,
    width,

  },
  itemTop: {
    width,
    height: 12,
    paddingLeft: 92 - 23 - 16,
  },
  itemLast: {
    width,
    paddingLeft: 92 - 23 - 16,
  },
  con: {
    flex: 1
  },
  listCon: {
    backgroundColor: "#FFFFFF"
  },
  detailItem: {
    width,
    height: 61,
    backgroundColor: "#FFFFFF",
    flexDirection: 'row',
    alignItems: 'center',
    paddingLeft: 11
  },
  icon12: {
    width: 36,
    height: 36,
    marginRight: 15
  },
  itemRight: {
    width: width - 11 - 15 - 36,
    height: 61,
    borderBottomWidth: line,
    borderBottomColor: "#dddddd",
    justifyContent: 'center'
  },
  font10: {
    fontSize: 17,
    color: "#333333"
  },
  font12: {
    fontSize: 12,
    color: "#808080"
  },
  font13: {
    fontSize: 14,
    color: "#666666"
  },
  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 port = require("../assests/port.png");
const Mask = require("../assests/Mask.png");

const bus = require("../assests/bus.png");
const car = require("../assests/car.png");
const plane = require("../assests/plane.png");
const train = require("../assests/train.png");

const data = [
  {id: 1, status: 0, name: "李四", project: ""},
  {id: 2, status: 1, name: "张三", project: "二级主管"},
  {id: 3, status: 2, name: "王五", project: "一级主管"},
  {id: 4, status: 0, name: "李四", project: ""},
];

const data2 = [
  {id: 1, type: bus},
  {id: 2, type: car},
  {id: 3, type: bus},
  {id: 4, type: train},
  {id: 5, type: plane},
  {id: 1, type: bus},
  {id: 2, type: car},
  {id: 3, type: bus},
  {id: 4, type: train},
  {id: 5, type: plane},
];

const typeData = [
  {id: 1, text: "审批历史"},
  {id: 2, text: "差旅明细"},
];

export default class TBOrderDetailEdit extends Component {
  static navigationOptions = ({navigation}) => {
    return {
      title: "李四的差旅单"
    }
  };

  render() {
    return (
      <View style={publicStyle.container}>
        <View style={styles.headerTop}>
          <Text style={styles.font1}>舟山项目</Text>
          <Text style={styles.font2}>日期：2018-02-28</Text>
          <Text style={styles.font2}>备注：舟山开会三天</Text>
          <View style={styles.statusView}>
            <Text style={styles.font4}>待提交</Text>
          </View>
        </View>
        <View style={[styles.header]}>
          <Text style={styles.font13}>差旅明细</Text>
        </View>
        <TBDetail/>
        <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>
    );
  }
}

class TBDetail extends Component {

  renderItem = (item, index) => {
    return <Item navigation={this.props.navigation} item={item} index={index}/>
  }

  render() {
    return (
      <View style={styles.con}>
        <FlatList
          style={{backgroundColor: "#FFFFFF"}}
          data={data2}
          keyExtractor={(item, index) => index}
          renderItem={({item, index}) => this.renderItem(item, index)}
        />
      </View>
    )
  }
}

class Item extends Component {
  render() {
    const {item} = this.props;
    return (
      <View style={styles.detailItem}>
        <Image
          source={item.type}
          resizeMode={"contain"}
          style={styles.icon12}
        />
        <View style={styles.itemRight}>
          <Text style={styles.font10}>苏州 - 舟山</Text>
          <Text style={styles.font12}>2018-09-09至2018-09-11</Text>
        </View>
      </View>
    )
  }
}