<template>
  <view class="orderpage">
    <view class="typebox flex-center">
      <view class="typeItem flex-center">
        <view
          class="typeItem1 flex-center"
          :class="orderType === 1 ? 'activeType' : ''"
          @click="changeOrderType(1)"
          >普通订单</view
        >
        <view
          class="typeItem1 flex-center"
          :class="orderType === 2 ? 'activeType' : ''"
          @click="changeOrderType(2)"
          >售后订单</view
        >
      </view>
    </view>
    <view class="searchBox flex-between">
      <view class="search flex-center">
        <u-icon name="search"></u-icon>
        <view>搜索</view>
      </view>
      <view class="flex-center" @click="showModel = true">
        {{ timeStr }} <u-icon name="arrow-down"></u-icon
      ></view>
      <u-modal
        v-model="showModel"
        @confirm="confirm"
        :show-cancel-button="true"
        title="筛选时间"
        contentSlot
        width="85%"
      >
        <view class="contentSlot">
          <view class="flex-wrap">
            <view
              v-for="(item, index) in timeArr"
              :key="index"
              class="timeItem flex-center"
              :class="index === curIndex ? 'timeItemActive' : ''"
              @click="changeTime(item, index)"
            >
              {{ item.name }}
            </view>
          </view>
          <view v-if="curIndex == 4">
            <view class="timeTitle">开始时间</view>
            <view class="time-picker">
              <picker-view
                :value="value"
                @change="bindChange"
                class="picker-view"
                indicator-style="height: 60rpx"
                :indicator-class="activeClass"
              >
                <picker-view-column>
                  <view
                    class="picker-item flex-center"
                    v-for="(item, index) in years"
                    :key="index"
                    >{{ item }}</view
                  >
                </picker-view-column>
                <view style="line-height: 180rpx">年</view>
                <picker-view-column>
                  <view
                    class="picker-item flex-center"
                    v-for="(item, index) in months"
                    :key="index"
                    >{{ item }}</view
                  >
                </picker-view-column>
                <view style="line-height: 180rpx">月</view>
                <picker-view-column>
                  <view
                    class="picker-item flex-center"
                    v-for="(item, index) in days"
                    :key="index"
                    >{{ item }}</view
                  >
                </picker-view-column>
                <view style="line-height: 180rpx">日</view>
              </picker-view>
            </view>
            <view class="timeTitle">结束时间</view>
            <view class="time-picker">
              <picker-view
                :value="value"
                @change="bindChange"
                class="picker-view"
                indicator-style="height: 60rpx"
                indicator-class="activeClass"
              >
                <picker-view-column>
                  <view
                    class="picker-item flex-center"
                    v-for="(item, index) in years"
                    :key="index"
                    >{{ item }}</view
                  >
                </picker-view-column>
                <view style="line-height: 180rpx">年</view>
                <picker-view-column>
                  <view
                    class="picker-item flex-center"
                    v-for="(item, index) in months"
                    :key="index"
                    >{{ item }}</view
                  >
                </picker-view-column>
                <view style="line-height: 180rpx">月</view>
                <picker-view-column>
                  <view
                    class="picker-item flex-center"
                    v-for="(item, index) in days"
                    :key="index"
                    >{{ item }}</view
                  >
                </picker-view-column>
                <view style="line-height: 180rpx">日</view>
              </picker-view>
            </view>
          </view>
        </view>
      </u-modal>
    </view>
    <view class="tabbox">
      <u-tabs
        :list="orderStatusList"
        name="Name"
        :current="currentTab"
        @change="changeTab"
      ></u-tabs>
    </view>
    <u-empty v-if="orderList.length == 0" text="暂无内容" mode="list"></u-empty>
    <view
      v-if="orderList.length > 0"
      style="
        height: calc(100vh - 350rpx);
        width: calc(100vw);
        overflow: hidden;
        box-sizing: border-box;
        padding-bottom: 20px;
      "
    >
      <scroll-view
        :scroll-y="true"
        :enable-back-to-top="true"
        :enable-flex="true"
        @scrolltolower="lower"
        :style="{ height: '100%' }"
      >
        <view v-for="(item, index) in orderList" :key="index">
          <orderItem :data="item" />
        </view>
        <u-loadmore
          :status="status"
          :load-text="loadText"
          :font-size="24"
          :margin-top="20"
          :margin-bottom="20"
          bg-color="#999"
        />
      </scroll-view>
    </view>
    <!-- 加载中 -->
    <view class="flex-center" style="margin-top: 20rpx" v-if="loading">
      <u-loading mode="flower" size="48"></u-loading>
      <Text style="color: #999">加载中...</Text>
    </view>
    <tabbar></tabbar>
  </view>
