<template>
    <z-paging ref="paging" v-model="list" bgColor="#f7f7f7" @query="query" safe-area-inset-bottom>
        <template #top>
            <ut-navbar title="出入库记录" :fixed="false" border></ut-navbar>
            <view class="pd2-12-24">
                <ut-tabs v-model="form.operationType" :tabs="tabs" @change="onRefresh"></ut-tabs>
                <view class="pd-10"></view>
                <ut-search ref="searchRef" v-model="form.keyword" @search="onRefresh" margin="0" :border="false" :placeholder="placeholder" bgColor="#fff" height="86rpx" borderRadius="10rpx"></ut-search>
            </view>
        </template>
        <template>
            <view class="pd2-12-24">
                <template v-for="item in list" :name="item?.id" :key="item?.id">
                    <view class="b-radius bg-#fff pd-20 p-rtv mb-20">
                        <view class="d-flex">
                            <view class="flex1 ov-hd mr-20 f-s-34 c-#333 f-w-500">{{ selectDictLabel(pt_operation_type, item?.operationType) }}</view>
                            <view class="f-s-24 c-#666">{{ item?.relationBizInfo?.storageDate }}</view>
                        </view>
                        <view class="f-s-28 pd2-5-0">
                            <span class="c-#666">出入库批号：</span>
                            <span class="c-#333 f-w-600">{{ item?.batchCode }}</span>
                        </view>
                        <view class="f-s-28 pd2-5-0">
                            <span class="c-#666">记录批号：</span>
                            <span class="c-#333 f-w-600">{{ item?.recordNumber || '-' }}</span>
                        </view>
                        <view class="f-s-28 pd2-5-0">
                            <span class="c-#666">出入库量：</span>
                            <span class="c-#333 f-w-600">{{ item?.operationType == '1' ? '+' : '-' }}{{ item?.quantity || '-' }}{{ item?.unit }}</span>
                        </view>
                        <view class="f-s-28 pd2-5-0">
                            <span class="c-#666">用途/来源：</span>
                            <span class="c-#333 f-w-600">{{ item?.relationBizInfo?.purpose || '-' }}</span>
                            <span v-if="item?.relationBizInfo?.batchTypeStr && item?.relationBizInfo?.batchCode" class="c-#333 f-w-600 f-s-22">（{{ item?.relationBizInfo?.batchTypeStr || '-' }}：{{ item?.relationBizInfo?.batchCode || '-' }}）</span>
                        </view>
                        <view class="f-s-28 pd2-5-0">
                            <span class="c-#666">备注：</span>
                            <span class="c-#333 f-w-600">{{ item?.remark || '-' }}</span>
                        </view>
                        <view class="d-flex">
                            <view class="flex1 f-s-24 pd2-5-0">
                                <span class="c-#666">操作人：</span>
                                <span class="c-#666">{{ item?.createByName || '-' }}</span>
                            </view>
                            <view class="f-s-24 pd2-5-0">
                                <span class="c-#666">操作时间：</span>
                                <span class="c-#666">{{ item?.createTime || '-' }}</span>
                            </view>
                        </view>
                    </view>
                </template>
            </view>
        </template>
        <!-- 空数据处理 -->

        <template #empty>
            <ut-empty class="mg-at" size="28rpx" color="#999" padding="10rpx">暂未设置库房，点击＋号新增库房吧</ut-empty>
        </template>
    </z-paging>
</template>
<script setup lang="ts">
import { useClientRequest } from '@/utils/request';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { pt_warehouse_type, pt_operation_type } = toRefs<any>(proxy?.useDict('pt_warehouse_type', 'pt_operation_type'));
const paging = ref();
const list = ref<any[]>([]);
const placeholder = ref('搜出入库批号、用途、来源');

const form = ref({
    keyword: '',
    operationType: ''
});
const tabs = reactive([
    { label: '全部', value: '' },
    { label: '入库记录', value: '1' },
    { label: '出库记录', value: '2' },
])
const query = async (pageNum: number, pageSize: number) => {
    const params = {
        pageNum,
        pageSize,
        ...form.value,
        storageId: paramOptions.value.id,
        stockType: paramOptions.value.stockType,
    };
    const res = await useClientRequest.get<any>('/plt-api/app/storageRecord/list', params);
    if (!res || res.code !== 200) return;
    const { rows } = res;
    paging.value.complete(rows);
};
const onRefresh = () => {
    try {
        paging.value?.reload();
    } catch (e) {
        console.error(e);
    }
};
const paramOptions = ref<Record<string, any>>({});
onLoad((options) => {
    paramOptions.value = options || {};
});
</script>
<style lang="scss" scoped>

.search-select-item {
    height: 86rpx;
    background-color: #fff;
    border-radius: 10rpx;
    box-sizing: border-box;
    padding-left: 16rpx;
    padding-right: 16rpx;
    padding-top: 14rpx;
    padding-bottom: 14rpx;
}
</style>
