<!-- 选择部门 -->
<script setup lang="ts" name="SelectEmployeesDialog">
import { computed, onMounted, reactive, ref, watch } from 'vue'
import type { IEmployees } from './dialog'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import { getDeptList } from '@/api/system/dept'
import type { deptType } from '@/global'
import { getDictByCode } from '@/api/system/dict'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  data: {
    type: Array,
    default: () => [],
  },
  // 默认查询组织
  deptId: {
    type: String,
    default: '',
  },
  // 是否显示部门选择下拉菜单
  showDeptSelect: {
    type: Boolean,
    default: true,
  },
  // 是否多选
  multi: {
    type: Boolean,
    default: true,
  },
})
const emits = defineEmits(['update:visible', 'change'])
const table = ref() // 表格ref

// 表格表头
const columns = ref<TableColumn[]>([
  { text: '部门编号', value: 'deptId', align: 'center' },
  { text: '部门名称', value: 'fullName', align: 'center' },
  { text: '部门类型', value: 'deptTypeName', align: 'center' },
  { text: '部门类别', value: 'deptCategoryName', align: 'center' },
  { text: '负责人', value: 'directorName', align: 'center' },
])

// 表格数据
const list = ref<IEmployees[]>([])

const loading = ref(false)
const total = ref(0)
// 查询参数
const listQuery = ref({
  deptName: '', // 部门名称
  deptId: '', // 部门id
  limit: 20,
  offset: 1,
})
// 默认给deptId赋值
// listQuery.value.deptId = props.deptId
const checkedList = ref([])
// 多选的数据
const multipleTable = ref([])
const singleChecked = ref('') // 单选选中id
const closeDialog = () => {
  emits('update:visible', false)
}
const visibleDialog = computed({
  get() {
    return props.visible
  },
  set() {
    closeDialog()
  },
})

watch(() => props.visible, (val) => {
  // 清除上次选中
  if (!val) {
    table.value.clearMulti()
  }
})

// -----------------------------------------字典--------------------------------------------------------------
const deptTypeList = ref<deptType[]>([]) // 部门类型
const deptTypeMap = ref({}) as any// 部门类型{1：管理部门}
const deptCategoryMap = ref({}) as any// 部门类别{无线电}

/**
 * 获取字典
 */
async function getDict() {
  loading.value = true
  // 获取部门类型
  const response = await getDictByCode('deptType')
  // 部门类型{1：管理部门}
  response.data.forEach((item: any) => {
    deptTypeMap.value[`${item.value}`] = item.name
  })

  // 获取部门类别
  const res = await getDictByCode('eqptDeviceType')
  // 部门类别{无线电}
  res.data.forEach((item: any) => {
    deptCategoryMap.value[`${item.value}`] = item.name
  })
}

// 点击确定，保存选择的成员配置
const saveDialog = () => {
  // 多选
  if (props.multi) {
    const checkedList = multipleTable.value.map((item: any) => {
      return {
        ...item,
        type: 3, // type: 1.成员 2.角色 3.部门
        targetId: item.deptId,
        name: item.fullName,
      }
    })
    emits('change', checkedList)
  }
  else {
    const checkValue = list.value.find(item => item.id == singleChecked.value)
    emits('change', checkValue)
  }
}

const select = ref('')
// 获取列表数据
const fetchData = (isNowPage = false) => {
  if (!isNowPage) {
    // 是否显示当前页，否则跳转第一页
    listQuery.value.offset = 1
  }
  loading.value = true
  getDeptList(listQuery.value).then((res) => {
    list.value = res.data.list.map((item: any) => {
      return {
        ...item,
        deptTypeName: deptTypeMap.value[item.deptType], // 部门类型
        deptCategoryName: deptCategoryMap.value[item.tips!], // 部门类别
      }
    })
    total.value = res.data.total
    loading.value = false
  })
}

// 多选
const multiSelect = (val: any) => {
  multipleTable.value = val
}

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

// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
const changePage = (val: { size?: number; page?: number }) => {
  if (val && val.size) {
    listQuery.value.limit = val.size
  }
  if (val && val.page) {
    listQuery.value.offset = val.page
  }
  fetchData(true)
}

onMounted(() => {
  getDict().then(() => {
    // 获取列表数据
    fetchData(true)
  })
})
</script>

<template>
  <div class="select-emplotees-dialog">
    <el-dialog v-model="visibleDialog" title="选择部门" width="65%" max-width="80%" append-to-body custom-class="chengyuan-dialog promoter_person">
      <!-- 右侧表格 -->
      <div ref="tableContainer" class="table-area">
        <!-- 筛选条件 -->
        <search-area @search="search">
          <search-item>
            <el-input v-model.trim="listQuery.deptId" placeholder="部门编号" class="short-input" clearable />
          </search-item>
          <search-item>
            <el-input v-model.trim="listQuery.deptName" placeholder="部门名称" class="short-input" clearable />
          </search-item>
        </search-area>
        <!-- 表头标题 -->
        <table-container :title-show="false" style="margin-top: 0;padding-top: 0;">
          <!-- 查询结果Table显示 -->
          <normal-table
            ref="table"
            :data="list"
            :total="total"
            :columns="columns"
            :query="listQuery"
            :list-loading="loading"
            :is-showmulti-select="multi"
            height="260px"
            :page-sizes="[20]"
            @change="changePage"
            @multi-select="multiSelect"
          >
            <!-- 序号 -->
            <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>
              <el-table-column v-if="!props.multi" label="" width="40" align="center">
                <template #default="scope">
                  <el-radio v-model="singleChecked" :label="scope.row.id" class="radio" />
                </template>
              </el-table-column>
            </template>
          </normal-table>
        </table-container>
      </div>
      <!-- </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";

.chengyuan-dialog {
  .el-table .cell {
    white-space: nowrap;
  }

  .el-dialog__body {
    display: flex;
    overflow: auto;
  }
}
</style>

<style lang="scss" scoped>
.chengyuan-dialog {
  width: 100%;

  .left-container {
    white-space: nowrap;
    height: 100%;
  }

  .table-area {
    flex: 1;
    overflow: auto;

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

    .pagination {
      margin-top: 10px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}
</style>