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

      <el-form-item label="职位名称" prop="name">
        <el-input v-model="formData.name" clearable />
      </el-form-item>

      <el-form-item label="职位分类" prop="category">
        <el-select v-model="formData.category" class="filter-item" clearable>
          <el-option
            v-for="orgGroup in positionCategory"
            :key="orgGroup.value"
            :label="orgGroup.label"
            :value="orgGroup.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="排序" prop="sortCode">
        <el-input v-model="formData.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="addPositionData.status === 'create' ? createData() : updateData()"
        >确认</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import waves from "@/directive/waves"; // 水波纹指令
import { positionCategory } from "@/constants/index";
/* 组织 */
import { dynamicTree, createPosition, updatePosition } from "@/api/auth/position";

export default {
  name: "addOrEditOrgDialog", //添加 或 编辑组织信息
  directives: {
    waves
  },
  props: ["addPositionData"],
  data() {
    return {
      positionCategory,
      btnloading: false,
      defaultProps: {
        label: "name",
        value: "id",
        checkStrictly: true,
        emitPath: false
      },
      formData: {
        orgId: null,
        name: null,
        category: null,
        sortCode: null
      },
      textMap: {
        create: "新建职位",
        update: "编辑职位"
      },
      orgGroupList: [],
      rules: {
        name: [{ required: true, message: "请填写职位名称", trigger: "blur" }],
        orgId: [
          { 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 dynamicTree().then(response => {
        const data = response.data;
        this.orgGroupList = response.data;
      });
      if (this.addPositionData.status === "update") {
        const data = { ...this.addPositionData.orgData };
        this.formData = data;
      }
    },
    createData() {
      //保存组织
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.btnloading = true;
          createPosition(this.formData)
            .then(() => {
              this.$notify({
                title: "成功",
                message: "新建成功",
                type: "success",
                duration: 3000
              });
              //重新加载 -- 调用父节点
              this.$emit("refreshTable");
            })
            .finally(() => {
              this.btnloading = false;
            });
        }
      });
    },
    updateData() {
      //提交更新
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          updatePosition(this.formData)
            .then(() => {
              this.$notify({
                title: "成功",
                message: "编辑成功",
                type: "success",
                duration: 3000
              });
              //重新加载 -- 调用父节点
              this.$emit("refreshTable");
            })
            .finally(() => {
              this.btnloading = false;
            });
        }
      });
    },
    handleClose() {
      this.$refs["dataForm"].resetFields();
      this.addPositionData.visible = false;
      this.formData = {
        orgId: null,
        name: null,
        category: null,
        sortCode: null
      };
    }
  }
};
</script>

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