<!--
  组件作用： 单个输入框的弹层。 
  输入框的弹出框， uni必须使用的是： 组件方式， 无法直接JS调起。 
  // 要求， 输入空也可以点击确定。 
  示例： 
  
  A: 一般用法： 
  <JeepayPopupInput ref="ref" label="备注" :maxLength="3" v-model:value="vdata.payRemark" />
  
  B: 自定义 校验规则
  <JeepayPopupInput ref="ref" label="备注" :maxLength="3" v-model:value="vdata.payRemark" :rules="[ {required: true }, {pattern: '^(123)+$' } ]" />
  
  @author terrfly
  @site https://www.jeequan.com
  @date 2022/11/17 10:46
-->

<template>
  <uni-popup ref="popupRef" type="dialog">
    <uni-popup-dialog :before-close="true" mode="input" :title="`请输入${props.label}`" @confirm="confirmFunc" @close="popupRef.close()">
      <template #default>
        <uni-forms ref="formRef" :rules="vdata.rules" :modelValue="vdata.formData">
          <uni-forms-item label="" name="singleInputVal">
            <uni-easyinput :inputBorder="false" type="text" v-model="vdata.formData.singleInputVal" :placeholder="`最多输入${props.maxLength}个字`" :maxlength="props.maxLength" />
          </uni-forms-item>
        </uni-forms>
      </template>
    </uni-popup-dialog>
  </uni-popup>
</template>

<script setup>
import { reactive, ref, watch } from 'vue'

// 定义组件参数
const props = defineProps({
  // 显示文本
  label: { type: String, default: '' },

  // 操作对象
  value: [Number, String],

  // 输入框最大位数
  maxLength: { type: Number, default: 10 },

  rules: { type: Array, default: () => [] },
})

// emit 父组件使用： v-model="val" 进行双向绑定。
const emit = defineEmits(['update:value'])

// 重置按钮，不能直接重置时间选择，需要通过watch监听，进行重置
watch(
  () => props.value,
  (newVal, oldVal) => {
    vdata.formData.singleInputVal = newVal
  }
)

const popupRef = ref()
const formRef = ref()

const vdata = reactive({
  // 表单的值
  formData: { singleInputVal: '' },

  // 验证规则
  rules: {
    singleInputVal: { rules: props.rules },
  },
})

// 点击确认按钮。
function confirmFunc() {
  formRef.value.validate().then(() => {
    emit('update:value', vdata.formData.singleInputVal)
    popupRef.value.close()
  })
}

// 显示弹层
function open() {
  vdata.formData.singleInputVal = props.value
  popupRef.value.open()
}

// 将表格事件暴露出去  https://www.jianshu.com/p/39d14c25c987
defineExpose({ open })
</script>

<style lang="scss" scoped></style>
