<!--
  @name: 底部固定栏
  @description: -
  @author 张文
  @date: 2022-01-19
-->
<template>
  <div>
    <div
      class="ty-bottom-bar-copy"
      :style="{
        height: heightClone
      }"
    ><!-- 占位用 --></div>

    <div
      id="tyGlobalBottomBar"
      :class="[
        slotBtn ? 'ty-global-flex-around':'',
        'ty-bottom-bar-copy',
        'ty-bottom-bar'
      ]"
      :style="{
        height: heightVal
      }"
    >
      <slot></slot>
    </div>
  </div>
</template>

<script>

export default {
  name: "tyBottomBar",
  props: {
    // 高度
    height:{
      type: [Number, String],
      default: 50
    },
    // 插槽内容是否为按钮
    slotBtn:{
      type: Boolean,
      default: true
    }
  },
  computed:{
    heightVal(){
      if (typeof this.height === 'number'){
        return this.height + 'px'
      }

      return this.height

    },
  },
  data() {
    return {
      heightClone:'0px'
    }
  },
  mounted() {
    // 获取显示高度
    this.heightClone = document.getElementById('tyGlobalBottomBar').offsetHeight + 'px'
  },
  methods: {}
}
</script>

<style scoped lang="less">

@import "../../assets/css/var.less";

.ty-bottom-bar-copy{
  width: 100%;
  box-sizing: border-box;
  padding: 0 12px;
}

.ty-bottom-bar{
  position: fixed;
  left: 0;
  bottom: 0;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.3);
  background: @bottomBarBackgroundColor;

  >.ty-button{
    display: block;
    flex-grow: 1;

    &+.ty-button{
      margin-left: 10px;
    }
  }
}

</style>
