<template>
	<div class="bbsl-common-page">
		<div class="bbsl-table-search">
			<el-page-header v-if="this.$route.query.id" class="page-header" @back="goBack" content="采集任务">
				{{ this.$route.query.id }}
			</el-page-header>
			<el-form :inline="true" class="el-form-paddingLeft">
				<!-- <el-form-item label="调度编号">
          <el-input
            size="mini"
            v-model="params.sysJoblogId"
            placeholder="请输入调度编号"
          ></el-input>
        </el-form-item> -->
				<el-form-item label="任务开始时间">
					<el-date-picker @change="changeDate" v-model="params.startTime" style="width:230px" size="mini"
						value-format="yyyy-MM-dd HH:mm:ss" type="daterange" clearable range-separator="至"
						start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="任务状态">
					<!-- <el-input
                clearable
                size="mini"
                placeholder="请输入任务状态"
                @input="stat"
                v-model="params.status"
              ></el-input> -->
					<el-select clearable size="mini" v-model="params.status" placeholder="请输入任务状态">
						<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" size="mini" @click="onClickSearch">搜索</el-button>
					<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="bbsl-table-content bbsl-table-content-paddingTop" ref="contentPanel">
			<div class="bbsl-btn-content" ref="btnPanel"></div>
			<el-table stripe size="mini" :max-height="tableMaxHeight" ref="multipleSelection" v-loading="loading" border
				@row-dblclick="handleDbClick" :row-key="getRowKey" :data="tableData"
				@selection-change="handleSelectionChange" :style="{width: '100%'}"
				:header-cell-style="{'text-align': 'center'}" :cell-style="{'text-align': 'center'}">
				<el-table-column min-width="170" sortable size="mini" prop="taskId" label="任务编号" show-overflow-tooltip>
				</el-table-column>

				<el-table-column min-width="170" sortable size="mini" prop="startTime" label="任务开始时间"
					show-overflow-tooltip></el-table-column>

				<el-table-column min-width="170" sortable size="mini" prop="endTime" label="任务结束时间"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column min-width="350" sortable size="mini" prop="result" label="任务结果" show-overflow-tooltip>
				</el-table-column>
				<el-table-column min-width="120" sortable size="mini" prop="status" label="任务状态" show-overflow-tooltip>
					<template #default="scope">
						<i :class="scope.row.status == 1 ? 'success_rw' : 'fail_rw'">
							{{ scope.row.status !== 1 ? '失败' : '成功' }}
						</i>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination ref="paginationPanel" align="right" class="bbsl-pagination" background
				@size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageBean.page"
				:page-sizes="[20,30,40, 50]" :page-size="pageBean.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
		</div>
		<form-dialog v-if="showFormDia" @closeFormDiao="closeFormDiao" @refList="getDateList" :tableData="tableData"
			:showFormDia="showFormDia" :title="title" :pId="pId" :taskName="taskName" :taskMemo="taskMemo">
		</form-dialog>
	</div>
</template>

<script>
	import {
		TableMixin
	} from '@/mixins/tableMixin'
	import logQuery from '@/api/logQuery.js'
	import FormDialog from './logQuery-dialog.vue'
	export default {
		name: 'logQuery',
		components: {
			FormDialog
		},
		mixins: [TableMixin],
		data() {
			return {
				loading: false,
				pageBean: {
					pageSize: 20,
					page: 1
				},

				params: {
					taskId: '',
					startTime: null,
					status: null
				},
				statusList: [{
						value: 0,
						label: '失败'
					},
					{
						value: 1,
						label: '成功'
					}
				],
				startTime: '',
				endTime: '',
				result: '', //任务结果
				status: 0, //任务状态
				// sysJoblogId: '', //调度id
				taskId: '', //任务id
				taskMemo: '', //任务说明
				tableData: [],
				total: 0,
				showFormDia: false,
				title: '',
				pId: '',
				taskName: '',
				multipleSelection: [],
				operation: '操作',
				operationDefault: '0',
				falgSerch: null
			}
		},
		created() {
			this.params.taskId = this.$route.query.id
			this.getDateList()
		},
		methods: {
			stat(val) {
				console.log(this.params.status)
				this.params.status = val
			},
			changeDate(val) {
				if (val) {
					this.startTime = val[0]
					this.endTime = val[1]
				} else {
					this.startTime = ''
					this.endTime = ''
				}
			},
			//搜索
			onClickSearch(val) {
				this.falgSerch = val
				this.pageBean.page = 1
				this.getDateList()
			},
			//重置
			resetQuery() {
				this.params.startTime = ''
				this.params.status = null
				this.pageBean.page = 1
				this.getDateList()
			},
			handleSelectionChange(val) {
				this.multipleSelection = val.map(item => {
					return item.id
				})
			},
			handleSizeChange(val) {
				this.pageBean.pageSize = val
				this.getDateList()
			},
			handleCurrentChange(val) {
				this.pageBean.page = val
				this.getDateList()
			},
			closeFormDiao() {
				this.showFormDia = false
			},
			// 指定一个key标识这一行的数据
			getRowKey(row) {
				return row.id
			},
			getDateList() {
				let data = {
					pageBean: this.pageBean,
					querys: [{
						property: 'taskId',
						operation: 'EQUAL',
						value: this.params.taskId,
						group: 'filter',
						relation: 'AND'
					}],
					sorter: [{
						direction: "DESC",
						property: "startTime"
					}]
				}
				if (this.params.startTime) {
					data = {
						pageBean: this.pageBean,
						querys: [{
							property: 'startTime',
							operation: 'BETWEEN',
							value: [this.startTime, this.endTime],
							group: 'filter',
							relation: 'AND'
						}, ]
					}
				}
				if (this.params.status) {
					data = {
						pageBean: this.pageBean,
						querys: [{
							property: 'status',
							operation: 'EQUAL',
							value: this.params.status,
							group: 'filter',
							relation: 'AND'
						}]
					}
				}
				if (this.params.status && this.params.startTime) {
					data = {
						pageBean: this.pageBean,
						querys: [{
								property: 'startTime',
								operation: 'BETWEEN',
								value: [this.startTime, this.endTime],
								group: 'filter',
								relation: 'AND'
							},
							{
								property: 'status',
								operation: 'EQUAL',
								value: this.params.status,
								group: 'filter',
								relation: 'AND'
							}
						]
					}
				}
				this.tableData = []
				logQuery.logList(data, res => {
					this.total = res.total
					this.tableData = res.rows
					this.loading = false
				})
			},
			handleUpdate(row) {
				this.title = '查看'
				this.pId = row.id
				this.showFormDia = true
			},
			// 返回上一级
			goBack() {
				this.$router.go(-1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-header {
		padding-bottom: 20px;
		box-sizing: border-box;
	}

	/deep/.el-page-header__content {
		font-size: 18px;
	}

	.bbsl-table-search {
		display: flex;
		align-items: center;
	}

	.el-form-paddingLeft {
		padding-left: 80px;
		padding-top: 5px;
	}

	.success_rw {
		color: green;
		font-style: normal;
	}

	.fail_rw {
		color: red;
		font-style: normal;
	}
</style>
