<template>
    <div>
        <base-search :formItemList="formItemList" @search="searchFrom" ref="baseSearchRef"></base-search>

        <!-- 横向滚动操作栏 -->
        <div class="operation-scroll-bar">
            <div class="operation-scroll-container">
                <el-button
                    type="primary"
                    v-hasPermi="['warehouse:add']"
                    @click="showAddDialog"
                    style="margin-left: 10px"
                >
                    新增中转仓
                </el-button>
            </div>
        </div>

        <div class="main-container">
            <el-table
                :data="rows"
                border
                v-loading="data.dataListLoading"
                element-loading-text="数据加载中..."
                style="width: 100%"
                :show-overflow-tooltip="true"
            >
                <el-table-column label="ID" prop="id" min-width="80" width="100">
                    <template #default="scope">
                        {{ scope.row.id || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="中转仓名称" prop="warehouseName" min-width="120" width="150">
                    <template #default="scope">
                        {{ scope.row.warehouseName || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="中转仓编码" prop="warehouseCode" min-width="120" width="150">
                    <template #default="scope">
                        {{ scope.row.warehouseCode || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="地址" prop="address" min-width="200" width="250">
                    <template #default="scope">
                        {{ scope.row.address || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="容量(头)" prop="capacity" min-width="100" width="120">
                    <template #default="scope">
                        {{ scope.row.capacity || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="负责人" prop="managerName" min-width="100" width="120">
                    <template #default="scope">
                        {{ scope.row.managerName || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="联系电话" prop="managerMobile" min-width="120" width="150">
                    <template #default="scope">
                        {{ scope.row.managerMobile || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="状态" prop="status" min-width="80" width="100">
                    <template #default="scope">
                        <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
                            {{ scope.row.status === 1 ? '启用' : '禁用' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" prop="createTime" min-width="160" width="180">
                    <template #default="scope">
                        {{ scope.row.createTime || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="200" width="250" fixed="right">
                    <template #default="scope">
                        <el-button link type="primary" v-hasPermi="['warehouse:edit']" @click="showEditDialog(scope.row)">
                            编辑
                        </el-button>
                        <el-button link type="primary" v-hasPermi="['warehouse:query']" @click="showDetailDialog(scope.row)">
                            详情
                        </el-button>
                        <el-button link type="danger" v-hasPermi="['warehouse:delete']" @click="del(scope.row.id)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
                <template #empty>
                    <div class="dataListOnEmpty">暂无数据</div>
                </template>
            </el-table>
            <Pagination
                v-if="data.total > 0"
                v-model:limit="form.pageSize"
                v-model:page="form.pageNum"
                :total="data.total"
                @pagination="handlePagination"
            />
        </div>

        <!-- 新增/编辑对话框 -->
        <warehouseDialog ref="dialogRef" @success="getDataList" />
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import baseSearch from '@/components/common/searchCustom/index.vue';
import Pagination from '@/components/Pagination/index.vue';
import warehouseDialog from './warehouseDialog.vue';
import { warehouseList, warehouseDel } from '@/api/warehouse.js';

const baseSearchRef = ref();
const dialogRef = ref();
const data = reactive({
    total: 0,
    dataListLoading: false,
    tableKey: 0,
});
const rows = ref([]);
const form = reactive({
    pageNum: 1,
    pageSize: 10,
});

const formItemList = reactive([
    {
        label: '中转仓名称',
        prop: 'warehouseName',
        type: 'input',
        placeholder: '请输入中转仓名称',
        span: 7,
        labelWidth: 100,
    },
    {
        label: '中转仓编码',
        prop: 'warehouseCode',
        type: 'input',
        placeholder: '请输入中转仓编码',
        span: 7,
        labelWidth: 100,
    },
    {
        label: '状态',
        prop: 'status',
        type: 'select',
        selectOptions: [
            { value: 1, text: '启用' },
            { value: 0, text: '禁用' },
        ],
        span: 7,
        labelWidth: 80,
    },
]);

const searchFrom = () => {
    form.pageNum = 1;
    getDataList();
};

const handlePagination = (paginationData) => {
    if (paginationData) {
        form.pageNum = paginationData.page || form.pageNum;
        form.pageSize = paginationData.limit || form.pageSize;
    }
    getDataList();
};

const getDataList = () => {
    data.dataListLoading = true;
    const searchParams = baseSearchRef.value.penetrateParams();

    const params = {
        ...form,
        ...searchParams,
    };

    warehouseList(params)
        .then((res) => {
            let responseData = res.data || res;

            if (responseData && typeof responseData === 'object' && 'total' in responseData && 'rows' in responseData) {
                rows.value = responseData.rows || [];
                data.total = responseData.total || 0;
            } else if (responseData && responseData.data) {
                rows.value = responseData.data.rows || [];
                data.total = responseData.data.total || 0;
            } else {
                rows.value = [];
                data.total = 0;
            }
        })
        .catch((error) => {
            console.error('查询失败:', error);
            ElMessage.error('查询失败：' + (error.message || '未知错误'));
            rows.value = [];
            data.total = 0;
        })
        .finally(() => {
            data.dataListLoading = false;
        });
};

const showAddDialog = () => {
    if (dialogRef.value) {
        dialogRef.value.onShowDialog(null);
    }
};

const showEditDialog = (row) => {
    if (dialogRef.value) {
        dialogRef.value.onShowDialog(row);
    }
};

const showDetailDialog = (row) => {
    if (dialogRef.value) {
        dialogRef.value.onShowDialog(row, true);
    }
};

const del = (id) => {
    ElMessageBox.confirm('确定要删除这条中转仓记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            warehouseDel(id)
                .then((res) => {
                    if (res.code === 200) {
                        ElMessage.success('删除成功');
                        getDataList();
                    } else {
                        ElMessage.error(res.msg || '删除失败');
                    }
                })
                .catch((error) => {
                    console.error('删除失败:', error);
                    ElMessage.error('删除失败：' + (error.message || '未知错误'));
                });
        })
        .catch(() => {
            // 用户取消删除
        });
};

onMounted(() => {
    getDataList();
});
</script>

<style scoped lang="scss">
.operation-scroll-bar {
    background: #fff;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 2px;
}

.operation-scroll-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.main-container {
    background: #fff;
    padding: 16px;
    border-radius: 2px;
}

.dataListOnEmpty {
    text-align: center;
    padding: 20px;
    color: #999;
}
</style>

