<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-user-picker
            v-model="selectUser"
            :class="$style.userPicker"
            :single="true"
            :root-node="rootNode"
          />
          <a-button type="primary" @click="searchUsers">查询</a-button>
        </a-space>
      </div>
    </a-card>

    <a-card :class="$style.bottom">
      <div :class="$style.infoTitle">{{
        infoData.text === 'unauthorizedAccess' ? '无权限查看该用户' : infoData.text
      }}</div>
      <div v-if="infoData.text && infoData.text !== 'unauthorizedAccess'" :class="$style.rowHeight">
        <div :class="$style.rightcard">
          <div :class="$style.rowTitle">拥有的角色(列表)</div>
          <a-table
            :data-source="tableData"
            :columns="columns"
            children-column-name=""
            :row-key="'id'"
            :pagination="false"
          >
          </a-table>
        </div>
        <div :class="[$style.treewrap]">
          <div :class="$style.rowTitle">拥有的角色(树)</div>
          <a-tree
            v-if="treeData.length > 0"
            show-icon
            show-line
            default-expand-all
            :tree-data="treeData"
            :replace-fields="replacefields"
          ></a-tree>
          <a-empty v-else />
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>
import storeMixin from '@/common/store-mixin'
import PermissionService from './permission-service'
import components from './_import-components/sd-user-roles-import'

export default {
  name: 'SdUserRoles',
  metaInfo: {
    title: '用户角色查看',
  },
  components,
  mixins: [storeMixin],
  data() {
    const columns = [{ title: '全部角色', dataIndex: 'text', key: 'text' }]
    return {
      selectUser: [],
      infoData: {},
      tableData: [],
      columns: columns,
      treeData: [],
      replacefields: {
        // 转换树的默认字段title和key
        title: 'text',
        key: 'id',
      },
      hierarchy: [],
    }
  },
  computed: {
    rootNode() {
      if (this.hierarchy[0]) {
        return { ...this.hierarchy[0], code: this.hierarchy[0].id }
      }
      return { code: this.userInfo.deptId, name: this.userInfo.deptName }
    },
    hierarchyOptions() {
      return (this.userInfo.belongedOrgIds || []).map((item) => ({
        id: item.id,
        name: item.text,
        title: item.text,
      }))
    },
  },
  created() {
    if (this.hierarchyOptions[0]) {
      this.hierarchy = [{ ...this.hierarchyOptions[0] }]
    }
  },
  methods: {
    searchUsers() {
      if (this.selectUser.length === 0) {
        return
      }
      this.loadData()
    },
    loadData() {
      PermissionService.getUserRoles({
        account: this.selectUser[0].code,
      }).then((res) => {
        const data = res.data
        this.infoData = data.treeNode
        this.tableData = data.treeNode.children
        this.treeData = data.treeNode.children
      })
    },
    // 带子节点的数组转化成一维数组
    getFlatArr(arr, children = 'children') {
      return arr.reduce((a, item) => {
        let flatArr = [...a, item]
        if (item[children]) {
          flatArr = [...flatArr, ...this.getFlatArr(item[children])]
        }
        return flatArr
      }, [])
    },
  },
}
</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;
  }
}
.info-title {
  padding-top: $padding-xs;
  padding-bottom: $padding-xs;
  font-size: large;
}

.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>
