<template>
  <uni-popup
    ref="popup_dialog"
    type="center"
    mask-background-color="rgba(0,0,0,0.8)"
    :is-mask-click="false"
  >
    <view class="popup-dialog">
      <view class="popup-dialog-msg">
        <text class="popup-dialog-text">{{ text }}</text>
      </view>
      <view class="popup-dialog-btns">
        <button class="popup-dialog-btn cancel" @click="handleClick">
          取消
        </button>
        <button
          class="popup-dialog-btn confirm"
          @click="handleClick($event, 'confirm')"
        >
          确定
        </button>
      </view>
      <!-- <image
        class="popup_close"
        :src="require('@/assets/icon/icon-close.png')"
        @click="close()"
      >
      </image> -->
    </view>
  </uni-popup>
</template>

<script>
export default {
  data() {
    return {
      text: "",
    };
  },

  methods: {
    open(text) {
      this.text = text;
      this.$refs.popup_dialog.open();
      return new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
      });
    },
    close() {
      this.$refs.popup_dialog.close();
    },
    handleClick(e, type) {
      if (type === "confirm") {
        this.$emit("confirm", e);
        this.resolve && this.resolve();
      } else {
        this.$emit("cancel", e);
        this.reject && this.reject();
      }
      this.close();
    },
  },
};
</script>

<style lang="scss">
.popup-dialog {
  width: 459rpx;
  height: 397rpx;
  background: url(@/assets/popup/bg.png) no-repeat;
  background-size: contain;
  padding: 72rpx 54rpx 0;
  box-sizing: border-box;

  .popup-dialog-msg {
    min-height: 136rpx;
    margin-bottom: 24rpx;
    display: flex;
    align-items: center;
    justify-items: center;
    font-size: 28rpx;
    font-weight: 500;
    color: #ffffff;
    line-height: 44rpx;
    text-align: center;
    max-height: 176rpx;
    overflow: hidden;
  }
  .popup-dialog-btns {
    display: flex;
    justify-content: space-between;
    .popup-dialog-btn {
      width: 162rpx;
      height: 64rpx;
      font-size: 28rpx;
      font-weight: 500;
      line-height: 64rpx;
      background: no-repeat center;
      background-size: contain;
      margin: 0;
      &::after {
        display: none;
      }
      &.cancel {
        color: #1d2130;
        background-image: url(@/assets/popup/cancel.png);
      }
      &.confirm {
        color: #4efbff;
        background-image: url(@/assets/popup/confirm.png);
      }
    }
  }
}
</style>
