<!-- 审批人自选--选择审批人 -->
<script lang="ts" setup name="selectApproverDialog">
import { ElButton, ElDialog, ElMessage } from 'element-plus'
import { getUserList } from '@/api/system/user'
import { toTreeList } from '@/utils/structure'
import { getDeptTreeList } from '@/api/system/dept'

const props = defineProps({
  title: {
    type: String,
    default: '选择审批人',
  },
})
// ----------------------- 以下是字段定义 emits props ---------------------
const emits = defineEmits(['closeRefresh', 'confirm'])
// 对话框是否显示
const dialogVisible = ref(false)
const defaultProps = {
  children: 'children',
  label: 'name',
}
// 查询参数
const listQuery = reactive({
  keywords: '',
  beginTime: '',
  endTime: '',
  deptId: '',
  offset: 1,
  limit: 20,
  sort: 'id',
  deptType: '',
})
const list = ref([])
const checkoutList = ref([])
const total = ref(0)
const treeData = ref([])
const loadingTable = ref<boolean>(false)
const loadingTree = ref<boolean>(false)
const columns = [
  { text: '账号', value: 'account', align: 'center' },
  { text: '所在组织机构', value: 'deptName', align: 'center' },
  { text: '真实姓名', value: 'name', align: 'center' },
  { text: '角色', value: 'roleName', align: 'center' },
  { text: '手机号', value: 'phone', align: 'center' },
  { text: '注册时间', value: 'createtime', align: 'center' },
]
// 多选选中
const handleSelectionChange = (val: any) => {
  checkoutList.value = val
}

// 获取列表数据
const fetchData = () => {
  loadingTable.value = true
  getUserList(listQuery).then((res) => {
    list.value = res.data.rows
    total.value = res.data.total
    loadingTable.value = false
  }).catch(() => {
    loadingTable.value = false
  })
}

// 查询数据
const search = () => {
  fetchData()
}

// 重置
const reset = () => {
  listQuery.keywords = ''
  listQuery.beginTime = ''
  listQuery.endTime = ''
  listQuery.offset = 1
  listQuery.limit = 20
  listQuery.sort = 'id'
  listQuery.deptType = ''
  fetchData()
}

// 点击树形结构
const handleNodeClick = (data: any) => {
  listQuery.deptId = data.id as string
  fetchData()
}

// 获取组织列表树数据
const fetchTreeData = () => {
  loadingTree.value = true
  getDeptTreeList(listQuery).then((res) => {
    treeData.value = toTreeList(res.data, '0', true)
    loadingTree.value = false
  }).catch(() => {
    loadingTree.value = false
  })
}

// ----------初始化、关闭对话框相关-----------------
function initDialog() {
  dialogVisible.value = true
  // 获取树形结构数据
  fetchTreeData()
  // 获取列表数据
  fetchData()
}

// 点击确定
const confirm = () => {
  if (!checkoutList.value.length) {
    ElMessage.warning('请至少选择一个审批人')
    return false
  }
  const ids = checkoutList.value.map((item: { id: string }) => item.id)
  emits('confirm', ids)
  dialogClose()
}
// 关闭弹窗
function dialogClose() {
  dialogVisible.value = false
}
// ----------------------- 以下是暴露的方法内容 ----------------------------
defineExpose({ initDialog })
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="props.title"
    width="90%"
    :before-close="dialogClose"
    append-to-body
    :open-delay="0"
    :close-on-click-modal="false"
  >
    <div class="container">
      <!-- 左侧组织机构 -->
      <div class="left-container">
        <div class="dept-div">
          <el-card class="box-card" shadow="always">
            <template #header>
              <div class="clearfix">
                <span>组织机构</span>
              </div>
            </template>
            <el-scrollbar height="520px" class="user-dept-scroll">
              <el-tree
                v-loading="loadingTree" :data="treeData" :props="defaultProps" default-expand-all
                :expand-on-click-node="false" highlight-current @node-click="handleNodeClick"
              />
            </el-scrollbar>
          </el-card>
        </div>
      </div>
      <!-- 右侧表格 -->
      <div ref="tableContainer" class="table">
        <!-- 筛选条件 -->
        <search-area :need-clear="true" @search="search" @clear="reset">
          <search-item>
            <el-input v-model.trim="listQuery.keywords" placeholder="账户/真实姓名/手机号" clearable />
          </search-item>
          <search-item>
            <el-date-picker
              v-model="listQuery.beginTime" type="datetime" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="选择开始时间"
            />
          </search-item>
          <search-item>
            <el-date-picker
              v-model="listQuery.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="选择结束时间"
            />
          </search-item>
        </search-area>
        <!-- 表头标题 -->
        <table-container :title-show="false">
          <normal-table
            :data="list" :total="total" :columns="columns" :query="listQuery"
            :list-loading="loadingTable" is-showmulti-select
            :height="520"
            @change="changePage"
            @multi-select="handleSelectionChange"
          >
            <template #preColumns>
              <el-table-column label="#" width="55" align="center">
                <template #default="scope">
                  {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
                </template>
              </el-table-column>
            </template>
          </normal-table>
        </table-container>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="confirm">
          确定
        </el-button>
        <el-button @click="dialogClose">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
// 样式
.container {
  width: 100%;
  display: flex;

  .left-container {
    width: 22%;
  }

  :deep(.el-radio__label) {
    display: none;
  }

  .table {
    width: 78%;
  }
}
</style>