<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="modelName" label="模型名称" prop="modelName">
      <a-input v-model.trim="form.modelName" @blur="checkUniqueModel(0,{modelName:form.modelName},'模型名称')" />
    </a-form-model-item>
    <a-form-model-item ref="modelCode" label="模型代码" prop="modelCode">
      <a-input v-model.trim="form.modelCode" @blur="checkUniqueModel(1,{modelCode:form.modelCode},'模型代码')" />
    </a-form-model-item>
    <a-form-model-item ref="catalogName" label="所属主数据分类" prop="catalogName">
      <a-tree-select
        v-model="form.catalogName"
        :allowClear="true"
        style="width: 100%"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        :tree-data="treeData"
        tree-node-filter-prop="title"
        show-search
        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="catalogCode" label="参考标准文件" prop="catalogCode">
      <a-select v-model="form.fileName" placeholder="请选择参考标准文件" @change="fileChange">
        <a-select-option
          v-for="item in fileList"
          :value="item.id"
          :key="item.id">
          {{ item.fileName }}
        </a-select-option>
      </a-select>
    </a-form-model-item>
    <a-form-model-item ref="modelDesc" label="模型描述" prop="modelDesc">
      <a-textarea :auto-size="{ minRows: 2, maxRows: 6 }" v-model="form.modelDesc" />
    </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 { addModel, updateModel, checkUniqueModel } from '@/api/model/modelManger'
import { listFile } from '@/api/standard/standardFile'

	export default {
		props: {
			treeData: {
				type: Array,
				default: () => []
			},
			catalogId: {
				type: String,
				default: '0'
			}
		},
		data() {
			return {
				labelCol: { span: 8 },
				wrapperCol: { span: 12 },
				other: '',
				form: {
					modelName: '',
					modelCode: '',
					catalogName: '',
					catalogId: '',
					fileName: '',
					fileId: '',
					modelDesc: '',
					orderNum: ''
				},
				fileList: [],
				rules: {
					modelName: [
						{ required: true, message: '请输入模型名称', trigger: 'blur' },
						{ max: 40, message: '输入字符不能超过40个', trigger: 'blur' }
					],
					modelCode: [
						{ required: true, message: '请输入模型代码', trigger: 'blur' },
						{ pattern: '^[A-Za-z0-9]+$', message: '请输入字母或者数字', trigger: 'blur' }
					],
					catalogName: [
						{ required: true, message: '请选择所属主数据分类', trigger: '["blur","change"]' }
					]
				},
				submitType: '',
				dataId: ''
			}
		},
		mounted() {
			this.getFileList()
		},
		methods: {
			getFileList() {
				listFile({ status: 0 }).then((res) => {
					if (res.code === 200) {
						this.fileList = res.rows
					}
				})
			},
			fileChange(e) {
				this.form.fileId = e
			},
			onClassSelect(value, { title }) {
				this.form.catalogId = value
				setTimeout(() => { this.form.catalogName = title }, 300)
			},
			onSubmit() {
				this.$refs.ruleForm.validate(valid => {
					if (valid) {
						if (this.submitType === 'add') {
							console.log(`this.form`, this.form.catalogId)
							addModel(this.form).then((res) => {
								this.$emit('handleOk')
							})
						} else if (this.submitType === 'edit') {
							updateModel(this.form).then((res) => {
								this.$emit('handleOk')
							})
						}
					} else {
						console.log('error submit!!')
						return false
					}
				})
			},
			handleOk() {
				this.$emit('handleOk')
			},
			checkUniqueModel(type, data, fromName) {
				checkUniqueModel({ id: this.dataId, ...data }).then(res => {
					if (res.code === 200) {
						if (res.status === '1') {
                        this.$message.info(`${fromName}已存在,请重新填写`)
                        type === 0 && this.$set(this.form, 'modelName', '')
                        type === 1 && this.$set(this.form, 'modelCode', '')
                        }
					}
				})
			}
		},
		watch: {
			catalogId: {
				deep: true,
				immediate: true,
				handler(val) {
					this.$set(this.form, 'catalogId', val)
					this.$set(this.form, 'catalogName', val)
				}
			}
		}
	}
</script>

<style scoped>

</style>
