<template>

  <a-form-model
    ref="ruleBasicForm"
    :model="basicForm"
    :rules="rules"
    :label-col="labelCol"
    :wrapper-col="wrapperCol">
    <a-form-model-item ref="taskName" label="任务名称:" prop="taskName">
      <a-input v-model="basicForm.taskName" placeholder="请输入任务名称" />
    </a-form-model-item>
    <a-form-model-item ref="taskDescription" label="任务描述:" prop="taskDescription">
      <a-textarea v-model="basicForm.taskDescription" placeholder="请输入任务描述" :auto-size="{ minRows: 5, maxRows: 10 }" />
    </a-form-model-item>

    <a-form-model-item ref="treeId" label="所属目录:" prop="treeId">
      <a-tree-select
        v-model="basicForm.treeId"
        :replaceFields="{
          title:'catalog',
          key: 'id',
          children:'children',
          value:'id'
        }"
        style="width: 100%"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        :tree-data="deptOptions"
        placeholder="请选择所属目录"
        tree-default-expand-all
        @change="getDirectorylist">
      </a-tree-select>
    </a-form-model-item>

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

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

export default {
  props: {},
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      deptOptions: [],

      basicForm: {
        taskName: '',
        taskDescription: '',
        treeId: ''
      },
      rules: {
        taskName: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
        treeId: [{ required: true, message: '请选择所属目录', trigger: ['blur', 'change'] }]
      }
    }
  },
  mounted() {
    this.getClassTree()
  },
  methods: {
    // 所属目录
    getClassTree() {
       getClassTreeApi().then((res) => {
        if (res.code === 200) {
          this.deptOptions = res.data.rows
          // console.log('获取目录:', this.deptOptions)
        }
      })
    },
    getDirectorylist() {},

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

<style scoped>
</style>
