<template>
  <el-dialog
    v-dialogDrag
    :title="departTitle"
    :visible="showdialog"
    center
    style="width: 60%; margin: auto"
    @close="cancelForm"
    :close-on-click-modal="false"
  >
    <el-form
      class="form"
      :class="disabled ? 'disable-form' : ''"
      :disabled="disabled"
      label-width="120px"
      :model="data"
      :rules="rules"
      ref="ruleForm"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="类型名称：" prop="name">
            <el-input v-model="data.name" :placeholder="placeholder"></el-input>
          </el-form-item>
          <el-form-item label="类型说明：" prop="note">
            <el-input
              style="margin-left: 12px"
              type="textarea"
              v-model="data.note"
              :placeholder="placeholder"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" v-if="!disabled" @click="submitForm()"
        >确 定</el-button
      >
      <el-button @click="cancelForm()">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {
  batchImportApi,
  updateByOrganizationId,
  addByOrganizationId,
} from "@/api/staffApi.js";
export default {
  props: ["showdialog", "data", "disabled", "isAdd"],

  components: {},
  data() {
    return {
      title: "",
      departTitle: "组织详情",
      placeholder: "请填写",
      rules: {
        name: [{ required: true, message: "请输入", trigger: "blur" }],
      },
    };
  },

  methods: {
    cancelForm() {
      //取消关闭
      this.$emit("update:showdialog", false);
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) {
          return;
        }
        if (this.isAdd) {
          addByOrganizationId(this.data).then((res) => {
            if (res.status === 200) {
              this.$message.success("添加成功");
              this.cancelForm()
              this.$emit("getData");
            }
          });
        } else {
          updateByOrganizationId(this.data).then((res) => {
            if (res.status === 200) {
              this.$message.success("保存成功");
              this.cancelForm()
              this.$emit("getData");


            }
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.disable-form {
  /deep/ {
    .el-input__inner {
      border: none !important;
    }
  }
}

.form {
  padding: 18px 32px;
  max-height: 50vh;
  overflow: auto;
  /deep/ .el-input {
    margin-left: 12px;
  }
  /deep/ .el-form-item__content {
    .el-select {
      width: 100%;
    }
  }
}
</style>
