<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 timeStr" @click="showModel = true">
        {{ timeStr }}
        <u-icon name="arrow-down" style="margin-left: 10rpx"></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="valueS"
                @change="bindChangeS"
                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="valueE"
                @change="bindChangeE"
                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"
        v-if="orderType === 1"
      ></u-tabs>
      <u-tabs
        :list="orderStatusList2"
        name="Name"
        :current="currentTab2"
        @change="changeTab2"
        v-if="orderType === 2"
      ></u-tabs>
    </view>
    <u-empty v-if="orderList.length == 0" text="暂无相关订单" mode="order"></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="#f7f7f7"
        />
      </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,
      valueS: [9999, month - 1, day - 1],
      valueE: [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: [],
      timer: null,
      //------------------售后订单----------------------
      msg2: {
        pageIndex: 1,
        pageSize: 15,
        OrderSource: 0,
        OrderType: 0,
        DeliveryMethod: 0,
        OrderId: 0,
        StartTime: "",
        EndTime: "",
        OrderNo: "",
        UserName: "",
        UserId: 0,
        GoodsName: "",
        SelectStatus: 0,
        ReOrderNo: "",
        Consignee: "",
        Mobile: "",
      },
      orderStatusList2: [],
      currentTab2: 0,
    };
  },
  methods: {
    //筛选时间
    confirm() {
      if (Date.parse(this.msg.StartTime) > Date.parse(this.msg.EndTime)) {
        uni.showToast({
          title: "开始时间不能大于结束时间",
          icon: "none",
        });
        return;
      }
      if (this.orderType === 1) {
        this.getList();
      } else if (this.orderType === 2) {
        this.getList2();
      }
    },
    changeTime(e, i) {
      this.curIndex = i;
      this.timeStr = e.name;
      if (e.key === 1) {
        this.msg.StartTime = "";
        this.msg.EndTime = "";
      } else if (e.key === 2) {
        this.msg.StartTime = this.$utils.AddDay("", -0);
        this.msg.EndTime = this.$utils.AddDay("", -0);
      } else if (e.key === 3) {
        this.msg.StartTime = this.$utils.AddDay("", -1);
        this.msg.EndTime = this.$utils.AddDay("", -1);
      } else if (e.key === 4) {
        this.msg.StartTime = this.$utils.AddDay("", -7);
        this.msg.EndTime = this.$utils.AddDay("", -0);
      } else if (e.key === 5) {
        this.msg.StartTime = this.$utils.AddDay("", -0);
        this.msg.EndTime = this.$utils.AddDay("", -0);
      }
    },
    //自定义开始时间
    bindChangeS(e) {
      const val = e.detail.value;
      this.msg.StartTime =
        this.years[val[0]] +
        "-" +
        this.months[val[1]] +
        "-" +
        this.days[val[2]];
    },
    //自定义结束时间
    bindChangeE(e) {
      const val = e.detail.value;
      this.msg.EndTime =
        this.years[val[0]] +
        "-" +
        this.months[val[1]] +
        "-" +
        this.days[val[2]];
    },
    changeTab(index) {
      this.currentTab = index;
      this.msg.OrderStatus = this.orderStatusList[index].Id;
      this.msg.pageIndex = 1;
      this.getList();
    },
    changeTab2(index) {
      this.currentTab2 = index;
      this.msg2.SelectStatus = this.orderStatusList2[index].Id;
      this.msg2.pageIndex = 1;
      this.getList2();
    },
    lower(e) {
      if (this.orderType === 1) {
        if (this.msg.pageIndex < this.page_count) {
          this.msg.pageIndex++;
          this.status = "loading";
          if (this.timer) {
            clearTimeout(this.timer);
          }
          this.timer = setTimeout(async () => {
            await this.getList();
            clearTimeout(this.timer);
          }, 500);
        } else {
          this.status = "nomore";
        }
      } else if (this.orderType === 2) {
        if (this.msg2.pageIndex < this.page_count) {
          this.msg2.pageIndex++;
          this.status = "loading";
          if (this.timer) {
            clearTimeout(this.timer);
          }
          this.timer = setTimeout(async () => {
            await this.getList2();
            clearTimeout(this.timer);
          }, 500);
        } 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;
      if (this.orderType === 1) {
        this.currentTab = 0;
        this.msg.OrderStatus = 0;
        this.msg.pageIndex = 1;
        this.getList();
      } else if (this.orderType === 2) {
        this.currentTab2 = 0;
        this.msg2.SelectStatus = 0;
        this.msg2.pageIndex = 1;
        this.getList2();
      }
    },
    //售后订单状态枚举
    getAfterSalesOrderstatus() {
      this.requestAdmin(
        "/api/order/GetAfterSaleSelectStatusEnumList",
        {},
        (res) => {
          this.orderStatusList2 = res.data;
          this.orderStatusList2.unshift({
            Id: 0,
            Name: "全部",
          });
        }
      );
    },
    //售后订单数据
    getList2() {
      this.loading = true;
      this.requestAdmin(
        "/api/order/GetGoodsOrderAfterPageList",
        this.msg,
        (res) => {
          this.loading = false;
          console.log(2, res);
          if (res.resultCode == 1) {
            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];
            }
          }
        }
      );
    },
  },
  onLoad(options) {
    this.timeStr = this.timeArr[0].name;
    uni.setNavigationBarTitle({
      title: "订单管理",
    });
    this.getOrderStatus();
    this.getAfterSalesOrderstatus();
    console.log(512, options);
    if (options?.orderType) {
      this.orderType = parseInt(options.orderType);
    }
    if (options?.tab) {
      this.currentTab = parseInt(options.tab);
    }
    if (this.orderType === 1) {
      this.getList();
    } else if (this.orderType === 2) {
      this.getList2();
    }
  },
};
</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;
}

.timeStr {
  font-size: 28rpx;
  color: #446dfc !important;
}
</style>
