import { isFunction, isEmpty } from '@/utils/tools'
import allIcons from './icons'
import './index.scss'

const defaultIcons = allIcons.filter(x => x.default)

export default function (props) {
  const iconList = props.iconList && props.iconList.length ? props.iconList : defaultIcons
  const showIcons = iconList.map((icon) => {
    const defIcon = allIcons.filter(x => icon.iconCode === x.iconCode)[0]

    if (!defIcon) return false;

    const navIcon = {
      ...defIcon,
      ...icon,
    }

    if (isEmpty(navIcon.page) && isEmpty(navIcon.tab)) return false;

    if (isFunction(navIcon.page)) {
      const pg = navIcon.page(props)
      if (!pg) return false;

      return { ...navIcon, page: pg }
    }

    return navIcon
  }).filter(Boolean)

  const naviTo = (icon) => {
    const { page, tab } = icon || {}

    if (tab) {
      Taro.switchTab({ url: tab })
    } else {
      Taro.navigateTo({ url: page })
    }
  }

  return (
    <View className="navicons" style={showIcons.length == 3 ? "padding:0 8%" : ""}>
        {showIcons.map((item) => (
            <View onClick={() => naviTo(item)} className="nav-item" key={item.iconCode}>
                <Image className="icon" src={item.iconUrl} ></Image>
                <View className="nav-text">
                  <Text>{item.iconName}</Text>
                  { item.iconCode== 'refercustomers' && 
                    <Image style="width:30rpx;height:30rpx;margin-left:4rpx" src={require('@/assets/award.png')} ></Image>
                  }
                </View>
            </View>
        ))}
    </View>
  )
}
