<template>
  <div class="refund-list">
    <ul>
      <li v-for="(item,index) in list" :key="index">
        <div class="top">
          <div class="row1"><span>退款详情</span><span>{{changeStatus(item.order_refund_status)}}</span></div>
          <div class="row2">退款金额： {{item.order_price | fen2Yuan}}元</div>
        </div>
        <div class="middle">
          <div class="row3">退款信息</div>
          <div v-for="(val,idx) in item.products" :key="idx" class="row4">
            <img :src="val.product_img_url" alt=""/>
            <div class="item-right">
              <p>
                <span>{{ val.product_name }}</span
                ><span>￥{{ val.product_price | fen2Yuan }}</span>
              </p>
              <p>
                <span>{{ val.product_attach }}</span
                ><span>*{{ val.product_num }}</span>
              </p>
            </div>
          </div>
        </div>
        <div class="bottom">
          <div class="row">
            <span class="label">订单编号：</span
            ><span class="value">{{ item.order_number }}</span>
          </div>
          <div class="row">
            <span class="label">桌号：</span
            ><span class="value-1">{{ item.place_number }}</span>
          </div>
          <div class="row">
            <span class="label">退款时间：</span
            ><span class="value">{{ item.created_at }}</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import { apiRefundList } from './api/api'

export default {
  data () {
    return {
      list: []
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    changeStatus (status) {
      switch (status) {
        case 0:
          return '退款中'
        case 1:
          return '退款成功'
        case 2:
          return '退款失败'
        default:
      }
    },
    getList () {
      apiRefundList({ id: this.$route.query.id }).then(res => {
        if (res.code === 200) {
          this.list = res.data.list
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.refund-list {
  li {
    margin-top: 10px;
    background: #fff;

    .top {
      padding: 16px 20px 10px;
      border-bottom: 1px solid #F2F2F2;
    }

    .row1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;

      span {
        &:first-child {
          color: #1f1e1e;
          font-size: 18px;
        }

        &:last-child {
          color: #d32323;
          font-size: 14px;
        }
      }
    }

    .row2, .row3 {
      color: #1f1e1e;
      font-size: 14px;
    }

    .middle {
      padding: 9px 20px 20px;
      border-bottom: 1px solid #F2F2F2;

      .row4 {
        display: flex;
        align-items: center;
        margin-top: 10px;

        img {
          width: 60px;
          height: 60px;
          border-radius: 8px;
          margin-right: 10px;
        }

        .item-right {
          flex: 1;

          p {
            display: flex;
            align-items: center;
            justify-content: space-between;

            &:first-child {
              color: #1F1E1E;
              font-size: 16px;
              margin-bottom: 14px;
            }

            &:last-child {
              color: #736F6F;
              font-size: 14px;
            }
          }
        }
      }
    }

    .bottom {
      padding: 20px;
      background: #fff;
      margin-top: 8px;

      .row {
        display: flex;
        font-size: 14px;
        margin-bottom: 8px;

        .label {
          color: #736F6F;
          width: 75px;
        }

        .value {
          color: #1F1E1E;
        }

        .value-1 {
          color: #009CFF;
        }
      }
    }
  }
}
</style>
