xntalk / xntalk-rnapp

/**
 * Created by yzdd on 2018/3/17.
 */
import React, {Component} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  TextInput,
  TouchableOpacity,
  FlatList
} from 'react-native';
import {publicStyle, width} from "../utils/publiscStyle";
import SeperatorLine from "../components/SeperatorLine";
import ReiOrderDetail from "./reimbursement/ReiOrderDetail";
import Picker from 'react-native-picker';
import ReimbursementStore from "../logics/ReimbursementStore";
import {observer} from 'mobx-react';
const styles = StyleSheet.create({
  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"
  },
  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"
  },
  emptyCon: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: "#FFFFFF",
    flex: 1
  },
  font8: {
    fontSize: 14,
    color: "#999999",
    marginTop: 15
  }
});

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

const data = [
  {status: 0, mess: "车票报销", time: "12-20 09:10", money: 230.00},
  {status: 1, mess: "住宿费报销", time: "12-20 09:10", money: 630.00},
];
@observer
export default class Reimbursement extends Component {

  static navigationOptions = ({navigation}) => {
    return {
      title: "报销"
    }
  };

  reimbursementStore = new ReimbursementStore();


  //初始化日期选择器
  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.reimbursementStore.year = data[0].split("年")[0];
        this.reimbursementStore.month = data[1].split("月")[0];
      },
      onPickerCancel: data => {
        console.log(data);
      },
      onPickerSelect: data => {
        console.log(data);
      }
    });
  };

  componentWillMount() {
    this.initPicker();
  }

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

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

  render() {
    return (
      <View style={publicStyle.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.reimbursementStore.year}-{this.reimbursementStore.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 1:
        return <Image
          source={inLoad}
          resizeMode={"contain"}
          style={styles.icon3}
        />;
    }
  };
  getStatus = (status) => {
    switch (status) {
      case 0:
        return <Text style={[styles.font6, {color: "#ff5c05"}]}>{"待结算"}</Text>;
      case 1:
        return <Text style={[styles.font6, {color: "#ff5c05"}]}>{"待审批"}</Text>;
    }
  };

  toDetail = () => {
    const {navigate} = this.props.navigation;
    navigate("ReiOrderDetail");
  }

  render() {
    const {item} = this.props;
    return (
      <TouchableOpacity style={styles.itemView} onPress={() => this.toDetail()}>
        <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}>{parseFloat(item.money).toFixed(2)}</Text>
        </View>
      </TouchableOpacity>
    )
  }
}

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

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