<!-- 反馈页面 -->
<template>
	<div class='feedBack'>
		<el-container style="height: 100%;">
			<el-header class="headerBg">
				<header-com></header-com>
			</el-header>
			<el-container class="mainBg">
				<el-main class="main-Div">
					<div style="height: 96%;">
						<div class="feedBackHeader">
							<el-button type="primary" @click="backHome" icon="el-icon-back">返回主页</el-button>
						</div>
						<div>
							<el-button type="primary" @click="addFeedBack" icon="el-icon-plus">新增</el-button>
						</div>
						<div style="margin-top: 20px;">
							<el-table
											:data="tableData"
											style="width: 100%">
								<el-table-column
												prop="name"
												label="反馈人">
								</el-table-column>
								<el-table-column
												prop="des"
												show-overflow-tooltip
												label="反馈内容">
								</el-table-column>
							</el-table>
						</div>
					</div>
				</el-main>
			</el-container>
		</el-container>
		<add-feed-back :showFeedback="showFeedback" @close="closeFeedBackDialog"></add-feed-back>
	</div>
</template>

<script>
	//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
	//例如：import 《组件名称》 from '《组件路径》';
	import headerCom from '../components/headerDetail';
	import addFeedBack from '../components/feedbackDialog';
	export default {
		name: "Expand",
//import引入的组件需要注入到对象中才能使用
		components: {headerCom, addFeedBack},
		data () {
//这里存放数据
			return {
				tableData: [],
				showFeedback: false,
			};
		},
//监听属性 类似于data概念
		computed: {},
//监控data中的数据变化
		watch: {},
//方法集合
		methods: {
			getFeedback() {
				this.$axios.getFeedback().then((res) => {
					console.log(res);
					if (res.status === 200) {
						this.tableData = res.data;
					}
				})
			},
			addFeedBack() {
				this.showFeedback = true;
			},
			closeFeedBackDialog() {
				this.showFeedback = false;
				this.getFeedback();
			},
			backHome() {
				this.$router.push({name: 'viewTask'});
			},
		},
//生命周期 - 创建完成（可以访问当前this实例）
		created () {

		},
//生命周期 - 挂载完成（可以访问DOM元素）
		mounted () {
			this.getFeedback();
		},
		beforeCreate () {
		}, //生命周期 - 创建之前
		beforeMount () {
		}, //生命周期 - 挂载之前
		beforeUpdate () {
		}, //生命周期 - 更新之前
		updated () {
		}, //生命周期 - 更新之后
		beforeDestroy () {
		}, //生命周期 - 销毁之前
		destroyed () {
		}, //生命周期 - 销毁完成
		activated () {
		}, //如果页面有keep-alive缓存功能，这个函数会触发
	}
</script>
<style scoped>
	.feedBack{
		height: 100%;
		background-image: url("../assets/images/bg.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.headerBg{
		width: 100%;
		height: 8% !important;
	}
	.mainBg{
		height: 92% !important;
	}
	.feedBackHeader{
		text-align: right;
		padding: 20px 0px;
		border-bottom: 1px solid #5059D5;
		margin-bottom: 30px;
	}

	.main-Div{
		padding: 0 24px;
		margin: 0 24px;
		height: 98%;
		/*overflow-y: auto;*/
		border-radius: 10px;
		background: #FFF;
	}

	/deep/ .el-tooltip__popper {
		padding: 10px 10px 10px 20px;
	}
</style>
