<template>
  <view>
    <m-tabbar fixed fill :current="current" safeBottom :tabbar="tabbar" native openType="switchTab" @click="tabClick">
      <template v-slot:tabbar_index_1>
        <view class="custom_style">
          <view class="custom_style_icon">
            <u-image src="/static/ai.png" width="160rpx" height="160rpx"/>
          </view>
        </view>
      </template>
    </m-tabbar>
  </view>
</template>

<script>
export default {
  name: "customTabbar",
  props: {
    current: {
      default: 0,
      type: Number
    }
  },
  data() {
    return {
      tabbar: {
        color: "#333",
        selectedColor: "#2ACF8D",
        borderStyle: "F0F0F0",
        backgroundColor: "#FFFFFF",
        list: [
          {
            "pagePath": "pages/index/index",
            "iconPath": "static/tabbar/home.png",
            "selectedIconPath": "static/tabbar/home-selected.png",
            "text": "首页"
          },
          {},
          {
            "pagePath": "pages/user/index",
            "iconPath": "static/tabbar/user.png",
            "selectedIconPath": "static/tabbar/user-selected.png",
            "text": "我的"
          }
        ]
      }
    }
  },
  methods: {
    tabClick(val){
      if (val === 0 && this.current === 0) this.$jump({url: '/pages/index/index'})
    }
  },
  mounted() {
    console.log(this.current)
  },
}
</script>

<style lang="scss">
.custom_style {
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  width: 100rpx;
  height: 100rpx;
  margin-top: -40rpx;

  &_icon {
    //background-color: #2ACF8D;
    font-size: 80rpx;
    width: 100rpx;
    height: 100rpx;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

  }
}
</style>