<template>
    <ele-page flex-table :bodyStyle="{ padding: 0 }">
        <page-search @search="reload" />

        <common-table
            ref="pageRef"
            :pageConfig="pageConfig"
            :columns="columns"
            :bodyStyle="{ padding: 0 }"
            :tools="false"
        >
            <template #toolbar>
                <div style="display: flex; align-items: center">
                    <el-button
                        type="primary"
                        plain
                        v-permission="'ipMarkup:ipActivity:add'"
                        :icon="PlusOutlined"
                        @click="handleUpdate()"
                    >
                        新建
                    </el-button>
                </div>
            </template>

            <template #status="{ row }">
                <el-tag :type="row.status == 1 ? 'success' : 'danger'">
                    {{ row.status == 1 ? '进行中' : '已关闭' }}
                </el-tag>
            </template>

            <template #limitFirst="{ row }">
                <dict-data
                    code="limit_first"
                    type="text"
                    :model-value="row.limitFirst"
                />
            </template>

            <template #startTime="{ row }">
                {{ row.startTime + ' 至 ' + row.endTime }}
            </template>

            <template #action="{ row }">
                <div>
                    <el-button
                        type="primary"
                        link
                        @click="handleUpdate(row)"
                        v-permission="'ipMarkup:ipActivity:edit'"
                    >
                        [编辑]
                    </el-button>

                    <!-- <el-button
                        type="success"
                        link
                        @click="handleViewData(row)"
                        v-permission="'ipMarkup:ipActivity:viewData'"
                    >
                        [查看数据]
                    </el-button> -->
                    <el-button
                        :type="row.status == 1 ? 'danger' : 'warning'"
                        link
                        @click="handleChangeStatus(row)"
                        v-permission="'ipMarkup:ipActivity:changeStatus'"
                    >
                        [{{ row.status == 1 ? '关闭活动' : '开启活动' }}]
                    </el-button>
                    <el-button
                        type="primary"
                        link
                        color="#642abc"
                        plain
                        @click="handleAreaSetting(row)"
                        v-permission="'ipMarkup:ipActivity:areaSetting'"
                    >
                        [活动区域设置]
                    </el-button>
                </div>
            </template>
        </common-table>

        <!-- 新增/编辑弹窗 -->
        <activity-edit ref="activityEditRef" @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 } from '@/components/icons';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import request from '@/utils/request';
    import PageSearch from './components/page-search.vue';
    import ActivityEdit from './components/activity-edit.vue';
    import AreaSetting from './components/area-setting.vue';

    defineOptions({ name: 'IpActivityTable' });

    /** 表格列配置 */
    const columns = ref([
        {
            label: '活动名称',
            prop: 'activityName',
            align: 'center',
            minWidth: 120
        },
        {
            label: '活动省份',
            prop: 'province',
            align: 'center',
            minWidth: 120,
            formatter: (row) => {
                return row.province || '--';
            }
        },
        {
            label: '活动地区',
            prop: 'cityName',
            align: 'center',
            minWidth: 200,
            formatter: (row) => {
                return row.city || '--';
            }
        },
        {
            label: '活动时间',
            prop: 'startTime',
            align: 'center',
            slot: 'startTime',
            width: 310
        },
        {
            label: '加价助力人数',
            prop: 'inviteNum',
            align: 'center',
            width: 120
        },
        {
            label: '是否限制首单',
            prop: 'limitFirst',
            align: 'center',
            slot: 'limitFirst',
            width: 120
        },
        {
            label: '状态',
            prop: 'status',
            align: 'center',
            width: 100,
            slot: 'status'
        },
        {
            columnKey: 'action',
            label: '操作',
            width: 210,
            align: 'center',
            slot: 'action'
        }
    ]);

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

    const pageConfig = reactive({
        pageUrl: '/activity/activityUpsellInfo/pagelist',
        fileName: 'IP加价营销活动',
        cacheKey: 'ipActivityTable'
    });

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

    // 活动区域设置弹窗
    const areaSettingRef = ref(null);
    function handleAreaSetting(row) {
        areaSettingRef.value?.handleOpen(row);
    }

    // 编辑/新建弹窗
    function handleUpdate(row) {
        if (row?.id) {
            // 编辑模式，获取弹窗详情
            request
                .get(`/activity/activityUpsellInfo/getInfo/${row.id}`)
                .then((res) => {
                    if (res.data.code === 200) {
                        const data = res.data.data;
                        activityEditRef.value.handleOpen(data);
                    } else {
                        EleMessage.error(res.data.msg || '获取活动详情失败');
                    }
                });
        } else {
            // 新建模式
            activityEditRef.value.handleOpen();
        }
    }

    // 改变状态
    function handleChangeStatus(row) {
        let message = '';
        if (row.status == 1) {
            message = '确认关闭该活动吗？';
        } else {
            message = '确认开启该活动吗？';
        }
        pageRef.value?.messageBoxConfirm({
            message,
            fetch: () => {
                return request.post(
                    '/activity/activityUpsellInfo/changeStatus',
                    {
                        activityId: row.id,
                        status: row.status == 1 ? 0 : 1
                    }
                );
            }
        });
    }
</script>
