<!--
 * @Author: micky 1254597151@qq.com
 * @Date: 2023-08-14 15:38:40
 * @LastEditors: micky 1254597151@qq.com
 * @LastEditTime: 2023-08-25 18:19:47
 * @FilePath: \housekeeping-uniapp\src\components\widgets\search\search.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <view class="navbar-bg" :style="navbarStyle">
        <view class="flex navbar" :style="navbarItemStyle">
            <!-- 左侧城市 -->
            <view class="flex navbar--city" @click="goPage('/bundle/pages/city/index')">
                <u-icon name="map-fill" size="36" color="text-content" class="mr-1"></u-icon>
                <text class="mr-[15rpx]">{{ cityInfo.name }}</text>
                <!-- <u-icon name="arrow-down" size="20"></u-icon> -->
            </view>
            <!-- 右侧搜索城市 -->
            <u-icon name="search" size="34" color="#BFBFBF" class="mr-[5rpx] ml-[15rpx]"></u-icon>
            <input
                type="text"
                class="flex-1 navbar--search text-[#BFBFBF] w-[480rpx]"
                placeholder="请输入关键词搜索"
                disabled
                @click="goPage('/bundle/pages/search/index')"
                :style="inputStyle"
            />
        </view>
    </view>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useAppStore } from '@/stores/app'
const appStore = useAppStore()

const props = defineProps({
    navbarStyle: {
        type: Object
    },
    navbarItemStyle: {
        type: Object
    },
    inputStyle: {
        type: Object
    }
})

const cityInfo = computed(() => appStore.cityInfo)

const goPage = (url: string) => {
    uni.navigateTo({
        url: url
    })
}
</script>

<style lang="scss" scoped>
.navbar-bg {
    // width: 100%;
    height: 70rpx;
    padding: 0 24rpx;
    position: absolute;
    // top: 265rpx;

    .navbar {
        height: 100%;
        padding: 0 30rpx;
        border-radius: 40rpx;
        background-color: #ffffff;
        display: flex;
        align-items: center;

        &--city {
            color: #222;
            font-size: 28rpx;
            padding-right: 20rpx;
            display: flex;
            align-items: center;
            position: relative;
            &::after {
                content: '';
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 1px;
                height: 36rpx;
                background: #bfbfbf;
            }
        }

        // 输入框
        &--search {
            // margin-left: 30rpx;
            // padding-left: 30rpx;
            // border-left: 1px solid #ccc;
        }
    }
}
</style>
