<template>
  <el-popover
    :placement="placement"
    :title="title"
    :width="width"
    :trigger="trigger"
    :value="value"
    @input="onInput"
    :popper-class="popperClassCom"
    :content="content">
    <slot></slot>
    <slot name="reference" slot="reference"></slot>
  </el-popover>
</template>

<script>
    export default {
        name: "index",
        props:{
            value:{
                default:false
            },
            popperClass:{
                type:String,
                default:''
            },
            placement:{
                type:String,
                default:'top-start'
            },
            title:{
                type:String,
                default:''
            },
            width:{
                type:String,
                default:''
            },
            trigger:{
                type:String,
                default:'hover'
            },
            content:{
                type:String,
                default:''
            },
            type:{
                type:String,
                default:''
            }
        },
        computed:{
            popperClassCom(){
                var popClass='';
                if(this.type=='dark'){
                    popClass+='alPopDark ';
                }
                popClass+=this.popperClass;
                return popClass;
            }
        },
        methods:{
            onInput(v){
                this.$emit("input",v)
            }
        }
    }
</script>

<style lang="scss">
.alPopDark{
  background: #2a2b2d;
  color: #fff;
  .popper__arrow{
    &:after{
      border-top-color: #2a2b2d!important;
    }
  }
  .el-popover__title{
    color: #e8e8e8;
  }
}
</style>
