<template>
  <asset-confirm-popup
    :visible="visible"
    :title="title"
    :confirm-text="confirmText"
    :cancel-text="cancelText"
    :show-cancel="showCancel"
    :show-close="showClose"
    :close-on-mask="closeOnMask"
    @cancel="$emit('cancel')"
    @confirm="$emit('confirm')"
  >
    <view class="wallet-dialog">
      <text v-if="message" class="wallet-dialog__message asset-number-font">{{ message }}</text>
      <view v-if="address" class="wallet-dialog__address asset-number-font">{{ address }}</view>
      <text v-if="description" class="wallet-dialog__description asset-number-font">{{
        description
      }}</text>
    </view>
  </asset-confirm-popup>
</template>

<script>
import AssetConfirmPopup from "./asset-confirm-popup.vue";

export default {
  components: {
    AssetConfirmPopup,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "提示",
    },
    message: {
      type: String,
      default: "",
    },
    address: {
      type: String,
      default: "",
    },
    description: {
      type: String,
      default: "",
    },
    confirmText: {
      type: String,
      default: "确认",
    },
    cancelText: {
      type: String,
      default: "取消",
    },
    showCancel: {
      type: Boolean,
      default: true,
    },
    showClose: {
      type: Boolean,
      default: true,
    },
    closeOnMask: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

<style lang="scss" scoped>
.wallet-dialog__message {
  display: block;
  font-size: 24rpx;
  line-height: 1.6;
  color: #edf2ff;
}

.wallet-dialog__address {
  margin-top: 20rpx;
  padding: 20rpx 18rpx;
  border-radius: 10rpx;
  background: #191E32;
  font-size: 24rpx;
  line-height: 1.6;
  word-break: break-all;
  color: #ffffff;
}

.wallet-dialog__description {
  display: block;
  margin-top: 20rpx;
  font-size: 26rpx !important;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(201, 209, 233, 0.82);
}
</style>
