<template>
  <div class="order_status">
    <img :src="bgImg[status - 1]" alt="" class="order_bg">
    <div class="order_status_item" v-if="status === 1">
      <div class="status_title">下单成功</div>
      <div class="status_info">预计{{ reservationDate }}之前送达</div>
    </div>
    <div class="order_status_item" v-if="status === 2">
      <div class="status_title">待发货</div>
      <div class="status_info"></div>
    </div>
    <div class="order_status_item" v-if="status === 3">
      <div class="status_title">已发货</div>
    </div>
    <div class="order_status_item" v-if="status === 4">
      <div class="status_title">已发货</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    status: {
      type: Number,
      default: 1
    },
    reservationDate: ''
  },
  data() {
    return {
      bgImg: [
        '/static/images/newShopDetail/order_success.png',
        '/static/images/newShopDetail/undelivered.png',
        '/static/images/newShopDetail/wait.png',
        '/static/images/newShopDetail/over.png'
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
.order_status {
  height: 240rpx;
  width: 100%;
  position: relative;
  z-index: 1;
  background-size: cover;
  background-repeat:no-repeat;
  background-position: center;
  .order_bg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
  }
  .order_status_item {
    position: absolute;
    height: 84rpx;
    left: 32rpx;
    top: 48rpx;
    color: white;
    .status_title {
      font-size: 34rpx;
      font-weight: 600;
      color: #FFFFFF;
      line-height: 48rpx;
      margin-bottom: 4rpx;
    }
    .status_info {
        display: inline-block;
        width: 100%;
      font-size: 24rpx;
    }
  }
}
</style>
