<template>
    <z-paging ref="paging" v-model="list" bgColor="#f7f7f7" @query="query" safe-area-inset-bottom hide-no-more-inside>
        <template #top>
            <ut-navbar title="库房管理" :fixed="false" border></ut-navbar>
            <view class="d-flex a-c pd-25">
                <view class="min-w-220 flex1">
                    <ut-action-sheet v-model="form.type" :tabs="pt_warehouse_type" @change="onRefresh" title="选择库房类型">
                        <view class="d-flex search-select-item a-c">
                            <view class="flex1 ov-hd f-s-28 c-333 text-center f-w-5 w-s-no">{{ selectDictLabel(pt_warehouse_type, form.type) || '全部类型' }}</view>
                            <up-icon size="24rpx" color="#333" name="arrow-down-fill" class="mr-5"></up-icon>
                        </view>
                    </ut-action-sheet>
                </view>
                <view class="h-86 pl-20 w-100%">
                    <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>
            </view>
        </template>

        <template>
            <view class="pl-24 pr-24">
                <up-swipe-action>
                    <up-swipe-action-item v-for="item in list" :name="item?.id" :key="item?.id" :disabled="item?.storeCount" :options="optionsAction" @click="clickSwipe" class="mb-20 b-radius">
                        <view @click.stop="clickItem(item)" class="b-radius bg-#fff pd-20 p-rtv">
                            <view class="d-flex">
                                <view class="flex1 ov-hd mr-20 f-s-34 c-#333 f-w-500">{{ item?.warehouseName }}</view>
                                <view class="f-s-24 c-#666">{{ item?.createTime }}创建</view>
                            </view>
                            <view v-if="item?.sn" class="f-s-24 c-#666">{{ item?.sn }}</view>
                            <view class="pd-5"></view>
                            <view class="f-s-28 pd2-5-0">
                                <span class="c-#666">库房类型：</span>
                                <span class="c-#333 f-w-600">{{ selectDictLabel(pt_warehouse_type, item?.type) }}</span>
                            </view>
                            <view class="f-s-28 pd2-5-0">
                                <span class="c-#666">负责人：</span>
                                <span class="c-#333 f-w-600">{{ item?.contactName }}</span>
                            </view>
                            <view class="f-s-28 pd2-5-0">
                                <span class="c-#666">所在位置：</span>
                                <span class="c-#333 f-w-600">{{ item?.address || '-' }}</span>
                            </view>
                            <view class="f-s-28 pd2-5-0">
                                <span class="c-#666">货位数量：</span>
                                <span class="c-#333 f-w-600">{{ item?.shelvesCount || 0 }}</span>
                            </view>
                        </view>
                    </up-swipe-action-item>
                </up-swipe-action>
            </view>
        </template>
        <!-- 空数据处理 -->

        <template #empty>
            <ut-empty class="mg-at" size="28rpx" color="#999" padding="10rpx">暂未设置库房，点击＋号新增库房吧</ut-empty>
        </template>
    </z-paging>
    <ut-suspension @click="$u.route({ url: '/plant/storage/storage-room/edit/index' })">
        <image src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/common/btn_add_logo.png" mode="widthFix" class="w-120 h-120"></image>
    </ut-suspension>
    <form-shelve v-if="showShelve" v-model:show="showShelve" v-model="rowShelve" :title="shelveTitle" @submit="submitFormShelveAdd" />
</template>
<script setup lang="ts">
import { useClientRequest } from '@/utils/request';
import FormShelve from '../edit/models/form-shelve.vue';
const title =  ref('库房管理');
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { pt_warehouse_type } = toRefs<any>(proxy?.useDict('pt_warehouse_type'));
const paging = ref();
const list = ref<any[]>([]);
const placeholder = ref('搜库房名称、编号、负责人');

const form = ref({
    keyword: '',
    type: '',
});
const showShelve = ref(false);
const rowShelve = ref<any>(null);
const shelveTitle = ref('添加货位');
const query = async (pageNum: number, pageSize: number) => {
    const params = {
        pageNum,
        pageSize,
        ...form.value,
    };
    const res = await useClientRequest.get<any>('/plt-api/app/warehouse/pageList', 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 optionsAction = reactive([
    {
        text: '删除',
        style: {
            backgroundColor: '#F74C30',
        },
    },
    // 添加货位
    {
        text: '添加货位',
        style: {
            backgroundColor: '#37A954',
        },
    },
]);
const clickSwipe = async (event: object) => {
    const { name, index } = event as any;
    if (index === 0) {
        // 删除
        const res = await uni.showModal({
            title: '删除提示',
            content: '删除后不可撤回，请谨慎操作！',
            confirmColor: '#F74C30',
        });
        console.log(res);
        if (res.confirm) {
            const delRes = await useClientRequest.get(`/plt-api/app/warehouse/delete/${name}`);
            if (delRes && delRes.code === 200) {
                uni.showToast({ title: '删除成功', icon: 'none' });
                onRefresh();
            }
        }
    }
    if (index === 1) {
        // 添加货位
        shelveTitle.value = '添加货位';
        rowShelve.value = {
            shelvesName: '',
            sn: '',
            remark: '',
            warehouseId: name,
        };
        showShelve.value = true;
    }
};
const clickItem = (item: any) => {
    uni.$u.route({
        type: 'navigateTo',
        url: '/plant/storage/storage-room/detail/index',
        params: {
            id: item?.id,
        },
    });
};
const submitFormShelveAdd = async (data: any) => {
    try {
        const res = await useClientRequest.post('/plt-api/app/shelves/add', data);
        if (res && res.code === 200) {
            uni.showToast({ title: '添加成功', icon: 'success' });
            showShelve.value = false;
            onRefresh();
        }
    } catch (e) {
        console.error(e);
    }
};
onMounted(() => {

    uni.$on('refreshStorageRoomList', () => {
        onRefresh();
    });
});
</script>
<style lang="scss" scoped>
// @import '@/assets/styles/theme.scss';
.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;
}
.u-page {
    padding: 0;
}

.u-demo-block__title {
    padding: 10px 0 2px 15px;
}

.swipe-action {
    &__content {
        padding: 25rpx 0;

        &__text {
            font-size: 15px;
            color: $u-main-color;
            padding-left: 30rpx;
        }
    }
}
</style>
