<template>
  <view>
    <view :class="[isFixed ? 'f-fixed' : '']">
      <!-- 二次封装tabbar -->
      <!-- @change="onTabbar" -->
      <u-tabbar ref="tabBarRef" :value="tabIndex" @change="onTabbar" :fixed="false" :placeholder="false"
        :safeAreaInsetBottom="safeAreaInsetBottom" :activeColor="activeColor || PrimaryColor"
        :inactiveColor="inactiveColor" :border="border">
        <!-- 将 list 改为 list -->
        <block v-for="(item, index) in list" :key="item.name">
          <!-- 自定义icon -->
          <u-tabbar-item :text="item.name">
            <view slot="active-icon">
              <view class="iconfont2" :class="['custom-icon' + item.iconFill]" style="font-size: 20px;"
                :style="{ color: activeColor || PrimaryColor }"></view>
              <!-- 自定义图标 -->
              <!-- <f-icon :name="item.iconFill" size="40" :color="activeColor || PrimaryColor"></f-icon> -->
              <!-- 图片路径 -->
              <!-- <image class="icon" :src="item.iconFill"></image> -->
            </view>

            <view slot="inactive-icon">
              <view class="iconfont2" :class="['custom-icon' + item.icon]" style="font-size: 20px;"
                :style="{ color: inactiveColor }"></view>
              <!-- 自定义图标 -->
              <!-- <f-icon :name="item.icon" size="40" :color="inactiveColor"></f-icon> -->
              <!-- 图片路径 -->
              <!-- <image class="icon" :src="item.icon"></image> -->
            </view>

          </u-tabbar-item>
        </block>
      </u-tabbar>
      <!-- 苹果安全距离-默认20px -->
      <view :style="{ paddingBottom: systemInfo.tabbarPaddingB + 'px', background: '#fff' }"></view>
    </view>
    <!-- 防止塌陷高度 -->
    <view v-if="isFixed && isFillHeight" :style="{ height: systemInfo.tabbarH + 'px' }"></view>
    <!-- #ifdef H5 -->
    <u-safe-bottom></u-safe-bottom>
    <!-- #endif -->
  </view>
</template>

<script>
  import { mapState, mapMutations, mapGetters } from 'vuex';
  import base from '@/config/baseUrl.js';
  export default {
    name: 'f-tabbar',
    props: {
      // 是否固定在底部
      isFixed: {
        type: Boolean,
        default: true
      },
      // 是否设置防止塌陷高度
      isFillHeight: {
        type: Boolean,
        default: true
      },
      // 选中的颜色--为空显示主题色
      activeColor: {
        type: String,
        default: '#0122c7'
      },
      // 未选中颜色
      inactiveColor: {
        type: String,
        default: '#606266'
      },
      // 是否显示边框色
      border: {
        type: Boolean,
        default: function() {
          return true;
        }
      }
    },
    data() {
      return {
        PrimaryColor: '#0122c7',
        safeAreaInsetBottom: false,
        systemInfo: base.systemInfo,
        tabIndex: 0,
        path: '', //当前路径
        list: [{
            name: '首页',
            url: 'pages/views/oaHome/oaHome',
            icon: 'oah',
            iconFill: 'oaha'
          },
          {
            name: '审批',
            url: 'pages/views/oaExamine/oaExamine',
            icon: 'oas',
            iconFill: 'oasa'
          },
          {
            name: '任务',
            url: 'pages/views/oaTask/oaTask',
            icon: 'oar',
            iconFill: 'oara'
          },
          {
            name: '我的',
            url: 'pages/views/oaMy/oaMy',
            icon: 'oamya',
            iconFill: 'oamy'
          }
        ]
      };
    },
    created() {
      //获取页面路径
      let currentPages = getCurrentPages();
      let page = currentPages[currentPages.length - 1];
      this.path = page.route;
      this.list.forEach((item, index) => {
        if (this.path == item.url) {
          this.tabIndex = index;
        }
      });
      // #ifdef H5
      this.safeAreaInsetBottom = true;
      // #endif
    },
    methods: {
      onTabbar(index) {
        if (this.path !== this.list[index].url) {
          uni.redirectTo({
            url: '/' + this.list[index].url
          });
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import '@/static/tabbar_icon/iconfont.css';

  .f-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;

    .icon {
      width: 20px;
      height: 20px;
    }
  }
</style>
