<!-- 选择角色 -->
<script setup lang="ts" name="SelectRoleDialog">
import { computed, onMounted, reactive, ref, watch } from 'vue'
import type { IroleInfo } from './dialog'
import { getRoleList } from '@/api/system/role'
import { toTreeList } from '@/utils/structure'
import SearchArea from '@/components/SearchArea/index.vue'
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  data: {
    type: Array,
    default: () => [],
  },
  // 是否允许多选
  isMulti: {
    type: Boolean,
    default: true,
  },
})

const emits = defineEmits(['update:visible', 'change'])
const table = ref()// 表格ref
const selectAll = ref(false) // 全选表格
// 数据权限类型字典
const dataScopeTypeDict: { [key: number ]: string } = {
  1: '所有数据',
  2: '所属及下属部门',
  3: '本部门',
  4: '自定义',
}
// 表格表头
const columns = ref([
  { text: '角色名称', value: 'name', align: 'left' },
  { text: '所在组织机构', value: 'deptName' },
])
const loading = ref(false)

// 默认查询条件
const defaultQuery = {
  keyword: '',
}
// 角色列表数据
const roleList = ref([]) as any

// 查询条件
const listQuery = reactive({ ...defaultQuery })
const checkedRoleList = ref([])
// 多选的数据
const multipleTable = ref([]) as any
const closeDialog = () => {
  emits('update:visible', false)
}
const visibleDialog = computed({
  get() {
    return props.visible
  },
  set() {
    closeDialog()
  },
})
watch(() => props.visible, (val) => {
  if (!val) {
    // table.value!.clearSelection()
    clearSelection(roleList.value)
    selectAll.value = false
  }
})
// 递归切换全选，默认全部清除选中
function clearSelection(list: any, type = false) {
  list.forEach((item: any) => {
    item.isSelected = type
    if (item.children && item.children.length) {
      clearSelection(item.children, type)
    }
  })
}

const handleSelectAllData = (list: any) => {
  list.forEach((item: any) => {
    multipleTable.value.push(item)
    if (item.children && item.children.length) {
      handleSelectAllData(item.children)
    }
  })
}

// 切换全选
const handleSelectionChangeAll = (value: Boolean) => {
  console.log('切换全选', value)
  if (value) {
    clearSelection(roleList.value, true)
    multipleTable.value = []
    handleSelectAllData(roleList.value)
  }
  else {
    clearSelection(roleList.value)
    multipleTable.value = []
  }
}

const saveDialog = () => {
  const checkedList = multipleTable.value.map((item: any) => ({
    ...item,
    type: 2, // type：1.成员，2.角色
    targetId: item.id,
  }))

  emits('change', checkedList)
}

// 角色查询数据
function fetchRoleData() {
  loading.value = true
  getRoleList(listQuery).then((res) => {
    const data = res.data.map((item: IroleInfo) => {
      return {
        ...item,
        dataScopeTypeName: dataScopeTypeDict[parseInt(item.dataScopeType)],
      }
    })
    const treeData = toTreeList(data)
    roleList.value = treeData
    loading.value = false
  })
}
// 多选
const handleSelectionChange = (selection: any) => {
  console.log('多选角色', selection)
  // multipleTable.value = selection
  const index = multipleTable.value.findIndex((item: { id: string }) => item.id === selection.id)
  if (index === -1) {
    multipleTable.value.push(selection)
  }
  else {
    multipleTable.value.splice(index, 1)
  }
  console.log(multipleTable.value)
}

// 搜索
function search() {
  fetchRoleData()
}
// 多选框单选功能
const selectClick = (selection: any, row: any) => {
  if (!props.isMulti) {
    console.log('selectClick', selection)
    if (selection.length > 1) {
      const del_row = selection.shift()
      table.value?.toggleRowSelection(del_row, false) // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
    }
  }
}

// 编辑多个子层级
function setChildren(children: any, type: boolean) {
  children.map((j: any) => {
    table.value?.toggleRowSelection(j, false)
    if (j.childList) {
      setChildren(j.childList, type)
    }
  })
}
onMounted(() => {
  search()
})
</script>

<template>
  <div class="select-role-dialog">
    <el-dialog v-model="visibleDialog" title="选择角色" max-width="80%" custom-class="promoter_person">
      <search-area @search="search">
        <search-item>
          <el-input v-model="listQuery.keyword" placeholder="角色名称" clearable />
        </search-item>
      </search-area>
      <div style="padding: 12px;max-height: 500px;overflow: auto;">
        <el-table
          ref="table"
          v-loading="loading"
          show-overflow-tooltip
          :data="roleList"
          row-key="id"
          :border="false"
          style="width: 100%;"
          :default-expand-all="true"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          :select-on-indeterminate="true"
          @selection-change="handleSelectionChange"
          @select="selectClick"
        >
          <!-- <el-table-column type="selection" width="55" /> -->
          <el-table-column>
            <template #header>
              <el-checkbox
                v-model="selectAll"
                :checked="selectAll"
                @change="(val: any) => handleSelectionChangeAll(val)"
              />
            </template>
            <template #default="scope">
              <el-checkbox
                v-model="scope.row.isSelected"
                :checked="scope.row.isSelected"
                @change="handleSelectionChange(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column
            v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :align="column.align"
          />
        </el-table>
      </div>

      <template #footer>
        <el-button @click="closeDialog">
          取 消
        </el-button>
        <el-button type="primary" @click="saveDialog">
          确 定
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss">
@import "@/css/dialog.css";

.select-role-dialog {
  .el-table .cell {
    white-space: nowrap;
  }
}
</style>