<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="ruleForm.parentids"
          :options="typeDropDatas"
          :props="props"
          placeholder="请选择知识库分类"
          clearable
          filterable
          change-on-select
          style="width: 100%;"/>
      </el-form-item>
      <el-form-item label="知识库标题" prop="title">
        <el-input v-model="ruleForm.title" placeholder="请输入知识库标题"/>
      </el-form-item>
      <el-form-item label="知识库内容" prop="content">
        <el-input v-model="ruleForm.content" type="textarea" autosize placeholder="请输入知识库内容"/>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="ruleForm.remark" type="textarea" autosize placeholder="请输入备注"/>
      </el-form-item>
      <el-form-item label="上传文件" >
        <el-upload
          ref="upload"
          :file-list="ruleForm.fileList"
          :action= "uploadData.uploadUrl"
          :data = "uploadData.uploaderFiles"
          :headers="{'Authorization': token}"
          :on-success="uploadSuccess"
          :on-remove="uploadRemove"
          :on-error="uploadError"
          class="uploadFiles"
          multiple
          list-type="text"
          name="files">
          <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getTreeList, addScore, editScore, getScoreDetail } from '@/api/repositoryManage/repositoryManage'
export default {
  name: 'AddOrEditScore',
  props: {
    scoreid: {
      type: String,
      default: ''
    },
    layerid: {
      type: String,
      default: ''
    }
  },
  computed: {
    ...mapGetters([
      'token'
    ])
  },
  data() {
    return {
      loading: false,
      ruleForm: {
        typeid: '', // 父节点id
        id: '', // 当前节点id
        title: '', // 分类名称
        content: '', // 分类内容
        remark: '',// 备注
        parentids: [],
        fileList:[]
      },
      fileList: [],// 上传文件数组
      uploadData: {// 文件上传数据
        uploadUrl: this.$store.getters.serverConfig.BASE_API + 'api/Knowledge/upload',
        uploaderFiles: {// 上传文件的参数
        },
      },
      rules: {
        parentids: [
          { required: true, message: '知识库分类不能为空' }
        ],
        title: [
          { required: true, message: '知识库标题不能为空' }
        ],
        content: [
          { required: true, message: '知识库内容不能为空' }
        ]

      },
      typeDropDatas: [], // 下拉分类
      // 自定义菜单下拉数据的key值
      props: {
        value: 'id',
        label: 'text'
      }
    }
  },
  created() {
    this.getTypeDrop().then(() => {
      if (this.scoreid) {
        this.ruleForm.id = this.scoreid
        this.getScoreDetails(this.scoreid)
      }
    })
  },
  methods: {
    // 获取分类下拉
    getTypeDrop() {
      return new Promise(resolve => {
        getTreeList().then(response => {
          if (response.state.toLowerCase() === 'success') {
            this.typeDropDatas = response.data
            // alert(JSON.stringify(response.data));
          }
        })
        resolve()
      })
    },
    // 获取菜单详情
    getScoreDetails(rid) {
      getScoreDetail(rid).then(response => {
        if (response.state.toLowerCase() === 'success') {
          const res = response.data
          this.ruleForm.title = res.F_Title // 标题
          this.ruleForm.content = res.F_Content // 内容
          this.ruleForm.remark = res.F_Description // 备注
          this.ruleForm.parentids = res.ParentId.map(Number).reverse()
          if(res.FileUrl.length!=0){
            res.FileUrl.map(item=>{
              this.ruleForm.fileList.push({
                name:item.F_Name,
                id:item.F_Id,
                url:item.F_Url,
              })
              this.fileList.push(item.F_Id)
            })
          }
        }
      })
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        // scoreid
        if (valid) {
          this.ruleForm.typeid = this.ruleForm.parentids[this.ruleForm.parentids.length - 1]
          this.loading = true
          const params={
            F_CategoryId:this.ruleForm.parentids.length==0?0:this.ruleForm.parentids[this.ruleForm.parentids.length-1],
            F_Title:this.ruleForm.title,          
            F_Content:this.ruleForm.content,          
            F_Description:this.ruleForm.remark,          
            F_RepositoryId:this.scoreid,          
            F_Url:this.fileList.length>0?this.fileList.toString():'',          
          }
          if (!this.scoreid) {
            // 添加
            addScore(params).then(response => {
              this.loading = false
              if (response.state.toLowerCase() === 'success') {
                this.$parent.$layer.close(this.layerid)
                this.$parent.scoreId=''
                this.$parent.treeclickId=''
                this.$parent.getList() // 重新加载父级数据
                this.$parent.getTreeLists() // 重新加载父级数据
                this.$message.success('恭喜你，知识库分类添加成功!')
              }
            }).catch(() => {
              this.loading = false
            })
            return
          }

          // 编辑
          editScore(params).then(response => {
            this.loading = false
            if (response.state.toLowerCase() === 'success') {
              this.$parent.$layer.close(this.layerid)
              this.$parent.scoreId=''
              this.$parent.treeclickId=''
              this.$parent.getList() // 重新加载父级数据
              this.$message.success('恭喜你，知识库分类编辑成功!')
            }
          }).catch(() => {
            this.loading = false
          })
        } else {
          this.$message.error('请输入有效的必填项信息!')
          return false
        }
      })
    },
    // 文件上传
    uploadSuccess(response, file, fileList) {
      if (response.state.toLowerCase() === 'success') {
      response.data.map(item=>{
          this.fileList.push(item.F_Id)
        })
      } else {
        this.$message.error(response.message)
      }
    },
    uploadError(err, file, fileList) {
      this.$message.error(err)
    },
    uploadRemove(file,fileList){
      this.fileList=[]
      fileList.map(item=>{
        this.fileList.push(item.response.data[0].F_Id)
      })
    }
  }

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

</style>

