<template>
	<el-container>
		<el-main  style="padding:0 20px;">
			<xTable ref="table" :data="data" :api="api" stripe>
				<el-table-column label="ID" prop="id" width="80"></el-table-column>
				<el-table-column label="执行时间" prop="createtime" width="180"></el-table-column>
				<el-table-column label="耗时" prop="consumingtime" width="100"></el-table-column>
				<el-table-column label="结果" prop="state" width="80">
					<template #default="scope">
						<span v-if="scope.row.status==1" style="color: #67C23A;"><el-icon><el-icon-success-filled /></el-icon></span>
						<span v-else style="color: #F56C6C;"><el-icon><el-icon-circle-close-filled /></el-icon></span>
					</template>
				</el-table-column>
				<el-table-column label="执行日志" prop="logs" width="100" fixed="right">
					<template #default="scope">
						<el-button size="small" @click="show(scope.row)" type="text">日志</el-button>
					</template>
				</el-table-column>
			</xTable>
		</el-main>
	</el-container>

	<el-drawer title="日志" v-model="logsVisible" :size="500" direction="rtl" destroy-on-close>
		<el-main  style="padding:0 20px 20px 20px;">
			<pre style="font-size: 12px;color: #999;padding:20px;background: #333;font-family: consolas;line-height: 1.5;overflow: auto;">{{demoLog}}</pre>
		</el-main>
	</el-drawer>
</template>

<script>
	export default {
		data() {
			return {
				logsVisible: false,
				data:[],
				api:null,
				demoLog:''
			}
		},
		mounted() {

		},
		methods: {
			show(o){
				this.logsVisible = true;
				this.demoLog = o.content;
			},
			//表单注入数据
			setApi(api){
				this.api = api;
			}
		}
	}
</script>

<style>
</style>
