<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <view
    class="Mall4j page-order"
    :class="{ 'tl-show': showScreen }"
  >
    <view class="order-header">
      <view class="input-box">
        <search-drop-down-bar
          :key-word="dataForm.prodName"
          :placeholder="placeholder"
          :select-placeholder="selectPlaceholder"
          :range="range"
          @handle-search="handleSearch"
          @handle-change="handleChange"
        />
      </view>
      <view :class="['prod-status-bar', showShadow ? 'shadow': '']">
        <status-bar
          :sts="status"
          :status-list="orderStatus"
          @handle-change-sts="handleChangeSts"
        />
      </view>
    </view>
    <view class="content">
      <view class="screen-box">
        <view
          class="screen-tip"
          @tap="handleChangeSeq"
        >
          {{ seq ? $t('xiaDanShiJianYouYuanDaoJin') : $t('xiaDanShiJianYouJinDaoYuan') }}
        </view>
        <view
          class="screen-btn"
          @tap="showScreen = true"
        >
          {{ $t('shaiXuan') }}
        </view>
      </view>
      <block
        v-for="(item, index) in orderList"
        :key="index"
      >
        <order-item
          v-model:orderInfo="orderList[index]"
          @refresh="getOrderList"
        />
      </block>
    </view>
    <order-screen
      v-if="showScreen"
      style="z-index: 9999"
      :screen-form="screenForm"
      @handle-screen="handleScreen"
      @close-screen="closeScreen"
    />
    <empty-tips
      v-if="isLoaded && !orderList.length && !dataForm.pages"
      :tips-list="tipsList"
    />
  </view>
</template>

<script setup>
import orderItem from '../../components/order-item/order-item.vue'
import orderScreen from '../../components/order-screen/order-screen.vue'

const Data = reactive({
  isLoaded: false, // 列表是否加载完毕
  dataForm: {
    prodName: '',
    pages: 1,
    current: 1
  },
  // orderStatus: ['全部', '待付款', '待发货', '待收货', '已完成'],
  status: '',
  showScreen: false,
  orderStatus: [
    {
      sts: 0,
      label: $t('quanBu')
    },
    {
      sts: 1,
      label: $t('daiFuKuan')
    },
    {
      sts: 2,
      label: $t('daiFaHuo')
    },
    {
      sts: 3,
      label: $t('daiShouHuo')
    },
    {
      sts: 5,
      label: $t('jiaoYiChengGong')
    },
    {
      sts: 6,
      label: $t('jiaoYiShiBai')
    },
    {
      sts: 7,
      label: $t('daiChengTuan')
    }
  ],
  screenForm: {
    dateRange: ['', ''],
    orderType: '',
    payType: '',
    dvyType: '',
    timeActive: 0
  },
  // 订单列表
  orderList: [],
  showShadow: false,
  tipsList: [$t('zanWuXiangGuanDingDan')],
  range: [
    // { value: 1, text: '全部' },
    { value: 1, text: $t('shangPinMing') },
    { value: 2, text: $t('dingDanHao-0') },
    { value: 3, text: $t('shouJiHao') },
    { value: 4, text: $t('shouJianRen') }
  ],
  selectPlaceholder: $t('shangPinMing-0'),
  placeholder: $t('qingShuRuShangPinMingCheng'),
  key: 'prodName',
  // 下单时间排序 0倒序 1正序
  seq: 0
})

const { isLoaded, dataForm, status, showScreen, orderStatus, screenForm, orderList, showShadow, tipsList, range, selectPlaceholder, placeholder, seq } = toRefs(Data)

onShow(() => {
  // 请求订单列表
  getOrderList()
  uni.setNavigationBarTitle({
    title: $t('dingDanGuanLi')
  })
})

onPageScroll((e) => {
  Data.showShadow = e.scrollTop > 40
})

onReachBottom(() => {
  if (Data.dataForm.pages > Data.dataForm.current) {
    ++Data.dataForm.current
    getOrderList()
  }
})

/**
 * 获取订单列表
 */
const getOrderList = () => {
  uni.showLoading()
  Data.isLoaded = false
  http.request({
    url: '/order/order/page',
    method: 'GET',
    data: {
      [Data.key]: Data.dataForm.prodName,
      current: Data.dataForm.current,
      size: 20,
      status: Data.status,
      orderType: Data.screenForm.orderType,
      payType: Data.screenForm.payType,
      dvyType: Data.screenForm.dvyType,
      startTime: Data.screenForm.dateRange[0],
      endTime: Data.screenForm.dateRange[1],
      seq: Data.seq
    }
  }).then(({ data: res }) => {
    Data.isLoaded = true
    uni.hideLoading()
    res.records.forEach(order => {
      // console.log(order.orderItems)
      order.actualTotal = util.priceAdd0(order.actualTotal)
      order.orderItems.forEach(prod => {
        prod.price = util.priceAdd0(prod.price)
      })
      onHandleDataList(order)
    })
    let list = []
    if (res.current === 1) {
      list = res.records
    } else {
      list = Data.orderList.concat(res.records)
    }
    Data.dataForm.current = res.current
    Data.orderList = list
    Data.dataForm.pages = res.pages
  })
}
const onHandleDataList = (order) => {
  let isOnlineDelivery = 1
  for (let i = 0; i < order.orderItems.length; i++) {
    if (order.orderItems[i].dvyType === 1) {
      isOnlineDelivery = 0
      break
    }
  }
  order.isOnlineDelivery = isOnlineDelivery
}

/**
     * 重置条件并获取订单
     */
const resetFormThenGetOrder = (prodName) => {
  Data.dataForm.prodName = prodName
  Data.dataForm.pages = 0
  Data.dataForm.current = 1
  Data.screenForm = {
    dateRange: ['', ''],
    orderType: '',
    payType: '',
    dvyType: '',
    timeActive: 0
  }
  uni.pageScrollTo({
    duration: 100,
    scrollTop: 0,
    success: () => {
      getOrderList()
    }
  })
}

const handleChangeSts = (index) => {
  Data.status = index || ''
  resetFormThenGetOrder('')
}

const closeScreen = () => {
  Data.showScreen = false
}

const handleSearch = (prodName) => {
  Data.dataForm.prodName = prodName
  resetFormThenGetOrder(prodName)
}

const handleScreen = (dataForm) => {
  Data.screenForm = JSON.parse(JSON.stringify(dataForm))
  // 重置页数
  Data.dataForm.pages = 0
  Data.dataForm.current = 1
  closeScreen()
  getOrderList()
}

const handleChange = (value) => {
  switch (value) {
    case 1:
      Data.placeholder = $t('qingShuRuShangPinMingCheng-0')
      Data.key = 'prodName'
      break
    case 2:
      Data.placeholder = $t('qingShuRuDingDanHao')
      Data.key = 'orderNumber'
      break
    case 3:
      Data.placeholder = $t('qingShuRuShouJiHao')
      Data.key = 'mobile'
      break
    case 4:
      Data.placeholder = $t('qingShuRuShouJianRen')
      Data.key = 'receiver'
      break
    default:
  }
}

const handleChangeSeq = () => {
  Data.seq = Data.seq ? 0 : 1
  getOrderList()
}
</script>

<style lang="scss" scoped>
@use "order";
</style>
