<template>
    <div class="router">
        <el-card>
            <!-- 过滤条件框 -->
            <el-form :model="filterForm" style="width: 100%" label-width="135px">
                <el-row :gutter="24">
                    <el-col :span="10">
                        <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="名称" width="60px">
                            <el-input v-model="filterForm.name" placeholder="请输入名称" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="选择产品" width="60px">
                            <el-select v-model="filterForm.platformProductRelationId" clearable placeholder="请选择产品">
                                <el-option v-for="item in productOptions" :key="item.id" :label="item.label"
                                    :value="item.id" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="同步时长/毫秒">
                            <div class="input-class" id="input-class" @mouseover="mouseover" @mouseleave="mouseleave">
                                <input type="text" class="range-input" placeholder="开始同步时长"
                                    v-model="filterForm.costTimeFrom" @focus="onFocus" @blur="onBlur"
                                    @input="handleNumberChangeFrom" />
                                <span class="range-separator">至</span>
                                <input type="text" class="range-input" placeholder="结束同步时长"
                                    v-model="filterForm.costTimeTo" @focus="onFocus" @blur="onBlur"
                                    @input="handleNumberChangeTo" />
                                <el-icon class="range-icon" id="range-icon" @click="handleClickIcon">
                                    <CircleClose />
                                </el-icon>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="唯一标识" width="60px">
                            <el-input v-model="filterForm.queueId" placeholder="请输入唯一标识" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" style="text-align: center">
                        <el-button type="primary" @click="handleScreen">筛选</el-button>
                    </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="queueId" label="唯一标识" width="180px" align="center" />
                <el-table-column prop="name" label="业务名称" align="center" />
                <el-table-column prop="code" label="业务标识" align="center" />
                <el-table-column prop="direction" label="方向" align="center" />
                <el-table-column prop="costTime" label="同步时长/毫秒" align="center" />
                <el-table-column prop="message" label="错误信息" align="center">
                    <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="创建时间" width="155px" 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, 15, 20]"
                    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-width="135px" :disabled="(disabled = true)">
                <el-form-item label="业务名称：">
                    <el-input v-model="detailForm.name" placeholder="单据名称为" />
                </el-form-item>
                <el-form-item label="业务标识：">
                    <el-input v-model="detailForm.code" placeholder="业务标识为" />
                </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.costTime" 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="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="cancelVisible1">关闭</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

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

const dateTime = ref();
const productOptions = ref(); // 产品数据源
const filterForm = ref<any>({
    dateFrom: "",
    dateTo: "",
    name: "",
    costTimeFrom: undefined,
    costTimeTo: undefined,
    queueId: "",
    platformProductRelationId: null
});
const detailForm = ref<any>({
    flag: "",
    name: "",
    request: "",
    response: "",
    message: "",
    queueId: "",
    code: ''
});

const indexMethod = (index: number) => {
    return index++;
};
const visible = ref(false);

// 分页
const disabled = ref(false);
const filters = ref();
const { tableList, total, loading, pageSize, currentPage } =
    useproductLogTableList();

