111

import React, {Component} from 'react';
import {Image, StyleSheet, Text, View} from 'react-native'
import Swiper from 'react-native-swiper';
import Touchable from "../../component/Touchable";
import {DEVICE_WIDTH, getRealDP as dp} from "../../utils/screenUtil";
import Color from "../../utils/Color";
import {showToast} from '../../utils/Utility'
import NavigationUtils from '../../navigator/NavigationUtils'

export default class HomeMenu extends Component {

    constructor(props) {
        super(props);
        this.state = {
            menuSize: 8,
            menuListItem: [],
        }
    }

    //处理点击跳转
    _onJump = (item) => {
        //点击跳转类型jumpType 0:点击没有反应 1:点击跳转app内部路由 2:跳转H5
        if (item.jumpType === 0) {

        } else if (item.jumpType === 1) {
            //判断路由是否存在
            try {
                NavigationUtils.goPage({}, item.jumpLink)
            } catch (e) {
                showToast('升级后尝试....')
            }
        } else {
            showToast('升级后尝试')
        }
    }

    //加载菜单数据
    loadMenuListItem = (menuList) => {
        let newMenuListItem = []
        //封装数据
        menuList.map((item, index) => {
            newMenuListItem.push(<Touchable
                style={[styles.slidelItem, {height: dp(200)}]}
                key={index}
                onPress={() => {
                    this._onJump(item)
                }}>
                <Image source={{uri: item.menuImage}}
                       style={styles.slidelIcon}/>
                <Text style={styles.slidelText}>
                    {item.menuName}
                </Text>
            </Touchable>)
        })
        let menuListItem = []
        while (newMenuListItem.length > 0) {
            if (newMenuListItem.length > this.state.menuSize) {
                menuListItem.push(newMenuListItem.slice(0, this.state.menuSize))
                newMenuListItem.splice(0, this.state.menuSize);
            } else {
                menuListItem.push(newMenuListItem);
                newMenuListItem = [];
            }
        }
        return menuListItem;
    }

    render() {
        const {menuList} = this.props;
        const menuListItem = this.loadMenuListItem(menuList);
        if (menuListItem.length === 0) {
            return null;
        }
        return (
            <View style={{
                height: menuList.length > 4 ? 250 : 250 / 2,
                backgroundColor: Color.WHITE
            }}>
                <Swiper>
                    {
                        menuListItem.map((info, index) => {
                            return (<View key={index} style={{
                                flexDirection: 'row',
                                flexWrap: 'wrap',
                                width: DEVICE_WIDTH
                            }}>
                                {info}
                            </View>)
                        })
                    }
                </Swiper>
            </View>
        );
    }
}
//样式
const styles = StyleSheet.create({
    slidelItem: {
        width: DEVICE_WIDTH / 4,
        justifyContent: 'center',
        alignItems: 'center',

    },
    slidelIcon: {
        width: dp(80),
        height: dp(80),
    },
    slidelText: {
        marginTop: dp(10),
        fontSize: dp(28),
    },
})