<template>
  <view>
    <up-popup :show="show" mode="center" round="32rpx" @close="close" :safeAreaInsetBottom="false">
      <view class="bg-#f3f3f3 rounded-2xl">
        <view class="py-4 text-center font-bold text-lg">{{ title }}</view>
        <view class="px-4">
          <input
            class="bg-white border-none outline-none rounded-md h-80 w-450 text-base px-4"
            placeholder-class="text-base line-height-[80rpx]"
            :focus="show"
            :placeholder="placeholder"
            :value="text"
            :maxlength="maxlength"
            :type="type"
            @change="change"
          />
        </view>
        <view
          class="flex justify-between items-center border-t-solid border-t-2 text-base font-bold border-t-gray-200 mt-4 text-#63b8af"
        >
          <view
            @click="close"
            class="text-center border-r-solid border-r-2 border-e-gray-200 w-50% box-border py-2"
            >取消</view
          >
          <view @click="confirm" class="text-center w-50% py-2">确定</view>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
  import { ref } from 'vue'

  const show = ref(false)
  const text = ref('')

  const props = defineProps({
    title: { type: String, default: '请输入' },
    placeholder: { type: String, default: '请输入' },
    value: { type: String, default: '' },
    autoClose: { type: Boolean, default: true },
    maxlength: { type: Number, default: 50 },
    type: { type: String, default: 'text' }
  })

  const emits = defineEmits(['confirm'])

  const open = () => {
    text.value = props.value
    show.value = true
  }

  const close = () => {
    show.value = false
  }

  const change = e => {
    text.value = e.target.value
  }

  const confirm = () => {
    emits('confirm', text.value)
    if (props.autoClose) {
      show.value = false
    }
  }

  defineExpose({
    open,
    close
  })
</script>

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