<template>
  <view :class="['input_content', props.className]">
    <input
      class="uni-input"
      :class="[props.classInputName]"
      v-model="valueModel"
      @input="onChange"
      :placeholder-style="props.placeholderStyle"
      :style="{
        width: props?.width || '300rpx',
        textAlign: props?.textAlign
      }"
      @change="onChange"
      :placeholder="props?.placeholder || '请输入'"
      :maxlength="props?.maxLength || 255"
      :type="props?.type || 'text'"
      @blur="onBlur"
      @confirm="onConfirm"
      :disabled="props?.disabled"
      :confirm-type="props?.confirmType"
      :password="props?.password || false"
    />
    <view v-if="valueModel.length" class="close" @click="emptyInput">
      <uni-icons type="closeempty" color="#999" size="16" />
    </view>
    <view v-if="suffix" class="suffix">{{ suffix }}</view>
  </view>
</template>

<script setup lang="ts">
import { watch, ref, onMounted } from 'vue'
import { wlInputProps } from './reducer'
const valueModel = ref('')

// ======================= props & emit =======================
const props = defineProps(wlInputProps)
const emit = defineEmits(['update:valueModel', 'input', 'blur', 'bindconfirm', 'onClose'])

watch(
  () => props.valueModel,
  val => {
    valueModel.value = val
    handleChange(val)
  }
)

onMounted(() => {
  valueModel.value = props.valueModel
  handleChange(props.valueModel)
})

const onChange = (e: any) => {
  console.log(e, '输入')
  handleChange(e.detail.value)
}

const handleChange = (value: string) => {
  emit('update:valueModel', value)
  emit('input', value)
}

const onBlur = () => {
  emit('blur', props.valueModel)
}

const onConfirm = (e: any) => {
  const target = e.target as HTMLInputElement
  let value = target.value
  emit('bindconfirm', value)
}

const emptyInput = () => {
  valueModel.value = ''
  onChange({ detail: { value: '' } })
}
</script>
<style lang="scss">
.input_content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding-right: 40rpx;
  .uni-input {
    flex: 1;
    height: 65rpx;
  }
}
.suffix {
  color: #333333;
  font-size: 28rpx;
  margin-left: 20rpx;
}

.close {
  height: 65rpx;
  line-height: 65rpx;
  width: 40rpx;
  text-align: center;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 100;
  background-color: #fff;
}
</style>
