<template>
	<div>
		<div class="search-term">
			<div class="nav">
				<el-button @click="$router.push({name:'artical_info',params:{id:0}})" type="primary" class="fr">新增文章</el-button>
			</div>
			<el-form :inline="true" :model="searchInfo" class="demo-form-inline" label-position="left">
				<el-form-item label="文章标题">
					<el-input placeholder="文章标题" v-model="searchInfo.title" clearable></el-input>
				</el-form-item>
				<el-form-item>
					<el-button @click="onSubmit" type="primary" clearable>查询</el-button>
				</el-form-item>
			</el-form>
		</div>

		<el-table :data="tableData" @selection-change="handleSelectionChange" border stripe style="width: 100%">
			<el-table-column label="文章序号" prop="articalId"> </el-table-column>
			<el-table-column label="文章标题" prop="title" min-width="200px"></el-table-column>
			<el-table-column label="发布部门" prop="department"></el-table-column>
			<el-table-column label="文章类型" prop="category"></el-table-column>


			<el-table-column label="是否公开" prop="created_at">
				<span> 是</span>
			</el-table-column>

			<!-- 	  <el-table-column label="创建时间" prop="created_at" >
		  <template slot-scope="{row}">
			<span> {{row.createAt|toDatetime}}</span>
		  </template>
	  </el-table-column>	 -->

			<el-table-column label="发布时间" prop="publish_time">
				<template slot-scope="{row}">
					<span> {{row.publishTime|toDatetime}}</span>
				</template>
			</el-table-column>

			<el-table-column label="操作" width="100px">
				<template slot-scope="{row}">
					<el-button v-if="row.publishTime>0"  @click="editArtical( row.id )" type="text" size="small">已经发布</el-button>
					
					
					<el-button v-else @click="editArtical( row.id )" type="text" size="small">编辑状态</el-button>
				</template>
			</el-table-column>


		</el-table>

		<el-pagination :current-page="page" :page-size="pageSize" :page-sizes="[10, 30, 50, 100]" :style="{float:'right',padding:'20px'}"
		 :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
	</div>
</template>


<script>
	import {
		getArticalList
	} from "@/api/artical.js";
	import infoList from "@/mixins/infoList.js";
	import {
		toDatetime,
		toDate
	} from "@/utils/date";

	export default {
		name: "Api",
		mixins: [infoList],
		data() {
			return {
				listApi: getArticalList
			};
		},
		watch: {
			"searchInfo.title"(val) {
				this.getTableData()
			}
		},
		methods: {
			//条件搜索前端看此方法
			onSubmit() {
				this.page = 1;
				this.pageSize = 10;
				this.getTableData();
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			editArtical(id) {
				this.$router.push({
					name: "artical_info",
					params: {
						id
					}
				});
			}
		},
		filters: {
			toDatetime
		},
		created() {
			this.getTableData();
		}
	};
</script>
<style scoped lang="scss">
	.warning {
		color: #dc143c;
	}
</style>
