<template>
  <div class="roleDrawer">
    <el-drawer
      :title="drawerTitle"
      :visible.sync="drawer"
      direction="rtl"
      size="40%"
      destroy-on-close
      :close-on-click-modal="false"
      :wrapperClosable="false"
      :show-close="false"
    >
      <el-form
        ref="roleForm"
        :model="roleForm"
        label-width="auto"
        :rules="rules"
        size="mini"
        style="margin: 10px"
      >
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="角色名:" prop="name">
              <el-input
                placeholder="请输入角色名"
                v-model.trim="roleForm.name"
                :disabled="roleFormDisabled"
                v-if="!roleFormDisabled"
                clearable
              ></el-input>
              <div v-else>{{ roleData.name }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="角色描述:" prop="remark">
              <el-input
                v-model="roleForm.remark"
                type="textarea"
                placeholder="请输入角色描述"
                :disabled="roleFormDisabled"
                v-if="!roleFormDisabled"
                clearable
              ></el-input>
              <div v-else>{{ roleData.remark }}</div>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="24">
            <el-form-item label="角色状态:" prop="valid">
              <el-switch
                v-model="roleForm.valid"
                :active-value="1"
                :inactive-value="2"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :disabled="roleFormDisabled"
              ></el-switch>
            </el-form-item>
          </el-col> -->
          <el-col :span="24">
            <el-form-item label="角色权限:" prop="menuIdList">
              <el-tree
                ref="tree"
                :data="treeData"
                node-key="id"
                :props="defaultProps"
                :show-checkbox="true"
                :default-checked-keys="roleData.menuIds"
                check-strictly
                accordion
              >
              </el-tree>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button
            type="primary"
            v-if="!roleFormDisabled"
            size="mini"
            :loading="loading"
            @click="submit"
            >提交</el-button
          >
          <el-button type="primary" size="mini" @click="handleClose"
            >取消</el-button
          >
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { getAllAuth, addOrUpdateRole } from "@/api/system/user.js";
export default {
  props: {
    drawerTitle: {
      type: String,
      default: "",
    },
    roleFormDisabled: {
      type: Boolean,
      default: false,
    },
    drawer: {
      type: Boolean,
      default: false,
    },
    roleData: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      roleForm: {
        name: null,
      },
      treeData: [],
      loading: false,
      defaultProps: {
        children: "children",
        label: "title",
      },
      rules: {
        name: [
          {
            required: true,
            message: "角色名不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    //权限列表
    getAllAuth()
      .then((res) => {
        if (res.code === 200) {
          this.treeData = res.data;
        } else {
          this.$message({
            message: res.msg,
            type: "warning",
          });
        }
      })
      .catch((err) => {
        console.log(err);
      });
  },
  watch:{
    roleFormDisabled(){
      this.treeData = this.treeDisabled(this.treeData)
    },
    drawer(val,oldVal){
      if(val){
        this.roleForm = this.roleData;
      }else{
        this.loading = false;
      } 
    }
  },
  methods: {
    //关闭
    handleClose() {
      this.$refs['roleForm'].clearValidate();
      this.$emit("handleClose", false);
    },

    //提交
    submit() {
      let formData = {};
      this.loading = true;
      formData.menuIdList = this.$refs.tree.getCheckedKeys();
      this.roleData ? (formData.id = this.roleData.id) : "";
      formData.remark = this.roleForm.remark;
      formData.valid = this.roleForm.valid;
      formData.name = this.roleForm.name;
      addOrUpdateRole(formData)
        .then((res) => {
          this.loading = false;
          if (res.code === 200) {
            this.$message({
              message: "操作成功",
              type: "success",
            });
            this.$emit("handleClose", false);
          } else {
            this.$message({
              message: res.msg,
              type: "warning",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //权限结构禁用
    treeDisabled(val) {
      let data = [];
      val.forEach((item) => {
        item.disabled = this.roleFormDisabled;
        data.push(item)
        if (item.children && item.children.length) {
          item.children = this.treeDisabled(item.children)
        }
      });
      return data;
    },
  },
};
</script>

<style>
</style>