index/approval/projectReport

import {
  Text,
  View,
  ScrollView,
  TouchableOpacity,
  StyleSheet,
  SafeAreaView,
  TextInput,
  KeyboardAvoidingView
  // findNodeHandle,
  // UIManager
} from 'react-native';
import React from 'react';
import PropTypes from 'prop-types';
import { createForm } from 'rc-form';
import { connect } from 'react-redux';
import { NavigationEvents } from 'react-navigation';
import ApprovalInfos from '../components/ApprovalInfos';
import ApprovalNodes from '../components/ApprovalNodes';

import GlobalStyles from '../../../assets/globalStyles';
import { ColorCommon, GapCommon } from '../../../assets/publicConsts';
import {
  Cell,
  CommonButton,
  RightArrow,
  ReportCustomer,
  ReportProject,
  ReportProduct,
  ReportOther,
  ReportProve,
  OtherVehicle,
  Dialog,
  Toast,
  Radio,
} from '../../../components';
import { ApprovalOptions, ApprovalBack } from '../consts';
import { REPORT_LIST_CHECK, REPORT_LIST_SUBMIT } from '../../../store/actions/reportList';

const list = [
  {
    id: '1', label: '项目信息', url: 'ProjectInformation', icon: ReportProject,
  },
  {
    id: '2', label: '客户信息', url: 'CusInfomation', icon: ReportCustomer
  },
  {
    id: '3', label: '车辆信息', url: 'VehicleForm', icon: OtherVehicle
  },
  {
    id: '4', label: '产品信息', url: 'ProductForm', icon: ReportProduct,
  },
  {
    id: '5', label: '其他信息', url: 'OtherList', icon: ReportOther,
  },
  {
    id: '6', label: '证明文件', url: 'ProveFileList', icon: ReportProve,
  },
];

