<template>
  <div>
    <a-tabs default-active-key="1">
      <a-tab-pane key="1" tab="人员角色分配">
        <a-row>
          <!-- 角色列表 -->
          <a-col :span="5">
            <div class="cardTitle">所有角色</div>
            <a-button
              class="add-btn"
              style="margin: 10px"
              @click="add.show = true"
              >新增角色</a-button
            >
            <a-collapse accordion @change="rolechange">
              <a-collapse-panel
                v-for="(item, index) in afterroleList"
                :key="index"
                :header="item.name"
              >
                <a-button
                  type="link"
                  icon="form"
                  slot="extra"
                  @click.stop="editRole(item.id)"
                >
                </a-button>
                <a-button
                  type="link"
                  slot="extra"
                  style="color: #ff4d4f"
                  icon="delete"
                  @click.stop="delRole(item.id)"
                ></a-button>
                <div
                  v-for="(rolechild, indexs) in item.childrenList"
                  class="role-card"
                  :key="indexs"
                  @click="rolechoose(rolechild.id)"
                >
                  <span class="role-li">
                    <span>{{ rolechild.name || "无" }}</span>
                    <span v-show="rolechild.name"
                      ><a-button
                        type="link"
                        icon="form"
                        @click="editRole(rolechild.id)"
                      >
                      </a-button>
                      <a-button
                        type="link"
                        style="color: #ff4d4f"
                        icon="delete"
                        @click="delRole(rolechild.id)"
                      ></a-button
                    ></span>
                  </span>
                </div>
              </a-collapse-panel>
            </a-collapse>
          </a-col>
          <!-- 人员表格 -->
          <a-col :span="19">
            <div class="search-box">
              <a-space size="large">
                <a-input
                  v-model="searchForm.keyword"
                  placeholder="请输入申请人/公司名"
                />
                <a-button type="primary" @click="getPeople">查 询</a-button>
                <a-button @click="reset">重 置</a-button>
              </a-space>
            </div>
            <commonTable
              :columns="columns"
              :tableData="tableData"
              :ActionsList="ActionsList"
              @handleTableChange="handleTableChange"
              @Actions="Actions"
              @selectionChoosed="selectionChoosed"
            >
              <template v-slot:actionBox="data">
                <a-space size="small">
                  <a class="ant-dropdown-link" @click="sendRole(data.data)"
                    >分配角色</a
                  >
                </a-space>
              </template>
            </commonTable>
          </a-col>
        </a-row>
      </a-tab-pane>
      <a-tab-pane key="2" tab="角色权限设置" force-render>
        <role-permissions></role-permissions>
      </a-tab-pane>
    </a-tabs>
    <!-- <a-modal title="分配角色" :visible="send.show" @ok="sendSubmit" @cancel="sendClose">
		请选择角色：<el-cascader :options="roleList" :show-all-levels="false" :props="{ multiple: true, checkStrictly: true,value:'id',label:'name', children:'childrenList',disabled:'disabled'}" clearable  ></el-cascader></a-modal> -->
    <!-- 分配角色 -->
    <a-drawer
      title="分配角色"
      :width="720"
      :visible="send.show"
      :body-style="{ paddingBottom: '80px' }"
      @close="sendClose"
    >
      <div class="drawer-content">
        <div class="cardTitle">所有角色</div>
        <a-tree
          v-model="tree.checkedKeys"
          checkable
          :expanded-keys="tree.expandedKeys"
          :auto-expand-parent="tree.autoExpandParent"
          :selected-keys="tree.selectedKeys"
          :tree-data="roleList"
          :checkStrictly="true"
          :replaceFields="{
            children: 'childrenList',
            title: 'name',
            key: 'id',
          }"
          @expand="onExpand"
          @select="onSelect"
          @check="onCheck"
        />
      </div>
      <div class="drawer-footer">
        <a-button :style="{ marginRight: '8px' }" @click="sendClose">
          关闭
        </a-button>
        <a-button type="primary" @click="sendSubmit"> 提交 </a-button>
      </div>
    </a-drawer>
    <!-- 新增角色 -->
    <add-form
      :show="add.show"
      :title="add.title"
      :list="roleList"
      @close="addClose"
      @success="success"
      :id="add.editId"
    />
  </div>
</template>

