<template>
    <ele-page flex-table>
        <location-search @search="reload" />

        <common-table ref="pageRef" :pageConfig="pageConfig" :columns="columns">
            <template #toolbar>
                <el-button
                    type="primary"
                    plain
                    :icon="PlusOutlined"
                    v-permission="'recycleService:location:add'"
                    @click="handleUpdate()"
                >
                    新增库位
                </el-button>
                <el-button
                    type="danger"
                    plain
                    :icon="DeleteOutlined"
                    v-permission="'recycleService:location:batchDelete'"
                    @click="handleBatchDelete()"
                >
                    批量删除
                </el-button>
                <el-button
                    type="danger"
                    plain
                    :icon="DeleteOutlined"
                    v-permission="'recycleService:location:batchDisabled'"
                    @click="handleBatchDisabled()"
                >
                    批量停用
                </el-button>
                <el-button
                    type="primary"
                    plain
                    v-permission="'recycleService:location:import'"
                    @click="handleImportExcel"
                    :icon="UploadOutlined"
                >
                    导入
                </el-button>
                <el-button
                    type="success"
                    plain
                    v-permission="'recycleService:location:export'"
                    @click="handleExportExcel"
                    :icon="DownloadOutlined"
                >
                    导出
                </el-button>
            </template>
            <template #picture="{ row }">
                <el-image
                    style="width: 80px; height: 100px"
                    fit="cover"
                    src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                />
            </template>

            <template #useStatus="{ row }">
                <dict-data
                    code="use_status"
                    type="tag"
                    :model-value="row.useStatus"
                />
            </template>

            <template #action="{ row }">
                <div>
                    <el-button
                        type="primary"
                        link
                        v-permission="'recycleService:location:update'"
                        @click="handleUpdate(row)"
                    >
                        编辑
                    </el-button>
                    <el-button
                        :type="row.useStatus == 0 ? 'success' : 'danger'"
                        link
                        v-permission="'recycleService:location:changeStatus'"
                        @click="handleUseStatus(row)"
                    >
                        {{ row.useStatus == 0 ? '启用' : '停用' }}
                    </el-button>
                    <el-button
                        type="danger"
                        link
                        v-permission="'recycleService:location:delete'"
                        @click="handleBatchDelete(row)"
                    >
                        删除
                    </el-button>
                </div>
            </template>
        </common-table>

        <location-edit ref="editRef" @success="reload()" />
        <location-import v-model="importShow" @success="reload()" />
    </ele-page>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import { ElMessageBox } from 'element-plus/es';
    import { EleMessage } from 'ele-admin-plus/es';
    import {
        PlusOutlined,
        DeleteOutlined,
        DownloadOutlined,
        UploadOutlined
    } from '@/components/icons';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import locationSearch from '@/views/recycleService/location/components/location-search.vue';
    import locationEdit from '@/views/recycleService/location/components/location-edit.vue';
    import locationImport from '@/views/recycleService/location/components/location-import.vue';
    import { useDictData } from '@/utils/use-dict-data';
    import { useRouter } from 'vue-router';
    import request from '@/utils/request';

    defineOptions({ name: 'LocationList' });
    const [UseStatusDicts] = useDictData(['use_status']);

    /** 表格列配置 */
    const columns = ref([
        {
            type: 'selection',
            columnKey: 'selection',
            width: 50,
            align: 'center',
            fixed: 'left'
        },
        { label: '库位编码', prop: 'code', align: 'center', minWidth: 140 },
        { label: '仓库', prop: 'godownName', align: 'center' },
        {
            label: '状态',
            prop: 'useStatus',
            align: 'center',
            slot: 'useStatus',
            formatter: (row) =>
                UseStatusDicts.value.find((d) => d.dictValue == row.useStatus)
                    ?.dictLabel
        },
        { label: '备注', prop: 'remark', align: 'center', minWidth: 180 },
        {
            columnKey: 'action',
            label: '操作',
            width: 240,
            align: 'center',
            slot: 'action'
        }
    ]);

    let router = useRouter();
    /** 页面组件实例 */
    const pageRef = ref(null);

    const pageConfig = reactive({
        pageUrl: '/baseinfo/godownposition/pagelist',
        exportUrl: '/baseinfo/godownposition/export',
        fileName: '库位管理',
        cacheKey: 'locationTable'
    });

    //刷新表格
    function reload(where) {
        pageRef.value?.reload(where);
    }

    //批量删除
    function handleBatchDelete(row) {
        let selections = row ? [row] : pageRef.value?.getSelections();
        let ids = selections.map((item) => item.id);
        let url = `/baseinfo/godownposition/delete`;
        pageRef.value?.operatBatch({
            title: '确认删除？',
            method: 'post',
            url,
            row,
            data: [...ids]
        });
    }
    //批量停用
    function handleBatchDisabled() {
        let selections = pageRef.value?.getSelections();
        let ids = selections.map((item) => item.id);
        let url = `/baseinfo/godownposition/setStatusBatch`;
        pageRef.value?.operatBatch({
            title: '确定停用选中的库位信息？',
            method: 'post',
            url,
            data: { useStatus: 0, ids: [...ids] }
        });
    }

    //导出excel
    function handleExportExcel() {
        pageRef.value?.exportData('库位管理');
    }
    //导入excel
    const importShow = ref(false);
    function handleImportExcel() {
        importShow.value = true;
    }
    //启用/停用
    function handleUseStatus(row) {
        let message =
            row.useStatus == 1
                ? '确定停用该库位信息？'
                : '确认启用该库位信息？';
        let data = JSON.parse(JSON.stringify(row));
        data.useStatus = row.useStatus == 1 ? 0 : 1;
        pageRef.value?.messageBoxConfirm({
            message,
            fetch: () => request.post('/baseinfo/godownposition/edit', data)
        });
    }

    //编辑页面
    const editRef = ref(null);
    function handleUpdate(row) {
        editRef.value?.handleOpen(row);
    }
</script>
