<template>
  <div class="order" style="padding-top: 84px">
    <div class="order-title">
      <van-nav-bar
        title="我的订单"
        class="van-nav-bar-my-fixed"
        left-arrow
        @click-left="onClickLeft"
      />
      <van-tabs
      class="vant-tabs-main"
        v-model="parmValue.status"
        swipeable
        color="#FF8327"
        line-height="2px"
        @click="onLoad(1)"
        title-active-color="#FF8327"
      >
        <van-tab
          v-for="item in tabList"
          :key="item.code"
          :title="item.name"
          :name="item.code"
        >
        </van-tab>
      </van-tabs>
    </div>

    <van-list
      v-if="list && list.length > 0"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="list-ul-main">
        <ul
          class="list-ul clear"
          v-for="item in list"
          :key="item"
          @click="goto(item.id)"
        >
          <li>
            <span class="fl">{{ item.order_sn }}</span
            ><span class="fr">{{
              item.status === "1" ? "待发货" : "待收货"
            }}</span>
          </li>
          <li>
            <span class="fl">五常大米</span
            ><span class="fr">{{ item.order_num }}袋/2.5kg</span>
          </li>
        </ul>
      </div>
    </van-list>
    <van-empty v-else description="暂无订单！" />
  </div>
</template>

<script>
import { Tab, Tabs, List, cell } from "vant";
import asyncRequest from "@/apis/order/index";
import resToken from "@/mixins/resToken";
export default {
  mixins: [resToken],
  components: {
    "van-cell": cell,
    "van-list": List,
    "van-tab": Tab,
    "van-tabs": Tabs,
  },
  data() {
    return {
      active: "0",
      tabList: [
        {
          code: "0",
          name: "全部",
        },
        {
          code: "1",
          name: "待发货",
        },
        {
          code: "2",
          name: "待收货",
        },
      ],
      total: 0,
      parmValue: {
        status: "0",
        page: 1, // 页码
        size: 10, // 每页显示条数
      },
      list: [],
      loading: false,
      finished: false,
    };
  },
  async created() {
    await this.onLoad(1);
  },
  methods: {
    onClickLeft() {
      window.history.back(-1);
    },
    goto(id) {
      window.vm.$router.push({
        path: "/oDetail",
        query: {
          id: id,
        },
      });
    },
    async onLoad(e) {
      if (e) {
        this.parmValue.page = 1;
      } else {
        this.parmValue.page++;
      }
      if (!this.loading) {
        if (this.parmValue.page === 1) {
          this.list = [];
        }
        let res = await asyncRequest.list(this.parmValue);
        this.loading = false;
        if (res && res.code == 0 && res.data) {
          // this.list
          let arr = res.data.list;
          this.list.push(...arr);
          this.total = res.data.count;
          if (
            this.list.length > 0 &&
            this.total > 0 &&
            this.total === this.list.length
          ) {
            this.finished = true;
          }
          if (this.total === 0) {
            this.finished = true;
          }
        } else if (res && res.code >= 100 && res.code <= 104) {
          await this.logout();
        } else {
          this.show_title(res.msg);
          if (this.parmValue.page !== 1) {
            this.parmValue.page--;
          }
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.order {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 108px;
  box-sizing: border-box;
  overflow-y: scroll;
  background: #fff;
  .order-title {
    position: fixed;
    padding: 0;
    width: 100%;
    margin: 0;
    top: 0;
    left: 0;
    z-index: 3;
    border: 0;
    height: 84px;
    .vant-tabs-main{
      padding: 40px 0 0 0;

    }
    // &::after {
    //   display: block;
    .van-hairline--bottom::after {
      display: none;
    }
    // .van-tabs {
    //   margin-top: -8px;
    // }
    // border-bottom: 1px solid #ebedf0;
    // }
  }
  .list-ul-main {
    padding: 16px 16px;

    .list-ul {
      width: 100%;
      padding: 16px;
      background: linear-gradient(28deg, #ff8327, #ffbd73);
      margin: 0 0 12px 0;
      box-sizing: border-box;
      border-radius: 10px;
      li {
        width: 100%;
        float: left;
        font-size: 14px;
        line-height: 30px;
        color: #ffffff;
        box-sizing: border-box;
      }
      &:last-child {
        margin: 0 0 2px 0;
      }
    }
  }
}
</style>
