<template>
    <view class="design-search" :style="borderStyle">
        <view class="t-search" :class="inputClass" :style="wrapperStyle">
            <i class="iconfont icon-search"></i>
            <input
                class="input"
                type="text"
                :value="innerValue"
                :placeholder="placeholder"
                placeholder-style="font-size: 28rpx;"
                @input="onInput"
            />
            <view class="clear" v-if="isShowClear" @click="onClear">
                <i class="iconfont icon-clear" />
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

const props = defineProps({
    placeholder: {
        type: String,
        default: '请输入'
    },
    shape: {
        type: String,
        default: 'square'
    },
    border: {
        type: String,
        default: 'none'
    },
    borderColor: {
        type: String,
        default: '#f1f1f1'
    },
    clearable: {
        type: Boolean,
        default: true
    },
    modelValue: {
        type: String,
        default: ''
    },
    showBackground: {
        type: Boolean,
        default: true
    },
    backgroundColor: {
        type: String,
        default: 'transparent'
    },
    showBorder: {
        type: Boolean,
        default: false
    }
})
const emit = defineEmits(['update:modelValue', 'onInput'])

const innerValue = ref('')

const borderStyle = computed(() => {
    const style = {}
    const { showBorder } = props
    if (showBorder) {
        style.borderBottom = '1px solid #f1f1f1'
    }
    return style
})
const inputClass = computed(() => {
    let classes = []
    const { shape, border } = props
    border === 'surround' && (classes = classes.concat('t-border'))
    classes.push(`t-search--${shape}`)

    return classes.join(' ')
})
const wrapperStyle = computed(() => {
    const style = {}
    const { border, borderColor, backgroundColor, showBackground } = props
    if (showBackground) {
        style.backgroundColor = backgroundColor
    }
    if (border === 'surround') {
        style.borderColor = borderColor
    }
    return style
})
const isShowClear = computed(() => {
    const { clearable } = props
    return clearable && innerValue.value !== ''
})
const onInput = e => {
    innerValue.value = e.detail.value
    emit('update:modelValue', innerValue.value)
    emit('onInput')
}
const onClear = () => {
    innerValue.value = ''
    emit('update:modelValue', '')
}
</script>

<style lang="scss" scoped>
.design-search {
    width: 100%;
    padding: 14rpx 24rpx;
    background-color: $white;
    .t-search {
        width: 100%;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 10rpx 18rpx;
        &--square {
            border-radius: 12rpx;
        }
        &--round {
            border-radius: 999px;
        }
        .icon-search {
            color: $gray-2;
        }
        .input {
            margin-left: 8rpx;
            flex: 1;
            line-height: 32rpx;
            height: 48rpx;
        }
        .icon-clear {
            width: 48rpx;
            height: 48rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            color: $gray-2;
        }
    }
    .t-border {
        border-width: 0.5px;
        border-style: solid;
    }
}
</style>
