<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="#F4D022"
        line-height="2px"
        @click="onLoad(1)"
        title-active-color="#F4D022"
      >
        <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="goodList && goodList.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 goodList"
          :key="item.id"
          @click="goto(item.id)"
        >
          <li>
            <span class="fl">{{ item.order_sn }}</span
            ><span class="fr">{{
              item.status === "1" ? "待发货" : "待收货"
            }}</span>
          </li>
          <li>
            <span class="fl">{{ item.name }}</span>
            <span class="fr"
              >{{ item.order_num }}{{ item.unit }}/{{
                item.unit_weight
              }}kg</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, // 每页显示条数
      },
      goodList: [],
      loading: false,
      finished: false,
    };
  },
  async created() {
    this.parmValue.status = this.$route.query.type
      ? this.$route.query.type
      : "0";
    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.goodList = [];
        }
        let res = await asyncRequest.list(this.parmValue);
        this.loading = false;
        if (res && res.code == 0 && res.data) {
          const { list } = res.data;
          list.forEach((v1) => {
            let item = Object.assign(
              { name: v1.unit === "盒" ? "藏金1745礼盒" : "藏金1745普通装" },
              v1
            );
            this.goodList.push(item);
          });
          this.total = res.data.count;
          if (
            this.goodList.length > 0 &&
            this.total > 0 &&
            this.total === this.goodList.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;
    }
    .van-hairline--bottom::after {
      display: none;
    }
  }
  .list-ul-main {
    padding: 12px 16px 0 16px;
    .list-ul {
      background: #ffffff;
      border-radius: 30px;
      width: 100%;
      padding: 8px 16px 8px 16px;
      margin: 0 0 12px 0;
      box-sizing: border-box;
      border-radius: 10px;
      li {
        width: 100%;
        float: left;
        font-size: 14px;
        line-height: 30px;
        color: #000;
        box-sizing: border-box;
      }
      // border-bottom: 1px solid #F5F5F5;
      &:last-child {
        margin: 0 0 2px 0;
      }
    }
  }
}
</style>
