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

        <common-table
            ref="tableRef"
            :pageConfig="pageConfig"
            :columns="columns"
        >
            <template #toolbar>
                <div class="flex items-center space-x-2">
                    <el-button type="primary" @click="handleAdd" :icon="Plus"
                        >添加新地址</el-button
                    >
                </div>
            </template>

            <!-- Custom Slots for Radio Buttons -->
            <template #defaultShipingFlag="{ row }">
                <el-radio
                    :model-value="row.defaultShipingFlag"
                    :label="'1'"
                    @change="handleSetDefault(row, 1)"
                    >默认</el-radio
                >
            </template>

            <template #defaultReturnFlag="{ row }">
                <el-radio
                    :model-value="row.defaultReturnFlag"
                    :label="'1'"
                    @change="handleSetDefault(row, 2)"
                    >默认</el-radio
                >
            </template>

            <template #action="{ row }">
                <el-button link type="primary" @click="handleEdit(row)"
                    >编辑</el-button
                >
                <el-button link type="danger" @click="handleDelete(row)"
                    >删除</el-button
                >
            </template>
        </common-table>

        <EditDialog ref="editDialogRef" @success="refreshPage" />
    </ele-page>
</template>

<script setup>
    import { ref, reactive, getCurrentInstance } from 'vue';
    import { Plus } from '@element-plus/icons-vue';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import PageSearch from './components/page-search.vue';
    import EditDialog from './components/edit-dialog.vue';
    import { ElMessage, ElMessageBox } from 'element-plus';

    const { proxy } = getCurrentInstance();

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

    const pageConfig = reactive({
        pageUrl: '/shop/shopAddress/pagelist',
        rowKey: 'id',
        fileName: '地址管理',
        params: {}
    });

    const columns = ref([
        {
            prop: 'defaultShipingFlag',
            label: '发货地址',
            slot: 'defaultShipingFlag',
            align: 'center'
        },
        {
            prop: 'defaultReturnFlag',
            label: '退货地址',
            slot: 'defaultReturnFlag',
            align: 'center'
        },
        { prop: 'name', label: '联系人' },
        {
            prop: 'area',
            label: '所在地区',
            formatter: (row) =>
                `${row.provinceName || ''}${row.cityName || ''}${row.districtName || ''}`
        },
        { prop: 'detailAddress', label: '详细地址', minWidth: 200 },
        { prop: 'mobile', label: '手机号码' },
        {
            columnKey: 'action',
            label: '操作',
            width: 150,
            fixed: 'right',
            align: 'center',
            slot: 'action'
        }
    ]);

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

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

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

    const handleDelete = (row) => {
        tableRef.value?.messageBoxConfirm({
            message: '确认删除该地址?',
            fetch: () =>
                proxy.$http.post('/shop/shopAddress/remove', { id: row.id })
        });
    };

    const handleSetDefault = (row, type) => {
        proxy.$http
            .post('/shop/shopAddress/setDefault', { id: row.id, type })
            .then(() => {
                ElMessage.success('设置成功');
                refreshPage();
            });
    };

    const refreshPage = () => {
        tableRef.value?.reload();
    };
</script>
