<!--
 * @Author: zhaojinfeng 121016171@qq.com
 * @Date: 2023-06-25 15:55:08
 * @LastEditors: peerless_hero peerless_hero@outlook.com
 * @LastEditTime: 2023-07-11 04:02:58
 * @FilePath: \uni\packages\prompt\index.vue
 * @Description:
 *
-->
<template>
  <View v-show="show" h-100vh w-750rpx relative bg="#818181" overflow-hidden z-1000 @click="cancel">
    <View rounded-t-48rpx w-750rpx absolute bottom-0 bg-white z-1001>
      <View mt-32rpx mb-24rpx mx-48rpx fs-30 font-400>
        {{ title }}
      </View>
      <View text-center mx-48rpx>
        <textarea
          v-model="value"
          w-654rpx
          :placeholder="placeholder"
          border-1rpx
          border-solid
          border="#dcdcdc"
          placeholder-class="textarea-placeholder"
          w-full
          rounded-8rpx
          rows="5"
          :maxlength="maxlength"
        />
        <button
          w-654rpx
          h-80rpx
          color-white
          border="none"
          bg="#2979ff"
          rounded-8rpx
          @click="confirm"
        >
          {{ confirmText }}
        </button>
      </View>
    </View>
  </View>
</template>

<script lang="ts" setup name="Prompt">
import { ref } from 'vue'

const props = withDefaults(
  defineProps<{
  /** 标题 */
    title: string
    /** 是否显示 */
    show?: boolean
    /** 文本框绑定的值 */
    textarea?: string | number
    /** 输入框的提示文字 */
    placeholder?: string
    /** 确认按钮的文字 */
    confirmText?: string
    /** 限制输入字符数 */
    maxlength?: number | string
    radio?: Array<{ text?: string; value?: number | string }>
  }>(),
  {
    show: false,
    radio: () => [],
  },
)

const emit = defineEmits<{
  /** 确定事件 */
  (event: 'confirm'): void
  /** 取消事件 */
  (event: 'cancel'): void
  /** 更新show */
  (event: 'update:show', show: boolean): void
  /** 更新textarea */
  (event: 'update:textarea', value: string): void
  /** 更新radio */
  (event: 'update:radio', value: string | number): void
}>()

const value = ref('')

function confirm() {
  emit('update:textarea', value.value)
  if (props.radio.length)
    emit('update:radio', value.value)

  emit('update:show', false)
}
function cancel() {
  emit('update:show', false)
}
</script>

<style>
.textarea-placeholder{
  color:#909399
}
</style>
