xntalk / xntalk-rnapp

/**
 * Created by yzdd on 2018/3/11.
 */
import React, {Component} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  TextInput,
  TouchableOpacity,
  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";
import TBOrderDetail from "./TBOrderDetail";
import TravelListLogic from "../logics/TravelListLogic";
import Picker from 'react-native-picker';
import {TBListStore} from "../logics/TBListStore";
import moment from "moment";

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#efeff4"
  },
  addConView: {
    width: width,
    height: 65,
    flexDirection: "row",
    alignItems: "center",
    paddingLeft: 15,
    paddingRight: 15,
    backgroundColor: "#FFFFFF"
  },
  icon1: {
    width: 47,
    height: 45,
    marginRight: 14
  },
  font1: {
    fontSize: 17,
    color: "#bdbdbd"
  },
  daySelectView: {
    width: width,
    height: 36,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingLeft: 15,
    paddingRight: 15,

  },
  icon2: {
    width: 21,
    height: 16
  },
  travelListView: {
    flex: 1,
  },
  itemView: {
    width: width - 15,
    height: 65,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingRight: 15
  },
  con: {
    backgroundColor: "#FFFFFF",
    paddingLeft: 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"
  },
  searchBtn: {
    width: width,
    height: 37,
    alignItems: 'center',
    justifyContent: 'flex-end',
    backgroundColor: "#FFFFFF"
  },
  btnCon: {
    width: width - 16,
    height: 28,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: "#eeeff3",
    borderRadius: 3
  },
  font7: {
    fontSize: 14,
    color: "#999999"
  },
  emptyCon: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: "#FFFFFF",
    flex: 1
  },
  font8: {
    fontSize: 14,
    color: "#999999",
    marginTop: 15
  }
});

const add = require("../assests/add.png");
const day = require("../assests/day.png");
const inLoad = require("../assests/inLoad.png");
const outLoad = require("../assests/outLoad.png");
const readyLoad = require("../assests/readyLoad.png");
const emptyOne = require("../assests/empty1.png");

let data = [];
let param = {};

//首页
@observer
export default class TBHome extends Component {
  logic = new TravelListLogic();

  static navigationOptions = ({navigation}) => {
    return {
      title: "差旅"
    }
  };
  tbListStore = new TBListStore();

  //初始化日期选择器
  initPicker = () => {
    let years = [];

    let months = [];
    //选取最近10年
    let nowYear = new Date().getFullYear();
    for (let i = 0; i < 10; i++) {
      years.push(nowYear - i + "年");
    }
    //选取12个月份
    for (let i = 1; i <= 12; i++) {
      months.push(i + "月");
    }

    Picker.init({
      isLoop: true,
      pickerConfirmBtnText: "确定",
      pickerCancelBtnText: "取消",
      pickerTitleText: "选择日期",
      pickerData: [years, months],
      selectedValue: [Number(new Date().getFullYear()) + "年", Number((new Date().getMonth()) + 1) + "月"],
      onPickerConfirm: data => {
        this.logic.list = [];
          this.setState({
              isRefreshing:true,
          });

        this.tbListStore.year = data[0].split("年")[0];
        this.tbListStore.month = data[1].split("月")[0];

          param.beginDate = moment({y:this.tbListStore.year,M:this.tbListStore.month * 1 - 1}).format("YYYY-MM-DD HH:mm:ss");
          param.endDate = moment({y:this.tbListStore.year,M:this.tbListStore.month}).format("YYYY-MM-DD HH:mm:ss");

        Promise.all([this.logic.travelHeadFind(param)]);
        this.setState({
            isRefreshing:true,
        });
      },
      onPickerCancel: data => {
        console.log(data);
      },
      onPickerSelect: data => {
        console.log(data);
      }
    });
  };

  async componentWillMount() {
    this.initPicker();
    // param.isMine = true;
    param.beginDate = moment([this.tbListStore.year, this.tbListStore.month]).format("YYYY-MM-DD HH:mm:ss");
    param.endDate = moment([this.tbListStore.year, this.tbListStore.month + 1]).format("YYYY-MM-DD HH:mm:ss");

    await this.logic.travelHeadFind(param);
      this.setState({
          isRefreshing:true,
      });
  }

  @observable
  direction = "center";


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

  toSearch = () => {
    const {navigate} = this.props.navigation;
    navigate("TBSearch")
  };

  toAdd = () => {
    const {navigate} = this.props.navigation;
    navigate("AddTB");
  };

  render() {
    data =this.logic.list;

    return (
      <View style={styles.container}>
        <View style={styles.searchBtn}>
          <TouchableOpacity style={styles.btnCon} onPress={this.toSearch}>
            <Text style={styles.font7}>搜索</Text>
          </TouchableOpacity>
        </View>
        <TouchableOpacity style={styles.addConView} onPress={this.toAdd}>
          <Image
            source={add}
            style={styles.icon1}
            resizeMode={"contain"}
          />
          <Text style={styles.font1}>新增差旅</Text>
        </TouchableOpacity>
        <View style={styles.daySelectView}>
          <Text style={styles.font2}>{this.tbListStore.year}-{this.tbListStore.month}月</Text>
          <TouchableOpacity onPress={() => Picker.show()}>
            <Image
              source={day}
              style={styles.icon2}
              resizeMode={"contain"}
            />
          </TouchableOpacity>
        </View>
        {
          data.length ?
            <FlatList
              style={styles.con}
              data={data}
              keyExtractor={(item, index) => index}
              renderItem={({item, index}) => this.renderItem(item, index)}
              ItemSeparatorComponent={() => <SeperatorLine width={width - 15}/>}
            /> : <EmptyList/>
        }

      </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}
        />;
    }
  };
  //跳转到差旅单明细
  toDetail = (item) => {
    const {navigate} = this.props.navigation;
    if (item.status === 3) {
      navigate("TBOrderDetailEdit")
    } else {
      navigate("TBOrderDetail", {item : item })
    }
  }
  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 (
      <TouchableOpacity style={styles.itemView} onPress={() => this.toDetail(item)}>
        <View style={styles.leftCon}>
          {
            this.getImage(item.status)
          }
          <View style={styles.titleCon}>
            <Text style={styles.font3}>{item.summary}</Text>
            <Text style={styles.font4}>{item.time}</Text>
          </View>
        </View>
        <View style={styles.rightCon}>
          {this.getStatus(item.status)}
          <Text style={styles.font5}>{item.daysCount + "天"}</Text>
        </View>
      </TouchableOpacity>
    )
  }
}

class EmptyList extends Component {
  render() {
    return (
      <View style={styles.emptyCon}>
        <Image
          source={emptyOne}
          resizeMode={"contain"}

        />
        <Text style={styles.font8}>暂无差旅记录</Text>
      </View>
    )
  }
}