/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
<template>
    <div class="buttonsBlock">
      <div class="buttons">
        <Button v-for="(bItem,bIndex) in buttonList" :key="bIndex"
          style="margin-left: 12px"
          :icon='bItem.icon'
          :type='bItem.type'
          @click="submit(options.bItem.type, options.bItem.event)"
        >
          {{bItem.text}}
        </Button>
        <Button
            icon="md-menu"
            type="default"
            style="margin-left: 12px"
            @click="valueOpenz"
            >更多</Button
        >
      </div>
        
        <div class="drawer" v-if="valueOpen">
            <div v-for="(item,index) in bottonList" :key='index'>
                <Icon :type='item.icon' /> 
                <span>{{item.text}}</span>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { Component, Prop, Watch,Vue } from 'vue-property-decorator';
import { Button,Icon } from '@syman/ark-ui';
@Component({
  name: "buttonsBlock",
    components: {
    Button,
    Icon,
  },
})
export default class buttonsBlock extends Vue {
  private valueOpen = false;
  private bottonList = [
    {
      icon:'md-refresh',
      text:'刷新'},
    {text:'导出'},

  ];
  private buttonList =[
    {
      icon:'md-add',
      type:'default',
      text:'新增'
    },
    {
      icon:'iconicon-baocun',
      type:'default',
      text:'保存'
    },
    {
      icon:'iconicon-shanchu',
      type:'default',
      text:'作废'
    },
    {
      icon:'iconicon-tijiao',
      type:'default',
      text:'提交'
    },
  ];
  @Prop() private value!: string | number;
  @Watch('valueOpen')
  valueOpenChange(val:any){
      console.log(val)
  }
  valueOpenz(valueOpen:any){
    this.valueOpen = !this.valueOpen;
    return false
  }
}
</script>
