<template>
  <u-modal
    :title="title"
    :show="show"
    :showCancelButton="true"
    :showConfirmButton="true"
    :show-title="showTitle"
    :confirmText="options['confirm-text']"
    :cancelText="options['cancel-text']"
    confirmColor="#FF779E"
    @confirm="confirmHandler"
    @cancel="cancelHandler"
  >
    <view class="slot-content">
      <text class="fs-32 text-center">{{ content }}</text>
    </view>
  </u-modal>
</template>

<script>

export default {
  name: 'GModal',
  props:{
    showTitle:{
      type:Boolean,
      default:()=> false
    },
    title:{
      type:String,
      default:()=> ''
    }
  },
  data() {
    return {
      show: false,
      content: '',
      resolve: null,
      reject: null,
      options: {},
      timer: null
    };
  },
  methods: {
    open(content, options = {}) {
      this.show = true;
      this.content = content;
      this.options = {
        'confirm-text': '确定',
        'cancel-text': '取消',
        ...options
      };
      return new Promise((resolve, reject) => {
        this.reject = reject;
        this.resolve = resolve;
      });
    },
    confirmHandler() {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.resolve();
        this.show = false;
      });
    },
    cancelHandler() {
      this.reject();
      this.show = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.slot-content {
  font-size: 32rpx;
  padding: 54rpx 48rpx;
  width: 650rpx;
}
</style>