const status = {
  0: '待完成',
  1: '已完成'
};
let flagSubmit = '';
// 审批中
class Approvaling extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    // tabBarVisible: true,
    title: navigation.getParam('STATUSNAME'),

    headerRight: navigation.getParam('PAGESTATUS') === 20
      ? null
      : (
        <TouchableOpacity onPress={
          () => {
            const routerParam = navigation.getParam('data');
            Dialog.show({
              notice: '确定作废该笔项目？作废后将不可恢复',
              cancel: '再想想',
              confirm: '确定',
              cancelDoIt: () => { Dialog.hide(); },
              confirmDoIt: () => {
                Dialog.hide();
                navigation.navigate('ApprovalNullify', { data: routerParam });
              }
            });
          }
        }
        >
          <Text style={{ paddingRight: 16, fontSize: 14, color: '#666666' }}>作废</Text>
        </TouchableOpacity>
      )
  });

  state = {
    textNumber: 0,
    textContent: ''
  }

  static propTypes = {
    navigation: PropTypes.object.isRequired,
    dispatch: PropTypes.func.isRequired,
    lesseeList: PropTypes.object.isRequired,
    approvalProcessList: PropTypes.array,
    reportList: PropTypes.array,
    form: PropTypes.object.isRequired,
  };

  static defaultProps = {
    approvalProcessList: [],
    reportList: []

  }

  handleWillBlur = () => {
    const { dispatch } = this.props;
    dispatch({ type: 'LESSEE_INFO_SUCCESS', data: {} }); // 承租人信息
    dispatch({ type: 'REPORT_DELETE_SUCCESS', data: {} }); // 提报作废
    dispatch({ type: 'APPROVALING_LIST_SUCCESS', data: [] }); // dispatch审批流程列表接口
    dispatch({ type: 'REPORT_LIST_SUCCESS', data: [] }); // 获取提报列表
    // dispatch({ type: 'PROJECTREPORT_LIST_EMPATY' });
  }

  handleDidFocus = () => {
    const { dispatch } = this.props;
    dispatch({ type: 'PROJECTREPORT_LIST_EMPATY' });
    this.handleLessInfo();
  }

  handleLessInfo = () => {
    const { dispatch, navigation } = this.props;
    const flag = navigation.getParam('key');
    if (flag === 1) { //  从ReportSearch过来的
      const loanId = navigation.getParam('data');
      const params = { loanId };
      dispatch({
        type: 'GET_LESSEEINFO',
        params,
        callback: (res) => {
          if (res.status === 0) {
            this.handleApprovalList();
          }
        }
      }); // 获取承租人信息
    } else {
      const routerParam = navigation.getParam('data');
      const params = {
        loanId: routerParam ? routerParam.loanID : ''
      };
      dispatch({
        type: 'GET_LESSEEINFO',
        params,
        callback: (res) => {
          if (res.status === 0) {
            this.handleApprovalList();
          }
        }
      }); // 获取承租人信息
    }
  }

  handleApprovalList = () => {
    const { dispatch, navigation } = this.props;
    const flag = navigation.getParam('key');
    if (flag === 1) {
      const loanId = navigation.getParam('data');
      const params = { loanId, projectStatu: 1 };
      dispatch({
        type: 'GET_APPROVALING_LIST',
        params,
        callback: (res) => {
          if (res.status === 0) {
            this.handleApprovalInfo();
          }
        }
      }); // dispatch审批流程列表接口
    } else {
      const routerParam = navigation.getParam('data');
      const params = {
        loanId: routerParam ? routerParam.loanID : '',
        projectStatu: 1
      };
      dispatch({
        type: 'GET_APPROVALING_LIST',
        params,
        callback: (res) => {
          if (res.status === 0) {
            this.handleApprovalInfo();
          }
        }
      }); // dispatch审批流程列表接口
    }
  }

  handleApprovalInfo = () => {
    const { dispatch, navigation } = this.props;
    const flag = navigation.getParam('key');
    if (flag === 1) {
      const loanId = navigation.getParam('data');
      const params = { loanId, pageNoList: ['10', '20', '30', '40', '50', '60'] };
      dispatch({ type: 'GET_REPORT_LIST', params }); // 获取提报列表
    } else {
      const routerParam = navigation.getParam('data');
      const params = {
        loanId: routerParam ? routerParam.loanID : '',
        pageNoList: ['10', '20', '30', '40', '50', '60']
      };
      dispatch({ type: 'GET_REPORT_LIST', params }); // 获取提报列表
    }
  }

  // 跳转页面
  goNavigation = (item) => {
    const { dispatch, navigation, reportList } = this.props;
    let routerParam = navigation.getParam('data');
    const PAGESTATUS = navigation.getParam('PAGESTATUS');
    routerParam = {
      flagApproing: 1,
      ...routerParam,
    };

    const params = {
      sloandid: routerParam ? routerParam.loanID : '',
    };
    if (item.id === '2') {
      if (reportList.length > 0 && reportList[0] && !reportList[0].statu) {
        Toast.show('请先填写项目信息'); return;
      }
      navigation.navigate(item.url, { data: routerParam });
    } else if (item.id === '3') {
      dispatch({
        type: 'GET_VEHICLE_INFO',
        params,
        callback: (res) => {
          if (res.data && res.data.zkCarDtos && res.data.zkCarDtos.length > 0) {
            navigation.navigate('VehicleList', { data: routerParam });
          } else {
            // 如果直接从提报列表跳转到表单页，表单提交后需要替换当前路由
            navigation.navigate('VehicleForm', { data: routerParam, isReplace: '1' });
          }
        }
      }); // 获取车辆信息
    } else if (item.id === '4') {
      if (reportList.length > 0 && reportList[0] && !reportList[0].statu) {
        Toast.show('请先填写项目信息');
        return;
      }
      if (reportList.length > 0 && reportList[2] && !reportList[2].statu) {
        Toast.show('请先填写车辆信息');
        return;
      }
      navigation.navigate(item.url, { data: { ...routerParam, PAGESTATUS } });
    } else if (item.id === '6') {
      if (reportList.length > 0 && reportList[1] && !reportList[1].statu) {
        Toast.show('请先填写客户信息'); return;
      }
      navigation.navigate(item.url, { data: routerParam });
    } else {
      navigation.navigate(item.url, { data: routerParam });
    }
  }

  // 立即提报
  handleSubmit = () => {
    const { reportList, dispatch, navigation } = this.props;
    const routerParam = navigation.getParam('data');
    let type = false;
    for (let i = 0; i < reportList.length; i += 1) {
      if (reportList[i].statu === 0) {
        type = true;
      }
    }
    if (type === true) {
      Dialog.show({
        notice: '请完善所有必填信息后再提报',
        confirm: '我知道了',
        confirmDoIt: () => { Dialog.hide(); },
      });
    } else if (type === false) {
      Dialog.show({
        notice: '已详细检查所有提报信息，确认无误并提报？',
        cancel: '再想想',
        confirm: '确认',
        cancelDoIt: () => { Dialog.hide(); },
        confirmDoIt: () => { this.checkRepost(dispatch, navigation, routerParam); Dialog.hide(); },
      });
    }
  }

  checkRepost = (dispatch, navigation, routerParam) => {
    const params = {
      loanID: routerParam ? routerParam.loanID : '',
    };
    dispatch({
      type: REPORT_LIST_CHECK,
      params,
      callback: (res) => {
        if (res.data.result === 0) {
          this.submitReport(params.loanID, dispatch, navigation);
        } else if (res.data.result === 1) {
          Dialog.show({
            title: '自然人客户风险提示',
            notice: '该客户的存量净融资金额大于总风险敞口金额，请上传超标特批EOA签报截图！',
            cancel: '再想想',
            confirm: '确定',
            cancelDoIt: () => { Dialog.hide(); },
            confirmDoIt: () => { navigation.navigate('EoaReport', { loanID: params.loanID }); Dialog.hide(); },
          });
        }
      }
    });
  }

  // 总提交
  submitReport = (loanID, dispatch, navigation) => {
    const params = {
      loanID,
      eoaUploadFile: ''
    };
    dispatch({
      type: REPORT_LIST_SUBMIT,
      params,
      callback: (res) => {
        if (res.data.result === 0) {
          Toast.show('提报成功');
          navigation.navigate('ProjectReport');
        }
      }
    });
  }

  onChangeInputValue = (value) => {
    this.setState({ textContent: value, textNumber: value.length });
  }

  // 待审批提交
  approvalTaskSubmit = () => {
    const { textContent } = this.state;
    if (textContent === '') {
      Toast.show('请完善审批信息');
      return;
    }
    if (textContent && !(/[!^\u0020-\u007E\u00A0-\u00BE\u2E80-\uA4CF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF\u0080-\u009F\u2000-\u201f\u2026\u2022\u20ac\r\n]/g.test(textContent))) {
      Toast.show('请输入有效的审批信息！');
      return;
    }
    if (!(/^[^%]*$/.test(textContent))) {
      Toast.show('请输入有效的审批信息！');
      return;
    }
    const {
      form, dispatch, navigation
    } = this.props;
    const key = navigation.getParam('key');
    form.validateFields((error, value) => {
      if (error) return;
      if (key && key === 1) {
        const loanID = navigation.getParam('data');
        const params = {
          loanID,
          status: navigation.getParam('status'),
          approveType: value.approvalVerdict,
          approveMsg: textContent,
          backNode: '20'
        };
        dispatch({
          type: 'SUBMIT_APPROVAL_IDEA',
          params,
          callback: (res) => {
            if (res.status === 0) {
              Toast.show('提交成功');
              navigation.goBack();
            }
          }
        });
      } else {
        const routerParam = navigation.getParam('data');
        const params = {
          loanID: routerParam ? routerParam.loanID : '',
          status: navigation.getParam('status'),
          approveType: value.approvalVerdict,
          approveMsg: textContent,
          backNode: '20'
        };
        dispatch({
          type: 'SUBMIT_APPROVAL_IDEA',
          params,
          callback: (res) => {
            if (res.status === 0) {
              Toast.show('提交成功');
              navigation.goBack();
            }
          }
        });
      }
    });
  }

  render() {
    const {
      navigation,
      lesseeList,
      approvalProcessList,
      reportList,
      form
    } = this.props;
    const { textNumber } = this.state;
    const { getFieldDecorator, getFieldError } = form;
    const formatReportList = reportList.map((item, i) => ({ ...item, ...list[i] }));
    const PAGESTATUS = navigation.getParam('PAGESTATUS');
    flagSubmit = PAGESTATUS;
    return (
      <KeyboardAvoidingView
        behavior="padding"
        enabled
        style={[styles.container, GlobalStyles.container]}
      >
        <NavigationEvents
          onDidFocus={this.handleDidFocus}
          onWillBlur={this.handleWillBlur}
        />
        <ScrollView>
          <View style={{ borderTopWidth: 0.5, borderColor: ColorCommon.lineColor }}>
            <ApprovalInfos
              string={lesseeList.lcContractno}
              money={lesseeList.l_50312}
              text="融资金额(元）"
              name1={lesseeList.app_50252}
              name2={lesseeList.appName}
            />
          </View>
          {/* <View style={{ backgroundColor: ColorCommon.white }}>
            <View ref={(ref) => { this.ApprovalNodes = ref; }}> */}

          {approvalProcessList && approvalProcessList.length > 0 && (
            <ApprovalNodes
              data={approvalProcessList || []}
              reason
              onPressButton={
                () => {
                  if (approvalProcessList[0] && approvalProcessList[0].pk && approvalProcessList[0].statusName) {
                    const PK = approvalProcessList[0].pk;
                    const STATUSNAME = approvalProcessList[0].statusName;
                    navigation.navigate('Reason', { PK, PAGESTATUS, STATUSNAME });
                  }
                }}
              PAGESTATUS={PAGESTATUS}
            />
          )}
          {/* 项目提报列表 */}
          <View style={{ marginTop: GapCommon.gapBase * 3 }}>
            {formatReportList.length ? formatReportList.map((item) => (
              <TouchableOpacity style={styles.reportList} onPress={() => this.goNavigation(item)} key={item.id}>
                <Cell label={item.label} icon={<item.icon style={styles.itemIcon} width={20} height={20} />}>
                  <View style={styles.listRight}>
                    <Text style={[styles.listText, item.statu === 1 ? styles.success : styles.pending]}>{status[item.statu]}</Text>
                    <RightArrow width={17} height={17} />
                  </View>
                </Cell>
              </TouchableOpacity>
            )) : list.map((item) => (
              <TouchableOpacity style={styles.reportList} onPress={() => this.goNavigation(item)} key={item.id}>
                <Cell label={item.label} icon={<item.icon style={styles.itemIcon} width={20} height={20} />}>
                  <View style={styles.listRight}>
                    <Text style={[styles.listText, styles.pending]}>待完成</Text>
                    <RightArrow width={17} height={17} />
                  </View>
                </Cell>
              </TouchableOpacity>
            ))}
          </View>
          {
            flagSubmit === 20 ? (
              <View>
                <Text style={styles.approvalVerdict}>审批结论</Text>
                <View style={{ backgroundColor: ColorCommon.white }}>
                  <Cell label="审批结论" required>
                    {getFieldDecorator('approvalVerdict', {
                      initialValue: '',
                      rules: [
                        { required: true, message: '请选择' },
                      ]
                    })(
                      <Radio options={ApprovalOptions} error={getFieldError('approvalVerdict')} />
                    )}
                  </Cell>
                  {/* {
                  getFieldValue('approvalVerdict') === '2' ? (
                    <Cell label="退回节点" required>
                      {getFieldDecorator('approvalBack', {
                        initialValue: '0',
                        rules: [
                          { required: getFieldValue('approvalVerdict') === '2', message: '请选择' },
                        ]
                      })(
                        <Radio options={ApprovalBack} error={getFieldError('approvalBack')} />
                      )}
                    </Cell>
                  ) : null
                } */}
                  <View style={styles.approvalOpinion}>
                    <Text style={styles.required}>*</Text>
                    <Text style={{ fontSize: 16, color: ColorCommon.lightGray }}>审批意见</Text>
                  </View>
                  <View style={styles.inputWrap}>
                    <View style={styles.input}>
                      <TextInput
                        placeholder="请输入200字以内的说明"
                        multiline
                        maxLength={200}
                        textAlignVertical="top"
                        onChangeText={this.onChangeInputValue}
                        style={{ fontSize: 16 }}
                      />
                    </View>
                    {
                      textNumber === 0
                        ? (
                          <View>
                            <Text style={[styles.textnumber, { color: ColorCommon.grayish }]}>
                              {textNumber}
                              <Text>/200</Text>
                            </Text>
                          </View>
                        )
                        : (
                          <View>
                            <Text style={[styles.textnumber, { color: ColorCommon.primary }]}>
                              {textNumber}
                              <Text style={{ color: ColorCommon.grayish }}>/200</Text>
                            </Text>
                          </View>
                        )
                    }
                  </View>
                </View>
              </View>

            ) : null
          }

        </ScrollView>
        <View style={styles.reportBtn}>
          {
            flagSubmit === 6
              ? (
                <CommonButton
                  text="重新提报"
                  onPressButton={this.handleSubmit}
                />
              ) : null
          }
          {
            flagSubmit === 7
              ? (
                <CommonButton
                  text="重新提报"
                  onPressButton={this.handleSubmit}
                />
              ) : null
          }
          {
            flagSubmit === 8
              ? (
                <CommonButton
                  text="重新提报"
                  onPressButton={this.handleSubmit}
                />
              ) : null
          }
          {
            flagSubmit === 20
              ? (
                <CommonButton
                  text="提交"
                  onPressButton={this.approvalTaskSubmit}
                />
              ) : null
          }
        </View>
      </KeyboardAvoidingView>

    );
  }
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'space-between'
  },
  reportListWrap: {
    marginTop: GapCommon.gapBase * 3
  },
  reportList: {
    backgroundColor: ColorCommon.white,
    marginTop: 2 * GapCommon.gapBase,
  },
  itemIcon: {
    marginRight: 2 * GapCommon.gapBase,
  },
  listRight: {
    flexDirection: 'row',
  },
  listText: {
    paddingRight: 2 * GapCommon.gapBase,
    fontSize: 16,
  },
  success: {
    color: ColorCommon.success,
  },
  ongoing: {
    color: ColorCommon.warring,
  },
  pending: {
    color: ColorCommon.error,
  },
  reportBtn: {
    marginTop: 4 * GapCommon.gapBase,
    marginBottom: 4 * GapCommon.gapBase,
    paddingLeft: 4 * GapCommon.gapBase,
    paddingRight: 4 * GapCommon.gapBase
  },
  required: {
    fontSize: 16,
    color: ColorCommon.primary,
    marginLeft: 2 * GapCommon.gapBase,
  },
  approvalOpinion: {
    flexDirection: 'row',
    height: 48,
    alignItems: 'center'
  },
  inputWrap: {
    marginTop: GapCommon.gapBase * 2,
    marginBottom: GapCommon.gapBase * 3,
    backgroundColor: ColorCommon.white,
    paddingLeft: GapCommon.gapBase * 4,
    paddingRight: GapCommon.gapBase * 4,
  },
  input: {
    height: 150
  },
  textnumber: {
    fontSize: 16,
    alignSelf: 'flex-end'
  },
  approvalVerdict: {
    color: ColorCommon.dark,
    fontSize: 14,
    marginLeft: GapCommon.gapBase * 4,
    marginTop: GapCommon.gapBase * 4,
    marginBottom: GapCommon.gapBase * 3
  }
});

const createApprovalForm = createForm()(Approvaling);
const mapStateToProps = (state) => ({
  lesseeList: state.lesseeList,
  approvalProcessList: state.approvalProcessList,
  reasonReport: state.reasonReport,
  reportList: state.reportList

});
export default connect(mapStateToProps)(createApprovalForm);