<template>
  <view>
    <!-- 1. tab组件 -->
    <u-tabs
      :list="tabs"
      :is-scroll="false"
      :current="current"
      inactive-color="#666"
      active-color="#eb4450"
      @change="onTapsChange"
    ></u-tabs>

    <!-- 2. 菜单 -->
    <view class="list">
      <view class="item" v-for="item in orders" :key="item.order_id">
        <view class="item_row">
          <text class="item_row_left">订单编号</text>
          <text class="item_row_right">{{ item.order_number }}</text>
        </view>
        <view class="item_row">
          <text class="item_row_left">订单金额</text>
          <text class="item_row_right price">{{ item.order_price }}</text>
        </view>
        <view class="item_row">
          <text class="item_row_left">订单日期</text>
          <text class="item_row_right">{{item.update_time_format}}</text>
        </view>
        <view class="item_row">
          <text class="item_row_left">支付状态</text>
          <text class="item_row_right">{{ item.pay_status === "0" ? "未支付" : "已付款" }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data(){
    return{
      tabs: [
        {
          name: "全部",type: 1
        },
        {
          name: "待支付",type: 2
        },
        {
          name: "待发货", type: 3
        },
      ],
      current: 0,
      orders: [],
      type: 1
    }
  },
  methods: {
    // 切换子页面
    onTapsChange(index){
      this.current = index
      this.type = this.tabs[index].type
      this.getOrderList()
    },
    // 获取支付信息
    async getOrderList(){
      const {message: { orders }} = await this.$u.api.getOrderList({ type: this.type })
      this.orders = orders.map(item => ({...item, update_time_format: new Date(item.update_time * 1000).toLocaleString()}))
    }
  },

  onLoad({current, type}) {
    this.current = current || 0
    this.type = type || 1
    this.getOrderList()
  }

}
</script>

<style lang="scss">
.list {
  .item {
    padding: 20rpx;
    border-top: 5px solid #f4f4f4;
    .item_row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 60rpx;
      .item_row_left {
        color: #666;
      }
    }
  }
}
</style>