<template>
    <div class="router">
        <el-card>
            <!-- 过滤条件框 -->
            <el-form :model="filterForm" label-width="100px" style="margin-top: 30px;">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="选择时间">
                            <el-date-picker v-model="dateTime" type="datetimerange" range-separator="至"
                                start-placeholder="开始时间" end-placeholder="结束时间" @change="dateChange" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="名称">
                            <el-input v-model="filterForm.name" placeholder="请输入名称" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="唯一标识">
                            <el-input v-model="filterForm.queueId" placeholder="请输入唯一标识" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" style="text-align: center;">
                        <el-form-item>
                            <el-button type="primary" @click="handleScreen">筛选</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <el-divider />

            <!-- 表格 -->
            <el-table v-loading="loading" :data="tableList" border stripe style="width: 100%"
                @filter-change="filterChange">
                <el-table-column type="index" :index="indexMethod(1)" />
                <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="name" label="单据名称" align="center" />
                <el-table-column prop="code" label="DocType" align="center" />
                <el-table-column prop="queueId" label="唯一标识" align="center" />
                <el-table-column prop="message" label="错误信息" align="center" effect="light">
                    <template #default="scope">
                        <el-tooltip class="box-item" effect="dark" placement="left" popper-class="tooltip-class">
                            <template #content>
                                <textarea v-model="scope.row.message" class="paperview-input-text" rows="10" cols="30"
                                    readonly>
                                </textarea>
                            </template>
                            <span style="white-space: nowrap;">{{ scope.row.message }}</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <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="handleDetails(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div style="margin-top: 20px">
                <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30]"
                    layout="->, total,sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" hide-on-single-page />
            </div>
        </el-card>
        <!-- 详情页面 -->
        <el-dialog v-model="visible" title="详情页面" width="40%">
            <el-form :model="detailForm" label-position="left" label-width="100px" style="padding: 0 5%"
                :disabled="(disabled = true)">
                <el-form-item label="单据名称：">
                    <el-input v-model="detailForm.name" placeholder="DocType为" />
                </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="DocType：">
                    <el-input v-model="detailForm.code" placeholder="内容为" />
                </el-form-item>
                <el-form-item label="唯一标识：">
                    <el-input v-model="detailForm.queueId" placeholder="唯一标识为" />
                </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="4" 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="cancelVisible1">关闭</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, nextTick } from "vue";
import moment from "moment";
import { ElTable } from "element-plus";
import { store } from "@/store";
import { getThirdPartyLog } from "@/services/api/systemApi/log/logApi";
import { useThirdPartyTableList } from "../system/tableConfigData/useXyunLog";

interface List {
    flag: any;
    name: string;
    createTime: string;
    code: string;
}
const dateTime = ref();
const filterForm = ref({
    dateFrom: "",
    dateTo: "",
    name: "",
    code: "",
    queueId: ''
});
const detailForm = ref({
    flag: <any>"",
    name: "",
    code: "",
    request: "",
    response: "",
    message: "",
    // costTime: "",
    createTime: "",
    queueId: ''
});
const indexMethod = (index: number) => {
    return index++;
};
const visible = ref(false);
// 多选框
const multipleSelection = ref<List[]>([]);
// 分页
const disabled = ref(false);
const filters = ref();
const { tableList, total, loading, pageSize, currentPage } =
    useThirdPartyTableList();
// 同步筛选
const filterChange = (value: any) => {
    let i = ''
    Object.values(value).forEach((e: any) => {
        i = e[0]
    })
    nextTick(() => {
        const flag = i;
        filters.value = flag;
        page(
            currentPage.value,
            pageSize.value,
            filterForm.value.dateFrom,
            filterForm.value.dateTo,
            filterForm.value.name,
            filters.value,
            filterForm.value.queueId
        );
    });
};
// 日期变化值
const dateChange = (value: any) => {
    if (value) {
        filterForm.value.dateFrom = moment(value[0]).format("YYYY-MM-DD HH:mm:ss");
        filterForm.value.dateTo = moment(value[1]).format("YYYY-MM-DD HH:mm:ss");
    } else {
        filterForm.value.dateFrom = '';
        filterForm.value.dateTo = '';
    }
};

// 详情
const handleDetails = (scope: any) => {
    console.log(filterForm.value);
    detailForm.value = scope;
    visible.value = true;
};
// 对话框取消按钮
const cancelVisible1 = () => {
    const arr: any = [];
    detailForm.value = arr;
    visible.value = false;
};
// 筛选按钮
const handleScreen = () => {
    store.commit('search/setThirdPartySearch', filterForm.value)
    page(
        currentPage.value,
        pageSize.value,
        filterForm.value.dateFrom,
        filterForm.value.dateTo,
        filterForm.value.name,
        filters.value,
        filterForm.value.queueId
    );
};
// 筛选
const page = (
    pageNo?: number,
    pageSize?: number,
    dateFrom?: string,
    dateTo?: string,
    name?: string,
    flag?: any,
    queueId?: string
) => {
    getThirdPartyLog(
        pageNo,
        pageSize,
        dateFrom,
        dateTo,
        name,
        flag,
        queueId
    ).then((res: any) => {
        if (res.code === 200) {
            tableList.value = res.data.records;
            total.value = res.data.total;
        }
    });
};
// 每页新条数
const handleSizeChange = (val: number) => {
    pageSize.value = val
    page(
        currentPage.value,
        pageSize.value,
        filterForm.value.dateFrom,
        filterForm.value.dateTo,
        filterForm.value.name,
        filters.value,
        filterForm.value.queueId
    );
};
// 新页数
const handleCurrentChange = (val: number) => {
    currentPage.value = val
    page(
        currentPage.value,
        pageSize.value,
        filterForm.value.dateFrom,
        filterForm.value.dateTo,
        filterForm.value.name,
        filters.value,
        filterForm.value.queueId
    );
};

const initfilter = () => {
    let data: any = store.state.search.thirdPartySearch
    setTimeout(() => {
        filterForm.value = data
        dateTime.value = [new Date(data.dateFrom), new Date(data.dateTo)]
        page(currentPage.value,
            pageSize.value,
            filterForm.value.dateFrom,
            filterForm.value.dateTo,
            filterForm.value.name,
            filters.value,
            filterForm.value.queueId)
    }, 50)
}
initfilter()
</script>
<style>
.paperview-input-text {
    border: 0;
    color: #FAFCFF;
    background-color: #303133;
}
</style>
