<template>
  <view class="content">
    <uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="订单列表"></uni-nav-bar>
    <view class="status-bar">
      <view
        v-for="item in statusBarArray"
        :key="item.value"
        :class="{ box: true, 'box--selected': condition.status == item.value }"
        @click="selectStatus(item.value)"
      >
        {{ item.label }}
      </view>
    </view>
    <view class="list-area">
      <scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback">
        <view v-for="item in list" :key="item.orderId" class="order-area" @click="goDetail(item)">
          <view class="order-header">
            <view class="left">
              <text style="font-size: 30rpx; color: #000000; font-weight: 600">{{ item.orderId }}</text>
              <text style="font-size: 26rpx; color: #888888; margin-top: 16rpx">{{ dateTimeFormat(item.createTime, 'yyyy/mm/dd') }}</text>
            </view>
            <view class="right">
              <text style="font-size: 30rpx; color: #ff5368; font-weight: 500">{{ orderStatusMap[item.status] }}</text>
            </view>
          </view>
          <view class="order-content" v-for="order in item.supplierOrderList" :key="order.supplierOrderId">
            <view class="header">
              <text style="font-size: 30rpx; color: #000000">{{ order.supplierEnterpriseName }}</text>
              <text style="font-size: 30rpx; color: #888888; font-weight: 500">{{ supplierOrderStatusMap[order.status] }}</text>
            </view>
            <view v-for="(target, index) in order.orderItems" :key="target.productId" :class="{ 'order-item': true, border: index > 0 }">
              <image class="img" :src="target.productImg || '/static/imgs/order/paper-default-icon.png'"></image>
              <view class="right">
                <text style="font-size: 30rpx; color: #000000">{{ target.productName }}</text>
                <text style="font-size: 26rpx; color: #888888; margin-top: 26rpx; word-break: break-all">{{ transformTarget(target) }}</text>
              </view>
            </view>
          </view>
          <view class="order-footer">
            <view class="left">
              <text style="font-size: 26rpx; color: #888888; margin-right: 8rpx">交货时间:</text>
              <text style="font-size: 26rpx; color: #333333">{{ item.deliveryLeadtime || '-' }}天</text>
            </view>
            <view class="right">
              <text style="font-size: 30rpx; color: #ff5368">￥ {{ item.totalOfferPrice }}</text>
            </view>
          </view>
        </view>
      </scroll-list>
    </view>
  </view>
</template>

<script>
import { go2, back } from '@/utils/hook.js'
import { dateTimeFormat } from '@/utils/index.js'
import { orderStatusArray, orderStatusEnum, orderStatusMap, supplierOrderStatusMap } from '@/enums/index.js'
import { getOrderList } from '@/apis/orderApi.js'
export default {
  data() {
    return {
      condition: {
        status: orderStatusEnum.ALL,
        pageNum: 0, // 初始会执行一次下拉加载
        pageSize: 10
      },
      option: {
        size: 10,
        auto: true,
        emptyText: '暂无订单~',
        background: '#F7F8FA',
        emptyImage: '/static/imgs/order/order-empty.png'
      },
      list: [],
      statusBarArray: Object.freeze(orderStatusArray.filter((item) => item.value !== orderStatusEnum.CANCELED)),
      orderStatusMap: Object.freeze(orderStatusMap),
      supplierOrderStatusMap: Object.freeze(supplierOrderStatusMap)
    }
  },
  methods: {
    go2,
    back,
    dateTimeFormat,
    getList() {
      return new Promise((resolve, reject) => {
        getOrderList({ ...this.condition })
          .then((res) => {
            if (res) {
              if (this.condition.pageNum == 1) {
                this.list = res.records
              } else {
                this.list = this.list.concat(res.records)
              }
              resolve({ list: this.list, total: res.total })
            } else {
              reject()
            }
          })
          .catch((err) => {
            reject(err)
          })
      })
    },
    downCallback() {
      this.condition.pageNum = 1
      this.getList()
        .then(({ list, total }) => {
          this.$refs.list.refreshSuccess({ list, total })
        })
        .catch(() => {
          this.$refs.list.refreshFail()
        })
    },
    upCallback(page) {
      this.condition.pageNum++
      this.getList()
        .then(({ list, total }) => {
          this.$refs.list.loadSuccess({ list, total })
        })
        .catch(() => {
          this.$refs.list.loadFail()
        })
    },
    selectStatus(status) {
      this.condition.status = status
      this.downCallback()
    },
    transformTarget(target) {
      let result = ''
      if (target.categoryName) {
        result += `${target.categoryName}`
      }
      if (target.brandName) {
        result += `/${target.brandName}`
      }
      if (target.gramWeight) {
        result += `/${target.gramWeight}g`
      }
      if (target.length && target.width) {
        result += `/${target.width}*${target.length}`
      }
      if (target.pieceQuantity) {
        result += `/${target.pieceQuantity}张`
      }
      return result
    },
    // 根据状态跳转到不同页面
    goDetail(order) {
      if (order.status === orderStatusEnum.WAIT_CONFIRM) {
        go2('order-make', { orderId: order.orderId })
      } else {
        go2('order-detail', { orderId: order.orderId })
      }
    }
  },
  onLoad(option) {
    if (option.status) {
      this.condition.status = option.status
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100vh;
  .status-bar {
    flex-grow: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32rpx;
    border-bottom: 2rpx solid #f8f8f8;
    background-color: #fff;
    height: 90rpx;
    .box {
      height: 86rpx;
      flex-grow: 0;
      flex-shrink: 0;
      color: #000000;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 4rpx solid #f8f8f8;
    }
    .box--selected {
      border-bottom: 4rpx solid #007aff;
      color: #007aff;
    }
  }
  .list-area {
    flex-grow: 1;
    overflow: hidden;
    .order-area {
      width: 750rpx;
      margin-bottom: 20rpx;
      background-color: #fff;
      .order-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding: 18rpx 32rpx;
        border-bottom: 2rpx solid #f8f8f8;
        .left {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: flex-start;
        }
      }
      .order-content {
        border-bottom: 2rpx solid #f8f8f8;
        .header {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          padding: 24rpx 32rpx;
          border-bottom: 2rpx solid #f8f8f8;
        }
        .order-item {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          width: 686rpx;
          margin: 24rpx 32rpx;
          .img {
            width: 100rpx;
            height: 100rpx;
            margin-right: 20rpx;
            flex-grow: 0;
            flex-shrink: 0;
          }
          .right {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
          }
        }
        .border {
          border-top: 2rpx solid #f8f8f8;
        }
      }
      .order-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24rpx 32rpx;
        border-bottom: 2rpx solid #f8f8f8;
        .left {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: flex-start;
        }
        .right {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: flex-end;
        }
      }
    }
  }
}
</style>
