<template>
    <view>
        <view v-if="fixed && placeholder" :style="'height: ' + height + 'px;'" />

        <view :class="utils.bem('nav-bar', { fixed }) + ' custom-class ' + (border ? 'van-hairline--bottom' : '')" :style="baseStyle">
            <view class="van-nav-bar__content" :style="customStyle">
                <view class="van-nav-bar__left" @tap="onClickLeft">
                    <block v-if="leftArrow || leftText">
                        <van-icon v-if="leftArrow" size="16px" name="arrow-left" custom-class="van-nav-bar__arrow" />
                        <view v-if="leftText" class="van-nav-bar__text" hover-class="van-nav-bar__text--hover" hover-stay-time="70">{{ leftText }}</view>
                    </block>
                    <slot v-else name="left" />
                </view>
                <view class="van-nav-bar__title title-class van-ellipsis">
                    <block v-if="title">{{ title }}</block>
                    <slot v-else name="title" />
                </view>
                <view class="van-nav-bar__right" @tap="onClickRight">
                    <view v-if="rightText" class="van-nav-bar__text" hover-class="van-nav-bar__text--hover" hover-stay-time="70">{{ rightText }}</view>
                    <slot v-else name="right" />
                </view>
            </view>
        </view>
    </view>
</template>
<script module="utils" lang="wxs" src="@/node_modules/@vant/weapp/dist/wxs/utils.wxs"></script>
<script>
import { VantComponent } from '../common/component';
import { getSystemInfoSync } from '../common/utils';
export default {
    data() {
        return {
            statusBarHeight: 0,
            height: 44,
            baseStyle: ''
        };
    },
    classes: ['title-class'],
    props: {
        title: String,
        fixed: {
            type: Boolean
        },
        placeholder: {
            type: Boolean
        },
        leftText: String,
        rightText: String,
        customStyle: String,
        leftArrow: Boolean,
        border: {
            type: Boolean,
            default: true
        },
        zIndex: {
            type: Number,
            default: 1
        },
        safeAreaInsetTop: {
            type: Boolean,
            default: true
        }
    },
    created() {
        const { statusBarHeight } = getSystemInfoSync();
        const { safeAreaInsetTop, zIndex } = this;
        const paddingTop = safeAreaInsetTop ? statusBarHeight : 0;
        const baseStyle = `z-index: ${zIndex};padding-top: ${paddingTop}px;`;
        this.setData({
            statusBarHeight,
            height: 44 + statusBarHeight,
            baseStyle
        });
    },
    mounted() {
        this.setHeight();
    },
    methods: {
        onClickLeft() {
            this.$emit('click-left');
        },
        onClickRight() {
            this.$emit('click-right');
        },
        setHeight() {
            if (!this.fixed || !this.placeholder) {
                return;
            }
            this.$nextTick(() => {
                this.getRect('.van-nav-bar').then((res) => {
                    this.setData({
                        height: res.height
                    });
                });
            });
        }
    },
    watch: {
        fixed: {
            handler: function () {
                if (!this.fixed || !this.placeholder) {
                    return;
                }
                this.$nextTick(() => {
                    this.getRect('.van-nav-bar').then((res) => {
                        this.setData({
                            height: res.height
                        });
                    });
                });
            },

            immediate: true
        },

        placeholder: {
            handler: function () {
                if (!this.fixed || !this.placeholder) {
                    return;
                }
                this.$nextTick(() => {
                    this.getRect('.van-nav-bar').then((res) => {
                        this.setData({
                            height: res.height
                        });
                    });
                });
            },

            immediate: true
        }
    }
};
</script>
<style>
@import './index.css';
</style>
