<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: 300px;"
          ></el-cascader>
      </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="score">
        <el-input v-model.number="ruleForm.score" placeholder="请输入分值" maxlength="10" show-word-limit/>
      </el-form-item>
      <el-form-item label="排列序号" prop="sort">
        <el-input v-model.number="ruleForm.sort" placeholder="请输入排列序号" maxlength="10" show-word-limit/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {
  getqualityDrop,
  addScore,
  editScore,
  getScoreDetail
} from '@/api/qualityCheck/quotaManagement'
export default {
  name: 'AddOrEditScore',
  props: {
    scoreid: {
      type: String,
      default: ''
    },
    parentidArr: {
      type: Array,
      default: () => [''] // 父级ID,无父级ID为''
    },
    layerid: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      ruleForm: {
        parentids: [],
        typeid: '', // 父节点id
        id: '', // 当前节点id
        sort: '', // 序号
        score: '', // 分值
        title: '', // 分类名称
        content: '', // 分类内容
        remark: '' // 备注
      },
      rules: {
        sort: [
          {
          required: true,
          message: '排列序号不能为空'
        },
        {
          type: 'number',
          message: '排列序号必须为数字'
        }
        ],
        score: [{
          required: true,
          message: '分值不能为空'
        },
        {
          type: 'number',
          message: '分值必须为数字'
        }
        ],
        title: [{
          required: true,
          message: '指标标题不能为空'
        }],
        parentids: [{
          trigger: 'change',
          required: true,
          message: '指标分类不能为空'
        }],
        content: [{
          required: true,
          message: '指标内容不能为空'
        }]

      },
      typeDropDatas: [], // 下拉分类
      // 自定义菜单下拉数据的key值
      props: {
        value: 'id',
        label: 'text'
      }
    }
  },
  created() {
    this.getTypeDrop().then(() => {
      // this.parentids = this.parentidArr;
      if (this.scoreid) {
        this.ruleForm.id = this.scoreid
        // console.log(this.scoreid)
        this.getScoreDetails(this.scoreid)
      }
    })
  },
  methods: {
    // 获取分类下拉
    getTypeDrop() {
      return new Promise(resolve => {
        getqualityDrop().then(response => {
          if (response.state.toLowerCase() === 'success') {
            this.typeDropDatas = 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.sort = res.F_Sort // 排序
          this.ruleForm.score = res.F_Score // 分值
          if(res.CategoryId.length!=0){
            this.ruleForm.parentids=res.CategoryId.map(Number).reverse()
          }
        }
      })
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        // scoreid
        if (valid) {
          this.loading = true
          return new Promise(resolve=>{
            const params={
              F_CategoryId:this.ruleForm.parentids==0?0:this.ruleForm.parentids[this.ruleForm.parentids.length-1],
              F_Score:this.ruleForm.score,
              F_Title:this.ruleForm.title,
              F_Content:this.ruleForm.content,
              F_Sort:this.ruleForm.sort,
              F_IndexId:this.scoreid
            }
             if (!this.scoreid) {
            // 添加
            addScore(params).then(response => {
              this.loading = false
              if (response.state.toLowerCase() === 'success') {
                this.$parent.$layer.close(this.layerid)
                this.$parent.getList() // 重新加载父级数据
                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.getList() // 重新加载父级数据
              this.$message.success('恭喜你，分类指标编辑成功!')
              this.$parent.scoreId='';
            }
          }).catch(() => {
            this.loading = false
          })
          })
         
        } else {
          this.$message.error('请输入有效的必填项信息!')
          return false
        }
      })
    }
  }

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

</style>
