<template>
  <div :class="$style.query">
    <a-card :class="$style.top">
      <div :class="$style.search">
        <a-space>
          <sd-select v-model="hierarchy" :options="hierarchyOptions" :class="$style.select" />
          <sd-roles-picker
            :key="belongedOrgId !== '-1' ? 'role' : '-1'"
            v-model="selectRole"
            :class="$style.userPicker"
            :single="true"
            :read-only="false"
            :show-local="belongedOrgId !== '-1'"
            :group-id="belongedOrgId"
          />
          <a-button type="primary" @click="searchRoles">查询</a-button>
        </a-space>
      </div>
    </a-card>

    <a-card :class="$style.bottom">
      <div :class="$style.rowHeight">
        <div v-if="tableData.length > 0" :class="$style.rightcard">
          <div :class="$style.rowTitle">拥有本角色的人员(列表)，共({{ total }})人</div>
          <a-table
            :data-source="tableData"
            :columns="columns"
            children-column-name=""
            :row-key="'id'"
            :pagination="false"
          >
            <template slot="org" slot-scope="record">
              {{ record.props.fullpath }}
            </template>
          </a-table>
        </div>
        <div v-if="treeData.length > 0" :class="[$style.treewrap]">
          <div :class="$style.rowTitle">拥有本角色的人员(树)，共({{ total }})人</div>
          <a-tree
            show-icon
            show-line
            default-expand-all
            :tree-data="treeData"
            :replace-fields="replacefields"
          ></a-tree
        ></div>
      </div>
    </a-card>
  </div>
</template>

<script>
import storeMixin from '@/common/store-mixin'
import cloneDeep from 'lodash.clonedeep'
import PermissionService from './permission-service'
import components from './_import-components/sd-role-users-import'

export default {
  name: 'SdRoleUsers',
  metaInfo: {
    title: '角色用户查看',
  },
  components,
  mixins: [storeMixin],
  data() {
    const columns = [
      { title: '用户', name: 'text', dataIndex: 'text', key: 'text' },
      { title: '组织机构', name: 'org', scopedSlots: { customRender: 'org' } },
    ]
    return {
      selectRole: [],
      tableData: [],
      columns: columns,
      treeData: [],
      total: null, // 总数
      replacefields: {
        // 转换树的默认字段title和key
        title: 'text',
        key: 'id',
      },
      hierarchy: [],
    }
  },
  computed: {
    hierarchyOptions() {
      return (this.userInfo.belongedOrgIds || []).map((item) => ({
        id: item.id,
        name: item.text,
        title: item.text,
      }))
    },
    belongedOrgId() {
      return this.hierarchy[0]?.id || '-1'
    },
  },
  created() {
    if (this.hierarchyOptions[0]) {
      this.hierarchy = [{ ...this.hierarchyOptions[0] }]
    }
  },
  methods: {
    searchRoles() {
      if (this.selectRole.length === 0) {
        return
      }
      this.loadData()
    },
    loadData() {
      PermissionService.getRoleUsers({
        code: this.selectRole[0].code,
      }).then((res) => {
        const data = res.data
        this.total = data.total
        this.tableData = data.treeNode.children
        const treeData = cloneDeep([data.treeNode])
        treeData[0].text = `${treeData[0].text}(${treeData[0].id})`
        this.treeData = treeData
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.query {
  display: flex;
  flex-direction: column;
  height: 100%;
  .top {
    margin-bottom: 20px;
    .search {
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 30%;
      margin: 0 auto 10px auto;
    }
  }
  .bottom {
    flex: 1;
  }
}
.user-picker {
  display: inline-block;
  width: 300px;
  :global(.ant-select-selection) {
    width: 300px;
  }
}
.row-height {
  display: flex;
  flex: auto;
  height: 100%;
  .row-title {
    margin-bottom: 8px;
    border-bottom: 1px solid #d9d9d9;
  }
  .rightcard {
    flex: 1;
    width: calc(100% - 35%);
    height: 100%;
    margin-right: $padding-lg;
    overflow-y: auto;
  }
  .treewrap {
    position: relative;
    width: 35%;
    min-height: 100%;
    :global(.ant-card) {
      width: 100%;
      height: 100%;
      overflow: auto;
      :global(.ant-card-body) {
        background-color: $white;
      }
    }
    :global(.ant-tree) {
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.select {
  width: 150px;
}
</style>
