<template>
    <ele-page flex-table>
        <common-table
            ref="tableRef"
            :columns="columns"
            :tools="false"
            :datasource="datasource"
            :pagination="false"
        >
            <!-- 序号 -->
            <template #index="{ $index }">
                {{ $index + 1 }}
            </template>

            <!-- 操作 -->
            <template #action="{ row }">
                <el-button link type="primary" @click="handleEdit(row)"
                    >编辑</el-button
                >
            </template>

            <!-- 是否启用 -->
            <template #status="{ row }">
                <el-switch
                    v-model="row.status"
                    active-value="1"
                    inactive-value="0"
                    @change="handleStatusChange(row)"
                />
            </template>
        </common-table>

        <spec-edit-dialog ref="editDialogRef" @success="handleSuccess" />
    </ele-page>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import SpecEditDialog from './components/spec-edit-dialog.vue';
    import { ElMessage } from 'element-plus';
    import request from '@/utils/request';

    defineOptions({ name: 'GoodsSpec' });

    const tableRef = ref(null);
    const editDialogRef = ref(null);

    const pageConfig = reactive({
        pageUrl: '',
        fileName: '规格列表',
        cacheKey: 'goods-spec-list',
        params: {}
    });

    const datasource = ({ page, limit, where, orders }) => {
        return request
            .get('/shop/shopbook/getConditionTypeList')
            .then((res) => {
                return res.data?.data || [];
            });
    };

    const columns = ref([
        { label: '序号', type: 'index', width: 100, align: 'center' },
        { label: '规格名称', prop: 'conditionName', align: 'center' },
        { label: '规格值', prop: 'conditionValue', align: 'center' },
        { label: '操作', prop: 'action', slot: 'action', align: 'center' },
        { label: '是否启用', prop: 'status', slot: 'status', align: 'center' }
    ]);

    const reload = () => {
        tableRef.value?.reload();
    };

    const handleAdd = () => {
        editDialogRef.value?.handleOpen();
    };

    const handleEdit = (row) => {
        editDialogRef.value?.handleOpen(row);
    };

    const handleSuccess = () => {
        reload();
    };

    const handleStatusChange = (row) => {
        const payload = {
            ...row,
            status: String(row.status)
        };
        request
            .post('/shop/shopbook/updateConditionType', payload)
            .then(() => {
                ElMessage.success(
                    `${row.conditionName} ${row.status === '1' ? '已启用' : '已禁用'}`
                );
            })
            .catch(() => {
                // Revert status on error
                row.status = row.status === '1' ? '0' : '1';
            });
    };
</script>

<style scoped></style>
