// 改版全本订阅弹窗
<template>
  <x-prompt class="order-confirm"
            :visible="visible">
    <div class="head">全本订阅提醒</div>
    <div class="body">
      <p class="tips-text"
         v-if="is_first_book_order">首次订阅仅需{{fee}}<i>(1399)</i>书币即可解锁所有章节</p>
      <p class="tips-text not-first"
         v-else>整本仅需<i>{{fee}}</i>书币即可解锁所有章节</p>
    </div>
    <div class="confirm-wrap">
      <p class="btn"
         @click="close">取消</p>
      <p class="btn btn-confirm"
         @click="orderBook">确定</p>
    </div>
  </x-prompt>
</template>

<script>
import prompt from "../prompt.vue";

export default {
  components: { "x-prompt": prompt },
  methods: {
    orderBook() {
      let isEnough = this.user_balance >= this.fee;
      // 余额足够 订阅 不够 跳充值
      if (isEnough) this.confirm();
      else {
        this.visible = false;
        this.reject();
      }
    },
    close() {
      this.visible = false;
    }
  }
};
</script>

<style lang="scss">
.order-confirm {
  .wrap {
    padding-bottom: 0 !important;
  }

  .tips-text {
    font-size: 0.28rem;
    color: #333;
    padding: 0.28rem 0;

    i {
      font-style: normal;
      color: #999;
      text-decoration: line-through;
    }

    &.not-first {
      i {
        text-decoration: none;
        color: #ff6060;
      }
    }
  }

  .confirm-wrap {
    display: flex;
    border-top: 1px solid #f7f7f7;

    .btn {
      flex: 1;
      padding: 0.28rem 0;

      &.btn-confirm {
        background: rgba($color: #32a1ff, $alpha: 0.8);
        color: #fff;
      }
    }
  }
}
</style>