<template>
    <div class="app-container">
        <el-row justify="start" style="margin-bottom: 20px;">
            <el-col :span="4">
                <el-input v-model="LOVLogTable.searchValue" placeholder="请输入MAC地址"></el-input>
            </el-col>
            <el-col :span="2" style="text-align: center;">
                <el-button type="primary" @click="search">搜索</el-button>
            </el-col>
        </el-row>

        <el-table :data="LOVLogTable.LOVLogData" border style="width: 100%" @filter-change="filterChange"
            v-loading="LOVLogTable.loading">
            <el-table-column prop="flag" label="是否成功" :filters="[
                { text: '成功', value: '1' },
                { text: '失败', value: '0' },
            ]" :filter-multiple="false" filter-placement="bottom-end" align="center" width="135px">
                <template #default="scope">
                    <el-tag :type="scope.row.flag === 1 ? 'success' : ''" disable-transitions>{{ scope.row.flag === 1 ?
                            "成功" :
                            "失败"
                    }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="macAddress" label="MAC地址" width="200" align="center" />
            <el-table-column prop="message" label="错误信息" align="center" />
            <el-table-column prop="createTime" label="创建时间" align="center" />
            <el-table-column label="操作" width="180" align="center">
                <template #default="scope">
                    <el-button size="small" type="primary" @click="handleDetail(scope.row.id)">详情</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
            <el-pagination v-model:currentPage="LOVLogTable.pageNo" v-model:page-size="LOVLogTable.pageSize"
                :page-sizes="[10, 15, 20]" layout="->, total,sizes, prev, pager, next, jumper"
                :total="LOVLogTable.total" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                hide-on-single-page />
        </div>
    </div>

    <!-- 详情 -->
    <el-dialog v-model="visible" title="详情页面" width="40%">
        <el-form :model="detailForm" label-width="135px" :disabled="true">
            <el-form-item label="单据名称：">
                <el-input v-model="detailForm.macAddress" placeholder="MAC地址为" />
            </el-form-item>
            <el-form-item label="是否成功：">
                <el-tag :type="detailForm.flag === 1 ? 'success' : ''" disable-transitions>{{ detailForm.flag === 1 ?
                        "成功" :
                        "失败"
                }}</el-tag>
            </el-form-item>
            <el-form-item label="创建时间：">
                <el-input v-model="detailForm.createTime" placeholder="创建时间为" />
            </el-form-item>
            <el-form-item label="请求参数：">
                <el-input type="textarea" :rows="5" v-model="detailForm.request" placeholder="请求参数为" />
            </el-form-item>
            <el-form-item label="响应信息：">
                <el-input type="textarea" :rows="5" v-model="detailForm.response" placeholder="响应信息为" />
            </el-form-item>
            <el-form-item label="错误信息：">
                <el-input type="textarea" :rows="4" v-model="detailForm.message" placeholder="错误信息为" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="visible = false">关闭</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick } from 'vue'
import { LOVLogList, LOVLogDelete, LOVLogDetail } from '@/services/api/onlineVerification/onlineVerification'
import { ElMessageBox, ElMessage } from "element-plus";


const LOVLogTable = reactive<any>({
    LOVLogData: [],
    total: 0,
    pageNo: 1,
    pageSize: 10,
    flag: '',
    searchValue: '',
    filters: '',
    loading: true
})

const detailForm = ref()
const visible = ref(false)

const search = () => {
    initLOVLog(LOVLogTable.searchValue, LOVLogTable.flag, LOVLogTable.pageNo, LOVLogTable.pageSize)
}

// 筛选
const filterChange = (value: any) => {
    let i = "";
    Object.values(value).forEach((e: any) => {
        i = e[0];
    });
    nextTick(() => {
        LOVLogTable.flag = i;
        initLOVLog(LOVLogTable.searchValue, LOVLogTable.flag, LOVLogTable.pageNo, LOVLogTable.pageSize)
    });
};

// 详情
const handleDetail = (id: number) => {
    LOVLogDetail(id).then((res: any) => {
        if (res.code === 200) {
            visible.value = true
            detailForm.value = res.data
            console.log(detailForm.value);

        }

    })
}

// 新条数
const handleSizeChange = (val: number) => {
    LOVLogTable.pageSize = val;
    initLOVLog(LOVLogTable.searchValue, LOVLogTable.flag, LOVLogTable.pageNo, LOVLogTable.pageSize)
};

// 新页数
const handleCurrentChange = (val: number) => {
    LOVLogTable.pageNo = val;
    initLOVLog(LOVLogTable.searchValue, LOVLogTable.flag, LOVLogTable.pageNo, LOVLogTable.pageSize)
};

// 删除
const handleDelete = (id: number) => {
    ElMessageBox.confirm("请确认删除?", "删除", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            LOVLogDelete(id).then((res: any) => {
                if (res.code === 200) {
                    initLOVLog(LOVLogTable.searchValue, LOVLogTable.flag, LOVLogTable.pageNo, LOVLogTable.pageSize)
                    ElMessage({
                        type: "success",
                        message: "删除成功！",
                    });
                }
            });
        })
        .catch(() => {
            ElMessage({
                type: "info",
                message: "取消删除！",
            });
        });
}

// 验证数据
const initLOVLog = (macAddress?: string, flag?: number, pageNo?: number, pageSize?: number) => {
    LOVLogList(macAddress, flag, pageNo, pageSize).then((res: any) => {
        if (res.code === 200) {
            LOVLogTable.LOVLogData = res.data.records
            LOVLogTable.total = res.data.total
            LOVLogTable.loading = false
        }
    })
}

initLOVLog(LOVLogTable.searchValue, LOVLogTable.flag, LOVLogTable.pageNo, LOVLogTable.pageSize)

</script>