<script setup>
  const props = defineProps({
    placeholder: {
      type: String,
      default: '请输入内容'
    }
  })

  const placeholderStyle = `font-family: PingFang SC, PingFang SC; font-weight: 500; color: #666666; font-size: 24rpx; font-style: normal; text-transform: none;`

  const name = defineModel({
    type: String,
    default: ''
  })
</script>

<template>
  <view class="cb-search">
    <image
      src="/static/images/public/search.png"
      mode="heightFix"
      class="left-icon"
    ></image>
    <input
      v-model="name"
      :placeholder-style="placeholderStyle"
      :placeholder="props.placeholder"
      class="search-box"
    />
    <button class="search-btn">搜索</button>
  </view>
</template>

<style lang="scss" scoped>
  .cb-search {
    height: 64rpx;
    display: flex;
    align-items: center;
    background: #f9f9f9;
    border-radius: 64rpx;
    padding: 0 0 0 32rpx;
    .left-icon {
      height: 48rpx;
      flex-shrink: 0;
      margin-right: 8rpx;
    }
    .search-box {
      width: 100%;
      font-size: 24rpx;
      color: #333333;
    }
    .search-btn {
      margin: 0 8rpx;
      flex-shrink: 0;
      width: 120rpx;
      height: 56rpx;
      line-height: 56rpx;
      background: linear-gradient(180deg, #00d993 0%, #00d9c5 100%);
      border-radius: 64rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #ffffff;
      text-align: center;
      font-style: normal;
      text-transform: none;
      &::after {
        border: none;
      }
    }
  }
</style>
