<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="favicon.ico">
    <title>xxxç³»ç»Ÿ</title>

    <link rel="stylesheet" href="css/main.css" />

    <link rel="stylesheet" href="js/lib/element-plus/index.css" />
    <script src="js/lib/vue.global.js"></script>
    <script src="js/lib/element-plus/element-plus.js"></script>
    <script src="js/lib/element-plus/icons-vue.js"></script>

    <script src="js/lib/axios.min.js"></script>
    <script src="js/lib/httpVueLoader.js"></script>
	
	<style>#app-job-record{padding:10px;}</style>
</head>
<body>
<div id="app-job-record">
    <div id="loader-wrapper" v-if="loading">
        <div id="loader"></div>
        <div class="loader-section section-left"></div>
        <div class="loader-section section-right"></div>
        <div class="load_title">æ£åœ¨åŠ è½½ç³»ç»Ÿèµ„æºï¼Œè¯·è€å¿ƒç‰å¾…</div>
    </div>

    <el-form :model="queryParams" :inline="true">
        <el-form-item label="æ‰§è¡Œç»“æžœ" prop="listStatus">
            <el-select
                v-model="queryParams.listStatus"
                multiple
                placeholder="è¯·é€‰æ‹©"
                style="width: 240px"
            >
                <el-option label="æˆåŠŸ" value="200"></el-option>
                <el-option label="å¤±è´¥" value="300"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="ä»»åŠ¡æ‰§è¡Œæ—¶é—´">
            <el-date-picker
                v-model="dateRangeExecuteTime"
                value-format="YYYY-MM-DD HH:mm:ss"
                type="daterange"
                range-separator="-"
                start-placeholder="å¼€å§‹æ—¥æœŸ"
                end-placeholder="ç»“æŸæ—¥æœŸ"
                :default-time="[
                    new Date(2000, 1, 1, 0, 0, 0),
                    new Date(2000, 1, 1, 23, 59, 59),
                    ]"
            ></el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="search" @click="handleQuery">æœç´¢</el-button>
            <el-button icon="Refresh" @click="resetQuery">é‡ç½®</el-button>
        </el-form-item>
    </el-form>

    <el-table
		:stripe="true"
		:border="true"
        :data="dataList"
        @selection-change="handleSelectionChange"
        @row-dblclick="handleDetail"
    >
        <el-table-column label="æ‰§è¡Œæ—¶é—´" min-width="155" align="center" prop="startTimeView"></el-table-column>
        <el-table-column label="ä»»åŠ¡ç¼–å·" min-width="175" align="center" prop="taskNo"></el-table-column>
        <el-table-column label="ä»»åŠ¡åç§°" min-width="300" align="center" prop="taskName"></el-table-column>
        <el-table-column label="æ‰§è¡Œå‚æ•°" min-width="175" align="center" prop="executeParameter"></el-table-column>
        <el-table-column label="æ‰§è¡Œå®Œæˆæ—¶é—´" min-width="155" align="center" prop="endTimeView"></el-table-column>
        <el-table-column label="æ‰§è¡Œè€—æ—¶(ms)" min-width="150" align="center" prop="executeTimes">
            <template #default="scope">
                {{ scope.row.executeTimes }}
                {{ showExecuteTimes(scope.row.executeTimes) }}
            </template>
        </el-table-column>
        <el-table-column label="ä»»åŠ¡çŠ¶æ€" min-width="80" align="center" prop="taskStatusView"></el-table-column>
        <el-table-column label="æ‰§è¡Œç»“æžœ" min-width="80" align="center" prop="failReason" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column
            label="æ“ä½œ"
            align="center"
            min-width="90"
            fixed="right"
            class-name="small-padding fixed-width"
        >
            <template #default="scope">
                <el-button
                    link
                    type="primary"
                    v-if="scope.row.taskStatus === 300"
                    @click="handleDetail(scope.row)"
                >é”™è¯¯ä¿¡æ¯</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- ä¿®æ”¹å¯¹è¯æ¡† -->
    <el-dialog
		title="é”™è¯¯ä¿¡æ¯"
		v-model="dialogOpenModify"
		width="80%"
		append-to-body
    >
        <div style="white-space: pre-wrap;">
            {{ formModify.errorValue }}
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelModify">å…³é—</el-button>
            </div>
        </template>
    </el-dialog>
	
    <el-pagination
        v-if="total > 0"
        :background="tabConfig.background"
        :hide-on-single-page="tabConfig.hideOnSinglePage"
        :page-sizes="tabConfig.listPageSize"
        :total="total"
        v-model:current-page="queryParams.page"
        v-model:page-size="queryParams.limit"
        @change ="getList"
    />
</div>

