<template>
  <div class="serial-wrap">
    <nav-bar title="退款流水"/>
    <div class="wrap" v-if="data.length">
      <div class="list">
        <div class="card" v-for="(item, index) in data" :key="index">
          <div class="head flex_sb align-c">
            <p>退款流水号：{{item.refundFlowCode}}</p>
          </div>
          <div class="message">
            <div class="flex_sb align-c" v-if="item.refundAmountText">
              <p>金额：</p>
              <span>{{item.refundAmountText}}</span>
            </div>
            <div class="flex_sb align-c" v-if="item.refundTypeText">
              <p>退款方式：</p>
              <span>{{item.refundTypeText}}</span>
            </div>
            <div class="flex_sb align-c" v-if="item.refundTimeText">
              <p>退款时间：</p>
              <span>{{item.refundTimeText}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="room-detail-none">暂无数据</div>
  </div>
</template>

<script>
import NavBar from "@/components/common/NavBar";

export default {
  name: "Serial",
  components: {
    NavBar
  },
  data() {
    return {
      data: []
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取数据
    getData() {
      let params = {};
      params.url = this.$apis.api_order_refund_flow_list;
      params.data = {
        refundId: this.$route.query.id
      };
      this.$net.req(params, this).then(
        res => {
          this.data = res.data.list;
        },
        e => {
          this.$Toast(e.msg);
        }
      );
    }
  }
};
</script>

<style scoped lang='less'>
.serial-wrap {
  background: #fff;
  min-height: 100vh;
  .wrap {
    padding: 20px 20px 0;
    .list {
      .card {
        padding: 0 15px;
        background: #f9f9f9;
        border-radius: 8px;
        margin-bottom: 15px;
        .head {
          height: 40px;
          border-bottom: 1px solid #ddd;
          margin-bottom: 10px;
          p {
            color: #222;
            font-size: 14px;
          }
        }
        .message {
          color: #999;
          font-size: 14px;
          padding-bottom: 10px;
          > div {
            margin: 10px 0 0;
          }
        }
      }
    }
  }
}
</style>
