<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" @close="handleClose">
      <el-form ref="roleForm" :model="roleForm" label-width="auto" :rules="rules" size="mini" style="margin: 10px"
        @submit.native.prevent>
        <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 maxlength="255" show-word-limit></el-input>
              <div v-else>{{ roleData.remark }}</div>
            </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" accordion v-loading="treeLoading">
              </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,
      treeLoading: false,
      defaultProps: {
        children: "children",
        label: "title",
      },
      rules: {
        name: [
          {
            required: true,
            message: "角色名不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    roleFormDisabled() {
      this.treeData = this.treeDisabled(this.treeData);
    },
    drawer(val, oldVal) {
      if (val) {
        this.allAuth()
        this.roleForm = this.roleData;
      } else {
        this.loading = false;
      }
    },
  },
  methods: {
    //权限列表
    allAuth() {
      this.treeLoading = true
      getAllAuth()
        .then((res) => {
          this.treeLoading = false
          if (res.code === 200) {
            this.treeData = this.treeDataInfo(res.data);
          } else {
            this.msgWarning(res.msg)
          }
        })
        .catch((err) => {
          this.treeLoading = false
          console.log(err);
        });
    },
    //关闭
    handleClose() {
      this.$refs["roleForm"].clearValidate();
      this.$emit("handleClose", false);
    },
    //提交
    submit() {
      let formData = {};
      this.loading = true;
      let arr = [];
      arr = this.$refs.tree.getCheckedKeys().filter((item, index) => {
        return this.$refs.tree.getCheckedKeys().indexOf(item) == index
      })
      formData.menuIdList = arr;
      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.msgSuccess('操作成功,需重新登录已获取新权限。')
            this.$emit("handleClose", false);
          } else {
            this.msgWarning(res.msg)
          }
        })
        .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;
    },
    //权限结构数据整理
    treeDataInfo(val) {
      let data = [];
      val.forEach((item) => {
        let menuItem = {};
        menuItem.id = item.id;
        menuItem.title = item.title;
        menuItem.disabled = this.roleFormDisabled;
        data.push(menuItem)
        if (item.children && item.children.length) {
          menuItem.disabled = this.roleFormDisabled;
          menuItem.children = this.treeDataInfo(item.children);
          menuItem.children.unshift({ id: item.id, title: `${item.title}(菜单)`, disabled: this.roleFormDisabled  })
        }
      });
      return data;
    },
  },
};
</script>

<style>

</style>