<template>
  <layout-body>
    <div class="detail">
      <div class="detail-header">
        <p class="bold-title">状态：{{ data.status }}</p>
        <p class="no-title">提现发起后，正常xx-xx工作日到款</p>
      </div>
      <div class="detail-list">
        <p>
          <span class="no-title">创建时间：{{ data.createTime | timeFormat }}</span>
          <span class="no-title">店铺：{{ data.shopName }}</span>
          <span class="no-title">供应商: {{ data.supplierName }}</span>
        </p>
        <table border class="table-body">
          <tr>
            <td>业务单据号</td>
            <td>{{ data.statementSn }}</td>
            <td>类型</td>
            <td>{{ data.type }}</td>
          </tr>
          <tr>
            <td>收款账户</td>
            <td>{{ data.targetAccount }}</td>
            <td>付款账户</td>
            <td>有货商贸有限公司（yh@yoho.cn）{{ data.targetAccount }}</td>
          </tr>
          <tr>
            <td>申请金额（元）</td>
            <td>{{ data.applyAmount }}</td>
            <td>服务费</td>
            <td>{{ data.serviceAmount }}</td>
          </tr>
          <tr>
            <td>成功金额（元）</td>
            <td>{{ data.tradeSuccessAmount }}</td>
            <td>操作人</td>
            <td>{{ data.applyPid }}</td>
          </tr>
          <tr>
            <td>说明</td>
            <td>{{ data.remarks }}</td>
            <td>失败原因</td>
            <td>{{ data.errorReason }}</td>
          </tr>
          <tr>
            <td>备注</td>
            <td>{{ data.remarks }}</td>
            <td></td>
            <td></td>
          </tr>
        </table>
      </div>
      <div class="detail-footer">
        <i-button type="primary" @click="backList">返回列表</i-button>
      </div>
    </div>
  </layout-body>
</template>
<script>
import FinanceService from 'services/finance/finance-service';

export default {
  name: 'Detail',
  props: ['id'],
  data() {
    return {
      data: [],
    };
  },
  created() {
    this.financeService = new FinanceService();
  },
  mounted() {
    this.getDetail();
  },
  methods: {
    backList() {
      this.$router.push({ name: 'finance.withdraw.withdrawlist' });
    },
    getDetail() {
      return this.financeService.shopWithdrawApplyById(this.$route.params).then(result => {
        if (result.code === 200) {
          this.data = result.data;
          this.$emit('on-change', this.data);
        }
      });
    },
    refresh() {
      this.getDetail();
    },
  },
};
</script>

<style lang="scss">
.detail {
  margin-bottom: 20px;

  .detail-header {
    .bold-title {
      font-size: 25px;
    }

    .no-title {
      font-size: 12px;
    }
  }

  .detail-list {
    margin-top: 20px;

    table,
    tr,
    td {
      border: 1px solid #e9e9e9;
      padding: 8px 16px;
      text-align: left;
    }

    table {
      font-size: 12px;
      border-collapse: collapse;
      border-spacing: 0;
      empty-cells: show;
    }
  }

  .detail-footer {
    margin-top: 20px;
  }
}
</style>