<template>
    <div class="app-container">
        <el-form :model="filterForm" label-width="100px" style="margin-top: 30px;">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="同步记录主键">
                        <el-input v-model="filterForm.fid" placeholder="请输入同步记录主键" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="唯一标识">
                        <el-input v-model="filterForm.queueId" placeholder="请输入唯一标识" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="金蝶标识">
                        <el-input v-model="filterForm.sFormId" placeholder="请输入金蝶标识" />
                    </el-form-item>
                </el-col>
                <el-col :span="4" style="text-align: center;">
                    <el-button type="primary" @click="onConfirm">筛选</el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-divider />
        <el-table :data="monitoringData" v-loading="loading" border stripe @filter-change="filterChange">
            <el-table-column prop="status" label="同步状态" :filters="[
                { text: '未同步', value: '0' },
                { text: '同步失败', value: '2' },
            ]" :filter-multiple="false" filter-placement="bottom-end" align="center" width="135px">
                <template #default="scope">
                    <el-tag :type="scope.row.status === 0 ? 'info' : 'danger'" disable-transitions>{{ scope.row.status
                            === 0 ?
                            "未同步" :
                            "同步失败"
                    }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="dataId" label="数据内码" align="center" />
            <el-table-column prop="entryId" label="数据分录内码" align="center" />
            <el-table-column prop="fid" label="主键" align="center" />
            <el-table-column prop="queueId" label="唯一标识" align="center" />
            <el-table-column prop="sFormId" label="金蝶标识" align="center" />
            <el-table-column prop="createTime" label="创建时间" align="center" />
            <el-table-column label="操作" align="center" width="155px">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div style="margin-top: 20px">
            <el-pagination v-model:currentPage="pageData.currentPage" v-model:page-size="pageData.pageSize"
                :page-sizes="[10, 15, 20]" layout="->, total,sizes, prev, pager, next, jumper" :total="pageData.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" hide-on-single-page />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import { getSMonitoring, deleteSMonitoring } from '@/services/api/systemApi/synchronousMonitoring'

const loading = ref(true)

const monitoringData = ref()
const filterForm = reactive({
    fid: '',
    queueId: '',
    sFormId: '',
    status: <any>'',
})

const pageData = reactive({
    total: 0,
    currentPage: 1,
    pageSize: 10
})

// 筛选
const onConfirm = () => {
    initSMonitoring(
        pageData.currentPage,
        pageData.pageSize,
        filterForm.fid,
        filterForm.queueId,
        filterForm.sFormId,
        filterForm.status
    )
}

// 同步筛选
const filterChange = (value: any) => {
    let i = ''
    Object.values(value).forEach((e: any) => {
        i = e[0]
    })
    // nextTick(() => {
    filterForm.status = i;
    initSMonitoring(
        pageData.currentPage,
        pageData.pageSize,
        filterForm.fid,
        filterForm.queueId,
        filterForm.sFormId,
        filterForm.status
    )
    // });
};

// 每页新条数
const handleSizeChange = (val: number) => {
    pageData.pageSize = val
    initSMonitoring(
        pageData.currentPage,
        pageData.pageSize,
        filterForm.fid,
        filterForm.queueId,
        filterForm.sFormId,
        filterForm.status
    )
};
// 新页数
const handleCurrentChange = (val: number) => {
    pageData.currentPage = val
    initSMonitoring(
        pageData.currentPage,
        pageData.pageSize,
        filterForm.fid,
        filterForm.queueId,
        filterForm.sFormId,
        filterForm.status
    )
};

const handleDelete = (id: number) => {
    ElMessageBox.confirm(
        '确定删除该字段?',
        '配置',
        { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' })
        .then(() => {
            deleteSMonitoring(id).then((res: any) => {
                if (res.code === 200) {
                    initSMonitoring()
                    ElMessage({ type: 'success', message: '删除成功' })
                }
            })
        }).catch(() => { return false })
}

// 监控数据
const initSMonitoring = (
    pageNo?: number,
    pageSize?: number,
    fid?: string,
    queueId?: string,
    sFormId?: string,
    status?: number
) => {
    getSMonitoring(pageNo, pageSize, fid, queueId, sFormId, status).then((res: any) => {
        if (res.code === 200) {
            console.log(res);
            loading.value = false
            pageData.total = res.data.total
            monitoringData.value = res.data.records
        }
    })
}
initSMonitoring(pageData.currentPage, pageData.pageSize)
</script>