<template>
  <view>
    <navbar :use-search="false" title="订单"></navbar>

    <view class="wrap safe-area-inset-bottom" v-if="token">
      <view class="u-tabs-box">
        <u-tabs-swiper
            :height="76"
            :font-size="24"
            active-color="#c20d12"
            bg-color="transparent"
            inactive-color="#999"
            ref="tabs"
            :list="tabs"
            :current="swiperCurrent"
            @change="change"
            :is-scroll="false"
            :offset="[10, 5]"
            swiperWidth="750"
        ></u-tabs-swiper>
      </view>
      <swiper
          class="swiper-box"
          :current="swiperCurrent"
          @transition="transition"
          @animationfinish="animationfinish"
      >
        <swiper-item class="swiper-item"
                     v-for="(swiper, swiperIndex) in tabs"
                     :key="swiperIndex">
          <scroll-view
              scroll-y
              style="height: 100%; width: 100%"
              @scrolltolower="reachBottom"
          >
            <view>
              <view class="order" v-for="i in list[swiperIndex]" :key="i.id">
                <view class="title">
                  <view class="title__name">
                    <text style="padding-left: 10rpx;">{{ i.title }}</text>
                  </view>
                  <view class="title__status">{{ i.pay_status === 4 ? '已退款' : (i.pay_status ? '已支付' : '待支付') }}</view>
                </view>

                <view class="price">
                  <view class="price-icon">
                    <u-icon :name="(i.order_detail[0] && i.order_detail[0].product && i.order_detail[0].product.image) ? i.order_detail[0].product.image.url : vuex_default_icon" size="30"></u-icon>
                  </view>

                  <view class="price-text">
                    <view class="price-text__num">￥{{ i.price }}</view>
                    <view class="price-text__no"
                    >订单号 {{ i.no }}</view
                    >
                  </view>
                </view>

                <view class="bottom">
                  <view class="row1">
                    <view class="time">
                      <text>下单时间： </text>
                      <text>{{ i.created_at ? $moment(i.created_at).format('YYYY年MM月DD日 HH:mm') : '' }}</text>
                    </view>

                    <u-button ripple
                              shape="circle"
                              :custom-style="payBtnStyle"
                              :throttle-time="2000"
                              @click="$u.route({
                              url: '/package_sub/pages/Shop/Pay',
                              params: {
                                order_id: i.id
                              }
                            })"
                    >{{ i.pay_status === 0 ? '立即支付' : '查看订单' }}</u-button
                    >
                  </view>
                </view>
              </view>
              <u-loadmore
                  :status="loadStatus[swiperIndex]"
                  bgColor="#f2f2f2"
              ></u-loadmore>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
    <view v-if="!token">
      <u-empty :margin-top="360" text="未登录" mode="order">
        <u-button shape="circle"
                  slot="bottom"
                  type="primary"
                  ripple
                  @click="$u.route({
                    url: '/pages/login/login',
                    type: 'redirect'
                  })">点击登录</u-button>
      </u-empty>

    </view>

    <tabbar class="tabbar"></tabbar>
  </view>
</template>

<script>
import navbar from "@/package_sub/pages/Shop/Navbar.vue";
import tabbar from "@/package_sub/pages/Shop/Tabbar.vue";

