<template>
  <div>
    <a-input-search
      v-model="searchValue"
      allow-clear
      enter-button
      @change="handleChange"
      @search="searchParticipantRole"
    />
    <a-divider v-if="!hieraInfo.flags" orientation="left">全局角色</a-divider>
    <a-table
      :row-key="(record) => record.code"
      :data-source="globalRoles"
      :columns="columns"
      :pagination="false"
      :loading="loading"
      :row-selection="{ type: 'radio', selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
    ></a-table>
    <div v-if="!hieraInfo.flags">
      <a-divider orientation="left">本地角色</a-divider>
      <a-table
        :row-key="(record) => record.code"
        :data-source="localRoles"
        :columns="columns"
        :pagination="false"
        :loading="loading"
        :row-selection="{
          type: 'radio',
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
        }"
      ></a-table>
    </div>
  </div>
</template>

<script>
import navService from './nav-service'
import components from './_import-components/sd-nav-role-import'

export default {
  name: 'SdNavRole',
  metaInfo: {
    title: 'SdNavRole',
  },
  components,
  model: {
    prop: 'selectedRole',
    event: 'change',
  },
  props: {
    hieraInfo: {
      type: Object,
      default: () => {},
    },
    curParent: {
      type: Object,
      default: () => {},
    },
    selectedRole: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      globalRoles: [],
      localRoles: [],
      columns: [
        {
          title: '代码',
          dataIndex: 'code',
        },
        {
          title: '名称',
          dataIndex: 'name',
        },
      ],
      searchValue: '',
      selectedRowKeys: [],
      loading: false,
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    searchParticipantRole() {
      this.loadData()
    },
    loadData() {
      this.loading = true
      const globalRolesUrl = 'api/framework/v1/role-manager/query/roles'
      const localRolesUrl = 'api/framework/v1/role-manager/query/local-roles'
      const params = {
        groupId: parseInt(this.curParent.groupId, 10),
        startPosition: 0,
        maxResults: -1,
        excludeUserRole: false,
        expressions: this.searchValue
          ? [
              {
                dataType: 'exps',
                op: 'or',
                expressionsValue: [
                  {
                    dataType: 'str',
                    name: 'code',
                    op: 'like',
                    stringValue: '%' + this.searchValue + '%',
                  },
                  {
                    dataType: 'str',
                    name: 'name',
                    op: 'like',
                    stringValue: '%' + this.searchValue + '%',
                  },
                ],
              },
            ]
          : [],
      }
      let p = navService.getRoles(globalRolesUrl, params)
      if (!this.hieraInfo.flags) {
        p = Promise.all([
          navService.getRoles(globalRolesUrl, params),
          navService.getRoles(localRolesUrl, params),
        ])
      }
      p.then((data) => {
        if (Array.isArray(data)) {
          this.globalRoles = data[0].datas
          this.localRoles = data[1].datas
        } else {
          this.globalRoles = data.datas
        }
      }).finally(() => {
        this.loading = false
      })
    },
    handleChange(e) {
      if (e.target.value === '') {
        this.loadData()
      }
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.$emit('change', { code: selectedRows[0]?.code, name: selectedRows[0]?.name })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
</style>
