<!--
 * @Author: micky
 * @Date: 2024-10-06 20:41:54
 * @LastEditors: micky
 * @LastEditTime: 2024-10-21 21:54:23
 * @FilePath: \chargingpile-uniapp\src\bundle\pages\repair\my-apply\index.vue
-->
<template>
    <view class="my-apply">
        <u-tabs
            :list="tabs"
            itemStyle="height:50px;flex:1;white-space:nowrap;"
            lineColor="#0E66FB"
            lineWidth="26"
            :activeStyle="{ color: '#0E66FB' }"
            keyName="label"
            :scrollable="false"
            :current="activeTab"
            @change="handleChangeTab"
        ></u-tabs>
        <view class="search">
            <u-input
                v-model="searchForm.orderNo"
                border="none"
                placeholder="请输入单据编号"
                @change="searchChange"
                clearable
                class=""
            >
                <template #prefix>
                    <u-icon name="search"></u-icon>
                </template>
            </u-input>
        </view>
        <view class="content">
            <material v-if="activeTab === 0" ref="paging" />
            <stash v-else-if="activeTab === 1" ref="paging" />
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, toRefs, shallowRef } from 'vue'
import { debounce } from 'lodash-es'
import material from './material.vue'
import stash from './stash.vue'
import { onShow } from '@dcloudio/uni-app'

const tabs = shallowRef([
    { label: '领料申请', value: 0 },
    { label: '退仓申请', value: 1 }
])
const activeTab = ref(0)
const handleChangeTab = (item: any) => {
    activeTab.value = item.value
}

const paging = ref()
const searchForm = ref({
    orderNo: ''
})
// 输入框搜索内容改变
const searchChange = debounce(() => {
    paging.value.setParams({
        orderNo: searchForm.value.orderNo
    })
}, 300)

onShow(() => {
    searchChange()
})
</script>
<style scoped lang="scss">
.my-apply {
    @apply h-[100vh] flex flex-col;
    .search {
        @apply bg-white pt-2 pb-3 px-[24rpx];
        :deep(.u-input) {
            @apply bg-[#F4F4F4] h-[72rpx] rounded-sm;
            padding-left: 12rpx !important;
            padding-right: 12rpx !important;
        }
    }
    .content {
        @apply flex-1 overflow-auto pb-5 pt-3 px-3;
        background: $gray-1;
    }
}
</style>
