<template>
  <div v-for="(item, index) in Butttondata" :key="index" class="btn-div">
    <el-button
      v-show="!item.hide"
      :type="item.type"
      :color="item.color"
      :link="item.link ? item.link : false"
      :disabled="item.disabled"
      v-hasPermi="[item.hasPermi] || []"
      v-if="item.name != 'set'"
      @click="buttonBaseClick(item.name, item, $event)"
    >
      <Icon v-if="item.icon" :icon="item.icon" class="mr-1px" />
      <span :style="{width:item.width+'px'||'auto'}" :class="[item.width?'ellipsis':'']">{{ item.label }}</span>
    </el-button>
    <!-- 设置按钮 -->
    <el-popover
      :visible="popoverVisible"
      placement="bottom"
      :width="300"
      trigger="click"
      v-if="item.name == 'set'&&!item.hide"
    >
      <rowDrop
        ref="rowDropRef"
        @updata-table-columns="updataTableColumns"
        :allSchemas="allSchemas"
        :detailAllSchemas="detailAllSchemas"
        @closeRowDrop="closeRowDrop"
        @updataTableColumns="updataTableColumns"
      />
      <template #reference>
        <el-button
          v-show="!item.hide"
          :type="item.type"
          :color="item.color"
          :disabled="item.disabled"
          :link="item.link ? item.link : false"
          v-hasPermi="[item.hasPermi] || []"
          @click="buttonBaseClick(item.name, item, $event)"
        >
          <Icon v-if="item.icon" :icon="item.icon" class="mr-1px" />
          {{ item.label }}
        </el-button>
      </template>
    </el-popover>
  </div>
  <slot></slot>
</template>
<script setup>
import { Plus } from '@element-plus/icons-vue'
import { clearButtonBlurHandle } from '@/utils/index'
import rowDrop from '@/components/rowDrop/index.vue'
const props = defineProps({
  Butttondata: {
    type: Array,
    default: () => {
      return []
    }
  },
  allSchemas: {
    type: Object,
    default: null
  },
  detailAllSchemas: {
    type: Object,
    default: null
  },
})

// 传递给父类
const emit = defineEmits(['buttonBaseClick', 'updataTableColumns'])

const buttonBaseClick = (val, item, $event) => {
  let timer = null
  if(!timer){
    clearButtonBlurHandle($event) //解决el-button点击后颜色不恢复问题
    emit('buttonBaseClick', val, item, $event)
    timer = setTimeout(()=>{
      if(timer){
        clearTimeout(timer)
      }
    },2000)
  }
  
}
const popoverVisible = ref(false)
// 关闭页面
const closeRowDrop = () => {
  popoverVisible.value = false
}
defineExpose({
  popoverVisible
})
// 更新主列表字段
const updataTableColumns = (val) => {
  emit('updataTableColumns', val)
}
</script>
<style scoped lang="scss">
.btn-div{
  display: inline;

  ::v-deep(.el-button){
    margin: 0px 5px;
  }
  ::v-deep(.el-button.is-link){
    margin: 0px;
  }
}
</style>