index/home

import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  Dimensions,
  TouchableOpacity,
  ImageBackground,
  Image,
  // ScrollView
  // Button
} from 'react-native';
import PropTypes from 'prop-types';
import { NavigationEvents } from 'react-navigation';
import { ScrollView } from 'react-native-gesture-handler';
import {
  PreApproved,
  ProductPresentation,
  ProjectContract,
  PaymentApplication,
  CustomerResearch,
  ProductEstimation,
  RollingText,
  HomeNotice,
  ApprovalTask
} from '../../components';
import { ColorCommon, GapCommon } from '../../assets/publicConsts';
import GlobalStyles from '../../assets/globalStyles';
import { getPerformanceReport } from '../../apis/user';
import { getAgreement } from '../../apis/login';
import { Px2Dp, RNLog, ScaleSizeH } from '../../utils/Tool';

const screenW = Dimensions.get('window').width;
const screenH = Dimensions.get('window').height;
export default class Home extends React.Component {
  list = [
    {
      img: PreApproved, name: '预审批', id: 1, navigateTo: 'PretrialList'
    },
    {
      img: ProductPresentation, name: '项目提报', id: 2, navigateTo: 'ProjectReport'
    },
    {
      img: ProjectContract, name: '项目签约', id: 3, navigateTo: 'ProSignList'
    },
    {
      img: PaymentApplication, name: '付款申请', id: 4, navigateTo: 'PaymentList'
    },
    {
      img: CustomerResearch, name: '贷后管理', id: 5, navigateTo: 'PostloanList'
    },
    {
      img: ProductEstimation, name: '产品测算', id: 6, navigateTo: null
    },
    {
      img: ApprovalTask, name: '审批任务', id: 7, navigateTo: 'ApprovalList'
    }
  ];

  static propTypes = {
    navigation: PropTypes.object.isRequired
  }

  state = {
    battlefieldReport: {
      COUNTORDER: '-',
      AMOUNTORDER: '-'
    },
    noticeText: '',
    noticeLabel: ''
  }

  handleDidFocus = () => {
    try {
      setTimeout(async () => {
        const { data } = await getPerformanceReport();
        this.setState({ battlefieldReport: data });
        const params = {
          version: '1.0',
          flagCode: 4
        };
        const dataInfo = await getAgreement(params);
        const { showprotocalContent, showprotocalName } = dataInfo.data;
        this.setState({ noticeText: showprotocalContent, noticeLabel: showprotocalName });
        RNLog({ 123: showprotocalContent });
      }, 500);
    } catch (err) {
      RNLog(err);
    }
  }

  postMethod = (data) => {
    RNLog(data);
  }

