<template>
    <!-- 搜索框 -->
    <view class="search-ipt">
        <view
            class="check-type"
            @click="
                () => {
                    isSelectShow = !isSelectShow
                }
            "
        >
            {{ activeTypeName }}
            <van-icon name="arrow-down" />

            <view class="check-item" v-if="isSelectShow">
                <view
                    @click.stop="
                        () => {
                            activeTypeName = '机具'
                            isSelectShow = !isSelectShow
                        }
                    "
                >
                    机具
                </view>
                <view
                    @click.stop="
                        () => {
                            activeTypeName = '需求'
                            isSelectShow = !isSelectShow
                        }
                    "
                >
                    需求
                </view>
            </view>
        </view>
        <van-field v-model="searchModelValue" />
        <van-button square type="primary" icon="search" @click="onSearchBtn" />
    </view>
</template>

<script setup>
import { ref } from 'vue'
const isSelectShow = ref(false)
const activeTypeName = ref('机具')
const searchModelValue = ref('')
const emits = defineEmits(['onSearchByType'])
const onSearchBtn = () => {
    emits('onSearchByType', searchModelValue.value, activeTypeName.value === '机具' ? 1 : 2)
}
</script>

<style lang="scss" scoped>
.search-ipt {
    display: flex;
    align-items: center;

    .check-type {
        position: relative;
        height: 36px;
        width: 100px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        background-color: #fff;
        border: 1px solid #22ab9b;
        border-right: none;
        border-top-left-radius: 18px;
        border-bottom-left-radius: 18px;

        .check-item {
            position: absolute;
            bottom: 0;
            width: 70px;
            left: 0;
            transform: translateY(100%);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
            transition: all 0.5s;
            background-color: #fff;
            z-index: 9;
            view {
                padding: 6px;
                font-size: 13px;
            }
        }
        .check-item view:hover {
            background-color: #00a288;
            color: #fff;
        }
    }

    .van-field {
        padding: 0;
        height: 36px;
        line-height: 36px;
        border: 1px solid #22ab9b;
        // border-top-left-radius: 18px;
        // border-bottom-left-radius: 18px;
        padding-left: 18px;
        border-left: none;
    }

    .van-button {
        height: 36px;
        width: 70px;
        line-height: 36px;
        background: #22ab9b;
        border: none;
        border-top-right-radius: 18px;
        border-bottom-right-radius: 18px;
        font-size: 18px;
    }
}
</style>