export default {
  components: {
    navbar,
    tabbar
  },
  data() {
    return {
      payBtnStyle: {
        "background-image":
            "linear-gradient(-90deg, #e26165 0%, #c10d12 94%, #c10d12 100%)",
        "font-weight": "500",
        "font-size": "28rpx",
        color: "#fff",
        width: "185rpx",
        height: "60rpx",
        "line-height": "60rpx",
      },
      tabs: [
        {
          name: "全部",
          value: "",
          count: 0,
        },
        {
          name: "待支付",
          value: 0,
          count: 0,
        },
        {
          // name: '待评价',
          name: "已支付",
          value: 1,
          count: 0,
        }
        // {
        //   name: '已取消'
        // }
      ],
      swiperCurrent: 0,
      tabsHeight: 0,
      dx: 0,
      scrollTop: [],
      loadStatus: [],
      refresherStatus: [],
      select: {
        page: 1,
        pay_status: "",
        page_size: 20,
      },
      list: [],
    };
  },
  onShow() {
    if (this.token) {
      this.getOrder(true);
    }
  },
  created() {
    for (let i = 0; i < this.tabs.length; i++) {
      this.refresherStatus.push(false);
      this.list.push([]);
      this.loadStatus.push("loadmore");
    }
  },
  computed: {
    statusFormat() {
      return function (status) {
        return this.vuex_order_status.find(i => i.value === status)?.name
      }
    },
    token() {
      return this.vuex_token || uni.getStorageSync('lifeData')?.vuex_token
    }
  },
  methods: {
    reachBottom() {
      // 此tab为空数据
      this.getOrder()
    },
    // tab栏切换
    change(index) {
      this.swiperCurrent = index;
    },
    transition({ detail: { dx } }) {
      this.$refs.tabs.setDx(dx);
    },
    animationfinish({ detail: { current } }) {
      this.$refs.tabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.select.pay_status = this.tabs[this.swiperCurrent].value;
      this.getOrder(true)
    },
    async getOrder(isRefresh=false) {
      if (isRefresh) {
        this.select.page = 1;
        this.loadStatus[this.swiperCurrent] = 'loadmore'
      }
      if (this.loadStatus[this.swiperCurrent] === 'nomore') return
      try {
        this.loadStatus[this.swiperCurrent] = 'loading'
        const res = await this.$u.api.userOrders(this.select);
        this.tabs[this.swiperCurrent].count = res.total;
        if (isRefresh) {
          this.list[this.swiperCurrent].length = 0;
        }
        this.list[this.swiperCurrent].push(...res.data)
        if (this.list[this.swiperCurrent].length >= res.total) {
          this.loadStatus[this.swiperCurrent] = 'nomore'
        } else {
          this.select.page++;
          this.loadStatus[this.swiperCurrent] = 'loadmore'
        }
      } catch (err) {
        console.error(err);
        this.loadStatus[this.swiperCurrent] = 'loadmore'
      }
    },
  },
};
</script>

<style>
page {
  height: 100%;
  background-color: #eee;
}
</style>

<style lang="scss" scoped>
::v-deep .u-load-more-wrap {
  padding: 20rpx 0;
}
.d-flex {
  display: flex;
}
.ai-center {
  align-items: center;
}
.jc-center {
  justify-content: center;
}
.wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top) - calc(60px + 6px));
  width: 100%;
}
.swiper-box {
  flex: 1;
}
.swiper-item {
  height: 100%;
}
.order {
  margin: 0 25rpx;
  border-radius: 10rpx;
  filter: drop-shadow(0 0 10rpx rgba(211, 211, 214, 0.3));
  background-color: #ffffff;
  margin-top: 24rpx;

  .title {
    display: flex;
    align-items: center;
    padding: 37rpx 39rpx 32rpx 45rpx;
    position: relative;

    &__name {
      font-size: 24rpx;
      color: #333333;
      font-weight: bold;
    }
    &__status {
      font-size: 24rpx;
      color: #c20d12;
      font-weight: 500;
      margin-left: auto;
    }
    &::after {
      content: "";
      height: 2rpx;
      background: #999999;
      opacity: 0.302;

      position: absolute;
      bottom: 0;
      left: 39rpx;
      right: 39rpx;
    }
  }

  .price {
    display: flex;
    align-items: center;
    padding: 28rpx 0 0 44rpx;

    &-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 90rpx;
      height: 84rpx;
      border-radius: 10rpx;
      background-color: #f3e7d8;
    }
    &-text {
      padding-left: 28rpx;
      &__num {
        font-size: 24rpx;
        color: #000000;
        font-weight: bold;
      }
      &__no {
        font-size: 24rpx;
        color: #999999;
        font-weight: 500;
        padding-top: 14rpx;
      }
    }
  }

  .info {
    display: flex;
    flex-wrap: wrap;
    padding: 35rpx 45rpx 0;

    &__item {
      flex-basis: 50%;
      color: #333;
      font-size: 24rpx;
      font-weight: 500;
      display: flex;
      margin-bottom: 32rpx;

      & > text {
        display: block;
      }
      & > text:nth-child(1) {
        color: #999;
        padding-right: 20rpx;
        flex: 0;
        word-break: keep-all;
      }
      & > text:nth-child(2) {
      }
    }
  }

  .bottom {
    padding: 6rpx 28rpx 35rpx 43rpx;
    .row1 {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .time {
        font-size: 24rpx;
        color: #999999;
        font-weight: 500;
      }
    }
  }
}
</style>
