<template>
  <Modal class="ufo-font" :value="value" @input="onInput" ref="modal" :transfer="true" @on-sure="onSure">
    <div class="change-price-modal">
      <p class="modal-title">当前42码最低售价：¥1999.00</p>
      <Inputx :maxlength="8" class="input-number">
        <span slot="prefix">￥</span>
      </Inputx>
      <transition name="tips">
        <p class="tips" v-show="showTips">价格过高!</p>
      </transition>
      <p class="price-line">
        <span class="title">平台费用：</span>
        <span class="price">-￥10.00</span>
      </p>
      <p class="price-line">
        <span class="title">银行转账费用：</span>
        <span class="price">-￥10.00</span>
      </p>
      <p class="total price-line">
        <span class="title">实际收入：</span>
        <span class="price">￥10.00</span>
      </p>
    </div>
  </Modal>
</template>

<script>
import Inputx from '../../components/inputx.vue';
import Modal from '../../components/modal.vue';

export default {
  name: 'ModalPrice',
  props: {
    value: Boolean,
  },
  data() {
    return {
      showTips: false,
    };
  },
  methods: {
    onSure() {
      this.$emit('on-sure');
      this.showTips = !this.showTips;
    },
    onInput(val) {
      this.$emit('input', val);
    }
  },
  components: {Modal, Inputx}
};
</script>

<style lang="scss" scoped>
.change-price-modal {
  .tips {
    color: #d0021b;
    font-size: 24px;
    margin-bottom: 20px;
  }

  .price-line {
    margin-bottom: 20px;
    color: #999;
    font-size: 24px;
    display: flex;

    .title {
      width: 50%;
    }

    .price {
      width: 50%;
      text-align: right;
    }

    &.total {
      color: #000;
    }
  }

  .input-number {
    margin-bottom: 15px;

    /deep/ .input {
      font-weight: bold;
    }
  }

  .modal-title {
    line-height: 100px;
    text-align: center;
  }
}

.tips-enter-active,
.tips-leave-active {
  will-change: true;
  transition: opacity 300ms;
}

.tips-enter {
  opacity: 0;
}

.tips-leave-active {
  opacity: 0;
}
</style>