<script>
import { columns, pagination, searchForm } from "./depend/config.js";
import {
	getrolelist,
	listByRole,
	assignRoles,
	roleDel,
} from "@/api/basic/role";
import rolePermissions from "./depend/permissions.vue";
import addForm from "./depend/form.vue";
export default {
	components: {
		rolePermissions,
		addForm,
	},
	data() {
		return {
			tree: {
				expandedKeys: [],
				autoExpandParent: true,
				checkedKeys: [],
				selectedKeys: [],
			},
			pagination,
			columns,
			searchForm,
			add: {
				show: false,
				title: "新增角色",
				editId: null,
			},
			tableChoosed: [],
			roleList: [],
			afterroleList: [],
			tableData: [], //   数据
			ActionsList: [],
			send: {
				show: false,
			},
			form: {
				manageUserId: undefined,
				roleId: "",
			},
		};
	},
	watch: {
		afterroleList: {
			handler(val) {
				val.forEach((ele, index) => {
					if (ele.childrenList === undefined || ele.childrenList === null) {
						this.afterroleList[index].childrenList = [{ disabled: true }];
					}
				});
			},
			deep: true,
		},
	},
	mounted() {
		this.getData();
		this.getPeople();
	},
	methods: {
		getData() {
			getrolelist().then((res) => {
				this.roleList = res.data;
				this.afterroleList = JSON.parse(JSON.stringify(this.roleList));
			});
		},
		getPeople() {
			listByRole({
				pageNum: this.pagination.current,
				size: this.pagination.pageSize,
				roleId: this.searchForm.roleId,
				keyword: this.searchForm.keyword,
			}).then((res) => {
				this.tableData = res.data.rows;
				this.pagination.total = res.data.total
			});
		},
		success() {
			this.getData();
		},
		addClose() {
			this.add.show = false;
			this.add.editId = undefined;
		},
		// 编辑角色
		editRole(id) {
			this.add.editId = id;
			this.add.title = "修改角色";
			this.add.show = true;
		},
		// 删除角色
		delRole(id) {
			this.$confirm({
				title: "是否删除",
				// okText:'删除',
				// cancelText:'取消',
				icon: "delete",
				onOk: () => {
					roleDel({ roleId: id }).then((res) => {
						if (res.code === 200) {
							this.$message.success(res.msg);
							this.getData();
						} else {
							this.$message.error(res.msg);
						}
					});
				},
			});
		},
		rolechange(data) {
			if (data) {
				this.searchForm.roleId = this.roleList[data].id;
			} else {
				this.searchForm.roleId = null;
			}
			this.getPeople();
		},
		rolechoose(data) {
			if (data) {
				this.searchForm.roleId = data;
			} else {
				this.searchForm.roleId = null;
			}
			this.getPeople();
		},
		reset() {
			this.searchForm.keyword = "";
			this.getPeople();
		},
		handleTableChange(pagination) {
			const pager = { ...this.pagination };
			pager.current = pagination.current;
			pager.pageSize = pagination.pageSize;
			this.pagination = pager;
		},
		sendRole(data) {
			this.form.manageUserId = data.id;
			let haveid = [];
			for (let name of data.roleNameList) {
				haveid.push(name.id);
			}
			this.tree.checkedKeys = haveid;
			this.send.show = true;
		},
		onExpand(expandedKeys) {
			// console.log('onExpand', expandedKeys);
			// if not set autoExpandParent to false, if children expanded, parent can not collapse.
			// or, you can remove all expanded children keys.
			this.tree.expandedKeys = expandedKeys;
			this.tree.autoExpandParent = false;
		},
		onCheck(checkedKeys) {
			const arr = [];
			this.tree.checkedKeys = checkedKeys;
			for (let k of this.tree.checkedKeys.checked) {
				arr.push(k);
			}
			this.form.roleId = arr.toString();
		},
		onSelect(selectedKeys, info) {
			console.log("onSelect", info);
			this.tree.selectedKeys = selectedKeys;
		},
		// multiRole(data){
		// 	console.log(data);
		// 	let arr = []
		// 	for(let a of data){
		// 		if(a.length > 0){
		// 			for(let b of a){
		// 				arr.push(b);
		// 			}
		// 		}else{
		// 			arr.push(a);
		// 		}
		// 	}
		// 	this.form.roleId = arr.toString()
		// },
		async sendSubmit() {
			const res = await assignRoles(this.form);
			if (res.code === 200) {
				this.$message.success(res.msg);
				this.getPeople();
				this.sendClose();
			} else {
				this.$message.error(res.msg);
			}
		},
		sendClose() {
			this.form.manageUserId = undefined;
			this.send.show = false;
		},
		Actions(data) {
			console.log(data);
		},
		selectionChoosed(data) {
			console.log(data);
			this.tableChoosed = data;
		},
	},
};
</script>

<style lang="less" scoped>
.role-card {
  line-height: 30px;
  font-size: 16px;
  cursor: pointer;
  border-bottom: 1px solid #d9d9d9;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.role-li {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
</style>