<template>
  <uni-popup
    ref="zoConfirmPopupRef"
    :is-mask-click="false">
    <view class="mosowe-confirm-popup">
      <view
        class="mosowe-confirm-popup__title"
        v-if="props.title">
        <slot name="title">
          {{ props.title }}
        </slot>
      </view>
      <view
        :class="{
          'mosowe-confirm-popup__content': true,
          message: props.message
        }">
        <slot></slot>
      </view>
      <view class="mosowe-confirm-popup__footer">
        <slot name="footer">
          <view class="default_footer">
            <view
              class="item cancel"
              @click="cancel"
              v-if="!props.hideCancel">
              {{ cancelText }}
            </view>
            <view
              class="item confirm"
              @click="confirm">
              {{ confirmText }}
            </view>
          </view>
        </slot>
      </view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
import { ref, watch, getCurrentInstance } from 'vue';

interface PropsType {
  modelValue: boolean; // v-model 弹框显示与隐藏
  title?: string; // 弹框标题
  message?: boolean; // 通用消息类型
  hideCancel?: boolean; // 隐藏取消按钮
  confirmText?: string; // 确认按钮文案
  cancelText?: string; // 取消按钮文案
}

const props = withDefaults(defineProps<PropsType>(), {
  title: '提示',
  confirmText: '确认',
  cancelText: '取消'
});

// emits
interface EmitsType {
  (e: 'update:modelValue', bool: boolean): void;
  (e: 'cancel'): void; // 取消事件
  (e: 'confirm'): void; // 确认事件
}
const emits = defineEmits<EmitsType>();

const zoConfirmPopupRef = ref<any>(null);
watch(
  () => props.modelValue,
  () => {
    props.modelValue ? zoConfirmPopupRef.value.open() : zoConfirmPopupRef.value.close();
  }
);

const instance = getCurrentInstance();
const hasProps = instance.vnode.props;

// 取消
const cancel = () => {
  if (hasProps?.onCancel) {
    emits('cancel');
  } else {
    emits('update:modelValue', false);
  }
};
// 确认
const confirm = () => {
  if (hasProps?.onConfirm) {
    emits('confirm');
  } else {
    emits('update:modelValue', false);
  }
};
</script>

<style lang="scss" scoped>
.mosowe-confirm-popup {
  width: 656rpx;
  padding-top: 32rpx;
  background: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
  &__title {
    font-size: 32rpx;
    font-weight: bold;
    line-height: 48rpx;
    color: #131936;
    padding: 16rpx 48rpx;
    text-align: center;
  }
  &__content {
    padding: 16rpx 48rpx;
    &.message {
      font-size: 28rpx;
      color: rgba(13, 20, 54, 0.6);
      line-height: 44rpx;
      text-align: justify;
      text-align-last: center;
    }
  }
  &__footer {
    padding: 32rpx;
    .default_footer {
      margin: -32rpx;
      display: flex;
      text-align: center;
      border-top: 1px solid rgba(19, 25, 54, 0.05);
      font-size: 28rpx;
      padding: 0 48rpx;
      line-height: 120rpx;
      .item {
        flex: 1;
        &.cancel {
          color: rgba(19, 25, 54, 0.25);
          border-right: 1px solid rgba(19, 25, 54, 0.05);
          box-sizing: border-box;
        }
        &.confirm {
          color: #399e80;
        }
      }
    }
  }
}
</style>