<script type="module">
function queryURLParams(url, paramName) {
    let parameterStr = url.split("?")[1];
    const urlSearchParams = new URLSearchParams(parameterStr);
    const params = Object.fromEntries(urlSearchParams.entries());
    
    if (!paramName) {
        // æ²¡æœ‰ä¼ å…¥å‚æ•°åç§°, è¿”å›žå«æœ‰æ‰€æœ‰å‚æ•°çš„å¯¹è±¡params
        return params;
    } else {
        if (params[paramName]) {
            return params[paramName];
        } else {
            return '';
        }
    }
}

    import { EState } from "/js/enums.js"

    const { createApp, ref, onMounted, h } = Vue
    const loading = ref(true)

    const Http = axios.create({
        baseURL: location.pathname.substr(0, location.pathname.lastIndexOf('/')),
        timeout: 1000,
        headers: {'X-Custom-Header': 'foobar'}
    });
    const $message = ElementPlus.ElMessage;
    const $confirm = ElementPlus.ElMessageBox;

    var app = Vue.createApp({
        el: '#app-job-record',
        props: {
            taskNo: String
        },
        data() {
			return {
				ddd: true
			}
        },
        methods: {
            funcA() {
                console.log(this.ddd);
                this.$message('è¿™æ˜¯ä¸€æ¡æ™®é€šinfoæ¶ˆæ¯');
                this.$message.success('æå–œä½ ï¼Œè¿™æ˜¯ä¸€æ¡æˆåŠŸæ¶ˆæ¯');
                this.$message.warning('è¦å‘Šå“¦ï¼Œè¿™æ˜¯ä¸€æ¡è¦å‘Šæ¶ˆæ¯');
                this.$message.error('é”™äº†å“¦ï¼Œè¿™æ˜¯ä¸€æ¡é”™è¯¯æ¶ˆæ¯');
                this.$message({
                    message: h('p', { style: 'line-height: 1; font-size: 14px' }, [
                        h('span', null, 'è¿™æ˜¯ä¸€æ¡è‡ªå®šä¹‰æ ·å¼çš„æ¶ˆæ¯ '),
                        h('i', { style: 'color: teal' }, 'VNode'),
                    ])
                });
            }
        },

        mounted: () => {
            //$message('è¿™æ˜¯ä¸€æ¡æ™®é€šinfoæ¶ˆæ¯');
        },

        setup() {
const tabConfig = ref({
    background: true,
    hideOnSinglePage: true,
    listPageSize: [20, 50, 100, 200]
});

const listEState = EState.enums;
const getEStateLabel = (value) => {
    return EState.getLabelByValue(value)
}
const loading = ref(false);
const dataList = ref([]);

const modifyLoading = ref(false);
const dialogOpenModify = ref(false);

const total = ref(0);
const dateRangeExecuteTime = ref([]);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);

const queryParams = ref({
    page: 1,
    limit: 10,
    listStatus: [],
    taskNo: queryURLParams(location.href, 'taskNo'),
    executeTimeRange: ''
});

const formModify = ref({});

/** æŸ¥è¯¢åˆ—è¡¨ */
function getList() {
    loading.value = true;
    if (
        dateRangeExecuteTime &&
        dateRangeExecuteTime.value &&
        dateRangeExecuteTime.value[0]
    ) {
        queryParams.value.executeTimeRange = dateRangeExecuteTime.value.join(" ~ ");
    }
    Http.post('/quartz/taskRecords', queryParams.value)
    .then((response) => {
		let data = response.data.data;
        dataList.value = data.list;
        total.value = data.total;
        loading.value = false;
    });
}
/** æœç´¢æŒ‰é’®æ“ä½œ */
function handleQuery() {
    queryParams.value.page = 1;
    getList();
}
/** é‡ç½®æŒ‰é’®æ“ä½œ */
function resetQuery() {
    dateRangeCreateTime.value = [];
    dateRangeJoinTime.value = [];
    handleQuery();
}
/** é€‰æ‹©æ¡æ•°  */
function handleSelectionChange(selection) {
    ids.value = selection.map((item) => item.id);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
}



/** è¯¦æƒ…æŒ‰é’® */
function handleDetail(row) {
    modifyLoading.value = true;
    resetModify();
    const id = row.id || ids.value[0];

    Http.get('/quartz/taskErrors/' + row.id)
    .then((response) => {
		let data = response.data.data;
        formModify.value = data;
        if (formModify.value) {
            dialogOpenModify.value = true;
        } else {
            $message.warning("æ²¡æœ‰æ›´å¤šä¿¡æ¯");
        }
    }).finally(() => {
        modifyLoading.value = false;
    })
}
/** ç¼–è¾‘è¡¨å•é‡ç½® */
function resetModify() {
    formModify.value = {
        id: undefined,
        taskName: undefined,
        schedulerRule: undefined,
        executor: undefined,
        sendType: undefined,
        url: undefined,
        executeParameter: undefined,
    };
}
/** å–æ¶ˆç¼–è¾‘æŒ‰é’® */
function cancelModify() {
    dialogOpenModify.value = false;
    resetModify();
}

function showExecuteTimes(times) {
    let str = (times / 1000) + '';
    if (str.indexOf('.') > -1) {
        str = str.substring(0, str.indexOf('.') + 2);
    }
    return '(' + str + 's)';
}

onMounted(() => {
	loading.value = false
	getList()
})
return {
    tabConfig,
    listEState,
    getEStateLabel,
    loading,
	dataList,
	modifyLoading,
	dialogOpenModify,
	total,
	dateRangeExecuteTime,
	ids,
	single,
	multiple,
	queryParams,
	formModify,
	getList,
	handleQuery,
	resetQuery,
	handleSelectionChange,
	handleDetail,
	resetModify,
	cancelModify,
	showExecuteTimes
}
        }
    })
    app.use(ElementPlus)
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
      app.component(key, component)
    }
    app.mount("#app-job-record")
</script>
</body>
</html>