<template>
  <el-popover :placement="placement" trigger="hover">
    <template #reference>
      <el-button :type="btnType" :color="btnColor" :icon="btnIcon" style="color: #fff">{{ btnTitle }}</el-button>
    </template>
    <div class="popver-content">
      <span class="popver-content-item" v-for="info of options" @click="handleClick(info.value)">{{ info.label }}</span>
    </div>
  </el-popover>
</template>

<script lang="ts" setup>
/**
 * @Name:select-button/index.vue
 * @Description: 自动化规则新建模版按钮
 */
import { ref } from 'vue'

interface Props {
  btnTitle: string,
  btnType: string,
  btnColor: string,
  btnIcon: any,
  placement: string,
  // modelValue: string | number,
  options: { label: string; value: string | number }[]
}
const props = withDefaults(defineProps<Props>(), {
  placement: "bottom-start",
  btnType: 'primary',
  btnColor: '#3359b5',
  btnIcon: 'CirclePlus'
})
const emits = defineEmits(['click'])

const handleClick = (value: string | number) => {
  // if (props.modelValue === value) return
  // emits('update:modelValue', value)
  emits('click', value)
}
</script>

<style lang="scss" scoped>
.popver-content {
  display: flex;
  flex-direction: column;
  .popver-content-item {
    padding: 5px 0;

    &:hover {
      background-color: #f4f7fd;
      color: blue;
      cursor: pointer;
    }
  }
}
</style>
