<!--
 * @Author: micky
 * @Date: 2024-08-13 10:54:38
 * @LastEditors: micky
 * @LastEditTime: 2024-10-08 10:05:41
 * @FilePath: \chargingpile-uniapp\src\pages\overhaul\pool\search.vue
-->
<template>
    <view class="search flex justify-between items-center px-[24rpx]">
        <view class="flex">
            <view
                v-for="item in optionsMap.orderPoolSearch"
                :key="item.value"
                class="search-item"
                :class="formSearch.queryType == item.value ? 'active' : ''"
                @click="changeType(item.value)"
            >
                {{ item.label }}
            </view>
        </view>
        <!-- <view @click="showPopup = true">
            <TIcon name="icon-shaixuan" :size="24" color="#457AF7" />
        </view>
        <view class="popup" v-if="showPopup">
            <view class="bg-white">
                <view
                    v-for="item in optionsMap.orderTypeSelect"
                    :key="item.value"
                    class="popup-item"
                    :class="formSearch.type == item.value ? 'active' : ''"
                    @click="selectItem(item.value)"
                >
                    <text>{{ item.label }}</text>
                    <u-icon
                        name="checkbox-mark"
                        color="#1C6FFB"
                        size="20"
                        v-if="formSearch.type == item.value"
                    ></u-icon>
                </view>
            </view>
            <view class="mask" @click="showPopup = false"></view>
        </view> -->
    </view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { optionsMap } from '@/config/options'

defineProps({
    modelValue: {
        type: Object
    }
})
const emits = defineEmits(['update:modelValue', 'change'])
// const showPopup = ref(false)
const formSearch = ref({
    queryType: optionsMap.orderPoolSearch[0].value
    // type: optionsMap.orderTypeSelect[0].value
})
// const selectItem = (val: any) => {
//     formSearch.value.type = val
//     showPopup.value = false
// }
const changeType = (type: number) => {
    formSearch.value.queryType = type
    emits('update:modelValue', type)
    emits('change', type)
}
</script>
<style scoped lang="scss">
.search {
    @apply relative;
    .search-item {
        @apply bg-white rounded-sm px-2 py-1 mr-2 text-lightblack text-[26rpx];
        &.active {
            @apply bg-[#E4F1FF] text-primary;
        }
    }
    .popup {
        @apply absolute -left-5 top-[40px] w-[100vw] z-[1000];
        .popup-item {
            @apply flex justify-between px-4 py-3 border-t border-border;
        }
        .mask {
            @apply w-full h-[100vh];
            background-color: rgba(0, 0, 0, 0.2);
        }
    }
}
</style>
