<template>
  <view
    class="tab-bar"
    v-if="
      ['Recharge', 'Withdraw', 'Index', 'User', 'Transfer'].includes(routeName)
    "
  >
    <view
      class="item"
      :class="{ active: routeName == item.name }"
      v-for="(item, index) in list"
      :key="index"
      @click="goTab(item)"
    >
      <image
        class="icon"
        :src="routeName == item.name ? item.selectedIconPath : item.iconPath"
        alt=""
      ></image>
      <view class="text">{{ item.text }}</view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  tabBar: true,
  data() {
    return {
      routeName: "",
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.app.userInfo,
      list: (state) => {
        const userInfo = state.app.userInfo;
        const $lang = state.app.lang[state.app.language];
        let channel = [];
        if (userInfo.pay_channel) {
		  if (userInfo.pay_channel == 'OPR') {
			  channel = [
			    {
			      text: $lang.recharge,
			      name: "Recharge",
			      pagePath: "pages/rechargeopr",
			      iconPath: "/static/tabBar/recharge.png",
			      selectedIconPath: "/static/tabBar/recharge_active.png",
			    },
			  ];
		  } else {
			  channel = [
			    {
			      text: $lang.recharge,
			      name: "Recharge",
			      pagePath: "pages/recharge",
			      iconPath: "/static/tabBar/recharge.png",
			      selectedIconPath: "/static/tabBar/recharge_active.png",
			    },
			    {
			      text: $lang.withdraw,
			      name: "Withdraw",
			      pagePath: "pages/withdraw",
			      iconPath: "/static/tabBar/withdrawal.png",
			      selectedIconPath: "/static/tabBar/withdrawal_active.png",
			    },
			  ];
		  }
          
        }

        let list = [
          {
            text: $lang.home,
            name: "Index",
            pagePath: "pages/index",
            iconPath: "/static/tabBar/index-ba.png",
            selectedIconPath: "/static/tabBar/index-ba-active.png",
          },
          ...channel,
          // {
          //   text: $lang.transfer,
          //   name: "Transfer",
          //   pagePath: "pages/transfer",
          //   iconPath: "/static/tabBar/transfer.png",
          //   selectedIconPath: "/static/tabBar/transfer_active.png",
          // },
          {
            text: $lang.user,
            name: "User",
            pagePath: "pages/user/index",
            iconPath: "/static/tabBar/user.png",
            selectedIconPath: "/static/tabBar/user_active.png",
          },
        ];
        return list;
      },
    }),
  },
  methods: {
    goTab(item) {
      uni.switchTab({
        url: item.pagePath,
      });
    },
  },
  watch: {
    $route: {
      handler(route) {
        this.routeName = route.name;
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: #000;
  justify-content: space-between;
  height: 50px;
  .item {
    flex: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    &.active {
      color: #deb366;
    }
    .icon {
      width: 25px;
      height: 25px;
    }
    .text {
      font-size: 12px;
      padding-top: 2px;
    }
  }
}
</style>
