import React from "react";
import Taro from "@tarojs/taro";
import { View, Image } from "@tarojs/components";
import { Tabbar, TabbarItem } from "@antmjs/vantui";
import {
  ROLE_INSPECTOR,
  ROLE_MANAGER,
  ROLE_ORG_USER,
  ROLE_ORG_MANAGER,
  ROLE_QUERY_PERSON,
  ROLE_CITIZEN,
} from "@/utils/user";
import homeIcon from "@/assets/tabbar/page.png";
import homeActiveIcon from "@/assets/tabbar/page click.png";
import noticeIcon from "@/assets/tabbar/notice.png";
import noticeActiveIcon from "@/assets/tabbar/notice click.png";
import issueIcon from "@/assets/tabbar/release.png";
import issueActiveIcon from "@/assets/tabbar/release click.png";
import checkIcon from "@/assets/tabbar/evaluation.png";
import checkActiveIcon from "@/assets/tabbar/evaluation click.png";
import mineIcon from "@/assets/tabbar/my.png";
import mineActiveIcon from "@/assets/tabbar/my click.png";

const home = {
  name: "home",
  label: "首页",
  icon: homeIcon,
  activeIcon: homeActiveIcon,
  page: "/pages/home/index",
};
const notice = {
  name: "notice",
  label: "公告",
  icon: noticeIcon,
  activeIcon: noticeActiveIcon,
  page: "/pages/notice/index",
};
const issue = {
  name: "issue",
  label: "发布",
  icon: issueIcon,
  activeIcon: issueActiveIcon,
  page: "/pages/issue/edit/index",
};
const feedback = {
  name: "feedback",
  label: "随手拍",
  icon: issueIcon,
  activeIcon: issueActiveIcon,
  page: "/pages/feedback/issue/index",
};
const check = {
  name: "check",
  label: "测评标准",
  icon: checkIcon,
  activeIcon: checkActiveIcon,
  page: "/pages/checkStand/list/index",
};
const mine = {
  name: "mine",
  label: "我的",
  icon: mineIcon,
  activeIcon: mineActiveIcon,
  page: "/pages/my/index",
};

export default (props) => {
  const { active = -1, className, duty } = props;

  const tabItems = React.useMemo(() => {
    if (!duty) return [];

    if (duty == ROLE_INSPECTOR // 督查员
      || duty == ROLE_MANAGER // 管理员
    ) {
      return [home, notice, issue, check, mine];
    }

    if (duty == ROLE_QUERY_PERSON) {
      // 查询员
      return [home, notice, check, mine];
    }

    // 责任单位用户
    if (duty == ROLE_ORG_USER || duty == ROLE_ORG_MANAGER) {
      return [home, notice, mine];
    }

    if (duty == ROLE_CITIZEN) {
      return [home, feedback, mine];
    }

    return [];
  }, [duty]);

  const onChange = (e) => {
    const url = tabItems.filter((x) => x.name === e.detail)[0].page;
    Taro.reLaunch({ url });
  };

  return (
    <Tabbar
      activeColor="#1A7565"
      className={className}
      active={active}
      onChange={onChange}
    >
      {tabItems.map((item) => (
        <TabbarItem
          key={item.name}
          name={item.name}
          renderIcon={
            <Image
              src={item.icon}
              mode="aspectFit"
              style="width: 30px; height: 20px;"
            ></Image>
          }
          renderIconActive={
            <Image
              src={item.activeIcon}
              mode="aspectFit"
              style="width: 30px; height: 20px;"
            ></Image>
          }
        >
          <View style={{ fontSize: "14px" }}>{item.label}</View>
        </TabbarItem>
      ))}
    </Tabbar>
  );
};
