<template>
    <view id="cn" class="cn">
        <view :style="{position: 'relative', 'z-index': maskZindex + 1}">
            <view 
                v-if="list && list.length > 1" 
                class="cn__bar"
            >
                <view v-if="navFixed" class="cn__bar__placeholder"/>
                <view 
                    v-show="!panelOpen"
                    :style="{
                        top: topbarHeight + 'px',
                    }"
                    :class="navFixed ? 'fixed' : ''"
                    class="cn__bar__c"
                >
                    <view class="cn__bar__c__line c-font-15">
                        <view
                            v-for="(c, i) in __lineCityList"
                            :key="'bar__c__' + i"
                            :class="i === selectedIndex ? 'selected' : ''"
                            class="cn__bar__c__line__i c-line-clamp1"
                            @tap.stop="onSelect(c, i)"
                        >
                            <c-icon 
                                v-if="i === 0" 
                                name="location-new" 
                                font-size=".14rem"
                            />{{ c.name }}
                        </view>
                    </view>
                    <view class="cn__bar__c__icon c-font-15" @tap.stop="onChangePanelState">
                        <c-icon name="down" font-size=".14rem"/>
                    </view>
                </view>
            </view>
            <view
                v-if="panelOpen" 
                class="cn__panel"
                :style="{
                    top: topbarHeight + 'px',
                }"
            >
                <view class="cn__panel__bar">
                    <view class="cn__bar__c__line c-font-15">
                        <view class="cn__bar__c__line__text c-font-15">请选择以下城市</view>
                    </view>
                    <view class="cn__bar__c__icon c-font-15" @tap.stop="onChangePanelState">
                        <c-icon name="up" font-size=".14rem"/>
                    </view>
                </view>
                <scroll-view 
                    scroll-with-animation
                    scroll-y
                    class="cn__panel__scroll"
                >
                    <view 
                        class="cn__panel__c" 
                        :style="panelStyle"
                    >
                        <view 
                            v-for="(c, i) in list"
                            :key="'panel__' + i"
                            class="cn__panel__c__i"
                            @tap.stop="onSelect(c, i)"
                        >
                            <text 
                                class="cn__panel__c__i__text c-line-clamp1"
                                :class="i === selectedIndex ? 'selected' : ''"
                            >
                                {{ c.name }}
                            </text>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
        <view 
            v-if="panelOpen" 
            class="cn__panel__mask" 
            :style="{'z-index': maskZindex}" 
            @touchmove.prevent.stop 
            @tap="panelOpen = false"
        />
    </view>
</template>
<script>
/**
 * @file 活动CityNavs
 * @author wangying51
 * @categories
 * @tags
 */
import CIcon from '@baidu/med-ui/components/Icon/Icon';
export default {
    config: {
        component: true
    },
    props: {
        /**
         * 城市列表
         */
        list: {
            type: Array,
            default: () => ([])
        },
        /**
         * 城市列表
         */
        selectedIndex: {
            type: Number,
            default: 0
        },
        /**
         * bar 一行展示几个城市
         */
        lineNum: {
            type: Number,
            default: 5
        },
        /**
         * 展开面板样式
         */
        panelStyle: {
            type: Object,
            default: () => {
                return {
                    'background': '#EB3D2F'
                };
            }
        },
        /**
         * 展开面板Item普通样式
         */
        panelItemStyle: {
            type: Object,
            default: () => {
                return {
                    'background': '#fff',
                    'color': '#F74F1D',
                    'font-weight': 'bold'
                };
            }
        },
        /**
         * 展开面板mask Zindex层级
         */
        maskZindex: {
            type: Number,
            default: 1
        },
        /**
         * 页面滚动距离
         */
        scrollTop: {
            type: Number,
            default: 0
        },
        /**
         * 是否Fixed
         */
        navFixed: {
            type: Boolean,
            default: false
        },
        /**
         * 页面topbar的高度
         */
        topbarHeight: {
            type: Number,
            default: 0
        },
        /**
         * 打点
         */
        log: {
            type: Object,
            default: () => {
                return {
                    value: 'citynavitem',
                    ext: {
                        pd: 'act'
                    }
                };
            }
        }
    },
    components: {
        CIcon
    },
    data() {
        return {
            // 面板开启
            panelOpen: false,
            // nav距离顶部的距离
            navTopHeight: 0
        };
    },
    computed: {
        __lineCityList() {
            return this.list.slice(0, this.lineNum);
        }
    },
    mounted() {
        !this.navTopHeight && setTimeout(() => {
            this.getNavTopHeight();
        }, 200);
    },
    methods: {
        onSelect(c, i) {
            this.panelOpen = false;
            /**
             * 选中事件
             */
            this.$emit('onChange', {c, i});
        },
        onChangePanelState() {
            this.panelOpen = !this.panelOpen;
            /**
             * 面板切换事件
             */
            this.$emit('onPanelStateChange', this.panelOpen);
        },
        getNavTopHeight() {
            this.$api.createSelectorQuery().selectViewport().scrollOffset(viewport => {
                const query = this.$api.createSelectorQuery().select('#cn');
                query.boundingClientRect(rect => {
                    const {top} = rect || {};
                    if (top) {
                        this.navTopHeight = top;
                        /**
                         * 获取到nav距离顶部高度事件
                         */
                        this.$emit('onGetNavTopHeight', top);
                    }
                    else {
                        this.getNavTopHeight();
                    }
                }).exec();
            }).exec();
        }
    }
};
</script>
<style lang="less" scoped>
.cn {
    &__bar {
        &__c {
            background-color: #fff;
            display: flex;
            box-sizing: border-box;
            padding-right: .02rem;
            padding-left: .13rem;
            height: .35rem;
            width: 100%;
            left: 0;
            &.fixed {
                position: fixed;
            }
            &__line {
                width: calc(100% - .36rem);
                display: flex;
                text-align: center;
                font-family: PingFangSC-Semibold;
                color: #3D3D3D;
                &__text {
                    color: #EC201C;
                    line-height: .35rem;
                    margin-left: .16rem;
                }
                &__i {
                    flex: 1;
                    line-height: .35rem;
                    &.selected {
                        color: #EC201C;
                    }
                }
                
            }
            &__icon {
                display: inline-block;
                text-align: center;
                width: .36rem;
                color: #EC201C;
                position: relative;
                line-height: .35rem;
                &::before {
                    content: '';
                    width: 1px;
                    height: .19rem;
                    background: rgba(39, 39, 39, .32);
                    position: absolute;
                    left: 0;
                    top: .08rem;
                    bottom: .08rem;
                }
            }
        }
        &__placeholder {
            width: 100%;
            height: .35rem;
        }
    }
    &__panel {
        position: fixed;
        left: 0;
        right: 0;
        &__bar {
            display: flex;
            background: #fff;
        }
        &__scroll {
            background: #fff;
            max-height: 76vw;
            overflow-y: scroll;
        }
        &__c {
            display: flex;
            flex-wrap: wrap;
            padding: .08rem;
            box-sizing: border-box;
            &__i {
                width: 25%;
                box-sizing: border-box;
                padding: 0 .08rem;
                margin: .08rem 0;
                text-align: center;
                height: .28rem;
                line-height: .28rem;
                color: #fff;
                &__text {
                    width: 100%;
                    background: #B60606;
                    border-radius: .05rem;
                    display: inline-block;
                    box-sizing: border-box;
                    padding: 0 .05rem;
                    font-size: .12rem;
                    &.selected {
                        background: #fff;
                        color: #F7461D;
                    }
                }
            }
        }
        &__mask {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, .5);
        }
    }
}
</style>
