<template>
  <uni-popup ref="popupRef" :is-mask-click="false" animation type="bottom">
    <view class="popup_box">
      <view v-if="titleText" class="header_title">
        {{ titleText }}
      </view>
      <view class="container">
        <slot></slot>
      </view>
      <view class="operation">
        <button class="confirm_btn" @tap="tapConfirmBtn">确定</button>
      </view>
    </view>
  </uni-popup>
</template>
<script setup lang="ts">
import { ref, watch, nextTick } from 'vue';
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  titleText: {
    type: String,
    default: '',
  },
  cancelBtnText: {
    type: String,
    default: '取消',
  },
  confirmBtnText: {
    type: String,
    default: '确定',
  },
});
const emits = defineEmits(['update:modelValue', 'handleConfirmBtn', 'handleCancelBtn']);
const popupRef = ref();
// 确认
function tapConfirmBtn() {
  emits('handleConfirmBtn');
}
// 取消
function tapCancelBtn() {
  popupRef.value.close();
  emits('update:modelValue', false);
  emits('handleCancelBtn');
}
watch(
  () => props.modelValue,
  () => {
    if (props.modelValue) {
      nextTick(() => {
        popupRef.value.open();
      });
    } else {
      nextTick(() => {
        popupRef.value && popupRef.value.close();
      });
    }
  },
  {
    immediate: true,
    deep: true,
  },
);
</script>
<style lang="scss" scoped>
.popup_box {
  position: relative;
  max-height: 660rpx;
  min-height: 300rpx;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  overflow: hidden;
  padding-bottom: 110rpx;

  .header_title {
    color: #0a1f13;
    font-size: 32rpx;
    font-weight: 600;
    line-height: 32rpx;
    padding: 30rpx;
    box-sizing: border-box;
    margin-bottom: 20rpx;
  }
  .container {
    padding: 40rpx 30rpx;
    box-sizing: border-box;
  }
  .operation {
    display: flex;
    position: fixed;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-top: 16rpx;
    border-top: 1px solid #eeeeee;
    bottom: 16rpx;
    .confirm_btn {
      height: 90rpx;
      width: 440rpx;
      color: #fff;
      background-color: #615dff;
    }
  }
}
</style>
