<template>
  <div v-if="permission !== 'n'" v-express class="mobile-btn-group">
    <template v-for="(btn, btnIndex) in btnLists">
      <ht-button
        :key="btnIndex"
        :icon="btn.icon"
        :btn-name="btn.name"
        :textColor="btn.textColor"
        :lableColor="btn.lableColor"
        :styleType="btn.styleType"
        :script="btn.isBindBtn ? btn.script : ''"
      ></ht-button>
    </template>
  </div>
</template>
<script>
  import permission from '@/mixins/permission.js'
  import mobileMode from '@/mixins/mobileMode.js'

  export default {
    name: 'HtButtonGroup',
    mixins: [permission, mobileMode],
    props: {
      btnLists: Array,
    },
    computed: {},
    methods: {},
  }
</script>
<style lang="scss" scoped>
  .mobile-btn-group {
    display: flex;
    align-items: center;
    padding: 0 16px;

    ::v-deep {
      .mobile-btn-box {
        margin-left: 12px;
        display: inline-flex;
        flex: 1;
        width: 0;

        .mobile-btn {
          width: 100%;
          margin-left: 0;
        }
      }

      .mobile-btn-box:nth-child(1) {
        margin-left: 0;
      }
    }
  }
</style>
