<script lang="ts" setup>
import { h, onMounted, ref, watch } from 'vue';
import type { DataTableColumns, DataTableRowKey, RowData } from 'naive-ui';
import {
    NButton,
    NCard,
    NDataTable,
    NDialog,
    NForm,
    NFormItem,
    NInput,
    NModal,
    NPagination,
    NRadio,
    NSpace,
    NSpin,
    useDialog,
    useMessage
} from 'naive-ui';
import { api_addPos, api_deletePos, api_exportPosData, api_getUserPos, api_posPage, api_updatePos } from '@/api';
import { posRules } from '@/rules/rules';

const message = useMessage();

// 常量和响应式数据
const tableData = ref([
    {
        id: 1,
        posName: '张三',
        area: '区域一',
        createTime: '2022-01-01',
        state: '待处理'
    },
    {
        id: 2,
        posName: '李四',
        area: '区域二',
        createTime: '2022-01-01',
        state: '正确报警'
    },
    {
        id: 3,
        posName: '王五',
        area: '区域三',
        createTime: '2022-01-01',
        state: '错误报警'
    }
]);

const ids = ref<DataTableRowKey[]>([]);
const pageSizes = ref([10, 20, 50, 100]);
const show = ref(false);
const range = ref<any>();
const pageData = ref({
    pageNum: 1,
    pageSize: 10,
    total: 10
});
const serarchData = ref({
    pageNum: pageData.value.pageNum,
    pageSize: pageData.value.pageSize,
    posname: '',
    startTime: null,
    endTime: null
});

// 表格列配置
const tableColumn = [
    {
        type: 'selection' as const,
        width: 50
    },
    {
        title: '排序',
        key: 'id',
        align: 'center',
        width: 80
    },
    {
        title: '用户姓名/车牌号',
        key: 'username',
        align: 'center',
        minWidth: 200,
        treeConfig: {
            indent: 20,
            expandable: (row: any) => Boolean(row.children) && row.children.length > 0
        },
        render(row: any) {
            return h('span', null, row.posName);
        }
    },
    {
        title: '越界区域',
        key: 'area',
        align: 'center',
        minWidth: 180
    },
    {
        title: '报警时间',
        key: 'createTime',
        align: 'center',
        minWidth: 180
    },
    {
        title: '报警处理状态',
        key: 'state',
        align: 'center',
        minWidth: 180,
        render(row: any) {
            // 根据状态设置不同的颜色样式
            let textColor = '#333';
            if (row.state == '待处理') {
                textColor = '#ffb900';
            } else if (row.state == '正确报警') {
                textColor = '#2196ed';
            } else if (row.state == '错误报警') {
                textColor = '#f36155';
            }
            return h('span', { style: { color: textColor, fontWeight: 'bold' } }, row.state);
        }
    },
    {
        title: '操作',
        key: 'actions',
        align: 'center',
        minWidth: 120,
        render(row: any) {
            return h(NSpace, { justify: 'center' }, [
                h(
                    NButton,
                    {
                        size: 'small',
                        style: {
                            color: '#eee',
                            backgroundColor: '#2196f3',
                            borderColor: '#2196f3',
                            borderRadius: '5px',
                            padding: '4px 12px'
                        },
                        onClick: () => modifyAlramStatus(row.id, '1')
                    },
                    ['正确报警']
                ),
                h(
                    NButton,
                    {
                        size: 'small',
                        style: {
                            color: '#eee',
                            backgroundColor: '#f16255',
                            borderColor: '#f16255',
                            borderRadius: '5px',
                            padding: '4px 12px',
                            margin: ' '
                        },
                        onClick: () => modifyAlramStatus(row.id, '2')
                    },
                    ['错误报警']
                ),
                h(
                    NButton,
                    {
                        size: 'small',
                        style: {
                            color: '#eee',
                            backgroundColor: '#f16255',
                            borderColor: '#f16255',
                            borderRadius: '5px',
                            padding: '4px 12px'
                        },
                        onClick: () => delAlarmLog(row.id)
                    },
                    [
                        h('img', {
                            src: '/src/assets/delete.png',
                            alt: '删除',
                            style: {
                                width: '10px',
                                height: '10px',
                                marginRight: '5px'
                            }
                        }),
                        '删除'
                    ]
                )
            ]);
        }
    }
];

function handleCheck(rowKeys: DataTableRowKey[]) {
    ids.value = rowKeys;
}

const dialog = useDialog();
function handleDelete(row: any) {
    dialog.create({
        title: '提示',
        content: '确定删除数据？',
        positiveText: '确定',
        negativeText: '取消',
        positiveButtonProps: {
            type: 'primary'
        },
        showIcon: false,
        onPositiveClick: async () => { }
    });
}

