<script lang="ts" setup>
import { queryMyWorkOrders } 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 orderStatusList = ref<any>([])
const tabList = ref<any>([])
const popupRef = ref<any>(null)
const selectValue = ref<string>('')
const paging = ref<any>(null)
const queryForm = ref<any>({
  bikeCode: '',
  orderType: '',
  handelSate: '1',
})
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) {
  console.log('queryList')

  uni.showLoading({
    title: '加载中',
  })
  try {
    const res: any = await queryMyWorkOrders({
      pageNum,
      pageSize,
      bikeCode: queryForm.value.bikeCode,
      orderType: queryForm.value.orderType ? queryForm.value.orderType : null,
      handelSate: queryForm.value.handelSate ? Number(queryForm.value.handelSate) : null,
    })
    const { records } = res
    paging.value.complete(records)
  }
  catch (e) {
    paging.value.complete(false)
  }
  finally {
    uni.hideLoading()
  }
}

function handleBack() {
  uni.navigateBack()
}

function handleClose() {
  popupRef.value.close()
}

function reset() {
  queryForm.value.handelSate = '1'
  handleClose()
  paging.value.reload()
}

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

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

  const { handelSate } = query
  if (handelSate) {
    if (handelSate === '-1') {
      queryForm.value.handelSate = ''
    }
    else {
      queryForm.value.handelSate = handelSate
    }
  }
})

onShow(() => {
  nextTick(() => {
    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"
    :auto="false"
    @query="queryList"
  >
    <template #top>
      <view class="custom-navbar">
        <view class="status-bar" :style="{ height: `${systemInfo.statusBarHeight - 8}px` }" />
        <view class="navbar-content">
          <view class="back_bar">
            <uv-icon name="arrow-left" color="#222222" size="24" @click="handleBack" />
            <text class="text">我的工单</text>
          </view>
        </view>
        <view class="tab_bar">
          <uv-tabs
            line-color="#0076F0"
            :active-style="{
              color: '#000000',
              fontWeight: 'bold',
              fontSize: '32rpx',
            }"

            :inactive-style="{
              color: '#666666',
              fontSize: '30rpx',
              fontWeight: '400',
            }"
            :list="tabList"
            @change="handleTabChange"
          />
        </view>
        <view class="input_bar">
          <uv-input
            v-model="queryForm.bikeCode"
            shape="circle"
            placeholder="输入车辆编码"
            clearable
            border="none"
            :custom-style="{
              padding: '4px',
              backgroundColor: '#F3F3F3',
            }"
            @confirm="() => {
              paging.reload()
            }"
            @clear="() => {
              queryForm.bikeCode = ''
              paging.reload()
            }"
          >
            <template #prefix>
              <uv-icon name="search" color="#bfbfbf" size="24" />
            </template>
          </uv-input>
          <view
            style="margin-left: 20rpx;" @click="() => {
              popupRef?.open();
              selectValue = queryForm.handelSate;
            }"
          >
            <uv-icon
              name="shaixuan"
              color="#666666"
              custom-prefix="custom-icon"
              size="26"
            />
            <view class="text">
              筛选
            </view>
          </view>
        </view>
      </view>
    </template>

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

  <!-- 筛选弹窗 -->
  <uv-popup
    ref="popupRef"
    :close-on-click-overlay="false"
    safe-area-inset-top
    mode="right"
  >
    <view
      :style="{
        width: `${systemInfo.windowWidth * 0.8}px`,
        height: `${systemInfo.safeArea.height}px`,
      }"
      class="popup_content"
    >
      <view class="popup_content_header">
        <view class="icon" @click="handleClose">
          <uv-icon name="arrow-left" color="#333333" size="22" />
        </view>
        <view class="text">
          工单筛选
        </view>
      </view>
      <view class="popup_content_body">
        <uni-section title="工单状态" type="line">
          <view class="select_box">
            <view
              v-for="(item) in orderStatusList"
              :key="item.dicValueId"
              class="select_btn"
              :class="[item.dicValue === selectValue ? 'select_btn_active' : '']"
              @click="selectValue = item.dicValue"
            >
              {{ item.dicValueName }}
            </view>
          </view>
        </uni-section>
      </view>
      <view class="popup_content_footer">
        <uv-button
          type="info"
          text="重置"
          :custom-style="{
            borderRadius: '28rpx',
            height: '80rpx',
            width: '200rpx',
          }"
          :custom-text-style="{
            fontSize: '28rpx',
            marginLeft: '8rpx',
          }"
          @click="reset"
        />
        <uv-button
          type="primary"
          text="确认"
          :custom-style="{
            backgroundImage: `linear-gradient(135deg, #1089FF 0%, #0F5BFF 100%)`,
            borderRadius: '28rpx',
            height: '80rpx',
            width: '200rpx',
          }"
          :custom-text-style="{
            fontSize: '28rpx',
            marginLeft: '8rpx',
          }"
          @click="() => {
            queryForm.handelSate = selectValue;
            handleClose();
            paging.reload();
          }"
        />
      </view>
    </view>
  </uv-popup>
</template>

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

  .navbar-content {
    width: 100%;
    position: relative;

    .back_bar {
      display: flex;
      align-items: center;
      transform: translateX(20rpx);

      .text {
        font-family: SourceHanSansCN-Medium;
        font-size: 34rpx;
        color: #222222;
        letter-spacing: 0;
        font-weight: 500;
      }
    }
  }

  .tab_bar {
    padding: 15rpx 0;
  }

  .input_bar {
    padding: 15rpx 20rpx;
    width: calc(100% - 40rpx);
    display: flex;
    justify-content: space-between;
    align-items: center;

    .text {
      font-family: PingFangSC-Regular;
      font-size: 22rpx;
      color: #999999;
      letter-spacing: 0;
      text-align: center;
      font-weight: 400;
    }
  }
}

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

.popup_content {
  &_header {
    position: relative;
    width: 100%;
    display: flex;
    height: 44px;
    justify-content: center;
    align-items: center;

    .icon {
      position: absolute;
      left: 15rpx;
    }

    .text {
      font-family: PingFangSC-Semibold;
      font-size: 36rpx;
      color: #333333;
      transform: translateX(-24rpx);
      letter-spacing: 0;
      font-weight: 600;
    }
  }

  &_body {
    padding: 20rpx;
    width: calc(100% - 40rpx);
    height: calc(100% - 150px);
    overflow-y: auto;

    .select_box {
      display: flex;
      flex-wrap: wrap;

      .select_btn {
        min-width: 100rpx;
        padding: 10rpx 15rpx;
        border: 1px solid rgba(153, 153, 153, 1);
        box-shadow: 0px 1px 2px 0px rgba(184, 200, 224, 0.22);
        border-radius: 10rpx;
        margin: 0rpx 53rpx 32rpx 0;
        font-family: PingFangSC-Regular;
        font-size: 28rpx;
        color: #7d8592;
        text-align: center;
        font-weight: 400;

        &_active {
          background: #3f8cff;
          border: 1px solid rgba(153, 153, 153, 1);
          box-shadow: 0px 1px 2px 0px rgba(184, 200, 224, 0.22);
          color: white;
          transition: all 0.2s;
        }
      }
    }
  }
  &_footer {
    padding: 20rpx;
    width: calc(100% - 40rpx);
    display: flex;
    justify-content: space-around;
    border-top: 1px solid #eee;
    align-items: center;
  }
}
</style>