</template>
<script>
import tabbar from "./components/tabbar.vue";
import orderItem from "./components/orderItem.vue";
export default {
  components: {
    tabbar,
    orderItem,
  },
  data() {
    const date = new Date();
    const years = [];
    const year = date.getFullYear();
    const months = [];
    const month = date.getMonth() + 1;
    const days = [];
    const day = date.getDate();
    for (let i = year - 4; i <= date.getFullYear(); i++) {
      years.push(i);
    }
    for (let i = 1; i <= 12; i++) {
      months.push(i);
    }
    for (let i = 1; i <= 31; i++) {
      days.push(i);
    }
    return {
      orderType: 1, //1普通订单，2售后订单
      loading: false,
      status: "loadmore",
      loadText: {
        loadmore: "轻轻上拉，加载更多",
        loading: "努力加载中",
        nomore: "没有更多了",
      },
      showModel: false,
      timeStr: "",
      curIndex: 0,
      timeArr: [
        {
          name: "汇总",
          key: 1,
        },
        {
          name: "今日",
          key: 2,
        },
        {
          name: "昨日",
          key: 3,
        },
        {
          name: "7日",
          key: 4,
        },
        {
          name: "自定义",
          key: 5,
        },
      ],
      years,
      year,
      months,
      month,
      days,
      day,
      value: [9999, month - 1, day - 1],
      list: [
        {
          name: "全部",
        },
        {
          name: "待收货",
        },
        {
          name: "待付款",
        },
        {
          name: "待评价",
          count: 5,
        },
      ],
      currentTab: 0,
      page_count: 1,
      msg: {
        pageIndex: 1,
        pageSize: 15,
        Name: "",
        OrderSource: 0,
        OrderType: 0,
        DeliveryMethod: 0,
        OrderId: 0,
        StartTime: "",
        EndTime: "",
        OrderStatus: 0,
        OrderNo: "",
        MerchantsNo: "",
        UserName: "",
        UserId: "",
        GoodsName: "",
        Consignee: "",
        Mobile: "",
        ProductCode: "",
        Recycled: 2,
        AnchorName: "",
        IsSelectPayMoney: 0,
        IsOffline: -1,
      },
      orderStatusList: [],
      orderList: [],
    };
  },
  methods: {
    confirm() {
      console.log(1);
    },
    changeTime(e, i) {
      this.curIndex = i;
      this.timeStr = e.name;
    },
    bindChange(e) {
      const val = e.detail.value;
      this.year = this.years[val[0]];
      this.month = this.months[val[1]];
      this.day = this.days[val[2]];
      this.value = val;
    },
    changeTab(index) {
      this.currentTab = index;
      this.msg.OrderStatus = this.orderStatusList[index].Id;
      this.msg.pageIndex = 1;
      this.getList();
    },
    lower(e) {
      if (this.msg.pageIndex < this.page_count) {
        this.msg.pageIndex++;
        this.status = "loading";
        this.getList();
      } else {
        this.status = "nomore";
      }
    },
    getOrderStatus() {
      this.requestAdmin("/api/order/GetOrderStatusEnumList", {}, (res) => {
        this.orderStatusList = res.data;
        this.orderStatusList.unshift({ Id: 0, Name: "全部" });
        this.orderStatusList.push({ Id: 8, Name: "回收站" });
      });
    },
    getList() {
      this.loading = true;
      this.requestAdmin("/api/order/GetGoodsOrderPageList", this.msg, (res) => {
        this.loading = false;
        this.page_count = res.data.pageCount;
        if (this.page_count == 1) {
          this.status = "nomore";
        }
        if (this.msg.pageIndex === 1) {
          this.orderList = res.data.pageData;
        } else {
          this.orderLis = [...this.orderList, ...res.data.pageData];
        }
      });
    },
    changeOrderType(n){
      this.orderType=n
    }
  },
  onLoad() {
    this.timeStr = this.timeArr[0].name;
    uni.setNavigationBarTitle({
      title: "订单管理",
    });
    this.getList();
    this.getOrderStatus();
  },
};
</script>
<style lang="scss" scoped>
.orderpage {
  min-height: 100vh;
  background-color: #f7f7f7;
  box-sizing: border-box;
  padding-bottom: 100rpx;
  /deep/.u-model {
    border-radius: 20rpx;
  }
}
.typebox {
  width: 100%;
  height: 100rpx;
  background-color: #fff;
  .typeItem {
    width: 320rpx;
    height: 58rpx;
    color: #ccced5;
    border-radius: 30rpx;
    border: 2rpx solid #446dfc;
    font-size: 26rpx;
    overflow: hidden;
    .typeItem1 {
      width: 50%;
      height: 100%;
    }
    .activeType {
      color: #fff;
      background-color: #446dfc;
    }
  }
}
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}
.searchBox {
  height: 90rpx;
  background-color: #efeff4;
  padding: 0 40rpx 0 20rpx;
  .search {
    width: 520rpx;
    height: 50rpx;
    background-color: #fff;
    border-radius: 25rpx;
  }
}
.contentSlot {
  background-color: #fff;
  box-sizing: border-box;
  padding: 40rpx;
  border-radius: 20rpx;
  .timeItem {
    width: 160rpx;
    height: 70rpx;
    font-size: 30rpx;
    border-radius: 35rpx;
    border: 2rpx solid #e5e5e5;
    margin-right: 20rpx;
    margin-bottom: 10rpx;
  }
  & .timeItem:nth-child(3n) {
    margin-right: 0rpx;
  }
  .timeItemActive {
    color: #446dfc;
    border-color: #446dfc;
  }
  .timeTitle {
    margin: 20rpx 0;
    font-size: 30rpx;
  }
}

.picker-view {
  width: 100%;
  height: 180rpx;
  margin-top: 20rpx;
  .picker-item {
    height: 100rpx;
  }
}
/deep/ .activeClass {
  color: #446dfc !important;
}
.tabbox {
  margin-bottom: 10rpx;
}
</style>