<template>
    <z-paging ref="paging" v-model="list" bgColor="#f7f7f7" @query="query" hide-no-more-inside>
        <template #top>
            <ut-navbar title="农资库" :fixed="false" :breadcrumb="false"></ut-navbar>
        </template>

        <view class="pd3-24-24-0">
            <view class="mb-20">
                <ut-tabs mode="subsection" v-model="form.restFlag" :tabs="tabs" @change="onRefresh"></ut-tabs>
            </view>
            <view class="h-86">
                <ut-search ref="searchRef" v-model="form.keyword" @search="changeSeach" margin="0" :border="false"
                    placeholder="搜农资名称、批号、库房、供应商" bgColor="#fff" height="86rpx" borderRadius="10rpx"></ut-search>
            </view>
        </view>
        <view class="pd-24 bg-#f7f7f7">
            <up-swipe-action>
                <up-swipe-action-item v-for="(item, index) in list" :key="index" :name="item?.id"
                    :options="optionsActionTemp" @click="clickTempSwipe" class="mb-20 b-radius">
                    <view class="b-radius bg-#fff pd3-10-24-24 p-rtv"
                        @click.stop="$u.route({ url: '/plant/storage/agro-product/detail/index', params: { id: item.id } })">
                        <view class="d-flex j-ed a-c mb-16">
                            <view class="f-s-22 c-#666">{{ item?.instoreBizInfo?.instoreDate }}</view>
                        </view>
                        <view class="d-flex flex1 mb-10">
                            <view class="flex1">
                                <span class="f-s-34 c-#333 f-w-500 mr-10">{{ item?.materialName }}</span>
                                <span class="f-s-24 c-#666">{{ selectDictLabel(pt_material_type, item?.materialType) }}</span>
                            </view>
                            <view>
                                <view v-if="item?.examinReport?.length" class="tag-span c-primary bg-#EBF6EE">已检验</view>
                                <view v-else class="tag-span c-danger bg-#F9ECEA">未检验</view>
                            </view>
                        </view>
                        <view class="pd2-4-0 f-s-28">
                            <span class="c-#666">入库批号：</span>
                            <span class="c-#333 f-w-500">{{ item?.batchCode }}</span>
                        </view>
                        <view v-if="item?.warehouses?.length" class="pd2-4-0 f-s-28">
                            <span class="c-#666">存放库房：</span>
                            <span class="c-#333 f-w-500">{{ getStorageRoomNames(item?.warehouses) || '-' }}</span>
                        </view>
                        <view v-if="item?.supplierId" class="pd2-4-0 f-s-28">
                            <span class="c-#666">供应商：</span>
                            <span class="c-#333 f-w-500">{{ item?.supplierInfo?.cusName }}</span>
                        </view>
                        <view class="pd2-4-0 f-s-28">
                            <span class="c-#666">入库量：</span>
                            <span class="c-#333 f-w-500">{{ item?.capacity }}{{ item?.unit }}</span>
                        </view>
                        <view class="d-flex">
                            <view v-if="item?.inputAmount" class="pd2-4-0 f-s-28 flex1">
                                <span class="c-#666">出库量：</span>
                                <span class="c-#333 f-w-500">{{ item?.inputAmount || '0' }}{{ item?.unit }}</span>
                            </view>
                            <view v-if="item?.restAmount" class="pd2-4-0 f-s-28 flex1">
                                <span class="c-danger">剩余量：</span>
                                <span class="c-danger f-w-500">{{ item?.restAmount || '0' }}{{ item?.unit }}</span>
                            </view>
                        </view>
                    </view>
                </up-swipe-action-item>
            </up-swipe-action>
        </view>

        <template #empty>
            <view class="d-flex flex-cln a-c" style="margin-top: -200rpx">
                <ut-empty class="mg-at" color="#ccc" size="28rpx">暂无农资信息，点击下方＋号新增吧</ut-empty>
            </view>
        </template>
        <template #bottom>
            <agro-bottom></agro-bottom>
        </template>
    </z-paging>
</template>
<script setup lang="ts">
import { useClientRequest } from '@/utils/request';
import AgroBottom from './model/agro-bottom.vue';
import { getStorageRoomNames } from '@/utils/common';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { pt_material_type } = toRefs<any>(proxy?.useDict('pt_material_type'));
const list = ref<any[]>();
const form = ref({ keyword: '', restFlag: '1', instoreType: '' });
const paging = ref();
const tabs = ref([
    { label: '有库存', value: '1' },
    { label: '无库存', value: '0' },
]);

const changeSeach = () => {
    paging.value.reload();
};
const query = async (pageNum: number, pageSize: number) => {
    const params = {
        pageNum,
        pageSize,
        ...form.value,
    };
    const res = await useClientRequest.get('/plt-api/app/material/list', params);
    if (res) {
        const { rows } = res;
        paging.value.complete(rows);
    }
};
// 暂存项左滑删除配置
const optionsActionTemp = reactive([
    {
        text: '复制',
        style: {
            backgroundColor: '#37A954',
        },
    },
    {
        text: '删除',
        style: {
            backgroundColor: '#F74C30',
        },
    },
]);
// 暂存项删除点击（本地移除）
const clickTempSwipe = async (event: object) => {
    const { name, index } = event as any;
    if (index === 0) {
        uni.$u.route({
            type: 'navigateTo',
            url: '/plant/storage/agro-product/info-update/index',
            params: {
                mode: 'copy',
                id: name,
            },
        });
    } else if (index === 1) {
        try {
            const res = await uni.showModal({
                title: '删除提示',
                content: '确定删除农资信息吗？',
                confirmColor: '#F74C30',
            });
            if (!res.confirm) return;
            await uni.showLoading({
                title: '删除中...',
                mask: true,
            });
            await useClientRequest.get(`/plt-api/app/material/removeById/${name}`);
            uni.hideLoading();
            uni.showToast({
                title: '删除成功',
                icon: 'success',
            });
            paging.value?.reload();
        } catch (error) {
            console.error('删除暂存农资信息失败:', error);
        }
    }
};

const onRefresh = () => {
    paging.value.reload();
};
onMounted(() => {
    uni.$on('refreshStorageRoomList', () => {
        onRefresh();
    });
});
</script>
<style lang="scss" scoped>
.search-select-item {
    height: 86rpx;
    background-color: #fff;
    border-radius: 10rpx;
    box-sizing: border-box;
    padding: 12rpx;
}

.tag-span {
    padding: 4rpx 12rpx;
    font-size: 20rpx;
    border-radius: 18rpx;
}
</style>
