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

        <common-table ref="pageRef" :pageConfig="pageConfig" :columns="columns">
            <template #toolbar>
                <el-radio-group
                    @change="handleStatusChange"
                    v-model="useStatus"
                >
                    <el-radio-button label="启用" value="1" />
                    <el-radio-button label="禁用" value="0" />
                </el-radio-group>

                <el-button
                    type="primary"
                    plain
                    :icon="PlusOutlined"
                    v-permission="'recycleLogistics:warehouse:add'"
                    @click="handleUpdate()"
                    style="margin-left: 40px"
                >
                    新增仓库
                </el-button>
            </template>

            <template #checkTips="{ row }">
                <el-switch
                    v-model="row.checkTips"
                    style="--el-switch-on-color: #13ce66"
                    active-value="1"
                    inactive-value="0"
                    @change="statusSwitchChange($event, row, 'checkTips')"
                />
                <el-text style="margin-left: 5px">{{
                    row.checkTips == 0 ? '已关闭' : '已开启'
                }}</el-text>
            </template>
            <template #bindChecker="{ row }">
                <el-switch
                    v-model="row.bindChecker"
                    style="--el-switch-on-color: #13ce66"
                    active-value="1"
                    inactive-value="0"
                    @change="statusSwitchChange($event, row, 'bindChecker')"
                />
                <el-text style="margin-left: 5px">{{
                    row.bindChecker == 0 ? '已关闭' : '已开启'
                }}</el-text>
            </template>
            <template #abnormalSign="{ row }">
                <el-switch
                    v-model="row.abnormalSign"
                    style="--el-switch-on-color: #13ce66"
                    active-value="1"
                    inactive-value="0"
                    @change="statusSwitchChange($event, row, 'abnormalSign')"
                />
                <el-text style="margin-left: 5px">{{
                    row.abnormalSign == 0 ? '已关闭' : '已开启'
                }}</el-text>
            </template>

            <template #action="{ row }">
                <div>
                    <el-button
                        type="primary"
                        link
                        v-permission="'recycleLogistics:warehouse:detail'"
                        @click="handleUpdate(row)"
                    >
                        [详情]
                    </el-button>
                    <el-button
                        :type="row.useStatus == 1 ? 'danger' : 'success'"
                        link
                        v-permission="'recycleLogistics:warehouse:changeStatus'"
                        @click="handleChangeStatus(row)"
                    >
                        {{ row.useStatus == 1 ? '[禁用]' : '[启用]' }}
                    </el-button>
                    <el-button
                        type="warning"
                        link
                        v-permission="'recycleLogistics:warehouse:areaSetting'"
                        @click="handleAreaSetting(row)"
                    >
                        [仓库区域设置]
                    </el-button>
                </div>
            </template>
        </common-table>

        <warehouse-edit ref="editRef" @success="reload()" />
        <area-setting ref="areaSettingRef" @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
    } from '@/components/icons';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import warehouseEdit from '@/views/recycleLogistics/warehouse/components/warehouse-edit.vue';
    import warehouseSearch from '@/views/recycleLogistics/warehouse/components/warehouse-search.vue';
    import areaSetting from '@/views/recycleLogistics/warehouse/components/area-setting.vue';
    import { useDictData } from '@/utils/use-dict-data';
    import { useRouter } from 'vue-router';
    import request from '@/utils/request';

    defineOptions({ name: 'Warehouse' });
    const [useStatusDicts] = useDictData(['use_status']);

    const useStatus = ref('1');
    function handleStatusChange(value) {
        pageRef.value.reload({ useStatus: value });
    }

    /** 表格列配置 */
    const columns = ref([
        {
            type: 'selection',
            columnKey: 'selection',
            width: 50,
            align: 'center',
            fixed: 'left'
        },
        {
            label: '仓库名称',
            prop: 'godownName',
            align: 'center',
            minWidth: 140
        },
        {
            label: '联系人',
            prop: 'contactsName',
            align: 'center',
            minWidth: 100
        },
        { label: '手机号码', prop: 'phoneNum', align: 'center', minWidth: 120 },
        {
            label: '详细地址',
            prop: 'addressDetail',
            align: 'center',
            minWidth: 240
        },
        {
            label: '仓库状态',
            prop: 'useStatus',
            align: 'center',
            minWidth: 80,
            formatter: (row) =>
                useStatusDicts.value.find((d) => d.dictValue == row.useStatus)
                    ?.dictLabel
        },
        {
            label: '图书审核提示',
            prop: 'checkTips',
            align: 'center',
            slot: 'checkTips',
            minWidth: 120
        },
        {
            label: '绑定审核员',
            prop: 'bindChecker',
            align: 'center',
            slot: 'bindChecker',
            minWidth: 120
        },
        {
            label: '路由异常签收',
            prop: 'abnormalSign',
            align: 'center',
            slot: 'abnormalSign',
            minWidth: 120
        },
        {
            columnKey: 'action',
            label: '操作',
            width: 240,
            align: 'center',
            slot: 'action'
        }
    ]);

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

    const pageConfig = reactive({
        pageUrl: '/baseinfo/godown/pagelist',
        exportUrl: '/baseinfo/godown/export',
        fileName: '仓库管理',
        cacheKey: 'warehouseTable',
        params: { useStatus: 1 }
    });

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

    //修改状态
    const statusSwitchChange = (value, row, key) => {
        let data = JSON.parse(JSON.stringify(row));
        let message = value == 0 ? '确认关闭？' : '确认开启？';
        ElMessageBox.confirm(message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '关闭',
            type: 'warning'
        })
            .then(() => {
                data[key] = value;
                request.post('/baseinfo/godown/update', data).then((res) => {
                    if (res.data.code === 200) {
                        EleMessage.success('操作成功');
                        reload();
                    } else {
                        EleMessage.error(res.data.msg);
                    }
                });
            })
            .catch(() => {
                row[key] = value == 1 ? 0 : 1;
            });
    };

    //批量删除
    function handleBatchDelete(row) {
        let selections = row ? [row] : pageRef.value?.getSelections();
        let ids = selections.map((item) => item.id).join(',');
        let url = `/baseinfo/godown/delete`;
        pageRef.value?.operatBatch({
            title: '确认删除？',
            method: 'delete',
            url,
            row
        });
    }
    //导出excel
    function handleExportExcel() {
        pageRef.value?.exportData('仓库管理');
    }

    //禁用/启用
    function handleChangeStatus(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/godown/update', data)
        });
    }

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

    //仓库区域设置
    const areaSettingRef = ref(null);
    function handleAreaSetting(row) {
        areaSettingRef.value?.handleOpen(row);
    }
</script>
