<template>
  <div class="container-wrapper">
    <div class="title">
      <div class="title-search">
        <el-form
            :model="search"
            label-width="auto"
            :inline="true"
            class="demo-form-inline"
        >
          <el-form-item>
            <el-input v-model="search.resperName" placeholder="负责人姓名" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-cascader :props="{ checkStrictly: true }" v-model="search.caty" :options="options"
                         placeholder="科室类别"/>
          </el-form-item>
        </el-form>
      </div>
      <div class="title-btn">
        <span class="default-btn" @click="resetSearch">
          <span class="iconfont icon-RectangleCopy1"></span>
          重置
        </span>
        <span class="default-btn" @click="init()">
          <span class="iconfont icon-RectangleCopy"></span>
          查询
        </span>
        <span class="default-btn" @click="openDialog">
           <span class="iconfont icon-jia"></span>
          新增
        </span>
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData" style="width: 100%" @row-click="rowClick" :header-cell-style="{ backgroundColor: '#F1F5FB' }">
        <el-table-column prop="name" label="科室类型" width="120" show-overflow-tooltip/>
        <el-table-column prop="bedCnt" label="病床数量" width="80" show-overflow-tooltip align="center">
          <template #default="scope">
            {{ scope.row.bedCnt?scope.row.bedCnt+'个':'' }}
          </template>
        </el-table-column>
        <el-table-column prop="beginDate" label="开始日期" width="120" show-overflow-tooltip/>
        <el-table-column prop="caty" label="类别" show-overflow-tooltip width="150">
          <template #default="scope">
            {{ getDeptDisplayName(scope.row.caty) }}
          </template>
        </el-table-column>
        <el-table-column prop="code" label="编码" width="180" show-overflow-tooltip/>
        <el-table-column prop="creationDate" label="创建日期" width="120" show-overflow-tooltip/>
        <el-table-column prop="drPsncnt" label="医生人数" show-overflow-tooltip align="center"/>
        <el-table-column prop="endDate" label="结束日期" width="120" show-overflow-tooltip/>
        <el-table-column prop="info" label="信息" show-overflow-tooltip/>
        <el-table-column prop="medServScp" label="医疗服务范围" width="150" show-overflow-tooltip/>
        <el-table-column prop="memo" label="备注" show-overflow-tooltip/>
        <el-table-column prop="nursPsncnt" label="护士人数" show-overflow-tooltip align="center"/>
        <el-table-column prop="pharPsncnt" label="药剂师人数" width="100" show-overflow-tooltip align="center"/>
        <el-table-column prop="resperName" label="负责人姓名" width="100" show-overflow-tooltip/>
        <el-table-column prop="resperTel" label="负责人电话" width="200" show-overflow-tooltip/>
        <el-table-column prop="socialBedCnt" label="社会病床数量" width="200" show-overflow-tooltip align="center"/>
        <el-table-column prop="tecnPsncnt" label="技术人员人数" width="200" show-overflow-tooltip align="center"/>
      </el-table>
    </div>
    <div class="bottom">
      <div class="page_btn_list">
        <el-pagination
            background
            layout="prev, pager, next"
            :page-size="pageSize"
            :current-page="page"
            :total="total"
            @current-change="changePage"
        />
      </div>
    </div>
  </div>
  <SectionEdit :id="id" ref="sectionRef" @onSubmit="init()"></SectionEdit>
</template>
<script setup lang="ts">
import {nextTick, onMounted, ref} from "vue"
import Mask from '@/components/common/Mask.vue'
import SectionEdit from "@/components/settings/SectionEdit.vue";
import {post} from "@/utils/request.ts";
import deptsObj from '@/assets/config/directory/depts.json'
import {formatDate} from '@/utils/dateUtils.ts'
import {Plus} from "@element-plus/icons-vue";

const id = ref<any>("")
const tableData = ref<any>([])
const sectionRef = ref<any>()
const rowClick = (row: any) => {
  id.value = row.id
  openDialog()
}
const openDialog = () => {
  nextTick(() => {
    sectionRef.value?.openDialog()
  })
}
onMounted(() => {
  init()
})

interface Dept {
  [key: string]: string | { name: string; children: { [key: string]: string } };
}

const init = () => {
  id.value = ''
  post('organization/section/list', {
    page: page.value,
    size: pageSize.value, ...search.value
  }).then((res: any) => {
    tableData.value = res.list
    total.value = res.total_count
  })
}
const changePage = (val: any) => {
  page.value = val
};
const pageSize = ref(20);
const page = ref(1);
const total = ref(0);
const search = ref<any>({})
const options = Object.entries(deptsObj).map(([key, value]) => {
  if (typeof value === 'string') {
    return {value: key, label: value};
  } else {
    return {
      value: key,
      label: value.name,
      children: Object.entries(value.children).map(([childKey, childValue]) => ({
        value: childKey,
        label: childValue,
      })),
    };
  }
});
const resetSearch = () => {
  search.value = {}
  init()
}
// 在 script setup 中添加如下类型定义
interface DeptChildren {
  [key: string]: string;
}

interface DeptItem {
  name: string;
  children?: DeptChildren;
}

type DeptsType = {
  [key: string]: string | DeptItem;
};

// 将 depts 类型显式声明为 DeptsType
const depts: DeptsType = deptsObj;

// 修改 getDeptDisplayName 函数中的类型引用
const getDeptDisplayName = (code: string): string => {
  if (!code) return '未知科室'

  const dept = depts[code]

  // 如果是一级科室，并且是字符串类型
  if (typeof dept === 'string') {
    return dept
  }

  // 如果是一级科室，并且是对象类型（包含 name）
  if (typeof dept === 'object' && dept !== null && 'name' in dept) {
    return dept.name
  }

  // 如果是二级科室，尝试查找父级下的 value
  for (const key in depts) {
    const parentDept = depts[key] as DeptItem; // 类型断言确保类型正确
    if (
        typeof parentDept === 'object' &&
        parentDept !== null &&
        'children' in parentDept &&
        code in (parentDept.children || {})
    ) {
      return parentDept.children?.[code] || '未知科室'
    }
  }

  return '未知科室'
}

</script>
<style scoped lang="scss">
@use "@/assets/scss/base.scss";

.container-wrapper {
  background: #fff;
  padding: 24px;
  display: flex;
  flex-direction: column;
  height: 100%;

  .title {
    height: 60px;
    display: flex;
    justify-content: space-between;
  }

  .table {
    flex: 1;
  }

  .bottom {
    height: 60px;
    background-color: #FFF;
    box-sizing: border-box;
    padding: 10px;
    border-top: 1px solid #EEE;
    display: flex;
    justify-content: flex-end;
  }
}

:deep(.el-input__wrapper) {
  height: 42px;
}
</style>