<!-- 部门管理列表 -->
<script name="DeptList" lang="ts" setup>
import type { Ref } from 'vue'
import { getCurrentInstance, onMounted, ref, watch } from 'vue'
import type { DateModelType } from 'element-plus'
import type { IList, IListQuery } from './dept-interface'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import { getDeptList } from '@/api/system/baseInfoDept'
import { getUserList } from '@/api/system/user'
import type { deptType } from '@/global'
import { getDictByCode } from '@/api/system/dict'

const listQuery = ref<IListQuery>({
  deptName: '', // 部门名称
  deptId: '', // 部门id
  limit: 20,
  offset: 1,
}) // 查询参数
const operateWidth = 120
const columns = ref<TableColumn[]>([
  { text: '部门编号', value: 'deptId', align: 'center', width: '200' },
  { text: '部门名称', value: 'fullName', align: 'center' },
  { text: '部门类型', value: 'deptTypeName', align: 'center' },
  { text: '部门类别', value: 'deptCategoryName', align: 'center' },
  { text: '负责人', value: 'directorName', align: 'center' },
])
const total = ref(0) // 数据条数
const loadingTable = ref(false) // 表格loading
const list = ref<IList[]>([]) // 表格数据
const $router = useRouter()

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

/**
 * 获取字典
 */
async function getDict() {
  loadingTable.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
  })
}

// -------------------------------------------------------------------------------------------------------
// 数据查询
function fetchData(isNowPage = false) {
  loadingTable.value = true
  if (!isNowPage) {
    // 是否显示当前页，否则跳转第一页
    listQuery.value.offset = 1
  }
  getDeptList(listQuery.value).then((response) => {
    list.value = response.data.list.map((item: IList) => {
      return {
        ...item,
        deptTypeName: deptTypeMap.value[item.deptType], // 部门类型
        deptCategoryName: deptCategoryMap.value[item.tips!], // 部门类别
      }
    })
    total.value = parseInt(response.data.total)
    loadingTable.value = false
  }).catch(() => {
    loadingTable.value = false
  })
}
// 搜索
const searchList = () => {
  fetchData()
}

// 重置
const reset = () => {
  listQuery.value = {
    deptName: '', // 部门名称
    deptId: '', // 部门id
    limit: 20,
    offset: 1,
  }
  fetchData()
}

// 点击查看、编辑
const handle = (row: any, type: 'detail' | 'edit') => {
  $router.push({
    path: `/baseInfo/dept/${type}/${row.deptId}`,
    query: {
      row: JSON.stringify(row),
    },
  })
}

// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
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() // 获取部门管理列表
  })
})
</script>

<template>
  <app-container>
    <search-area :need-clear="true" @search="searchList" @clear="reset">
      <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>
      <normal-table :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable" @change="changePage">
        <template #preColumns>
          <el-table-column label="序号" width="55" align="center">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
        </template>
        <template #columns>
          <el-table-column
            label="操作"
            align="center"
            fixed="right"
            :width="operateWidth"
          >
            <template #default="{ row }">
              <el-button
                size="small"
                type="primary"
                link
                @click="handle(row, 'detail')"
              >
                详情
              </el-button>
              <el-button
                size="small"
                type="primary"
                link
                @click="handle(row, 'edit')"
              >
                编辑
              </el-button>
            </template>
          </el-table-column>
        </template>
      </normal-table>
    </table-container>
  </app-container>
</template>