<template>
  <div v-loading="loading">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="150px" class="">
      <el-form-item label="上级分类" prop="parentids">
        <el-cascader
          v-model="parentids"
          :options="typeDropDatas"
          :props="props"
          placeholder="请选择上级分类,默认是顶级分类"
          clearable
          filterable
          change-on-select
          @change=" handleChange"
          style="width: 100%;"/>
      </el-form-item>
      <el-form-item label="分类名称" prop="name">
        <el-input v-model="ruleForm.name" placeholder="请输入分类名称,最多25位" maxlength="25" />
      </el-form-item>
      <el-form-item label="排列序号" prop="sort">
        <el-input v-model.number="ruleForm.sort" placeholder="请输入排列序号" maxlength="10" />
      </el-form-item>
      <!-- <el-form-item label="备注" prop="remark">
			<el-input type="textarea" autosize v-model="ruleForm.remark" placeholder="请输入分类备注"></el-input>
			</el-form-item> -->
      <el-form-item>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getTreeList, addType, editType, getTypeDetail } from '@/api/repositoryManage/repositoryManage'
export default{
  name: 'AddOrEditKnowledge',
  props: {
    rowid: {
      type: String,
      default: ''
    },
    layerid: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      parentids: [],
      ruleForm: {
        parentid: '', // 父节点id
        id: '', // 当前节点id
        sort: '', // 序号
        name: '' // 分类名称
        // remark:''//备注
      },
      rules: {
        sort: [
          { required: true, message: '排列序号不能为空' },
          { type: 'number', message: '排列序号必须为数字' }
        ],
        name: [
          { required: true, message: '分类名称不能为空' }
        ]

      },
      typeDropDatas: [], // 下拉分类
      // 自定义菜单下拉数据的key值
      props: {
        value: 'id',
        label: 'text'
      }
    }
  },
  created() {
    this.getTypeDrop().then(() => {
      if (this.rowid) {
        this.ruleForm.id = this.rowid
        this.getTypeDetails(this.rowid)
      }
    })
  },
  methods: {
    // 获取分类下拉
    getTypeDrop() {
      return new Promise(resolve => {
        getTreeList().then(response => {
          if (response.state.toLowerCase() === 'success') {
            this.typeDropDatas = response.data
          }
        })
        resolve()
      })
    },
    // 获取菜单详情
    getTypeDetails(rid) {
      getTypeDetail(rid).then(response => {
        if (response.state.toLowerCase() === 'success') {
          const res = response.data
          this.ruleForm.name = res.F_CategoryName // 分类名称
          this.ruleForm.sort = res.F_Sort // 排序
          this.parentids = res.ParentId.map(Number).reverse()
        }
      })
    },
    //点击获取id
    handleChange(value) {
      this.ruleForm.parentid = value[value.length-1]
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if(this.parentids.length!=0){
            if(this.rowid == this.parentids[this.parentids.length-1]){
              this.$message.info('不能选择的上级分类')
              return false
            }
          }
          this.loading = true
          const params={
            F_CategoryName:this.ruleForm.name,
            F_Sort:this.ruleForm.sort,
            F_CategoryId:this.rowid,
            F_ParentId:this.parentids.length==0?0:this.parentids[this.parentids.length-1],
          }
          if (!this.rowid) {
            console.log(this.parentids)
            this.ruleForm.parentid = this.parentids[this.parentids.length - 1]
            // 添加
            addType(params).then(response => {
              this.loading = false
              if (response.state.toLowerCase() === 'success') {
                this.$parent.$layer.close(this.layerid)
                this.$parent.getTreeLists() // 重新加载父级数据
                this.$message.success('恭喜你，知识库分类添加成功!')
              }
            }).catch(() => {
              this.loading = false
            })
            return
          }

          // 编辑
          editType(params).then(response => {
            this.loading = false
            if (response.state.toLowerCase() === 'success') {
              this.$parent.$layer.close(this.layerid)
              this.$parent.getTreeLists() // 重新加载父级数据
              this.$message.success('恭喜你，知识库分类编辑成功!')
              this.$parent.treeclickId=''
            }
          }).catch(() => {
            this.loading = false
          })
        } else {
          this.$message.error('请输入有效的必填项信息!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>

