Component({
    options: {
        multipleSlots: true, // 在组件定义时的选项中启用多slot支持
    },
    /**
     * 组件的属性列表
     */
    properties: {
        extClass: {
            type: String,
            value: '',
        },
        title: {
            type: String,
            value: '',
        },
        background: {
            type: String,
            value: '',
        },
        color: {
            type: String,
            value: '',
        },
        back: {
            type: Boolean,
            value: true,
        },
        loading: {
            type: Boolean,
            value: false,
        },
        homeButton: {
            type: Boolean,
            value: false,
        },
        animated: {
            // 显示隐藏的时候opacity动画效果
            type: Boolean,
            value: true,
        },
        show: {
            // 显示隐藏导航，隐藏的时候navigation-bar的高度占位还在
            type: Boolean,
            value: true,
            observer: '_showChange',
        },
        // back为true的时候，返回的页面深度
        delta: {
            type: Number,
            value: 1,
        },
    },
    /**
     * 组件的初始数据
     */
    data: {
        displayStyle: '',
    },
    lifetimes: {
        attached() {
            const rect = wx.getMenuButtonBoundingClientRect();
            wx.getSystemInfo({
                success: (res) => {
                    const isAndroid = res.platform === 'android';
                    const isDevtools = res.platform === 'devtools';
                    this.setData({
                        ios: !isAndroid,
                        innerPaddingRight: `padding-right: ${res.windowWidth - rect.left}px`,
                        leftWidth: `width: ${res.windowWidth - rect.left}px`,
                        safeAreaTop:
                            isDevtools || isAndroid
                                ? `height: calc(var(--height) + ${res.safeArea.top}px); padding-top: ${res.safeArea.top}px`
                                : ``,
                    });
                },
            });
        },
    },
    /**
     * 组件的方法列表
     */
    methods: {
        _showChange(show: boolean) {
            const animated = this.data.animated;
            let displayStyle = '';
            if (animated) {
                displayStyle = `opacity: ${show ? '1' : '0'};transition:opacity 0.5s;`;
            } else {
                displayStyle = `display: ${show ? '' : 'none'}`;
            }
            this.setData({
                displayStyle,
            });
        },
        back() {
            const data = this.data;
            if (data.delta) {
                wx.navigateBack({
                    delta: data.delta,
                });
            }
            this.triggerEvent('back', { delta: data.delta }, {});
        },
    },
});