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

        <common-table ref="pageRef" :pageConfig="pageConfig" :columns="columns">
            <template #toolbar>
                <el-button
                    type="primary"
                    plain
                    :icon="PlusOutlined"
                    v-permission="'activation:bookActivationCodeRepository:add'"
                    @click="handleUpdate()"
                >
                    新增
                </el-button>
                <el-radio-group
                    @change="handleStatusChange"
                    v-model="status"
                    style="margin-left: 40px"
                >
                    <el-radio-button label="全部" value="" />
                    <el-radio-button label="启用" value="1" />
                    <el-radio-button label="禁用" value="2" />
                </el-radio-group>
            </template>

            <template #status="{ row }">
                <el-tag :type="row.status == 1 ? 'success' : 'info'">
                    {{ row.status == 1 ? '启用' : '禁用' }}
                </el-tag>
            </template>

            <template #action="{ row }">
                <div>
                    <el-button
                        type="success"
                        link
                        v-permission="'activation:bookActivationCodeRepository:query'"
                        @click="handleUpdate(row)"
                    >
                        [详情]
                    </el-button>
                    <el-button
                        :type="row.status == 1 ? 'danger' : 'success'"
                        link
                        v-permission="'activation:bookActivationCodeRepository:openClose'"
                        @click="handleChangeStatus(row)"
                    >
                        {{ row.status == 1 ? '[禁用]' : '[启用]' }}
                    </el-button>
                </div>
            </template>
        </common-table>

        <warehouse-edit ref="editRef" @success="reload()" />
    </ele-page>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import { PlusOutlined } from '@/components/icons';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import pageSearch from '@/views/data/warehouse/components/page-search.vue';
    import warehouseEdit from '@/views/data/warehouse/components/warehouse-edit.vue';
    import request from '@/utils/request';

    defineOptions({ name: 'DataWarehouse' });

    const status = ref('1');

    function handleStatusChange(value) {
        pageConfig.params = value ? { status: value } : {};
        pageRef.value?.reload(value ? { status: value } : { status: undefined });
    }

    /** 表格列配置 */
    const columns = ref([
        {
            label: '仓库名称',
            prop: 'repositoryName',
            align: 'center',
            minWidth: 140
        },
        {
            label: '联系人',
            prop: 'contactsName',
            align: 'center',
            minWidth: 100
        },
        {
            label: '手机号码',
            prop: 'mobile',
            align: 'center',
            minWidth: 120
        },
        {
            label: '详细地址',
            prop: 'addressDetail',
            align: 'center',
            minWidth: 260,
            formatter: (row) => {
                const region = [row.provinceName, row.cityName, row.countyName]
                    .filter(Boolean)
                    .join('');
                return `${region}${row.addressDetail || ''}` || '-';
            }
        },
        {
            label: '仓库状态',
            prop: 'status',
            align: 'center',
            minWidth: 100,
            slot: 'status'
        },
        {
            columnKey: 'action',
            label: '操作',
            width: 220,
            align: 'center',
            slot: 'action'
        }
    ]);

    const pageRef = ref(null);

    const pageConfig = reactive({
        pageUrl: '/activation/bookActivationCodeRepository/pagelist',
        fileName: '仓库管理',
        cacheKey: 'dataWarehouseTable',
        params: { status: '1' }
    });

    function reload(where) {
        const data = { ...(where || {}) };
        if (status.value) {
            data.status = status.value;
            pageConfig.params = { status: status.value };
        } else {
            delete data.status;
            pageConfig.params = {};
        }
        pageRef.value?.reload(data);
    }

    function handleChangeStatus(row) {
        const nextStatus = row.status == 1 ? '2' : '1';
        const message =
            nextStatus === '2' ? '确认禁用该仓库？' : '确认启用该仓库？';
        pageRef.value?.messageBoxConfirm({
            message,
            title: '禁用-启用',
            fetch: () =>
                request.post(
                    '/activation/bookActivationCodeRepository/openClose',
                    {
                        id: row.id,
                        status: nextStatus
                    }
                )
        });
    }

    const editRef = ref(null);
    function handleUpdate(row, optType) {
        editRef.value?.handleOpen(row, optType);
    }
</script>
