xntalk / xntalk-rnapp

/**
 * Created by yzdd on 2018/3/11.
 */
import React, {Component} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  TextInput,
  FlatList
} from 'react-native';
import SearchBox from "../components/SearchBox";
import {width} from "../utils/publiscStyle";
import SeperatorLine from "../components/SeperatorLine";
import {observer} from 'mobx-react/native';
import {observable} from 'mobx';


const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  con: {
    backgroundColor: "#FFFFFF",
    paddingLeft: 15,
  },
  itemView: {
    width: width - 15,
    height: 65,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingRight: 15
  },
  icon3: {
    width: 47,
    height: 47,
    marginRight: 14
  },
  leftCon: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  titleCon: {
    height: 47,
    justifyContent: "center",
    alignItems: "flex-start"
  },
  font2: {
    fontSize: 16,
    color: "#000000"
  },
  font3: {
    fontSize: 17,
    color: "#000000"
  },
  font4: {
    fontSize: 12,
    color: "#999999",
    marginTop: 2
  },
  font5: {
    fontSize: 14,
    color: "#000000",
    marginTop: 2
  },
  font6: {
    fontSize: 14
  },
  rightCon: {
    justifyContent: 'center',
    alignItems: "flex-end"
  },
  emptyView: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: "#FFFFFF"
  },
  icon4: {
    width: 80,
    height: 80
  },
  font9: {
    fontSize: 14,
    color: "#999999",
    marginTop: 15
  }
});

const inLoad = require("../assests/inLoad.png");
const outLoad = require("../assests/outLoad.png");
const readyLoad = require("../assests/readyLoad.png");
const noResult = require("../assests/noResult.png")
const data = [
  {status: 0, mess: "舟山项目出差", time: "12-20 09:10", day: 1},
  {status: 2, mess: "舟山项目出差", time: "12-20 09:10", day: 2},
  {status: 1, mess: "舟山项目出差", time: "12-20 09:10", day: 3},
  {status: 0, mess: "宠儿宠物出差", time: "12-20 09:10", day: 4},
  {status: 3, mess: "舟山项目出差", time: "12-20 09:10", day: 5},
  {status: 1, mess: "上海出差", time: "12-20 09:10", day: 6},
  {status: 3, mess: "舟山项目出差", time: "12-20 09:10", day: 7},
  {status: 2, mess: "项目组出差", time: "12-20 09:10", day: 8},
];

//搜索页面
@observer
export default class TBSearch extends Component {
  static navigationOptions = ({navigation}) => {
    return {
      title: "差旅"
    }
  };

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

  @observable
  searchText = "";


  render() {
    return (
      <View style={styles.container}>
        <SearchBox
          onChangeText={(text) => this.searchText = text}
          value={this.searchText}
        />
        {
          this.searchText !== "" ?
            data.filter((v, i) => v.mess.indexOf(this.searchText) !== -1).length !== 0 ?
              <FlatList
                style={styles.con}
                data={data.filter((v, i) => v.mess.indexOf(this.searchText) !== -1)}
                keyExtractor={(item, index) => index}
                renderItem={({item, index}) => this.renderItem(item, index)}
                ItemSeparatorComponent={() => <SeperatorLine width={width - 15}/>}
              /> :
              <View style={styles.emptyView}>
                <Image
                  source={noResult}
                  resizeMode={"contain"}
                  style={styles.icon4}
                />
                <Text style={styles.font9}>无搜索结果</Text>
              </View>
            : null
        }
      </View>
    );
  }
}

class Item extends Component {
  getImage = (status) => {
    switch (status) {
      case 0:
        return <Image
          source={readyLoad}
          resizeMode={"contain"}
          style={styles.icon3}
        />;
      case 3:
        return <Image
          source={readyLoad}
          resizeMode={"contain"}
          style={styles.icon3}
        />;
      case 1:
        return <Image
          source={inLoad}
          resizeMode={"contain"}
          style={styles.icon3}
        />;
      case 2:
        return <Image
          source={outLoad}
          resizeMode={"contain"}
          style={styles.icon3}
        />;
    }
  };
  getStatus = (status) => {
    switch (status) {
      case 0:
        return <Text style={[styles.font6, {color: "#ff5c05"}]}>{"待审批"}</Text>;
      case 3:
        return <Text style={[styles.font6, {color: "#ff5c05"}]}>{"待提交"}</Text>;
      case 1:
        return <Text style={[styles.font6, {color: "#22ab38"}]}>{"已通过"}</Text>;
      case 2:
        return <Text style={[styles.font6, {color: "#ea281a"}]}>{"被驳回"}</Text>;
    }
  };

  render() {
    const {item} = this.props;
    return (
      <View style={styles.itemView}>
        <View style={styles.leftCon}>
          {
            this.getImage(item.status)
          }
          <View style={styles.titleCon}>
            <Text style={styles.font3}>{item.mess}</Text>
            <Text style={styles.font4}>{item.time}</Text>
          </View>
        </View>
        <View style={styles.rightCon}>
          {this.getStatus(item.status)}
          <Text style={styles.font5}>{item.day + "天"}</Text>
        </View>
      </View>
    )
  }
}