<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">
        <el-button type="primary" @click="init()">查询</el-button>
        <el-button type="primary" @click="resetSearch">重置</el-button>
        <el-button type="primary" :icon="Plus" @click="openDialog">新增</el-button>
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData" style="width: 100%" @row-click="rowClick">
        <el-table-column prop="bedCnt" label="病床数量" width="80"/>
        <el-table-column prop="beginDate" label="开始日期" width="100" show-overflow-tooltip/>
        <el-table-column prop="caty" label="类别" show-overflow-tooltip></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="delFlag" label="删除标志"/>
        <el-table-column prop="drPsncnt" label="医生人数"/>
        <el-table-column prop="endDate" label="结束日期" width="120" show-overflow-tooltip/>
        <el-table-column prop="info" label="信息"/>
        <el-table-column prop="medServScp" label="医疗服务范围" width="150"/>
        <el-table-column prop="memo" label="备注"/>
        <el-table-column prop="name" label="内科"/>
        <el-table-column prop="nursPsncnt" label="护士人数"/>
        <el-table-column prop="pharPsncnt" label="药剂师人数" width="100"/>
        <el-table-column prop="resperName" label="负责人姓名" width="100"/>
        <el-table-column prop="resperTel" label="负责人电话" width="100" show-overflow-tooltip/>
        <el-table-column prop="socialBedCnt" label="社会病床数量" width="200"/>
        <el-table-column prop="tecnPsncnt" label="技术人员人数" width="200"/>
      </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 depts from "@/assets/config/directory/depts.json";
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 = () => {
  post('organization/section/list', {page: page.value, size: pageSize.value, ...search.value}).then((res: any) => {
    tableData.value = res.list
    tableData.value.forEach((item: any) => {
      let dept: Dept = deptsObj
      item.caty = dept[item.caty]
      console.log(item.caty)
    })
  })
}
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(depts).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>
<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;
    align-items: center;
  }

  .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;
  }
}
</style>