<!--
  底部按钮栏隐藏多余按钮
  @author: 张文
  @date: 2022-06-25
-->
<template>
  <ty-bottom-bar v-if="btnList.length">

    <van-popover
      v-if="btnList.length > 2"
      v-model="showPopover"
      trigger="click"
      placement="top-start"
      :offset="[0,12]"
    >

      <div class="ty-bottom-bar-btn-hidden-popover">
        <div
          class="ty-global-row ty-global-value"
          v-for="(i,k) in btnList.slice(2)"
          :key="k"
          @click="itemClick(i.click)"
        >{{ i.text }}</div>
      </div>

      <template #reference>
        <ty-button
          style="margin-right: 10px"
          type="normal"
          plain
        >
          <van-icon name="wap-nav" />
        </ty-button>
      </template>

    </van-popover>

    <ty-button
      v-if="btnList[1]"
      type="last"
      plain
      @click="btnList[1].click"
    >{{ btnList[1].text }}</ty-button>

    <ty-button
      @click="btnList[0].click"
    >{{ btnList[0].text }}</ty-button>

  </ty-bottom-bar>
</template>

<script>

export default {
  name: "tyBottomBarBtnHidden",
  props:{
    btnList:{
      type: Array,
      default:()=>[]
    }
  },
  data() {
    return {
      showPopover:false
    }
  },
  methods: {
    itemClick(fn){
      this.showPopover = false
      if (fn && typeof fn === 'function') {
        fn()
        return
      }

      console.error('底部按钮隐藏多余按钮点击调用方法错误，传入点击事件不是可调用的函数', fn)
    }
  }
}
</script>

<style scoped lang="less">
.ty-bottom-bar-btn-hidden-popover{
  padding: 0 10px;
  min-width: 80px;

  >.ty-global-row:last-child{
    border-bottom: none;
  }
}

</style>