// 同步筛选
const filterChange = (value: any) => {
    let i = "";
    Object.values(value).forEach((e: any) => {
        i = e[0];
    });
    nextTick(() => {
        filters.value = i;
        page(
            filterForm.value.platformProductRelationId,
            currentPage.value,
            pageSize.value,
            filterForm.value.dateFrom,
            filterForm.value.dateTo,
            filterForm.value.name,
            filters.value,
            filterForm.value.costTimeFrom,
            filterForm.value.costTimeTo,
            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 = () => {
    if (+filterForm.value.costTimeFrom < +filterForm.value.costTimeTo ||
        filterForm.value.costTimeFrom === undefined ||
        filterForm.value.costTimeTo === undefined ||
        filterForm.value.costTimeFrom === '' ||
        filterForm.value.costTimeTo === '') {
        store.commit('search/setproductSearch', filterForm.value)
        page(
            filterForm.value.platformProductRelationId,
            currentPage.value,
            pageSize.value,
            filterForm.value.dateFrom,
            filterForm.value.dateTo,
            filterForm.value.name,
            filters.value,
            filterForm.value.costTimeFrom,
            filterForm.value.costTimeTo,
            filterForm.value.queueId,
        )
    } else {
        filterForm.value.costTimeFrom = "";
        filterForm.value.costTimeTo = "";
        ElMessage({
            type: "warning",
            message: "开始同步时长不得大于结束同步时长",
        });
    }

};

// 每页新条数
const handleSizeChange = (val: number) => {
    pageSize.value = val;
    page(
        filterForm.value.platformProductRelationId,
        currentPage.value,
        pageSize.value,
        filterForm.value.dateFrom,
        filterForm.value.dateTo,
        filterForm.value.name,
        filters.value,
        filterForm.value.costTimeFrom,
        filterForm.value.costTimeTo,
        filterForm.value.queueId,
    )
};
// 新页数
const handleCurrentChange = (val: number) => {
    currentPage.value = val;
    page(
        filterForm.value.platformProductRelationId,
        currentPage.value,
        pageSize.value,
        filterForm.value.dateFrom,
        filterForm.value.dateTo,
        filterForm.value.name,
        filters.value,
        filterForm.value.costTimeFrom,
        filterForm.value.costTimeTo,
        filterForm.value.queueId,
    )
};

const handleNumberChangeFrom = () => {
    if (filterForm.value.costTimeFrom) {
        let regPos = /^\+?[1-9][0-9]*$/; // 非负整数
        if (!regPos.test(filterForm.value.costTimeFrom)) {
            filterForm.value.costTimeFrom = "";
            ElMessage({ type: "warning", message: "请输入整数" });
        }
    }
};
const handleNumberChangeTo = () => {
    if (filterForm.value.costTimeTo) {
        let regPos = /^\+?[1-9][0-9]*$/; // 非负整数
        if (!regPos.test(filterForm.value.costTimeTo)) {
            filterForm.value.costTimeTo = "";
            ElMessage({ type: "warning", message: "请输入整数" });
        }
    }
};

const initfilter = () => {
    let data: any = store.state.search.productSearch
    setTimeout(() => {
        filterForm.value = data
        dateTime.value = [new Date(data.dateFrom), new Date(data.dateTo)]
        page(
            filterForm.value.platformProductRelationId,
            currentPage.value,
            pageSize.value,
            filterForm.value.dateFrom,
            filterForm.value.dateTo,
            filterForm.value.name,
            filters.value,
            filterForm.value.costTimeFrom,
            filterForm.value.costTimeTo,
            filterForm.value.queueId,
        )
    }, 50)
}
initfilter()

const onFocus = () => {
    activeElement.value = document.activeElement?.tagName
    document.getElementById('input-class')?.setAttribute('style', 'box-shadow: 0 0 0 1px #409EFF inset !important')
}

let activeElement = ref()
const onBlur = () => {
    activeElement.value = document.activeElement?.tagName
    document.getElementById('input-class')!.style.boxShadow = '0 0 0 1px #dcdfe6 inset'
}

const mouseover = () => {
    document.getElementById('input-class')!.style.boxShadow = '0 0 0 1px #b1b3b8 inset'

    if (filterForm.value.costTimeFrom || filterForm.value.costTimeTo) document.getElementById('range-icon')!.style.display = 'block'

}

const mouseleave = () => {
    document.getElementById('range-icon')!.style.display = 'none'
    if (activeElement.value === 'INPUT') document.getElementById('input-class')?.setAttribute('style', 'box-shadow: 0 0 0 1px #409EFF inset !important')
    else document.getElementById('input-class')!.style.boxShadow = '0 0 0 1px #dcdfe6 inset'
}

const handleClickIcon = () => {
    filterForm.value.costTimeFrom = ''
    filterForm.value.costTimeTo = ''
    document.getElementById('range-icon')!.style.display = 'none'
}
// 筛选
const page = (
    platformProductRelationId: number,
    pageNo?: number,
    pageSize?: number,
    dateFrom?: string,
    dateTo?: string,
    name?: string,
    flag?: any,
    costTimeFrom?: number,
    costTimeTo?: number,
    queueId?: string,
) => {
    getProductLog(
        platformProductRelationId,
        pageNo,
        pageSize,
        dateFrom,
        dateTo,
        name,
        flag,
        costTimeFrom,
        costTimeTo,
        queueId,
    ).then((res: any) => {
        if (res.code === 200) {
            tableList.value = res.data.records;
            total.value = res.data.total;
        }
    });
};

// 初始化数据
const initProduct = () => {
    getPlatformProductList().then((res: any) => {
        if (res.code === 200) {
            res.data.records.forEach((item: any) => {
                item.label = item.productBeforeCodeName + '-' + item.productAfterCodeName
            })
            productOptions.value = res.data.records
        }
    })
}

initProduct()
</script>
<style lang="scss" scoped>
@import './scss/kingdeeLog.scss'
</style>
