<template>
  <view class="l-input-wrapper">
    <view class="l-input-title">{{ title }}</view>
    <input :type="type" :placeholder="place" :password="password" placeholder-class="l-input-place"
      v-model="vdata.inputValue" @input="inputChange" />
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue'
const props = defineProps({
  title: { type: String }, //标题
  require: { type: Boolean, default: false }, //是否必填 默认 否
  place: { type: String }, // placeholder
  type: { type: String, default: 'text' }, //input 类型
  value: { type: [String, Number], default: '' }, //双向绑定的值
  REG: {}, //正则表达式
  password: { type: Boolean, default: false },//是否密码模式 默认false
})

const emits = defineEmits(['update:value'])
const vdata = reactive({
  inputValue: props.value,
})
const inputChange = (e) => {
  emits('update:value', vdata.inputValue)
}
const check = () => {
  if (props.require && !vdata.inputValue) return errorTips('不能为空')
  if (props.REG && !props.REG.test(vdata.inputValue)) return errorTips('填写不正确')
  return true
}
const errorTips = (err) => {
  uni.showToast({
    title: props.title + err,
    icon: 'none',
  })
}
defineExpose({ check })
</script>

<style lang="scss" scoped>
.l-input-wrapper {
  margin: 50rpx;
  height: 100rpx;

  border-bottom: 1rpx solid #666;

  input {
    font-size: 24rpx;
    height: 50%;
    background-color: transparent !important;
  }

  .l-input-title {
    margin-bottom: 10rpx;
    font-size: 24rpx;
    font-weight: 700;
  }
}

::v-deep .l-input-place {
  font-size: 32rpx;
  color: #666;
}
</style>
