<template>
  <!-- <a-modal v-model="modalVisible" title="新建分类" @ok="handleOk"> -->
  <a-form-model
    ref="ruleForm"
    :model="form"
    :rules="rules"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
  >
    <a-form-model-item ref="parentName" label="所属上级分类" prop="parentName">
      <a-tree-select
        v-model="form.parentName"
        style="width: 100%"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        :tree-data="treeData"
        placeholder="请选择"
        @select="onClassSelect"
        :replaceFields="{children:'children', title:'catalogName', key:'catalogCode', value: 'catalogCode' }"
        tree-default-expand-all
      >
      </a-tree-select>
    </a-form-model-item>
    <a-form-model-item ref="parentCode" label="所属上级分类代码" prop="parentCode">
      <a-input
        disabled
        v-model="form.parentCode"
      />
    </a-form-model-item>
    <a-form-model-item ref="catalogName" label="新建分类名称" prop="catalogName">
      <a-input v-model="form.catalogName" @blur="checkUniqueCatalog(0,{catalogName:form.catalogName})"/>
    </a-form-model-item>
    <a-form-model-item ref="catalogCode" label="新建分类代码" prop="catalogCode">
      <a-input v-model="form.catalogCode" @blur="checkUniqueCatalog(1,{catalogCode:form.catalogCode})"/>
    </a-form-model-item>
    <a-form-model-item ref="catalogDesc" label="分类描述" prop="catalogDesc">
      <a-input v-model="form.catalogDesc" />
    </a-form-model-item>
    <a-form-model-item ref="orderNum" label="排序" prop="orderNum">
      <a-input-number v-model="form.orderNum" style="width:100%"/>
    </a-form-model-item>
    <a-form-model-item :wrapper-col="{ span: 12, offset: 8 }">
      <a-button type="stop" style="margin-right: 20px;" @click="handleOk">
        取消
      </a-button>
      <a-button type="add" @click="onSubmit">
        确定
      </a-button>
    </a-form-model-item>
  </a-form-model>
  <!-- </a-modal> -->
</template>

<script type="text/ecmascript-6">
import { addKindModel, updateKindModel, checkUniqueCatalog } from '@/api/model/kindManger'
	export default {
		props: {
			treeData: {
				type: Array,
				default: () => []
			},
			parentCode: {
				type: String,
				default: ''
			},
			parentName: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				labelCol: { span: 8 },
				wrapperCol: { span: 12 },
				other: '',
				form: {
					parentName: '',
					parentCode: '',
					catalogName: '',
					catalogCode: '',
					catalogDesc: '',
					orderNum: ''
				},
				rules: {
					parentName: [
						{ required: true, message: '请选择所属上机分类', trigger: 'change' }
					],
					parentCode: [{ required: true, message: '请输入所属上级分类代码', trigger: 'change' }],
					catalogName: [
						{ required: true, message: '请输入新建分类名称', trigger: 'blur' },
						{ max: 40, message: '输入字符不能超过40个', trigger: 'blur' } ],
					catalogCode: [{ required: true, message: '请输入新建分类代码', trigger: 'blur' }]
				},
				submitType: null,
				dataId: ''
			}
		},
		methods: {
			onClassSelect(value, { title }) {
				this.form.parentCode = value
				setTimeout(() => { this.form.parentName = title }, 300)
			},
			onSubmit() {
				this.$refs.ruleForm.validate(valid => {
					if (valid) {
						if (this.submitType === 'add') {
							addKindModel(this.form).then((res) => {
								console.log(`res--add`, res)
								if (res.code === 200) {
									this.$emit('handleOk')
								}
							})
						} else if (this.submitType === 'edit') {
							updateKindModel(this.form).then((res) => {
								this.$emit('handleOk')
							})
						}
					} else {
						console.log('error submit!!')
						return false
					}
				})
			},
			handleOk() {
				this.$emit('handleOk')
			},
			checkUniqueCatalog(type, data) {
				console.log(`data`, type, data)
				checkUniqueCatalog({ id: this.dataId, ...data }).then((res) => {
					if (res.code === 200) {
						if (res.status === '1') {
							this.$message.info('属性已存在，请重新填写')
							type === 0 && this.$set(this.form, 'catalogName', '')
							type === 1 && this.$set(this.form, 'catalogCode', '')
						}
					}
				})
			}
		},
		watch: {
			parentCode: {
				deep: true,
				immediate: true,
				handler(val) {
					this.$set(this.form, 'parentCode', val)
					this.$set(this.form, 'parentName', val)
				}
			}
		}
	}
</script>

<style scoped>

</style>
