<template>
    <view
        :id="scrollId"
        class="bx-wrap"
    >
        <view
            v-if="title"
            class="bx-title bx-title-between"
            :style="{padding: padding}"
            @tap.stop="onTap({url})"
        >
            <view>
                <text
                    class="bx-title-left c-color-333"
                    :style="{fontSize: titleFontSize, color: titleColor}"
                >
                    {{ title }}
                </text>
            </view>
            <view
                v-if="type === 'city-insurance'"
                class="bx-title-swtich c-font-normal"
                @tap.stop="onCustomTap"
            >
                <c-icon
                    name="location"
                    font-size="14px"
                    color="#B8B8B8"
                />
                <text class="bx-title-swtich-text c-color">{{ city }}</text>
                <c-icon
                    name="down"
                    font-size="14px"
                    class="c-color-gray"
                />
            </view>
            <view
                v-else
                class="flex-wrap"
            >
                <div v-if="subTitle" class="c-font-normal c-color-gray">
                    {{ subTitle }}
                </div>
                <c-icon
                    v-if="showRightArrow"
                    name="right"
                    font-size="16px"
                    class="c-color-gray"
                />
            </view>
        </view>
        <view>
            <slot></slot>
        </view>
    </view>
</template>
<script>
/**
* @file bx-wrap
* @author yinlejia
* @categories 业务组件
* @tags [component]
*/
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import {navigate} from '@utils/navigate';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CIcon
    },
    props: {
        scrollId: {
            type: String,
            default: ''
        },
        /* 标题 */
        title: {
            type: String,
            default: ''
        },
        /* 副标题 */
        subTitle: {
            type: String,
            default: ''
        },
        /* 跳转 */
        url: {
            type: String,
            default: ''
        },
        /* 右箭头 */
        showRightArrow: {
            type: Boolean,
            default: false
        },
        /* 边距 */
        padding: {
            type: String,
            default: '0.15rem 0.13rem'
        },
        /** 标题大小 */
        titleFontSize: {
            type: String,
            default: '0.18rem'
        },
        /** 标题颜色 */
        titleColor: {
            type: String,
            default: '#333333'
        },
        /** 类型 */
        type: {
            type: String,
            default: ''
        },
        /* 城市 */
        city: {
            type: String,
            default: '北京'
        },
        /* 省 */
        province: {
            type: String,
            default: '北京'
        },
        // 导航高度
        topbarHeight: {
            type: Number,
            default: 44
        }
    },
    data() {
        const isSwan = process.env.MARS_ENV === 'swan';
        return {
            isSwan
        };
    },
    mounted() {
        // 锚到当前位置
        if (this.scrollId && this.scrollId.length) {
            setTimeout(() => {
                const query = this.$api.createSelectorQuery().select('#' + this.scrollId);
                query.boundingClientRect(rect => {
                    this.$api.pageScrollTo({scrollTop: rect.top - (this.isSwan ? this.topbarHeight + 3 : 47), duration: 300});
                    this.$emit('resetScrollId');
                })
                    .exec();
            }, 300);
        }
    },
    methods: {
        onCustomTap() {
            if (this.type === 'city-insurance'){
                this.$emit('onCustomTap', {type: 'city-insurance'});
            }
        },
        onTap(data) {
            if (data.url || data.path) {
                navigate({
                    url: (data.url || data.path) + '?city=' + this.city + '&province=' + this.province,
                    log: {
                        type: 'clk',
                        value: this.type,
                        ext: {
                            pd: 'bx',
                            value_type: 'title',
                            page_type: 'bx-home'
                        }
                    }
                });
            }
        }

    }
};
</script>

<style lang="less" scoped>
.bx-wrap {
    position: relative;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}
.flex-wrap {
    display: flex;
}
.bx-title {
    position: relative;
    display: flex;
    align-items: center;
    &-left {
        font: 18px/26px Arial, Helvetica, sans-serif;
        color: #333333;
    }
    &-between {
        justify-content: space-between;
    }
    &-left {
        z-index: 10;
        position: relative;
        font-weight: 700;
    }
    &-swtich {
        height: 0.25rem;
        border: 0.01rem solid #E0E0E0;
        border-radius: 0.12rem;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 0.06rem;
        &-text {
            margin: 0 0.03rem;
        }
    }
}
</style>
