<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,
})

const currentIndex = ref(0)

function subsectionChange(index: number) {
  currentIndex.value = index
}

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
    uni.hideLoading()
    paging.value.complete(records)
  }
  catch (e) {
    uni.hideLoading()
    paging.value.complete(false)
  }
}

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(() => {
  paging.value.reload()
})
</script>

<template>
  <view class="container">
    <view
      class="header-tabs"
      :style="{
        height: `${(tabConfig.height)}px`,
      }"
    >
      <view class="tabs">
        <view
          :class="[currentIndex === 0 ? 'tabs_active' : '']"
          @click="subsectionChange(0)"
        >
          工单列表
        </view>
        <!-- <view
          :class="[currentIndex === 1 ? 'tabs_active' : '']"
          style="margin-left: 30rpx;"
          @click="subsectionChange(1)"
        >
          工单看板
        </view> -->
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content-wrapper">
      <view
        class="content-slide"
        :style="{
          transform: `translateX(${(-currentIndex * 100) / 2}%)`,
          transition: 'transform .3s ease-in-out',
        }"
      >
        <!-- 工单列表 -->
        <view class="content-item">
          <view
            :style="{
              height: `calc(100vh - ${tabConfig.height}px - 50px - ${systemInfo.safeAreaInsets.bottom}px)`,
            }"
            class="list_bar"
          >
            <z-paging
              ref="paging"
              v-model="list"
              :fixed="false"
              :default-page-no="Number('1')"
              :default-page-size="Number('10')"
              :auto-show-back-to-top="Boolean(true)"
              bg-color="#f3f3f3"
              @query="queryList"
            >
              <template #top>
                <view class="header_bar">
                  <view class="tab_bar">
                    <uv-tabs
                      line-color="#ffffff"
                      :active-style="{
                        color: '#ffffff',
                        fontWeight: 'bold',
                      }"
                      :item-style="{
                        padding: '8px 15px',
                      }"
                      :inactive-style="{
                        color: '#ffffff',
                        fontSize: '30rpx',
                      }"
                      :list="tabList"
                      @change="handleTabChange"
                    />
                  </view>
                  <view class="search_bar">
                    <uv-input
                      v-model="queryForm.bikeCode"
                      shape="circle"
                      placeholder="车牌号"
                      clearable
                      border="none"
                      :custom-style="{
                        padding: '4px',
                        backgroundColor: '#f5f5f5',
                      }"
                      @confirm="() => {
                        paging.reload()
                      }"
                      @clear="() => {
                        queryForm.bikeCode = ''
                        paging.reload()
                      }"
                    >
                      <template #prefix>
                        <uv-icon name="search" color="#bfbfbf" size="24" />
                      </template>
                    </uv-input>
                  </view>
                </view>
              </template>

              <view class="worder_list_bar">
                <workLIstItem
                  v-for="(item, index) in list"
                  :key="index"
                  :data="item"
                />
              </view>
            </z-paging>
          </view>
        </view>
        <view class="content-item">
          asd1
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.header-tabs {
  width: 100%;
  position: relative;
  background-color: #1488f5;

  .tabs {
    position: absolute;
    display: flex;
    align-items: center;
    font-size: 30rpx;
    color: white;
    bottom: 10px;
    left: 40%;
  }

  .tabs_active {
    font-weight: bold;
    font-size: 32rpx;
    transition: all 0.3s;
  }
}

.container {
  width: 100%;

  .content-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;

    .content-slide {
      display: flex;
      width: max-content;

      .content-item {
        width: 100vw; /* 或者使用 100% 如果父容器固定宽度 */
        box-sizing: border-box;
        display: inline-block;
        vertical-align: top;
      }
    }
  }
}

.list_bar {
  width: 100%;
}

.header_bar {
  width: 100%;
  background-color: #1488f5;

  .tab_bar {
    padding: 0 10rpx;
    width: calc(100% - 20rpx);
  }

  .search_bar {
    padding: 0 20rpx;
    width: calc(100% - 40rpx);
    margin: 24rpx 0;
  }
}

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