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

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, navIcon: navIcon })
      if (!pg) return false;

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

    return navIcon
  }).filter(Boolean)

  const naviTo = (icon) => {


    const { page, tab, params } = icon || {}
    const urlParams = params && params.indexOf('?') === -1 ? '?' + params : '&' + params

    if (tab) {
      Taro.switchTab({ url: tab })
    } else {
      Taro.navigateTo({ url: params ? page + urlParams : page })
    }
  }

  const latsIcons = props.personType == ROLE_CODE['CONSULTANT'] ? showIcons.filter(item => item.iconCode != 'refercustomers') : showIcons
  return (

    < View className="navicons" style={latsIcons.length == 3 ? "padding:0 8%" : ""} >
      {
        latsIcons.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 >
  )
}
