<template>
	<div class="library">
		<!-- library -->
		<div v-show="!viewState">
			<div class="library-conditions-div">
				<el-form :model="formModel" :inline="true">
<!--					<el-form-item label="人像库">-->
<!--						<el-input v-model="formModel.factoryName" placeholder="请输入人像库名称" clearable></el-input>-->
<!--					</el-form-item>-->
<!--					<el-form-item>-->
<!--						<el-button type="primary" @click="searchClick()" v-if="$hasPermission('portrait:lib:info')">搜索</el-button>-->
<!--					</el-form-item><el-form-item label="人像库">-->
<!--						<el-input v-model="formModel.factoryName" placeholder="请输入人像库名称" clearable></el-input>-->
<!--					</el-form-item>-->
<!--					<el-form-item>-->
<!--						<el-button type="primary" @click="searchClick()" v-if="$hasPermission('portrait:lib:info')">搜索</el-button>-->
<!--					</el-form-item>-->
					<el-form-item style="float: right;">
						<el-button type="primary" @click="addOrUpdateClick('add')">新增人像库</el-button>
					</el-form-item>
				</el-form>
			</div>
			<el-table :data="libraryList" :row-class-name="tableRowClassName">
				<el-table-column prop="factoryName" label="人像库名称" show-overflow-tooltip></el-table-column>
<!--				<el-table-column prop="factoryTypeName" label="人像库类型" show-overflow-tooltip></el-table-column>-->
				<el-table-column prop="number" label="人像数" show-overflow-tooltip></el-table-column>
				<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
				<el-table-column prop="remarks" label="备注" show-overflow-tooltip></el-table-column>
				<el-table-column label="操作" show-overflow-tooltip fixed="right" width="300">
					<template slot-scope="scope">
						<el-button type="primary" plain size="mini" @click="viewClick(scope.row)">查看</el-button>
<!--						<el-button type="primary" plain size="mini" @click="addOrUpdateClick('update',scope.row)">编辑</el-button>-->
<!--						<el-button type="primary" plain size="mini" @click="uploadClick(scope.row)">上传</el-button>-->
						<!-- <el-button type="primary" plain size="mini" @click="uploadDefailsClick(scope.row)">导图状况<span style="color:red">(12)</span></el-button> -->
						<el-button type="primary" plain size="mini" @click="deleteClick(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageObj.pageNo"
			 :page-sizes="[10, 20, 30, 40]" :page-size="pageObj.pageSize" layout="total, sizes, prev, pager, next, jumper"
			 :total="total">
			</el-pagination>
			<!-- 新增或修改 -->
			<!-- 此处必须这样接收参数(一个参数) -->
			<LibraryAddUpdate ref="addOrUpdateRef" @refreshClick="refreshClick"></LibraryAddUpdate>
			<!-- 上传 -->
			<!-- 此处必须这样接收参数(一个参数) -->
			<LibraryUpload ref="uploadRef" @refreshUploadClick="refreshUpload($event)" />
		</div>
		<!-- library-view -->
		<div v-show="viewState">
			<LibraryView ref="viewRef" @returnLibraryEmit="returnLibrary"></LibraryView>
		</div>
	</div>
</template>

<script>
	import LibraryAddUpdate from "./library-add-update"
	import LibraryView from "./library-view"
	import LibraryUpload from "./library-upload"
	export default {
		components: {
			LibraryAddUpdate,
			LibraryView,
			LibraryUpload
		},
		data() {
			return {
				// library 和 library-view状态
				viewState: false,
				// 查询表单变量
				formModel: {
					factoryName: ""
				},
				// 表格相关变量
				libraryList: [],
				total: 0,
				pageObj: {
					pageNo: 1,
					pageSize: 10,
					note: {}
				}
			}
		},
		methods: {
			// 搜索
			searchClick() {
				this.pageObj.note = {
					...this.pageObj.note,
					...this.formModel
				}
				if (this.pageObj.note.factoryName != "") {
					this.pageObj.pageNo = 1
				}
				this.commonSeach(this.pageObj)
			},
			// el-pagination
			handleSizeChange: function(pageSize) {
				this.pageObj.pageSize = pageSize
				this.handleCurrentChange(this.pageObj.pageNo);
			},
			handleCurrentChange: function(pageNo) {
				this.pageObj.pageNo = pageNo
				this.pageObj.note = {
					...this.pageObj.note,
					...this.formModel
				}
				this.commonSeach(this.pageObj)
			},
			// 查看
			viewClick(row) {
				this.viewState = true
				this.$nextTick(() => {
					this.$refs.viewRef.init(row)
				})
			},
			// 查看回调
			returnLibrary() {
				this.viewState = false
				this.commonSeach(this.pageObj)
			},
			// 新增或者修改
			addOrUpdateClick(type, row = {}) {
				this.$nextTick(() => {
					this.$refs.addOrUpdateRef.init(type, JSON.stringify(row))
				})
			},
			// 新增或者修改回调
			refreshClick(type) {
				type === "add" ? this.pageObj.pageNo = 1 : this.pageObj.pageNo
				this.pageObj.note = {
					...this.pageObj.note,
					...this.formModel
				}
				this.commonSeach(this.pageObj)
			},
			// 删除
			deleteClick(row) {
				this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
						confirmButtonText: "确认",
						cancelButtonTExt: "取消",
						type: "warning"
					})
					.then(() => {
						this.$http.delete(`/Resources/faceLib/${row.idFactory}`).then(res => {
							if (res.data.code === 0) {
								this.pageObj.note = { ...this.pageObj.note,
									...this.formModel
								}
								if (this.formModel.factoryName != "") {
									this.pageObj.pageNo = 1
								} else if (this.libraryList.length === 1 && this.pageObj.pageNo > 1) {
									this.pageObj.pageNo = this.pageObj.pageNo - 1
								}
								this.commonSeach(this.pageObj)
								this.$message.success("删除成功")
							} else {
								this.$message.warning(res.data.message)
							}
						})
					})
					.catch(err => {
						console.log(err)
					})
			},
			// 上传
			uploadClick(row) {
				this.$nextTick(() => {
					this.$refs.uploadRef.init("upload", "library", row.idFactory)
				})
			},
			// 导图状况
			uploadDefailsClick(row) {
				this.$nextTick(() => {
					this.$refs.uploadRef.init("", row)
				})
			},
			// 上传回调
			refreshUpload(fromWhere) {
				this.commonSeach(this.pageObj)
			},
			// 列表奇偶行标识
			tableRowClassName(row, b) {
				if (row.rowIndex % 2 == 0) {
					return 'evenClass'
				} else {
					return 'oddClass'
				}
			},
			// 查询的公共接口
			commonSeach(pageObj = this.pageObj) {
				this.$http.post("/Resources/libraryPage", pageObj).then(res => {
					if (res.data.code === 0) {
						this.libraryList = res.data.data.records
						this.total = Number(res.data.data.total)
					} else {
						console.log(res)
					}
				})
			},
		},
		created() {
			// 初始化查询
			this.commonSeach()
		}
	}
</script>

<style scoped>
	.library-conditions-div {
		background-color: #FFF;
		border-radius: 2px;
	}

	.library-conditions-div>>>.el-form-item {
		margin: 10px;
	}

	.el-table>>>.oddClass {
		background: #FFF;
		border: none;
	}

	.el-table>>>.evenClass {
		background: #F2F9FF;
		border: none
	}
</style>
