<script lang="ts" setup>
import { queryhWorkOrders } from '@/api/work'
import { useAppStore } from '@/store'
import { systemInfo } from '@/utils/systemInfo'
import workLIstItem from './components/workLIstItem.vue'

definePage({
  style: {
    navigationStyle: 'custom',
  },
})

const appStore = useAppStore()
const list = ref<any>([])
const tabList = ref<any>([])
const paging = ref<any>(null)
const queryForm = ref<any>({
  bikeCode: '',
  orderType: '',
})
const tabConfig = ref({
  height: 44,
})

function handleTabChange(item: any) {
  const { value } = item
  queryForm.value.orderType = value || ''
  paging.value.reload()
}

async function queryList(pageNum: number, pageSize: number) {
  uni.showLoading({
    title: '加载中',
  })
  try {
    const res: any = await queryhWorkOrders({
      pageNum,
      pageSize,
      bikeCode: queryForm.value.bikeCode,
      orderType: queryForm.value.orderType ? queryForm.value.orderType : null,
    })
    const { records } = res
    paging.value.complete(records)
  }
  catch (e) {
    paging.value.complete(false)
  }
  finally {
    uni.hideLoading()
  }
}
function refreshWorkOrder() {
  paging.value.reload()
}

onLoad(() => {
  const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  tabConfig.value.height = menuButtonInfo.height + (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + systemInfo.statusBarHeight

  tabList.value = appStore.getDictByCode('orderType').map((item: any) => ({
    name: item.dicValueName,
    value: item.dicValue,
  }))
  tabList.value.unshift({
    name: '全部',
    value: '',
  })
})

onShow(() => {
  console.log('onShow')
  paging.value.reload()
})
</script>

<template>
  <z-paging
    ref="paging"
    v-model="list"
    :default-page-no="Number('1')"
    :default-page-size="Number('10')"
    :auto-show-back-to-top="Boolean(true)"
    bg-color="#f9f9f9"
    @query="queryList"
  >
    <template #top>
      <view class="custom-navbar">
        <view class="status-bar" :style="{ height: `${systemInfo.statusBarHeight - 8}px` }" />
        <view class="navbar-content">
          <uv-input
            v-model="queryForm.bikeCode"
            shape="circle"
            placeholder="输入车辆编码"
            clearable
            border="none"
            :custom-style="{
              padding: '4px',
              backgroundColor: '#ffffff',
            }"
            @confirm="() => {
              paging.reload()
            }"
            @clear="() => {
              queryForm.bikeCode = ''
              paging.reload()
            }"
          >
            <template #prefix>
              <uv-icon name="search" color="#bfbfbf" size="24" />
            </template>
          </uv-input>
        </view>
        <view class="tab_bar">
          <uv-tabs
            line-color="#ffffff"
            :active-style="{
              color: '#ffffff',
              fontWeight: 'bold',
            }"

            :inactive-style="{
              color: '#ffffff',
              fontSize: '30rpx',
            }"
            :list="tabList"
            @change="handleTabChange"
          />
        </view>
      </view>
    </template>
    <view class="container">
      <workLIstItem
        v-for="(item, index) in list"
        :key="index"
        :data="item"
        @order-click="refreshWorkOrder"
      />
    </view>
  </z-paging>
</template>

<style lang="scss" scoped>
.custom-navbar {
  z-index: 999;
  padding: 25rpx 0rpx;
  width: 100%;
  padding-bottom: 0;
  position: relative;
  overflow: hidden;
  background-color: #1885f6;

  .navbar-content {
    display: flex;
    width: 390rpx;
    padding-left: 20rpx;
    align-items: center;
    .title {
      color: white;
      font-size: 30rpx;
      font-weight: bold;
    }
  }

  .tab_bar {
    padding: 15rpx 0;
  }
}

.container {
  padding: 20rpx;
  width: calc(100% - 40rpx);
}
</style>
