<template>
    <div 
        v-transfer-dom 
        :data-transfer="transfer" 
        class="yy-select-dropdown" 
        :class="className" 
        :style="styles"><slot></slot></div>
</template>
<script>
    import { oneOf, getStyle } from '../../../utils/assist'
    import { transferIndex, transferIncrease } from '../../../utils/transfer-queue'
    import TransferDom from '../../../directives/transfer-dom'

    const Popper = require('popper.js/dist/umd/popper.js')
    export default {
        name: 'YYSelectDrop',
        props: {
            placement: {
                validator (value) {
                    return oneOf(value, ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'])
                },
                default: 'bottom-start'
            },
            className: {
                type: String
            },
            transfer: {
                type: Boolean
            }
        },
        directives: {
            TransferDom
        },
        data () {
            return {
                popper: null,
                width: '',
                popperStatus: false,
                tIndex: this.handleGetIndex()
            }
        },
        computed: {
            styles () {
                let style = {}
                if (this.width) style.minWidth = `${this.width}px`

                if (this.transfer) style['z-index'] = 1060 + this.tIndex

                return style
            }
        },
        methods: {
            update () {
                if (this.popper) {
                    this.$nextTick(() => {
                        this.popper.update()
                        this.popperStatus = true
                    })
                } else {
                    this.$nextTick(() => {
                        this.popper = new Popper(this.$parent.$refs.reference, this.$el, {
                            placement: this.placement,
                            modifiers: {
                                computeStyle:{
                                    gpuAcceleration: false
                                },
                                preventOverflow :{
                                    boundariesElement: 'window'
                                }
                            },
                            onCreate:()=>{
                                this.$nextTick(this.popper.update())
                                this.resetTransformOrigin()
                            },
                            onUpdate:()=>{
                                this.resetTransformOrigin()
                            }
                        })
                    })
                }
                if (this.$parent.$options.name === 'YYSelect' || this.$parent.$options.name === 'YYInputMultiLang') {
                    this.width = parseInt(getStyle(this.$parent.$el, 'width'))
                }
                this.tIndex = this.handleGetIndex()
            },
            destroy () {
                if (this.popper) {
                    setTimeout(() => {
                        if (this.popper && !this.popperStatus) {
                            this.popper.destroy()
                            this.popper = null
                        }
                        this.popperStatus = false
                    }, 300)
                }
            },
            resetTransformOrigin() {
                if (!this.popper) return
                let x_placement = this.popper.popper.getAttribute('x-placement')
                let placementStart = x_placement.split('-')[0]
                let placementEnd = x_placement.split('-')[1]
                const leftOrRight = x_placement === 'left' || x_placement === 'right'
                if(!leftOrRight){
                    this.popper.popper.style.transformOrigin = placementStart==='bottom' || ( placementStart !== 'top' && placementEnd === 'start') ? 'center top' : 'center bottom'
                }
            },
            handleGetIndex () {
                transferIncrease()
                return transferIndex
            }
        },
        created () {
            this.$on('on-update-popper', this.update)
            this.$on('on-destroy-popper', this.destroy)
        },
        beforeDestroy () {
            if (this.popper) {
                this.popper.destroy()
            }
        }
    }
</script>
