<template>
  <u-modal :show="show" >
    <view class="slot-content">
      <view class="title"> {{ title }} </view>
      <view class="content">
        <text :class="{ isMain: isMain }">{{ content }}</text>
      </view>
    </view>
    <template #confirmButton>
      <view class="btn-box">
        <text class="cancel" @click="handleClose('cancel')">取消</text>
        <text class="ok" @click="handleClose('ok')">{{ okText }}</text>
      </view>
    </template>
  </u-modal>
</template>
<script setup lang="ts">

const props = withDefaults(
  defineProps<{
    title: string;
    content: string;
    okText: string;
    isMain: boolean;
    show: boolean;
  }>(),
  {
    okText: "确认",
    isMain: false,
    show: false
  }
);
const emit = defineEmits(["handleModal", "handleOk", "handleCancel"]);
const handleClose = (v: string) => {
  emit("handleModal", false);
  if (v === 'ok') {
    // 走确认操作
    emit("handleOk");
  } else {
    emit("handleCancel")
  }
};
</script>
<style lang="scss" scoped>
.title {
  text-align: center;
  font-weight: 400;
  font-size: 32rpx;
  color: #000000;
  margin-top: 25px;
}
.content {
  padding-top: 25px;
  font-weight: 400;
  font-size: 27rpx;
  color: #999999;
}
.isMain {
  color: #ec0f3e;
}
.btn-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 25px;
  .cancel {
    font-weight: 500;
    font-size: 32rpx;
    color: #999999;
  }
  .ok {
    font-weight: 500;
    font-size: 32rpx;
    color: $u-primary;
  }
}
</style>
