<template>
  <view class="content">
    <view class="header">
      <!-- 搜索-->
      <!-- <view class="searchBar">
        <icon class="searchIcon" type="search" size="14"></icon>
        <input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search"/>
      </view> -->
      <view class="screenBar">
        <view
          v-for="item in screenItems"
          :key="item.current"
          @click="onClickItem(item.current)"
        >
          <view
            class="screenItem"
            v-bind:class="{ active: current === item.current }"
          >{{ item.text }}</view>
        </view>
      </view>
    </view>
    <view class="orderList">
      <view
        v-for="(order) in orderList"
        :key="order.pay_id"
      >
        <OrderCard
          :order="order"
          :current="current"
        ></OrderCard>
      </view>
    </view>
    <view class="footer">没有更多订单了，去商城看看吧~</view>
  </view>
</template>
<script>
import OrderCard from "./components/OrderCard.vue";
import store from "@/store";

export default {
  components: {
    OrderCard: OrderCard
  },
  data() {
    return {
      // 顶部筛选项
      screenItems: [
        { current: "10", text: "全部" },
        { current: "0", text: "待付款" },
        { current: "1", text: "待收货" },
        { current: "2", text: "已完成" }
        // {current:"3",text:'已评价'},
        // {current:"4",text:'退款'},
      ],
      // 当前所在item 默认10-->全部
      current: "10"
    };
  },

onShow() {
	store.dispatch("myOrder/getList", {
	  way: ""
	});
},
  onLoad: function(option) {
    // 获取订单列表
    // store.dispatch("myOrder/getList", {
    //   way: ""
    // });
    // 从user过来传的status，给current，以显示对应item
    this.current = option.status;
  },
  computed: {
    orderList() {
      // console.log('orderList', this.$store.state.myOrder.orderList);
      return this.$store.state.myOrder.orderList;
    }
  },
  methods: {
    // tab点击事件
    onClickItem(e) {
      if (this.current !== e) {
        this.current = e;
      }
    }
  }
};
</script>

<style lang="scss">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f7f6f6;
  min-height: 100vh;
  .header {
    background-color: #ffffff;
    width: 100%;
    // height: 232rpx;
    padding: 20rpx 40rpx 16rpx 40rpx;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    // .searchBar {
    //   width: 670rpx;
    //   display: flex;
    //   justify-content: center;
    //   align-items: center;
    //   box-sizing: border-box;
    //   padding: 0rpx 16rpx;
    //   border: 1px solid #ff6b4a;
    //   border-radius: 8rpx;
    //   background-color: #ffffff;
    // }

    .screenBar {
      width: 670rpx;
      // height: 110rpx;
      height: 70rpx;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      color: #333333;
      font-size: 32rpx;
    }
    .screenItem {
      height: 50rpx;
      font-size: 32rpx;
      color: #333333;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.2s;
    }
    .active {
      // font-size: 34rpx;
      color: #ec5d3b;
    }
    .searchIpt {
      height: 68rpx;
      width: 670rpx;
      padding: 16rpx;
      font-size: 28rpx;
      box-sizing: border-box;
    }
  }
  .orderList {
    // margin-top: 232rpx;
    margin-top: 132rpx;
  }
  .footer {
    font-size: 14px;
    color: #b8b8b8;
    margin: 40rpx 0;
  }
}
</style>
