<template>
    <w-page-common btnText="" :customStyle="{ paddingLeft: 0, paddingRight: 0, paddingTop: 0 }">
        <view class="spareParts-list">
            <view class="search">
                <u-input
                    v-model="searchForm.keywords"
                    border="none"
                    placeholder="请输入配件编码/配件名称"
                    @change="searchChange"
                    clearable
                    class=""
                >
                    <template #prefix>
                        <u-icon name="search" size="44rpx"></u-icon>
                    </template>
                </u-input>
            </view>
            <view class="lists px-[24rpx]">
                <z-paging
                    ref="paging"
                    v-model="dataList"
                    @query="queryList"
                    :fixed="false"
                    height="100%"
                >
                    <block v-for="(item, index) in dataList" :key="`${index} + 'unique'`">
                        <view class="item-card" @click="selectItem(item)">
                            <view class="select-icon">
                                <u-icon
                                    name="checkmark-circle-fill"
                                    :color="item.selected ? '#0E66FB' : '#F4F4F4'"
                                    size="40rpx"
                                ></u-icon>
                            </view>
                            <view class="label">{{ item.sparePartsName }}</view>
                            <!-- <view class="label">所属仓库：{{ item.warehouseName }}</view> -->
                            <view class="label">配件编码：{{ item.sparePartsCode }}</view>
                            <view class="label">型号规格：{{ item.specificationsModel }}</view>
                            <view class="label flex justify-between items-center">
                                <text>库存数量：{{ item.quantity }}</text>
                                <view class="flex items-center">
                                    选择数量
                                    <u-number-box
                                        :min="1"
                                        :max="item.quantity"
                                        integer
                                        bgColor="transparent"
                                        v-model="item.count"
                                    ></u-number-box>
                                </view>
                            </view>
                        </view>
                    </block>
                    <template #empty>
                        <w-empty />
                    </template>
                </z-paging>
            </view>
        </view>
        <template #btn>
            <view class="page-common-footer px-3">
                <view class="mr-3">
                    已选：
                    <text class="text-error">{{ selectItems.length }}</text>
                    种配件
                </view>
                <u-button
                    text="确定"
                    color="#2759FF"
                    shape="circle"
                    @click="handleSubmit"
                    class="flex-1"
                ></u-button>
            </view>
        </template>
    </w-page-common>
</template>

<script setup lang="ts">
import { computed, ref, unref, nextTick } from 'vue'
import { toast } from '@/utils/util'
import { onLoad } from '@dcloudio/uni-app'
import { apiSparePartList } from '@/api/sparePart'
import { debounce } from 'lodash-es'

const emits = defineEmits(['submit'])
const searchForm = ref({
    clientId: '',
    keywords: '',
    warehouseType: '',
    orderType: ''
})
const dataList = ref<any>([])
const selectItems = ref<MaterialItem[]>([])
// 已选择数量
// const selectedNumber = computed(() => {
//     const selected = dataList.value.filter((item: MaterialItem) => {
//         return item.selected
//     })
//     return selected?.length || 0
// })
const paging = ref()
const queryList = async (pageNo: number, pageSize: number) => {
    try {
        uni.showLoading({
            title: '加载中...'
        })
        const params = {
            ...unref(searchForm),
            pageNo,
            pageSize
        }
        const res = await apiSparePartList(params)
        res.lists.map(item => (item.count = 1))
        // 选中已选的
        if (selectItems.value.length > 0) {
            selectItems.value.map((select: MaterialItem) => {
                res.lists.map((list: MaterialItem) => {
                    if (list.id == select.id) {
                        list.selected = true
                    }
                })
            })
        }
        paging.value.complete(res.lists)
    } catch (e) {
        paging.value.complete(false)
    }
    uni.hideLoading()
}

// 输入框搜索内容改变
const searchChange = debounce(() => {
    queryList(1, 10)
}, 300)

const handleSubmit = () => {
    if (selectItems.value.length === 0) return toast('请选择配件！')
    uni.$emit('sparepartsList', selectItems.value)
    uni.navigateBack()
}

const selectItem = (item: any) => {
    if (item.selected) {
        selectItems.value = selectItems.value.filter(i => i.id != item.id)
    } else {
        selectItems.value.push(item)
    }
    item.selected = !item.selected
}

onLoad(async options => {
    searchForm.value.clientId = options.clientId as string
    searchForm.value.warehouseType = options.warehouseType as string
    searchForm.value.orderType = options.orderType as string
    // 设置选中的id
    if ('selectedItem' in options) {
        const data = JSON.parse(decodeURIComponent(options?.selectedItem))
        await nextTick()
        console.log('data', data)
        selectItems.value = data
    }
})
</script>
<style scoped lang="scss">
.spareParts-list {
    @apply h-full flex flex-col;
    .btn {
        @apply fixed bottom-0 left-0 bg-white w-full pt-3;
        padding-bottom: env(safe-area-inset-bottom);
        :deep(button) {
            @apply w-[80%];
        }
    }
    .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;
        }
    }
    .lists {
        @apply flex-1 overflow-auto mt-[20rpx];
        // padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
        .item-card {
            @apply bg-white rounded-lg text-[#44464A] p-2 relative mb-2;
            .select-icon {
                @apply absolute top-2 left-1;
            }
            .label {
                @apply pl-[40rpx] mb-2;
            }
            :deep(.u-number-box) {
                @apply h-[30px] ml-1;
                input {
                    background-color: #f4f4f4 !important;
                    border-radius: 4px;
                }
            }
            :deep(.u-number-box__minus),
            :deep(.u-number-box__plus) {
                width: 27px !important;
            }
        }
    }
}
</style>
