<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="type === 3 ? 'disable-form' : ''"
      :disabled="type === 3"
      label-width="120px"
      :model="data"
      :rules="rules"
      ref="ruleForm"
    >
      <el-row>
        <el-col
          :span="24"
          v-if="type === 1"
          style="text-align: center; margin-left: 26px; margin-bottom: 16px"
        >
          <el-tag type="success">
            <i class="el-icon-success" style="color: #52c41a"></i>
            已成功复制【业务管理员】角色的权限数据，请完善角色信息完成创建
          </el-tag>
        </el-col>
        <el-col :span="24">
          <el-form-item label="角色名称：" prop="roleName">
            <el-input
              v-model="data.roleName"
              :placeholder="placeholder"
            ></el-input>
          </el-form-item>
          <el-form-item label="角色说明：" prop="remark">
            <el-input
              style="margin-left: 12px"
              type="textarea"
              v-model="data.remark"
              :placeholder="placeholder"
            ></el-input>
          </el-form-item>
          <el-form-item label="排序值：" prop="seq">
            <el-input
              type="number"
              v-model="data.seq"
              :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="type !== 3" @click="submitForm()"
        >确 定</el-button
      >
      <el-button @click="cancelForm()">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { addRole, editRole, copyRole } from "@/api/staffApi.js";
export default {
  props: ["showdialog", "data", "type"] /* 
  type 0 新增  
  type 1 复制  
  type 2 编辑  
  type 3 详情  
  */,

  components: {},
  data() {
    return {
      title: "",
      organizationId: localStorage.domainId,
      placeholder: "请填写",
      rules: {
        roleName: [{ required: true, message: "请输入", trigger: "blur" }],
        seq: [{ required: true, message: "请输入", trigger: "blur" }],
      },
    };
  },
  computed: {
    departTitle() {
      switch (this.type) {
        case 0:
          return "新增角色";
        case 1:
          return "复制角色";
        case 2:
          return "编辑角色";
        case 3:
          return "角色详情";
      }
      return "角色";
    },
  },
  methods: {
    cancelForm() {
      //取消关闭
      this.$emit("update:showdialog", false);
    },
    submitForm() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          let res;
          const { remark, roleName, seq, id } = this.data;
          switch (this.type) {
            case 0:
              res = await addRole(
                { ...this.data, sourceId: 0 },
                this.organizationId
              );
              break;
            case 1:
              res = await copyRole(
                { remark, roleName, seq, sourceId: id },
                this.organizationId
              );
              break;
            case 2:
              res = await editRole(
                { remark, roleName, seq, id },
                this.organizationId
              );
              break;

            default:
              break;
          }
          if (res.status == 200) {
            this.$message.success("操作成功");
            this.$emit("callBack");
            this.cancelForm();
          } else {
            this.$message.error(res.message || "操作失败");
          }
        }
      });
    },
  },
};
</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>
