<template>
  <view>
    <view class="dialog">
      <view class="dialog_title">礼品卡使用明细</view>
      <view class="dialog_top">
        <text>本单最高可使用礼品卡抵扣的金额：</text>
        <text>-{{ info.giftCardMaxUseAmt || "0.00" }}元</text>
      </view>
      <view class="dialog_info">
        <view class="dialog_info_title">礼品卡权限说明</view>
        <scroll-view :scroll-y="true">
          <view class="dialog_info_content">{{ info.giftCardUseDesc || "" }} </view>
        </scroll-view>
      </view>
    </view>
    <view class="dialog_button">
      <view class="uni-dialog-button" @click="close">
        <text class="uni-dialog-button-text">我知道了</text>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: "GiftGardPop",
  props: {
    info: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  methods: {
    close() {
      this.$emit("giftGard-close", false);
    }
  }
};
</script>

<style scoped lang="scss">
@import "@/style/var.scss";
.dialog {
  width: 622rpx;
  &_title {
    @include text-size(32);
    text-align: center;
    color: #323233;
    margin-top: 48rpx;
  }
  &_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 54rpx 24rpx 2rpx 24rpx;
    text {
      &:first-child {
        @include text-size(24);
        color: #969799;
      }
      &:last-child {
        @include text-size(28);
        color: $red;
      }
    }
  }
  &_info {
    border: 1rpx solid #e8e8e8;
    margin: 28rpx 24rpx;
    &_title {
      color: $gray-5;
      height: 58rpx;
      line-height: 58rpx;
      font-size: 28rpx;
      background-color: #f7f8f9;
      text-align: center;
      border-bottom: 1rpx solid #e8e8e8;
    }
    &_content {
      @include text-size(24);
      color: $gray-5;
      margin: 20rpx 18rpx;
      max-height: 486rpx;
      white-space: pre-wrap;
    }
  }
  &_button {
    border: 0.5rpx solid #ebedf0;
    margin-top: 48rpx;
    height: 95rpx;
    color: $red;
    line-height: 95rpx;
    text-align: center;
    margin: 0 auto;
  }
}
</style>
