<template>
    <view class="container">
        <view class="input-search">
            <image class="wh30 mr20" @click="skipSearch" :src="search"></image>
            <input @click="skipSearch" v-model="searchValue" class="input" type="text" :placeholder="placeholder"
                @change="search_change">
            <uni-icons @click="emit('camera')" class="icon" type="camera" size="30"></uni-icons>
        </view>
        <view @click="search_change(searchValue)" class="search wsn">搜索</view>
    </view>
</template>
<script setup>
import { ref, defineEmits } from 'vue'
import search from '@/static/search.png'

const props = defineProps({
    disabled: {
        type: Boolean,
        default: true
    },
    placeholder: {
        type: String,
        default: '请输入搜索内容'
    }
})
const searchValue = ref('')
const emit = defineEmits(["search", "camera"])
//改变内容
const updateSearch = (val) => {
    searchValue.value = val
    search_change(val)
}
const search_change = (val) => {
    //搜索
    console.log(val)
    //通知父组建改变
    emit('search', val)
}

const skipSearch = () => {
    if (!props.disabled) {
        return
    }
    //跳转搜索 传递参数
    uni.navigateTo({
        url: '/pages/shop/search/index'
    })
}
defineExpose({
    updateSearch
})
</script>
<style lang="scss" scoped>
.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    top: 10px;
    padding: 10rpx 20rpx;
    background-color: $uni-bg-color;
    //圆角
    border-radius: 30rpx;

    .input-search {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        padding-right: 10rpx;


        .icon {
            padding-right: 10rpx;
        }

        .overlay {
            width: calc(100% - 280rpx);
            position: absolute;
            height: 60rpx;
            opacity: 0;
            z-index: 2;
        }

        .input {
            width: 100%;
        }
    }

    .search {
        border-radius: 30rpx;
        opacity: 1;
        width: fit-content;
        padding: 14rpx 20rpx;
        font-size: 24rpx;
        line-height: 24rpx;
        color: #333333;
        /* 外部/按钮 */
        background: linear-gradient(180deg, #FDDC85 -3%, #FFCE4F 100%);
    }
}
</style>