<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="500px" :before-close="handleClose" :append-to-body="true"  :close-on-click-modal="false">
      <el-form v-if="dialogVisible" ref="ruleForm" :model="form2" :rules="rules" label-position="left" label-width="100px">
        <el-form-item label="所属组" prop="parentId" v-if="form2.type == 2">
          <el-select v-model="form2.parentId" filterable allow-create placeholder="请选择" style="width: 100%">
            <el-option v-for="item in treeList" :label="item.name" :key="item.id" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="`${form2.type==2 ? '项目名称' : '组名称'}`" prop="name">
          <el-input v-model="form2.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="显示顺序" prop="sort">
          <el-input v-model.number="form2.sort" type="number" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="使用权限" prop="permissions" v-if="form2.type">
          <el-select v-model="form2.permissions" placeholder="请选择" style="width: 100%">
            <el-option v-for="item in $constants.permissions2" :label="item.label" :key="item.value" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">关 闭</el-button>
        <el-button type="primary" @click="handleConfirm" :loading="loadingBtn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  components: {},
  props: {
    projectId:{
      default:0
    },
    treeList:{
      default:()=>{
        return []
      }
    }
  },
  data() {
    return {
      title:'',
      dialogVisible:false,
      form2:{},
      loadingBtn:false,
      rules: {
        parentId: [
          {required: true, message: '请选择上级目录', trigger: 'change'},
        ],
        name: [
          {required: true, message: '请输入名称', trigger: 'blur'},
        ],
        permissions: [
          {required: true, message: '请输选择使用权限', trigger: 'change'},
        ],
        sort: [
          {required: true, message: '请输入显示次序', trigger: 'blur'},
        ],
      },
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
    open(title,form){
      console.log(form)
      this.title = title
      this.form2 = form
      this.dialogVisible = true
    },
    handleClose(){
      this.dialogVisible = false
    },
    handleConfirm(){
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.form2.projectId = this.projectId
          var a = ''
          var api = ''
          if(this.form2.id){
            a = '编辑'
            api = 'editAnalyseGroup'
          }else{
            a = '新增'
            api = 'addAnalyseGroup'
          }
          this.$api[api](this.form2).then(response=>{
            if(response.code == 200){
              this.$message.success(a+'成功')
              this.$emit('save',true)
              this.handleClose()
            }
          }).catch(error=>{
            this.$message.error(a+'失败')
          })
        }
      })
    },
  },
};
</script>
<style lang="scss" scoped>
</style>