<template>
    <view class="cooperation-topbar-wrapper">
        <!-- <view
            v-for="(item, index) in list"
            :key="index"
            class="item-nav"
            :class="selectedIndex === index ? 'active' : ''"
            @tap="handleTap(index)"
        >
            <text class="item">{{ item.name }}</text>
        </view> -->
        <view class="search-input" @tap="goSearchPage">
            <view class="content">
                <c-icon name="search" class="icon"/>
                <view class="input c-font-normal c-color">{{ placeHolder }}</view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file tab
 * @author mazihan
 */

import CIcon from '@baidu/med-ui/components/Icon/Icon';

export default {
    config: {
        component: true
    },
    components: {
        CIcon
    },
    props: {
        /**
         * 选中的tab
         */
        selectedIndex: {
            type: Number,
            default: 0
        },
        /**
         * 数据集合
         */
        list: {
            type: Array,
            default: () => []
        },
        /**
         * placeholder
         */
        placeHolder: {
            type: String,
            default: ''
        },
        url: {
            type: String,
            default: '' 
        }
        
    },
    data() {
        return {};
    },
    created() {},
    methods: {
        handleTap(index) {
            this.$emit('tabChage', index);
        },
        goSearchPage() {
            this.$emit('goSearchPage');
        }
    }
};
</script>
<style lang="less" scoped>
.cooperation-topbar-wrapper {
    padding: 0.12rem .17rem 0;
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 2;
    height: .38rem;
    line-height: .38rem;
    .item-nav {
        padding: 0 0.11rem;
        margin-right: .11rem;
        position: relative;
        &.active {
            // &::after {
            //     content: '';
            //     display: block;
            //     position: absolute;
            //     left: 50%;
            //     bottom: 0;
            //     margin-left: -0.11rem;
            //     width: 0.22rem;
            //     height: 3px;
            //     border-radius: 2px;
            //     background: #ffffff;
            // }
            .item {
                font-size: 0.2rem;
            }
        }
    }
    .item {
        font-size: 0.14rem;
        color: #ffffff;
    }
    .search-input {
        flex: 1;
        border-radius: .19rem;
        color: #ffffff;
        background: rgba(255, 255, 255, 0.38);
        .content {
            display: flex;
            align-items: center;
            justify-content: center;
            .icon {
                margin-right: .07rem;
            }
        }
        .input {
            color: #ffffff;
        }
    }
}
@media only screen and (max-width: 340px) {
    .cooperation-topbar-wrapper  {
        .item-nav {
            padding: 0 0.08rem;
        }
    }
}
</style>
