<!-- 查看任务历史组件 -->
<template>
	<div class='taskHistory'>
		<el-dialog title="查看任务历史" :show-close="false" :append-to-body="true" :close-on-click-modal="false" :close-on-press-escape="false" :lock-scroll="true" :visible.sync="dialogHistoryVisible">
			<div slot="title" class="header-title">
				<span class="dialogHeader">查看任务历史</span>
				<img @click="closeDialog()" class="dialogHeaderClose" src="../assets/images/dialogClose.png" />
			</div>
			<div class="list">
				<el-table
								:data="historyList"
								style="width: 100%">
					<el-table-column
									prop="date"
									label="时间"
									align="center">
					</el-table-column>
					<el-table-column
									prop="actionName"
									label="操作人"
									align="center">
					</el-table-column>
					<el-table-column
									prop="actionMsg"
									align="center"
									label="内容">
					</el-table-column>
					<el-table-column
									prop="msg"
									align="center"
									label="说明">
					</el-table-column>
				</el-table>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
	//例如：import 《组件名称》 from '《组件路径》';

	export default {
		name: "taskHistory",
//import引入的组件需要注入到对象中才能使用
		components: {},
		props:{
			showHistoryDialog: { type: Boolean, default: false },
			historyData:{type: Array}
		},
		data () {
//这里存放数据
			return {
				dialogHistoryVisible: false,
				historyList: [
					{ time: '2020-02-02 02:02:02', operator: '张三', content: '张三提交了任务张三提交了任务张三提交了任务张三提交了任务', des: 'xxxxxxxx张三提交了任务' },
					{ time: '2020-02-02 02:02:02', operator: '张三', content: '张三提交了任务', des: 'xxxxxxxx' },
					{ time: '2020-02-02 02:02:02', operator: '张三', content: '张三提交了任务', des: 'xxxxxxxx' },
					{ time: '2020-02-02 02:02:02', operator: '张三', content: '张三提交了任务', des: 'xxxxxxxx' },
				]
			};
		},
//监听属性 类似于data概念
		computed: {},
//监控data中的数据变化
		watch: {
			showHistoryDialog:{
				immediate: true,
				handler(showHistoryDialog) {
					// console.log(showViewTrain)
					this.dialogHistoryVisible = showHistoryDialog;
				}
			},
			historyData: {
				immediate: true,
				handler(historyData) {
					this.historyList = historyData;
				}
			}
		},
//方法集合
		methods: {
			closeDialog() {
				this.historyList = [];
				this.$emit('close', false);
			}
		},
//生命周期 - 创建完成（可以访问当前this实例）
		created () {

		},
//生命周期 - 挂载完成（可以访问DOM元素）
		mounted () {

		},
		beforeCreate () {
		}, //生命周期 - 创建之前
		beforeMount () {
		}, //生命周期 - 挂载之前
		beforeUpdate () {
		}, //生命周期 - 更新之前
		updated () {
		}, //生命周期 - 更新之后
		beforeDestroy () {
		}, //生命周期 - 销毁之前
		destroyed () {
		}, //生命周期 - 销毁完成
		activated () {
		}, //如果页面有keep-alive缓存功能，这个函数会触发
	}
</script>
<style scoped>
	.header-title{
		text-align: center;
		font-size: 20px;
		position: relative;
	}
	.dialogHeaderClose{
		position: absolute;
		top: -10px;
		right: 0px;
		cursor: pointer;
	}

	.list{
		margin: 20px 40px;
		overflow-y: auto;
	}

	.list li{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between ;
		align-items: center;
	}


</style>
