<template>
	<div class="library-add-update">
		<el-dialog :visible.sync="addOrupdateDialog" center :show-close="false" width="30%" :close-on-click-modal="false">
			<span slot="title"><i class="font-eighteen">{{title}}</i></span>
			<el-form ref="formRef" :model="formModel" :rules="formRules" label-width="auto">
				<el-form-item label="人像库名称" prop="factoryName">
					<el-input v-model="formModel.factoryName" clearable placeholder="人像库名称" maxlength="50" show-word-limit></el-input>
				</el-form-item>
<!--				<el-form-item label="人像库类型" prop="factoryType">-->
<!--					<el-select v-model="formModel.factoryType" clearable placeholder="人像库类型">-->
<!--						<el-option v-for="item in libraryTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
<!--					</el-select>-->
<!--				</el-form-item>-->
				<el-form-item label="备注信息" prop="remarks">
					<el-input v-model="formModel.remarks" clearable placeholder="备注信息" maxlength="250" show-word-limit></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer">
				<el-button type="primary" @click="confirmClick()" :disabled="disabledState">确认</el-button>
				<el-button @click="cancelClick">取消</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import debounce from 'lodash/debounce'
	export default {
		data() {
			return {
				// 人像库类型
				libraryTypeList: [],
				// 弹框隐藏/显示状态
				addOrupdateDialog: false,
				// 标题
				title: "",
				// 确认按钮状态
				disabledState: false,
				formModel: {
					factoryName: "",
					factoryType: "",
					remarks: ""
				},
				formRules: {
					factoryName: [{
						required: true,
						message: "请输入人像库名称",
						trigger: "blur"
					}],
					factoryType: [{
						required: true,
						message: "请选择人像库类型",
						trigger: "change"
					}]
				},
				type: ""
			}
		},
		created() {
			// 库类型码表 有缺陷
			// this.$http.get("/sys/dict/data/page?dictTypeId=1204231104539443202").then(res => {
			// 	if (res.data.code === 0) {
			// 		let positionType = res.data.data.list
			// 		this.libraryTypeList = []
			// 		positionType.forEach(item => {
			// 			this.libraryTypeList.push({
			// 				label: item.dictLabel,
			// 				value: item.dictValue
			// 			})
			// 		})
			// 	} else {
			// 		console.log(res)
			// 	}
			// })
			// 人像库类型码表
			this.$http.get("sys/dict/data/findByType/libraryType").then(res => {
				if (res.data.code === 0) {
					let positionType = res.data.data
					this.libraryTypeList = []
					positionType.forEach(item => {
						this.libraryTypeList.push({
							label: item.dictLabel,
							value: item.dictValue
						})
					})
				} else {
					this.$message.error(res.data.msg)
				}
			})
		},
		methods: {
			init: function(type, row) {
				this.addOrupdateDialog = true
				this.disabledState = false
				this.type = type
				if (type == "add") {
					this.title = "新建人像库"
					this.$nextTick(() => {
						this.$refs.formRef.resetFields()
					})
				} else {
					this.title = "编辑人像库"
					this.formModel = JSON.parse(row)
				}
			},
			confirmClick: debounce(function() {
				this.$refs.formRef.validate((valid) => {
					if (valid) {
						this.disabledState = true
						this.$http[this.type === "add" ? 'post' : 'put'](
							`/Resources/${this.type === "add" ? 'faceLib' : 'updateLibrary'}`,
							this.formModel).then(res => {
							if (res.data.code === 0) {
								this.type === "add" ? this.$message.success("新增成功") : this.$message.success("修改成功")
								this.addOrupdateDialog = false
								this.$emit('refreshClick', this.title == "新建人像库" ? "add" : "update", this.formModel)
							} else {
								console.log(res)
							}
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				})
			}),
			cancelClick() {
				this.$refs.formRef.resetFields()
				this.addOrupdateDialog = false
			}
		}
	}
</script>

<style scoped>
	i {
		font-style: normal;
		font-family: "Noto Sans SC";
		color: #333
	}

	.font-eighteen {
		font-size: 18px;
	}
</style>
