// 全本书币购买
<template>
  <x-prompt :visible="visible">
    <div class="head">全本订阅提醒</div>
    <div :class="['body', {'book-order__wrap': !!is_first_book_order}]">
      <div class="book-name single-line red" v-if="!showBookName">《{{book_name}}》</div>
      <template v-if="!!is_first_book_order">
        <div class="first-order list-dot">
          首订优惠：
          <span class="red">{{fee}}</span>书币
          <i>(1399书币)</i>
        </div>
        <div class="fee list-dot"
             :class="{'is-discount': discount}">余额：
          <span>{{user_balance}}</span>书币
        </div>
      </template>
      <template v-else>
        <div class="fee" :class="{'is-discount': discount}">本书价格：
          <span class="red">{{fee}}</span>书币</div>
        <div v-if="discount" class="discount">今日特价：
          <span class="red">{{discount_fee}}</span>书币({{discount}})</div>
        <div class="balance">您的余额：
          <span class="red">{{user_balance}}</span>书币
        </div>
      </template>
    </div>
    <div class="confirm"
         @click="confirm">订阅本书</div>
  </x-prompt>
</template>
<script>
import prompt from "../prompt.vue";
export default {
  components: { "x-prompt": prompt },
  data() {
    return {
      showBookName: !!window.options.hide_book_name
    };
  },
  methods: {}
};
</script>
<style lang="scss">
.book-order__wrap {
  .book-name {
    text-align: left;
    color: #333;
    font-size: 0.32rem;
    margin-bottom: 0.3rem;
  }

  .fee {
    color: #666;
    text-align: left;
    font-weight: bold;
    font-size: 0.28rem;
    line-height: 1;
    margin-bottom: 0.3rem;

    span.red {
      font-size: .24rem;
      font-weight: normal;
    }
  }

  .list-dot {
    height: auto !important;
    line-height: 1 !important;
    position: relative;
    padding-left: 0.2rem;

    &::before {
      content: "";
      position: absolute;
      width: 4px;
      height: 4px;
      top: 50%;
      left: 0;
      transform: translate(0, -50%);
      background: #ff6060;
      border-radius: 50%;
    }
  }

  .first-order {
    text-align: left;
    font-size: 0.28rem;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 0.2rem;

    span {
      font-size: 0.36rem;
    }

    i {
      font-weight: normal;
      font-style: normal;
      font-size: 0.26rem;
      color: #999;
      text-decoration: line-through;
    }
  }
}
</style>