<template>
    <div v-transfer-dom>
      <popup
        v-model="show"
        v-bind="currentPopupAttrs"
      >
        <popup-header
            v-bind="currentHeaderAttrs"
            @on-click-left="cancel"
            @on-click-right="confirm">
        </popup-header>
        <slot></slot>
      </popup>
    </div>
</template>
<script>
import { extend } from '@/assets/utils/util'
import { TransferDom, Popup, PopupHeader } from 'vux'

const defaultPopupAttrs = {
    'hide-on-blur': true
}
const defaultHeaderAttrs = {
    'left-text': '取消',
    'right-text': '确定',
    'title': '请选择',
    'show-bottom-border': false
}
export default {
    name: 'VPopupHeader',
    props: {
        value: {
            type: Boolean,
            default: false
        },
        //  popup 属性
        popupAttrs: {
            type: Object,
            default: () => ({})
        },
        // popup-header 属性
        headerAttrs: {
            type: Object,
            default: () => ({})
        }
    },
    directives: {
        TransferDom
    },
    components: {
        Popup,
        PopupHeader
    },
    data () {
        return {
        }
    },
    computed: {
        show: {
            get () {
                return this.value
            },
            set (v) {
                this.$emit('input', v)
            }
        },
        currentPopupAttrs () {
            const { popupAttrs } = this
            return extend(defaultPopupAttrs, popupAttrs)
        },
        currentHeaderAttrs () {
            const { headerAttrs } = this
            return extend(defaultHeaderAttrs, headerAttrs)
        }
    },
    watch: {},
    mounted () {
    },
    methods: {
        cancel () {
            this.show = false
            this.$emit('cancel')
        },
        confirm () {
            this.$emit('confirm')
        }
    }

}
</script>
<style lang="less" scoped>
/deep/.vux-popup-dialog {
  .vux-popup-header {
    height: 40px;
    font-size: .32rem;
     .vux-popup-header-left,.vux-popup-header-right {
      color: #333;
    }
  }
}
</style>
