<!--
机构授权
@Author: linqian
@Date: 2021-04-02 09:08
-->
<template>
  <div>
    <dg-row gutter="1rem">
      <!-- 机构列表 -->
      <dg-col :span="5">
        <dg-card header="机构列表" class="box-card">
          <org-tree
            ref="tree"
            class="u-pm__left"
            treeHeight="calc(100vh - 18rem)"
            :search="true"
            paddingRight="15px"
            @handleGetNode="handleGetNode"
            @submitRootNode="handleGetNode"
          ></org-tree>
        </dg-card>
      </dg-col>

      <!-- 权限设置 -->
      <scrollCard contentHeight="calc(100vh - 15.5rem)" :colSpan="19">
        <template #cardHeader>
          <div style="display: flex; justify-content: space-between">
            <span>角色列表</span>
            <dg-button type="primary" :icon="'保存' | optIcon" @click="handleSave()">保存</dg-button>
          </div>
        </template>

        <!-- 角色搜索栏 -->
        <search-bar :conditionForm="roleConditionForm" @submitSearch="receiveRoleSearch"></search-bar>

        <!-- 角色列表 -->
        <new-table
          ref="table"
          :condition="condition"
          :tableUrl="tableUrl"
          rowSpanKey="appId"
          row-key="roleId"
          @selection-change="handleSelectChange"
          :defaultSelectRows="checkRoleList"
          lazyLoad
        >
          <dg-table-column prop="appName" label="应用系统名称" min-width="120" align="center"> </dg-table-column>
          <dg-table-column type="selection" reserve-selection width="50" align="center"></dg-table-column>
          <dg-table-column prop="roleName" label="角色名称" align="center"> </dg-table-column>
        </new-table>
      </scrollCard>
    </dg-row>
  </div>
</template>

<script>
import orgTree from '@/components/tree';
import scrollCard from '@/components/scroll-card';
import searchBar from '@/components/search-bar';
import newTable from '@/components/new-table';
import * as roleAuthApi from '@/api/role-auth-info';
import * as Api from '@/api/org-role-manage';
export default {
  components: {
    orgTree,
    scrollCard,
    searchBar,
    newTable
  },
  data() {
    return {
      roleConditionForm: [
        {
          label: '应用系统名称',
          name: 'appId',
          op: '=',
          value: '',
          component: 'SelectApp',
          apiUrl: roleAuthApi.roleViewApplication,
          valueName: 'id',
          labelName: 'name'
        },
        {
          label: '角色名称',
          name: 'roleName',
          op: 'like',
          value: '',
          component: 'ElInput',
          attr: {
            style: 'width: 150px'
          }
        }
      ],
      condition: {
        appId: {
          value: '',
          op: '='
        },
        roleName: {
          value: '',
          op: 'like'
        }
      },
      orgId: "",
      tableUrl: Api.tableUrl,
      pageOptList: ['保存'],
      checkRoleList: [],
      deleteIds: [],
      updateRoles: []
    };
  },
  computed: {},
  methods: {
    /**
     * @description: 获取机构节点
     * @param {*} node
     */
    async handleGetNode(node) {
      this.orgId = node.id;
      this.refreshTable();
    },
    async refreshTable() {
      this.$refs.table.handleClearSelection();
      await this.getRoleChecked(this.orgId);
      this.selectRoleList = [];
      this.$refs.table.handleSearch();
    },
    receiveRoleSearch(condition) {
      this.condition = { ...this.condition, ...condition };
      this.refreshTable();
    },

    handleSelectChange(selection) {
      this.selectRoleList = this.$lodash.cloneDeep(selection);
    },

    handleSave() {
      if (this.roleTotal == 0) {
        this.$message.warning('没有可保存的数据！');
        return;
      }

      const delRoleIds = this.checkRoleList
        .filter((item) => !this.selectRoleList.map((sItem) => sItem.roleId).includes(item))
        .map((item) => item);

      const addRoleIds = this.selectRoleList
        .filter((item) => !this.checkRoleList.map((cItem) => cItem).includes(item.roleId))
        .map((item) => item.roleId);

      const saveParams = {
        orgId: this.orgId,
        addRoleIds,
        delRoleIds
      };

      // 保存
      Api.save(saveParams)
        .then(() => {
          this.$message.success('保存成功');
          this.refreshTable();
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // 获取角色列表选中记录
    getRoleChecked(orgId) {
      return new Promise((resolve) => {
        Api.getChecked(orgId).then((res) => {
          this.checkRoleList = res;
          resolve(res);
        });
      });
    }
  },
  created() {},
  mounted() {}
};
</script>

<style lang='scss' scoped>
</style>