<!--
 * @Author: zhaojinfeng 121016171@qq.com
 * @Date: 2023-06-25 15:55:08
 * @LastEditors: peerless_hero peerless_hero@outlook.com
 * @LastEditTime: 2023-07-11 02:37:57
 * @FilePath: \uni\packages\confirm\index.vue
 * @Description:
 *
-->
<template>
  <View v-show="modelValue" h-100vh w-full w-750rpx relative bg="#818181" overflow-hidden z-1000>
    <View class="th-prompt" w-400rpx text-center rounded-16rpx absolute top="1/3" left="1/2" ml="-200rpx" right-0 bg-white z-1001>
      <View py-32rpx>
        <View color="#3a3a3a" fs-17 font-500>
          {{ title }}
        </View>
        <View v-if="title && content" h-16rpx />
        <View color="#6a6a6a" fs-13 font-400>
          {{ content }}
        </View>
      </View>
      <View flex fs-15 border-t-1rpx border-t-solid border-t="#DCDCDC">
        <View
          v-show="showConfirm"
          class="rounded-lb-16rpx"
          active="bg-#f2f7ff"
          :class="{
            'rounded-rb-16rpx': !showCancel,
          }"
          flex-grow
          color="#3b82f6"
          py-16rpx
          cursor-pointer
          select-none
          @click="confirm"
        >
          {{ confirmText }}
        </View>
        <View v-show="showConfirm && showCancel" w-1rpx bg="#dcdcdc" />
        <View
          v-show="showCancel"
          class="rounded-rb-16rpx"
          active="bg-#f2f7ff"
          color="#6a6a6a"
          flex-grow
          :class="{
            'rounded-lb-16rpx': !showConfirm,
          }"
          py-16rpx
          cursor-pointer
          select-none
          @click="cancel"
        >
          {{ cancelText }}
        </View>
      </View>
    </View>
  </View>
</template>

<script lang="ts" setup name="Confirm">
withDefaults(
  defineProps<{
    /** 是否显示 */
    modelValue?: boolean
    /** 标题 */
    title?: string
    /** 内容 */
    content?: string
    /** 确认按钮的默认值 */
    confirmText?: string
    /** 取消按钮的默认值 */
    cancelText?: string
    /** 是否显示确认按钮 */
    showConfirm?: boolean
    /** 是否显示取消按钮 */
    showCancel?: boolean
  }>(),
  {
    modelValue: false,
    confirmText: '确定',
    cancelText: '取消',
    showConfirm: true,
    showCancel: true,
  },
)

const emit = defineEmits<{
  /** 更新modelValue */
  (event: 'update:modelValue', modelValue: boolean): void
  /** 确认事件 */
  (event: 'confirm'): void
  /** 取消事件 */
  (event: 'cancel'): void
}>()

function confirm() {
  emit('update:modelValue', false)
  emit('confirm')
}

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

<style lang="scss">
.th-modal {
  box-shadow: 0px 1px 6px 0px rgba(216, 216, 216, 0.5)
}
</style>
