<template>
  <div class="x-input-wrapper" :class="wrapperClassObject">
    <div class="input-container">
      <span v-if="config?.label" class="input-label">{{ config.label }}</span>
      <div class="input-wrapper">
        <a-input
          v-model="innerValue"
          v-bind="$attrs"
          :placeholder="config?.placeholder"
          :size="config?.size"
          :maxLength="config?.maxLength"
          :disabled="config?.disabled"
          :allowClear="config?.allowClear"
          @change="handleInput"
          @pressEnter="handleSearch"
        >
          <template v-if="config?.prefix" #prefix>
            <a-icon :type="config.prefix" @click="handleSearch" class="clickable-icon" />
          </template>
          <template v-if="config?.suffix" #suffix>
            <a-icon :type="config.suffix" @click="handleSearch" class="clickable-icon" />
          </template>
        </a-input>
      </div>
      <span v-if="config?.tail" class="input-tail">{{ config.tail }}</span>
    </div>
  </div>
</template>

<script>
import { getConfigByName, runLogic } from '@vue2-client/services/api/common'

export default {
  name: 'XInput',
  inheritAttrs: false,
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    queryParamsName: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      innerValue: this.value || '',
      config: null
    }
  },
  computed: {
    // 动态样式开关：布尔开关 + size 派生类
    wrapperClassObject () {
      const attrs = this.$attrs || {}
      const classes = {}
      const booleanStyleKeys = [
        'medical-history',
        'yizhu-input',
        'custom-placeholder'
      ]
      booleanStyleKeys.forEach(key => {
        const val = attrs[key]
        const truthy = val === true || val === '' || val === 'true'
        if (truthy) classes[`xinput-${key}`] = true
      })
      const size = attrs.size
      if (size && typeof size === 'string') classes[`xinput-size-${size}`] = true
      return classes
    }
  },
  created () {
    this.getData(this.queryParamsName)
  },
  emits: ['search'],
  methods: {
    runLogic,
    async getData (data) {
      getConfigByName(data, 'af-his', res => {
        this.config = res
        if (res.defaultValue !== undefined) {
          this.innerValue = res.defaultValue
        }
      })
    },
    handleInput (e) {
      const value = e.target.value
      this.innerValue = value
      this.$emit('search', value)
    },
    handleSearch () {
      // 统一的搜索事件：将当前输入值发送给父组件
      this.$emit('search', this.innerValue)
    }
  },
  watch: {
    value: {
      handler (newValue) {
        this.innerValue = newValue
      },
      immediate: true
    },
    queryParamsName: {
      handler (newValue) {
        this.getData(newValue)
      },
      deep: true
    }
  }
}
</script>

<style scoped lang="less">
.x-input-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.input-container {
  display: flex;
  align-items: center;
}

.input-label {
  white-space: nowrap;
  color: rgba(0, 0, 0, 0.85);
  padding-right: 8px; /* 标签右侧固定间距 */
  padding-left: 4px; /* 标签左侧固定间距 */
  font-family: Source Han Sans;
  font-size: 16px;
  font-weight: normal;
  color: #313131;
}
.input-tail {
  font-family: Source Han Sans;
  font-size: 16px;
  font-weight: normal;
  line-height: 39px;
  color: #313131;
  padding-left: 4px;
}
.input-wrapper {
  flex: 1; /* 输入框占据剩余空间 */
}

:deep(.clickable-icon) {
  cursor: pointer;
}

:deep(.clickable-icon:hover) {
  color: #1890ff;
}

.x-input-wrapper{
  &.xinput-medical-history {
    width: 192px;
    height: 32px;
    border-radius: 6px;
    opacity: 1;
    background: #FFFFFF;
    box-sizing: border-box;
    border: 1px solid #D8D8D8;

    :deep(.ant-input::placeholder) {
      font-family: Source Han Sans;
      font-size: 16px;
      font-weight: normal;
      line-height: normal;
      letter-spacing: 0em;
      font-feature-settings: "kern" on;
      color: #A7A7A7;
    }
  }
  &.xinput-yizhu-input {
    border-radius: 6px;
    opacity: 1;
    background: #FFFFFF;
    box-sizing: border-box;
    border: 1px solid #E5E9F0;
    margin: 2px 0px;
    :deep(.ant-input) {
      border-radius: 6px;
      opacity: 1;
      background: #FFFFFF;
      box-sizing: border-box;
      border: 1px solid #E5E9F0;
      font-family: Source Han Sans;
      font-size: 14px;
      padding: 5px 76px 3px 8px;
      font-weight: normal;
      line-height: normal;
      letter-spacing: 0em;
      color: #A7A7A7;
    }
  }
  &.xinput-custom-placeholder {
    :deep(.ant-input::placeholder) {
      height: 23px;
      opacity: 1;
      font-family: Source Han Sans;
      font-size: 16px;
      font-weight: normal;
      line-height: normal;
      letter-spacing: 0em;
      color: #A7A7A7;
    }
  }
}

</style>