  render() {
    const { navigation } = this.props;
    const { battlefieldReport, noticeText, noticeLabel } = this.state;
    return (
      <View style={GlobalStyles.container}>
        <ScrollView>
          <NavigationEvents
            onDidFocus={this.handleDidFocus}
          />
          {/* 平安车管家 */}
          <ImageBackground
            style={styles.bgcPicIos}
            source={localImages.homeBac}
          />
          <Image
            // width={343}
            // height={ScaleSizeH(140)}
            source={localImages.homeBanner}
            style={styles.newCar}
          />

          {/* 通知 */}
          <View style={styles.light}>
            <HomeNotice />
            <RollingText
              textList={[
                { label: noticeLabel, value: noticeText }
              ]}
              speed={60}
              width={screenW - 76}
              height={ScaleSizeH(33)}
              bgContainerStyle={{ backgroundColor: ColorCommon.white }}
              textStyle={{ fontSize: 13, color: ColorCommon.fontGray }}
            />
          </View>

          {/* 个人战报 */}
          <View style={styles.banner}>
            <Text style={styles.mainTitleText}>个人战报</Text>
            <View style={styles.money}>
              {/* 报单量(单) */}
              <View>
                <Text style={styles.rmb}>{battlefieldReport.COUNTORDER}</Text>
                <Text style={styles.desc}>报单量(单)</Text>
              </View>
              {/* 起租金额(万元) */}
              <View>
                <Text style={styles.rmb}>{battlefieldReport.AMOUNTORDER}</Text>
                <Text style={styles.desc}>起租金额(万元)</Text>
              </View>
            </View>
          </View>
          <View style={styles.workBox}>
            {/* 常规工作 */}
            <View style={styles.work}>
              <Text style={styles.routineWork}>常规工作</Text>
            </View>
            {/* 六个图标 */}
            <View style={styles.workContainer}>
              {this.list.map((item) => (
                <TouchableOpacity
                  key={item.id}
                  onPress={() => (item.navigateTo && navigation.navigate(item.navigateTo))}
                >
                  <View style={styles.workWrap}>
                    {/* svg组件 */}
                    <item.img style={styles.itemImage} />
                    <Text style={styles.itemText}>{item.name}</Text>
                  </View>
                </TouchableOpacity>
              ))}
            </View>
          </View>
          {/* <Button
            title="测试"
            onPress={() => { this.refs.myRef.toggleModal(); }}
          /> */}
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  bgcPicIos: {
    width: '100%',
    height: ScaleSizeH(149),
  },
  banner: {
    marginLeft: GapCommon.gapBase * 4,
    marginRight: GapCommon.gapBase * 4,
    marginTop: ScaleSizeH(GapCommon.gapBase * 4),
    paddingTop: ScaleSizeH(GapCommon.gapBase * 3),
    paddingBottom: ScaleSizeH(GapCommon.gapBase * 3),
    backgroundColor: ColorCommon.white,
    height: ScaleSizeH(99),
    borderRadius: 4
  },
  mainTitleText: {
    marginLeft: GapCommon.gapBase * 3,
    fontSize: 17,
    color: ColorCommon.dark,
    fontWeight: '700'
  },
  workBox: {
    marginLeft: GapCommon.gapBase * 4,
    marginRight: GapCommon.gapBase * 4,
    marginTop: ScaleSizeH(GapCommon.gapBase * 4),
    backgroundColor: ColorCommon.white,
    borderRadius: 4
  },
  work: {
  },
  routineWork: {
    marginTop: ScaleSizeH(GapCommon.gapBase * 3),
    marginLeft: GapCommon.gapBase * 3,
    fontSize: 17,
    color: ColorCommon.dark,
    fontWeight: '700'
  },
  money: {
    paddingLeft: GapCommon.gapBase * 11,
    paddingRight: GapCommon.gapBase * 11,
    flexDirection: 'row',
    justifyContent: 'space-around',
    fontWeight: '700'
  },
  rmb: {
    color: ColorCommon.primary,
    fontSize: 30,
    textAlign: 'center'
  },
  desc: {
    fontSize: 14,
    color: ColorCommon.dark,
    letterSpacing: 0,
    textAlign: 'center'
  },
  workContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    // justifyContent: 'center',
    justifyContent: 'space-between',
    marginBottom: ScaleSizeH(GapCommon.gapBase * 4),
    // paddingLeft: ScaleSizeH(GapCommon.gapBase * 9),
    // paddingRight: ScaleSizeH(GapCommon.gapBase * 9)
  },
  workWrap: {
    width: Px2Dp(screenW - 90) / 3,
    height: Px2Dp(screenW - 90) / 3,
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
  },
  itemImage: {
    width: ScaleSizeH(53),
    height: ScaleSizeH(53)
  },
  itemText: {
    textAlign: 'center',
    fontSize: 14,
    color: ColorCommon.dark,
    marginTop: GapCommon.gapBase
  },
  newCar: {
    marginLeft: GapCommon.gapBase * 4,
    marginRight: GapCommon.gapBase * 4,
    marginTop: -ScaleSizeH(GapCommon.gapBase * 28),
    width: screenW - 32,
    height: Px2Dp(140),
    borderRadius: 6
  },
  light: {
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: GapCommon.gapBase * 4,
    marginRight: GapCommon.gapBase * 4,
    paddingLeft: GapCommon.gapBase * 4,
    backgroundColor: ColorCommon.white,
    marginTop: GapCommon.gapBase * 4
  }
});