<template>
  <a-form-model
    ref="treeForm"
    :model="treeForm"
    :rules="rules"
    :label-col="labelCol"
    :wrapper-col="wrapperCol">
    <a-form-model-item ref="pid" label="父级目录:" prop="pid">
      <a-tree-select
        v-model="treeForm.pid"
        :replaceFields="{
          title:'catalog',
          key: 'id',
          children:'children',
          value:'id'
        }"
        style="width: 100%"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        :tree-data="treeData"
        placeholder="请选择父级目录"
        tree-default-expand-all
      >
      </a-tree-select>

    </a-form-model-item>

    <a-form-model-item ref="catalog" label="目录名称:" prop="catalog">
      <a-input v-model="treeForm.catalog" placeholder="请输入目录名称" />
    </a-form-model-item>
    <a-form-model-item>
      <div class="btn-list">
        <a-button type="stop" style="margin-right: 20px;" @click="treeHandleOk">
          取消
        </a-button>
        <a-button type="add" @click="onSubmit">
          确定
        </a-button>
      </div>
    </a-form-model-item>

  </a-form-model>
</template>

<script type="text/ecmascript-6">
import { getTreeAdd, getTreeDetail, getTreeUpdate } from '@/api/quality/tasks'

export default {
  props: {
    treeData: {
      type: Array,
      default: () => {}
    }
  },
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      submitType: null,

      treeForm: {
        pid: '',
        catalog: ''
      },
      rules: {
        pid: [{ required: true, message: '请选择父级目录', trigger: ['blur', 'change'] }],
        catalog: [{ required: true, message: '请输入目录名称', trigger: 'blur' }]
      }
    }
  },
  mounted() {
  },
  methods: {

    getTreeDetail(id) {
      getTreeDetail(id).then((res) => {
        if (res.code === 200) {
          this.treeForm = res.data
          // console.log('treeForm：', this.treeForm)
        }
      })
    },
    // 取消
    treeHandleOk() {
      this.$emit('treeHandleOk')
    },

    // 提交
    onSubmit() {
      if (this.validataForm()) {
        if (this.submitType === 'add') {
          this.treeModalVisible = false
          getTreeAdd(this.treeForm).then((res) => {
            if (res.code === 200) {
              console.log(`res--add`, this.treeForm)
              this.treeHandleOk()
            }
          })
        } else if (this.submitType === 'edit') {
          getTreeUpdate(this.treeForm).then((res) => {
            console.log(`res--edit`, this.treeForm)
              this.treeHandleOk()
          })
        }
      }
    },

    // 子组件校验表单
    validataForm() {
      var flag = false
      this.$refs.treeForm.validate((valid) => {
        if (valid) {
          // console.log('成功！！')
          flag = true
        } else {
          console.log('error submit!!')
          flag = false
        }
      })
      return flag
    }
  }
}
</script>

<style scoped>
.btn-list {
    margin: 20px 0 0;
    text-align: center;
  }
</style>
