<!-- 任务列表 -->
<template>
	<div class='viewTaskTable'>
		<el-table
						:data="tableList"
						class="tables"
						border
						@row-click="rowClick"
						style="width: 100%">
			<el-table-column
							prop="status"
							class="firstTable"
							label=""
							width="15">
				<template slot-scope="scope">
					<span class="statusBg" :style="{background: $common.colorStatus(scope.row.status)}"></span>
				</template>
			</el-table-column>
			<el-table-column
							prop="title"
							label="任务名称"
							show-overflow-tooltip
							align="center">
			</el-table-column>
			<!--width="100"-->
			<el-table-column
							prop="release"
							label="发布者"
							align="center">
			</el-table-column>
			<!--width="200"-->
			<el-table-column
							prop="time"
							label="开始时间"
							align="center">
				<template slot-scope="scope">
					<span>{{$common.timeYMDHMSFilter(scope.row.time)}}</span>
				</template>
			</el-table-column>
			<!--width="100"-->
			<el-table-column
							prop="executor"
							label="执行人"
							align="center">
			</el-table-column>
			<!--width="100"-->
			<el-table-column
							prop="status"
							label="状态"
							align="center">
				<template slot-scope="scope">
					<span :style="{color: $common.colorStatus(scope.row.status)}">{{$common.statusName(scope.row.status)}}</span>
				</template>
			</el-table-column>
			<el-table-column
							prop="latestNews"
							label="最后一次操作"
							show-overflow-tooltip
							align="center">
				<template slot-scope="scope">
					<span>{{scope.row.latestNews}}</span>
					<span style="position: absolute;top: 0;right: 0;">
						<el-badge :is-dot="scope.row.readState === 1" class="item"></el-badge>
					</span>
				</template>
			</el-table-column>
			<!--<el-table-column-->
							<!--prop="status"-->
							<!--class="firstTable"-->
							<!--label=""-->
							<!--width="30">-->
				<!--&lt;!&ndash;<el-badge :is-dot="" class="item"></el-badge>&ndash;&gt;-->
			<!--</el-table-column>-->
		</el-table>
		<!--<table>-->
			<!--<tr>-->
				<!--<th></th>-->
				<!--<th>任务名称</th>-->
				<!--<th>发布者</th>-->
				<!--<th>开始时间</th>-->
				<!--<th>执行人</th>-->
				<!--<th>状态</th>-->
				<!--<th>latestNews</th>-->
			<!--</tr>-->
			<!--<tr v-for="(item, index) in tableList" :key="index">-->
				<!--<td><span class="statusBg"></span></td>-->
				<!--<td><span>{{item.title}}</span></td>-->
				<!--<td><span>{{item.release}}</span></td>-->
				<!--<td><span>{{item.time}}</span></td>-->
				<!--<td><span>{{item.executor}}</span></td>-->
				<!--<td><span>{{$common.statusName(scope.row.status)}}</span></td>-->
				<!--<td><span>{{item.latestNews}}</span></td>-->
			<!--</tr>-->
		<!--</table>-->
	</div>
</template>

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

	export default {
		name: "viewTaskTable",
//import引入的组件需要注入到对象中才能使用
		components: {},
		props: ['tableList'],
		data () {
//这里存放数据
			return {
				tableData: [
					// {title:1}, {title:1},{title:1},{title:1},{title:1},
					// {title:1},{title:1},{title:1},{title:1},{title:1},
				]
			};
		},
//监听属性 类似于data概念
		computed: {},
//监控data中的数据变化
		watch: {},
//方法集合
		methods: {
			rowClick(val) {
				console.log(val)
				this.$emit('trData', val);
			}
		},
//生命周期 - 创建完成（可以访问当前this实例）
		created () {

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

		},
		beforeCreate () {
		}, //生命周期 - 创建之前
		beforeMount () {
		}, //生命周期 - 挂载之前
		beforeUpdate () {
		}, //生命周期 - 更新之前
		updated () {
		}, //生命周期 - 更新之后
		beforeDestroy () {
		}, //生命周期 - 销毁之前
		destroyed () {
		}, //生命周期 - 销毁完成
		activated () {
		}, //如果页面有keep-alive缓存功能，这个函数会触发
	}
</script>
<style scoped>
	.viewTaskTable{
		margin-bottom: 60px; /*no*/
	}
	.statusBg{
		display: block;
		width: 10px;
		height: 80px;
		margin-left: -11px;
	}

	/*.viewTaskTable .tables {*/
		/*height: 800px;*/
		/*overflow-y: auto;*/
	/*}*/

	.viewTaskTable /deep/ .el-table td{
		padding: 0 0 !important;
		height: 80px !important;
		min-width: 0;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		text-overflow: ellipsis;
		vertical-align: middle;
		position: relative;
		text-align: center;
		border-right: 0 !important;
		border-left: 0 !important;
		border-bottom: 3px solid #F5F5F5;
	}

	/deep/ .el-table--border, .el-table--group {
		border: 0px solid #EBEEF5;
	}
</style>
