<template>
  <view>
    <u-tabbar
      :value="current"
      @change="tabbarChange"
      z-index="999"
      activeColor="#2F6D47"
      inactiveColor="#687379"
      :fixed="true"
      :placeholder="true"
      :safeAreaInsetBottom="true"
    >
      <u-tabbar-item name="index" text="首页" v-if="!_isGjt">
        <u-icon
          name="home-fill"
          size="45"
          slot="active-icon"
          color="#2F6D47"
        ></u-icon>
        <u-icon
          name="home-fill"
          size="45"
          slot="inactive-icon"
          color="#687379"
        ></u-icon>
      </u-tabbar-item>
      <u-tabbar-item name="map" text="地图" v-if="_isShowMap">
        <u-icon
          name="map-fill"
          size="45"
          slot="active-icon"
          color="#2F6D47"
        ></u-icon>
        <u-icon
          name="map-fill"
          size="45"
          slot="inactive-icon"
          color="#687379"
        ></u-icon>
      </u-tabbar-item>
      <u-tabbar-item name="my" text="我的">
        <u-icon
          name="account-fill"
          size="45"
          slot="active-icon"
          color="#2F6D47"
        ></u-icon>
        <u-icon
          name="account-fill"
          size="45"
          slot="inactive-icon"
          color="#687379"
        ></u-icon>
      </u-tabbar-item>
    </u-tabbar>
  </view>
</template>

<script>
import { getUser } from "@/utils/auth.js";
import { checkButtonPermission } from "@/utils/permission.js";
export default {
  options: {
    styleIsolation: "shared", // 解除样式隔离
  },
  data() {
    return {
      //   userInfo: {}, // 用户信息
      //   list: [],
    };
  },
  computed: {
    current() {
      return this.$store.state.current || "map";
    },
    _userInfo() {
      console.log("---------------------");
      console.log(getUser());
      return getUser() || {};
    },
    _isGjt() {
      console.log(123123123);
      console.log(this._userInfo.id);
      return this._userInfo.id == "1131365259079106560";
    },
    _isShowMap() {
      return checkButtonPermission(
        "weappMap",
        "vehicle" //按钮在基础信息菜单的车辆信息下面
      );
      //   const ids = this._userInfo?.roles?.map((item) => item.roleName) || [];
      //   if (ids.includes("地图查看")) {
      //     //  if (ids.includes("1120244873740435456"))   ID切库会变 改成中文吧
      //     return true; //统一改成地图查看权限配置
      //   } else {
      //     return false; //其他
      //   }
    },
    // _list() {
    //   return this._isShowMap
    //     ? [
    //         {
    //           path: "pages/index/index",
    //         },
    //         {
    //           path: "pages/map/index",
    //         },
    //         {
    //           path: "pages/my/my",
    //         },
    //       ]
    //     : [
    //         {
    //           path: "pages/index/index",
    //         },
    //         {
    //           path: "pages/my/my",
    //         },
    //       ];
    // },
  },
  //   watch: {
  //     _userInfo: {
  //       handler(newVal) {
  //         this.userInfo = newVal;
  //       },
  //       immediate: true,
  //       deep: true,
  //     },
  //   },
  mounted() {
    console.log("tabBar mounted");
    console.log(this._userInfo);
  },
  methods: {
    tabbarChange(e) {
      console.log(e);
      this.$store.state.current = e;
      let arr = [
        {
          name: "index",
          path: "pages/index/index",
        },
        {
          name: "map",
          path: "pages/map/index",
        },
        {
          name: "my",
          path: "pages/my/my",
        },
      ];
      let path =
        arr.find((item) => item.name == e)?.path || "pages/index/index";
      uni.switchTab({
        url: "/" + path,
      });
    },
  },
};
</script>

<style scoped></style>
