/**
 * 用户信息确认弹框组件
 * Properties: show(控制显示), userInfo(用户信息)
 * Events: confirm(确认), cancel(取消)
 */
Component({
    properties: {
        /** 是否显示弹框 */
        show: {
            type: Boolean,
            value: false
        },
        /** 用户信息数据 */
        userInfo: {
            type: Object,
            value: {}
        }
    },

    data: {
        /** 控制 wx:if，DOM 是否存在 */
        innerShow: false,
        /** 控制 --visible 类，触发 CSS transition */
        animVisible: false
    },

    observers: {
        /**
         * 监听外部 show 变化：
         * 打开时先展示弹框再执行动画；关闭时移除动画类后移除 DOM
         */
        show(val: boolean) {
            if (val) {
                this.setData({ innerShow: true })
                setTimeout(() => {
                    this.setData({ animVisible: true })
                }, 20)
            } else {
                this.setData({ animVisible: false })
                setTimeout(() => {
                    this.setData({ innerShow: false })
                }, 300)
            }
        }
    },

    methods: {
        /** 点击遮罩关闭 */
        onTapMask() {
            this.triggerEvent('cancel')
        },

        /** 点击取消按钮 */
        onTapCancel() {
            this.triggerEvent('cancel')
        },

        /** 点击确认按钮 */
        onTapConfirm() {
            this.triggerEvent('confirm')
        }
    }
})