<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" border stripe style="width: 100%">
			<el-table-column label="文章序号" prop="articalId" width="80"> </el-table-column>
			<el-table-column label="文章标题" prop="title" min-width="200px">
				<template slot-scope="{ row }">
					<el-input v-if="row.edit" type="text" size="small" v-model="row.title" clearable />
					<span v-else>{{ row.title }}</span>
				</template>

			</el-table-column>
			<el-table-column label="发布部门" prop="department" width="80"></el-table-column>
			<el-table-column label="文章类型" prop="category">
				<template slot-scope="{row}">
					<div v-if="row.edit">
						<el-radio v-for="(item, index) in categorys" 
						v-model="row.category" 
						:key="index" :label="index">{{ item }}</el-radio>
					</div>
					<span v-else>{{categorys[row.category]}}</span>
				</template>
			</el-table-column>

			<el-table-column label="文章属性" prop="isOpen" min-width="60">
				<template slot-scope="{ row }">
					<div v-if="row.edit">
						<el-radio v-for="(item, index) in openMap" 
						v-model="row.isOpen" :key="index" :label="+index">{{ item }}</el-radio>
					</div>
					<span v-else>{{ openMap[row.isOpen] }}</span>
				</template>
			</el-table-column>
			
			<el-table-column label="发布时间" prop="publishTime">
				<template slot-scope="{ row }">
					<span>{{ row.publishTime|toDatetime }}</span>
				</template>
			</el-table-column>

			<el-table-column label="操作" width="160">
				<template slot-scope="{ row, $index }">
					<el-button v-if="row.edit" type="success" size="small" icon="el-icon-circle-check" @click="confirmEdit(row, $index)">提交</el-button>
					<el-button v-if="row.edit" class="cancel-btn" size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(row, $index)">取消</el-button>
					<el-button v-if="!row.edit" type="primary" size="small" @click="initEdit(row, $index)">编辑</el-button>

					<el-popover placement="top" width="160" v-model="row.visible" class="ml20" v-if="row.isOpen<2 && !row.edit">
						<p>确定要删除此此文件吗</p>
						<div style="text-align: right; margin: 0">
							<el-button size="mini" type="text" @click="row.visible = false">取消</el-button>
							<el-button type="primary" size="mini" @click="deleteArtical(row, $index)">确定</el-button>
						</div>
						<el-button type="danger" icon="el-icon-delete" size="small" slot="reference">删除</el-button>
					</el-popover>

				</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, editArtical} from "@/api/artical.js";
	import infoList from "@/mixins/infoList.js";
	import {
		toDatetime
	} from "@/utils/date";

	export default {
		name: "Api",
		mixins: [infoList],
		data() {
			return {
				categorys: {
					laws: "法律法规",
					mechanism: "机制制度类",
					result: "基础性成果类",
					other: "其他"
				},
				openMap: {
					0: '私有',
					1: '公开',
					2: '删除'
				},
				listApi: getArticalList
			};
		},
		watch: {
			"searchInfo.title"() {
				this.getTableData()
			}
		},
		methods: {
			//条件搜索前端看此方法
			onSubmit() {
				this.page = 1;
				this.pageSize = 10;
				this.getTableData();
			},
			cancelEdit(row, index) {
				if( row.temp ){
					Object.assign(row, row.temp||{});
				}
				row.edit = false;
				delete row["temp"];
				this.$set(this.tableData, index,row)
				
			},
			initEdit(row, index) {
				let form = Object.assign({}, row);
				row.edit = true;
				row.temp = form;
				this.$set(this.tableData, index, row)
			},
			deleteArtical(row, index){
				let {articalId,title, category} = row
				let param = {articalId, title, isOpen:2, category}
				editArtical( param ).then( res=>{
					if( res.code == 200){
						row.edit = false;
						row.isOpen = 2
						this.$set(this.tableData, index, row)
					}
				})
				
			},
			confirmEdit(row, index) {
				console.log("confirmEdit", row)
				let {articalId,title, isOpen, category} = row
				let param = {articalId, title, isOpen:+isOpen, category}
				editArtical( param ).then( res=>{
					if( res.code == 200){
						row.edit = false;
						delete row["temp"];
						this.$set(this.tableData, index, row)
					}
				})
			},
			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>
