<template>
  <div class="order-detail">
    <div v-if="refund_price" class="top" @click="goRefundList()">
      <span>退款金额： {{refund_price}}元</span>
      <span>退款成功</span>
    </div>
    <div class="main">
      <ul :class="['list',{'list-open':openList}]">
        <li v-for="(item,index) in list" :key="index">
          <img :src="item.product_img_url" alt="">
          <div class="item-right">
            <p><span>{{item.product_name}}</span><span>￥{{item.product_price | fen2Yuan}}</span></p>
            <p><span>{{item.product_attach}}</span><span>*{{item.product_num}}</span></p>
          </div>
        </li>
      </ul>
      <div v-if="list.length>3&&!openList" class="btn-open" @click="openList=true">展开（共{{list.length}}件）</div>
      <p class="row"><span>订座预约款</span><span>-¥{{prepare_price | fen2Yuan}}</span></p>
      <p class="row"><span>优惠券</span><span>-¥{{coupon_price | fen2Yuan}}</span></p>
      <p class="row row-1"><span>小计</span><span>¥{{order_price | fen2Yuan}}</span></p>
    </div>
    <div class="bottom">
      <div class="row"><span class="label">订单编号：</span><span class="value">{{order_number}}</span></div>
      <div class="row"><span class="label">桌号：</span><span class="value-1">{{place_number}}</span></div>
      <div class="row"><span class="label">创建时间：</span><span class="value">{{created_at}}</span></div>
      <div class="row"><span class="label">支付时间：</span><span class="value">{{order_pay_time}}</span></div>
      <div class="row"><span class="label">支付方式：</span><span class="value">{{order_pay_type == 1 ? '微信' : '支付宝'}}</span>
      </div>
    </div>
  </div>
</template>
<script>
import { apiOrderDetail } from './api/api'

export default {
  data () {
    return {
      openList: false,
      refund_price: 0,
      list: [],
      prepare_price: 0,
      coupon_price: 0,
      order_price: 0,
      order_number: '',
      place_number: '',
      created_at: '',
      order_pay_time: '',
      order_pay_type: ''
    }
  },
  mounted () {
    this.getDetail()
  },
  methods: {
    goRefundList () {
      this.$router.push({
        path: '/refundList',
        query: {
          id: this.$route.query.id
        }
      })
    },
    getDetail () {
      apiOrderDetail({ id: this.$route.query.id }).then(res => {
        if (res.code === 200) {
          this.refund_price = res.data.order_refund_price
          this.list = res.data.order_detail
          this.prepare_price = res.data.order_prepare_price
          this.coupon_price = res.data.order_coupon_price
          this.order_price = res.data.order_price
          this.order_number = res.data.order_number
          this.place_number = res.data.place_number
          this.created_at = res.data.created_at
          this.order_pay_time = res.data.order_pay_time
          this.order_pay_type = res.data.order_pay_type
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.top {
  background: #fff;
  padding: 19px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 8px 0;

  span {
    font-size: 16px;

    &:first-child {
      color: #1F1E1E;
    }

    &:last-child {
      color: #E55E10;
    }
  }
}

.main {
  background: #fff;
  padding: 20px 0;

  .list {
    max-height: 212px;
    overflow: hidden;

    li {
      display: flex;
      align-items: center;
      padding: 0 20px;
      margin-bottom: 12px;

      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;
          }
        }
      }
    }
  }

  .list-open {
    max-height: none;
  }

  .btn-open {
    text-align: center;
    color: #CCC6C6;
    font-size: 14px;
  }

  .row {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 20px;

    span {
      font-weight: 500;

      &:first-child {
        color: #1F1E1E;
      }

      &:last-child {
        color: #D32323;
      }
    }
  }

  .row-1 {
    color: #1F1E1E;
    font-size: 14px;
    border-top: 1px solid #F2F2F2;

    span {
      &:last-child {
        font-size: 18px;
      }
    }
  }
}

.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>
