<template>
  <view class="search-container" :class="containerClass">
    <view class="search-box" :class="searchBoxClass">
      <!-- 搜索图标 -->
      <view class="search-icon" v-if="showIcon">
        <text class="icon">🔍</text>
      </view>
      
      <!-- 搜索输入框 -->
      <input
        class="search-input"
        :class="inputClass"
        :type="inputType"
        :value="inputValue"
        :placeholder="placeholder"
        :placeholder-style="placeholderStyle"
        :disabled="disabled"
        :maxlength="maxlength"
        :focus="focus"
        :confirm-type="confirmType"
        @input="handleInput"
        @focus="handleFocus"
        @blur="handleBlur"
        @confirm="handleConfirm"
        @keyboardheightchange="handleKeyboardHeightChange"
      />
      
      <!-- 清除按钮 -->
      <view 
        class="clear-btn" 
        v-if="showClear && inputValue"
        @click="handleClear"
      >
        <text class="icon">✕</text>
      </view>
      
      <!-- 搜索按钮 -->
      <view 
        class="search-btn" 
        v-if="showSearchBtn"
        :class="{ disabled: !inputValue }"
        @click="handleSearch"
      >
        <text class="btn-text">{{ searchBtnText }}</text>
      </view>
    </view>
    
    <!-- 取消按钮 -->
    <view 
      class="cancel-btn" 
      v-if="showCancel && (isFocused || inputValue)"
      @click="handleCancel"
    >
      <text class="cancel-text">取消</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Search',
  props: {
    // 输入框值
    value: {
      type: String,
      default: ''
    },
    // 占位符
    placeholder: {
      type: String,
      default: '请输入搜索内容'
    },
    // 占位符样式
    placeholderStyle: {
      type: String,
      default: 'color: #999'
    },
    // 输入框类型
    inputType: {
      type: String,
      default: 'text'
    },
    // 最大输入长度
    maxlength: {
      type: Number,
      default: 140
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否自动聚焦
    focus: {
      type: Boolean,
      default: false
    },
    // 确认按钮文字
    confirmType: {
      type: String,
      default: 'search'
    },
    // 是否显示搜索图标
    showIcon: {
      type: Boolean,
      default: true
    },
    // 是否显示清除按钮
    showClear: {
      type: Boolean,
      default: true
    },
    // 是否显示搜索按钮
    showSearchBtn: {
      type: Boolean,
      default: false
    },
    // 搜索按钮文字
    searchBtnText: {
      type: String,
      default: '搜索'
    },
    // 是否显示取消按钮
    showCancel: {
      type: Boolean,
      default: false
    },
    // 搜索框形状
    shape: {
      type: String,
      default: 'round', // round, square
      validator: (value) => ['round', 'square'].includes(value)
    },
    // 搜索框大小
    size: {
      type: String,
      default: 'normal', // large, normal, small
      validator: (value) => ['large', 'normal', 'small'].includes(value)
    },
    // 背景色
    backgroundColor: {
      type: String,
      default: '#f5f5f5'
    },
    // 自定义样式类
    customClass: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      inputValue: '',
      isFocused: false
    }
  },
  computed: {
    containerClass() {
      return [
        this.customClass,
        `search-${this.size}`
      ]
    },
    searchBoxClass() {
      return [
        `search-${this.shape}`,
        { 'search-focused': this.isFocused },
        { 'search-disabled': this.disabled }
      ]
    },
    inputClass() {
      return {
        'input-with-icon': this.showIcon,
        'input-with-btn': this.showSearchBtn
      }
    }
  },
  watch: {
    value: {
      handler(newVal) {
        this.inputValue = newVal
      },
      immediate: true
    }
  },
  methods: {
    // 输入事件
    handleInput(e) {
      const value = e.detail.value
      this.inputValue = value
      this.$emit('input', value)
      this.$emit('change', value)
    },
    // 聚焦事件
    handleFocus(e) {
      this.isFocused = true
      this.$emit('focus', e)
    },
    // 失焦事件
    handleBlur(e) {
      this.isFocused = false
      this.$emit('blur', e)
    },
    // 确认事件
    handleConfirm(e) {
      const value = e.detail.value
      this.$emit('confirm', value)
      this.$emit('search', value)
    },
    // 键盘高度变化
    handleKeyboardHeightChange(e) {
      this.$emit('keyboardheightchange', e)
    },
    // 清除输入
    handleClear() {
      this.inputValue = ''
      this.$emit('input', '')
      this.$emit('change', '')
      this.$emit('clear')
    },
    // 搜索按钮点击
    handleSearch() {
      if (!this.inputValue) return
      this.$emit('search', this.inputValue)
    },
    // 取消按钮点击
    handleCancel() {
      this.inputValue = ''
      this.isFocused = false
      this.$emit('input', '')
      this.$emit('change', '')
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="scss" scoped>
.search-container {
  display: flex;
  align-items: center;
  width: 100%;
  
  &.search-large {
    .search-box {
      height: 88rpx;
    }
    .search-input {
      font-size: 32rpx;
    }
  }
  
  &.search-normal {
    .search-box {
      height: 72rpx;
    }
    .search-input {
      font-size: 28rpx;
    }
  }
  
  &.search-small {
    .search-box {
      height: 60rpx;
    }
    .search-input {
      font-size: 24rpx;
    }
  }
}

.search-box {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  padding: 0 24rpx;
  transition: all 0.3s ease;
  
  &.search-round {
    border-radius: 36rpx;
  }
  
  &.search-square {
    border-radius: 8rpx;
  }
  
  &.search-focused {
    background-color: #fff;
    border: 2rpx solid #2e8b57;
  }
  
  &.search-disabled {
    opacity: 0.6;
    background-color: #f0f0f0;
  }
}

.search-icon {
  margin-right: 16rpx;
  
  .icon {
    font-size: 28rpx;
    color: #999;
  }
}

.search-input {
  flex: 1;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: #333;
  
  &.input-with-icon {
    margin-left: 0;
  }
  
  &.input-with-btn {
    margin-right: 16rpx;
  }
}

.clear-btn {
  margin-left: 16rpx;
  padding: 8rpx;
  
  .icon {
    font-size: 24rpx;
    color: #999;
  }
}

.search-btn {
  margin-left: 16rpx;
  padding: 8rpx 16rpx;
  background-color: #2e8b57;
  border-radius: 8rpx;
  
  &.disabled {
    opacity: 0.5;
  }
  
  .btn-text {
    font-size: 24rpx;
    color: #fff;
  }
}

.cancel-btn {
  margin-left: 24rpx;
  padding: 8rpx 16rpx;
  
  .cancel-text {
    font-size: 28rpx;
    color: #2e8b57;
  }
}
</style>