<template>
  <el-dialog
    :title="textMap[addOrEditData.status]"
    :visible.sync="addOrEditData.visible"
    @opened="initData"
    width="600px"
    top="10%"
  >
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="org"
      label-position="left"
      label-width="90px"
      style="width: 400px; margin-left:30px;"
    >
      <el-form-item label="上级组织" prop="parentId">
        <el-cascader
          v-model="org.parentId"
          :options="orgGroupList"
          :props="defaultProps"
          :show-all-levels="false"
          clearable
        />
      </el-form-item>

      <el-form-item label="组织名称" prop="name">
        <el-input v-model="org.name" clearable />
      </el-form-item>

      <el-form-item label="组织分类" prop="category">
        <el-select v-model="org.category" class="filter-item" clearable>
          <el-option
            v-for="orgGroup in orgCategory"
            :key="orgGroup.value"
            :label="orgGroup.label"
            :value="orgGroup.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="排序" prop="sortCode">
        <el-input v-model="org.sortCode" clearable />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button
        type="primary"
        :loading="btnloading"
        @click="addOrEditData.status === 'create' ? createData() : updateData()"
        >确认</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import waves from "@/directive/waves"; // 水波纹指令
import { orgCategory } from "@/constants/index";
/* 组织 */
import { fetchGropList, createOrg, updateOrg } from "@/api/auth/org";

export default {
  name: "addOrEditOrgDialog", //添加 或 编辑组织信息
  directives: {
    waves
  },
  props: ["addOrEditData"],
  data() {
    return {
      orgCategory,
      btnloading: false,
      defaultProps: {
        label: "name",
        value: "id",
        checkStrictly: true,
        emitPath: false
      },
      org: {
        parentId: null,
        name: null,
        category: null,
        sortCode: null
      },
      textMap: {
        create: "新建组织",
        update: "编辑组织"
      },
      orgGroupList: [],
      rules: {
        name: [{ required: true, message: "请填写组织名称", trigger: "blur" }],
        parentId: [
          { required: true, message: "请选择上级组织", trigger: "change" }
        ],
        category: [
          { required: true, message: "请选择组织分类", trigger: "change" }
        ],
        sortCode: [{ required: true, message: "请输入排序", trigger: "blur" }]
      }
    };
  },
  methods: {
    async initData() {
      //对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
      });

      await fetchGropList().then(response => {
        const data = response.data;
        this.orgGroupList = [
          { id: 0, name: "顶级", weight: 1, children: data }
        ];
      });
      if (this.addOrEditData.status === "update") {
        const data = { ...this.addOrEditData.orgData };
        this.org = data;
      }
    },
    createData() {
      //保存组织
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.btnloading = true;
          createOrg(this.org)
            .then(() => {
              this.$notify({
                title: "成功",
                message: "新建成功",
                type: "success",
                duration: 3000
              });
              //重新加载 -- 调用父节点
              this.$emit("refreshTable");
            })
            .finally(() => {
              this.btnloading = false;
            });
        }
      });
    },
    updateData() {
      //提交更新
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          updateOrg(this.org)
            .then(() => {
              this.$notify({
                title: "成功",
                message: "编辑成功",
                type: "success",
                duration: 3000
              });
              //重新加载 -- 调用父节点
              this.$emit("refreshTable");
            })
            .finally(() => {
              this.btnloading = false;
            });
        }
      });
    },
    handleClose() {
      this.$refs["dataForm"].resetFields();
      this.addOrEditData.visible = false;
      this.org = {
        parentId: null,
        name: null,
        category: null,
        sortCode: null
      };
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-cascader,
.el-select {
  width: 100%;
}
</style>