// 头部删除
async function topDelete() {
    if (ids.value == null || ids.value.length == 0) {
        message.error('请选择要删除的用户');
    } else {
    }
}
// 头部导出
async function topDerive() {
    if (ids.value == null || ids.value.length == 0) {
        message.error('请选择要导出的用户');
    } else {
        const id = ids.value.join(',');
        const res = await api_exportPosData(id);
        console.log(res);
        if (res.status == 200) {
            const blob = res.data;
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            document.body.appendChild(a);
            a.href = url;
            a.download = '用户数据.xlsx';
            a.click();
            window.URL.revokeObjectURL(url);
            message.success('导出成功，请到下载目录查看');
        } else {
            message.error(res.msg);
        }
    }
}

function handleSearch() { }

function watchTimeData(value: any) {
    serarchData.value.startTime = value[0];
    serarchData.value.endTime = value[1];
}

function handleReset() {
    serarchData.value = {
        pageNum: pageData.value.pageNum,
        pageSize: pageData.value.pageSize,
        posname: '',
        startTime: null,
        endTime: null
    };
    range.value = null;

    search();
}

async function search() { }

function handlePage() {
    serarchData.value.pageNum = pageData.value.pageNum;
    search();
}

function handlePageSize() {
    serarchData.value.pageSize = pageData.value.pageSize;
    pageData.value.pageNum = 1;
    serarchData.value.pageNum = 1;
    search();
}

function handleclear() {
    serarchData.value.startTime = null;
    serarchData.value.endTime = null;
}

// 文字顏色变更状态
const modifyAlramStatus = async (id: string | number, status: string) => {
    const index = tableData.value.findIndex(item => item.id === id);
    if (index !== -1) {
        if (status === '1') {
            tableData.value[index].state = '正确报警';
        } else if (status === '2') {
            tableData.value[index].state = '错误报警';
        }
        message.success('状态更新成功');
    }
};

const delAlarmLog = async (id: string | number) => {
    dialog.create({
        title: '提示',
        content: '确定删除这条记录吗？',
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: () => {
            const index = tableData.value.findIndex(item => item.id === id);
            if (index !== -1) {
                tableData.value.splice(index, 1);
                message.success('删除成功');
            }
        }
    });
};

onMounted(() => {
    // search();
});
</script>

<template>
    <div id="DepartmentPage">
        <div>
            <NSpin :show="show">
                <NCard size="medium">
                    <div
                        style="margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center">
                        <NSpace>
                            <div>
                                用户姓名
                                <NInput v-model:value="serarchData.posname" placeholder="请输入岗位名称"
                                    style="width: 250px; margin-left: 10px" clearable="true" />
                            </div>

                            <div style="margin-left: 60px">
                                车牌号
                                <NInput v-model:value="serarchData.posname" placeholder="请输入岗位名称"
                                    style="width: 250px; margin-left: 10px" clearable="true" />
                            </div>

                            <NButton color="#2198f2" style="padding: 0px 17px; border-radius: 5px; margin-left: 30px"
                                @click="handleSearch">
                                查询
                            </NButton>
                            <NButton style="padding: 0px 17px; border-radius: 5px" @click="handleReset">重置</NButton>
                        </NSpace>
                    </div>
                    <NSpace style="margin-bottom: 20px">
                        <NButton color="#ffbb01" style="padding: 0px 20px; border-radius: 5px" @click="topDerive">
                            <img src="@/assets/daochu.png" alt=""
                                style="width: 10px; height: 10px; margin-right: 5px" />
                            导出
                        </NButton>
                        <NButton color="#f36255" style="padding: 0px 20px; border-radius: 5px" @click="topDelete">
                            <img src="@/assets/delete.png" alt=""
                                style="width: 10px; height: 10px; margin-right: 5px" />
                            删除
                        </NButton>
                    </NSpace>

                    <NDataTable :row-key="row => row.id" :columns="tableColumn" :data="tableData" :bordered="true"
                        :pagination="false" tree-column-key="name" :row-class-name="(row: any) => {
                                if (row.state === '待处理') return 'warning-row';
                                if (row.state === '正确报警') return 'success-row';
                                if (row.state === '错误报警') return 'error-row';
                                return '';
                            }
                            " @update:checked-row-keys="handleCheck" />

                    <div style="display: flex; justify-content: end; margin-top: 30px;">
                        <ElPagination v-model:current-page="pageData.pageNum" v-model:page-size="pageData.pageSize"
                            :page-sizes="[10, 20, 30, 40]" background="#2196f3" layout="sizes, prev, pager, next"
                            :total="pageData.total" @size-change="handlePageSize" @current-change="handlePage" />
                    </div>
                </NCard>
            </NSpin>
        </div>
    </div>
</template>

<style scoped>
:deep(.n-pagination .n-pagination-item.n-pagination-item--active) {
    background-color: #2196ed !important;
    color: white !important;
    border-color: #2196ed !important;
}

/* 行文字颜色样式 - 移除背景色，只保留文字颜色 */
:deep(.warning-row td) {
    color: #ffb900 !important;
}

:deep(.success-row td) {
    color: #2196ed !important;
}

:deep(.error-row td) {
    color: #f36155 !important;
}

/* 确保状态列的颜色显示正确 */
:deep(.n-data-table td) {
    color: inherit;
}
</style>
