<template>
  <div class="fee-detail">
    <div class="item">
      <div>平台用费：<i class="iconfont iconquestion icon-class" @click="onClick"></i></div>
      <div>{{data.platformFee.amount || '￥0'}}</div>
    </div>
    <div class="item">
      <div>银行转账费（1%）：</div>
      <div>{{data.bankTransferFee || '￥0'}}</div>
    </div>
    <div class="item">
      <div class="total-fee">实际收入：</div>
      <div class="fee">{{data.income || '￥0'}}</div>
    </div>

    <Modal ref="dialog" v-model="showModal">
      <div class="title">
        平台费用
      </div>

      <div class="item item2">
        <span>商品鉴定费</span>
        <span>{{data.platformFee.appraiseFee}}</span>
      </div>

      <div class="item item2">
        <span>商品包装费</span>
        <span>{{data.platformFee.packageFee}}</span>
      </div>

      <div class="item item2">
        <span>平台服务费({{data.platformFee.goodsPaymentRatePercent}})</span>
        <span>{{data.platformFee.serviceFee}}</span>
      </div>

      <template slot="footer">
          <Button class="btn" @click="hide">我知道了</Button>
      </template>
    </Modal>
  </div>
</template>

<script>

import Modal from './modal';
import Button from 'components/button2.vue';

export default {
  name: 'OrderFee',
  props: {
    data: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      confirmBtn: {},
      showModal: false
    };
  },
  components: {
    Modal,
    Button
  },
  methods: {
    onClick() {
      if (!this.data.income) {
        return this.$createToast({
          txt: '没有价格',
          time: 1500,
          type: 'txt'
        }).show();
      }
      this.showModal = true;
    },
    hide() {
      this.showModal = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.item {
  display: flex;
  justify-content: space-between;
  color: #999;
  font-size: 28px;
  margin: 12px 0;
}

.item2 {
  color: black;
  margin-bottom: 43px;
  font-size: 28px;

  &:last-child {
    margin-bottom: 0;
  }
}

.title {
  font-size: 32px !important;
  margin-bottom: 50px;
  text-align: center;
}

.total-fee {
  font-size: 28px;
  color: black;
}

.fee {
  font-size: 28px;
  color: #d0021b;
}

.icon-class {
  color: #d8d8d8;
  font-size: 26px;
  margin-left: 10px;
}

.fee-content {
  padding: 0 40px;
}

.btn {
  width: 100% !important;
  font-size: 30px;
  color: black !important;
  font-weight: bold;
}
</style>