<template>
  <div class="m-4">
    <div>
      <XTTitle title="病区班次" />
      <PageWrapper>
        <Card
          :bordered="false"
          :active-tab-key="activeKey"
          :tab-list="tabList"
          style="height: 800px"
          @tabChange="
            key => {
              activeKey = key;
            }
          "
        >
          <p :key="0" v-if="activeKey == 0">
            <Row>
              <Col :span="24">
                <Card title="病区信息" style="height: 690px">
                  <template #extra
                    ><Button shape="circle" v-auth="['bizSys:wardInfo:add']" @click="handleAddInfo"
                      ><Icon icon="icon-plus|iconfont" :size="14" /></Button
                  ></template>
                  <BasicTable @register="registerTable">
                    <template #bodyCell="{ column, record }">
                      <template v-if="column.key === 'disable'">
                        <Tag
                          :color="formatDictColor(disableOptions, record.disable)"
                          :style="'color:' + formatDictFontColor(disableOptions, record.disable)"
                        >
                          {{ formatDictValue(disableOptions, record.disable) }}
                        </Tag>
                      </template>
                      <template v-if="column.key === 'infectiousDiseases'">
                        <div
                          style="display: inline-block"
                          v-for="(item, index) in record.infectiousDiseases"
                          :key="index"
                          >{{ formatDictValue(pb_epidemic, item) }}&nbsp;
                        </div>
                      </template>
                      <template v-if="column.key === 'action'">
                        <TableAction
                          :actions="[
                            {
                              auth: 'bizSys:wardInfo:edit',
                              icon: 'icon-xt-details_edit_default|iconfont',
                              tooltip: '编辑',
                              onClick: handleEdit.bind(null, record),
                            },
                            {
                              auth: 'bizSys:wardInfo:remove',
                              icon: 'icon-xt-details_delete_default|iconfont',
                              tooltip: '删除',
                              popConfirm: {
                                title: '是否确认删除',
                                placement: 'left',
                                confirm: handleDelWard.bind(null, record),
                              },
                            },
                          ]"
                        />
                      </template>
                    </template>
                  </BasicTable>
                </Card>
              </Col>
            </Row>
          </p>
          <p :key="1" v-else>
            <Row>
              <Col :span="6">
                <Card title="工作日配置" style="height: 690px">
                  <template #extra
                    ><Button
                      shape="circle"
                      v-auth="['bizSys:workday:edit']"
                      @click="handleEditWorkDay"
                    >
                      <Icon icon="icon-xt-details_edit_default|iconfont" :size="14" /></Button
                  ></template>
                  <Row v-for="(item, index) in workDays" :key="index">
                    <div class="wrak-day">{{ item.label }}</div>
                  </Row>
                </Card>
              </Col>
              <Col :span="1" />
              <Col :span="17">
                <Card title="班次配置" style="height: 690px">
                  <template #extra
                    ><Button
                      v-auth="['bizSys:sailings:add']"
                      @click="handleAddSailing"
                      shape="circle"
                      ><Icon icon="icon-xt-details_edit_default|iconfont" :size="14" /></Button
                  ></template>
                  <BasicTable @register="registerSailingsTable">
                    <template #bodyCell="{ column, record }">
                      <template v-if="column.key === 'disable'">
                        <Tag :color="formatDictColor(disableOptions, record.disable)">
                          {{ formatDictValue(disableOptions, record.disable) }}
                        </Tag>
                      </template>
                    </template>
                  </BasicTable>
                </Card>
              </Col>
            </Row>
          </p>
        </Card>
      </PageWrapper>
    </div>
    <WardInfoFormModal @register="registerWardInfoModal" @success="handleWardInfoSuccess" />
    <WorkDayFormModal @register="registerWorkDayModal" @success="handleWorkDaySuccess" />
    <SailingEdit @register="registerSailingEditModal" @success="handleSailingSuccess" />
  </div>
</template>

<script lang="ts" setup>
  import { onBeforeMount, ref } from 'vue';
  import { XTTitle } from '/@/components/XTTitle/index';
  import { PageWrapper } from '/@/components/Page';
  import { Button, Card, Row, Col, Tag } from 'ant-design-vue';
  import Icon from '/@/components/Icon/src/Icon.vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { wardInfoColumns, sailingsColumns } from './data';
  import WardInfoFormModal from './wardInfoFormModal.vue';
  import WorkDayFormModal from './workDayFormModal.vue';
  import SailingEdit from './sailingsEditFormModal.vue';
  import { getWardInfo, delWard } from '/@/api/biz/management/wardInfo';
  import { getWorkingDay, getSailings } from '/@/api/biz/management/working';
  import { useModal } from '/@/components/Modal';
  import { listDictModel } from '/@/api/common';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { formatDictColor, formatDictFontColor, formatDictValue } from '/@/utils';
  const { createMessage } = useMessage(); // createConfirm,
  const tabList = ref([
    { key: 0, tab: '病区管理', type: 'WARD' },
    { key: 1, tab: '工作日班次', type: 'WORK' },
  ]);
  const activeKey = ref(0);
  const workDays = ref([]);
  const disableOptions = ref();
  const pb_epidemic = ref();
  onBeforeMount(async () => {
    disableOptions.value = await listDictModel({ dictCode: 'sys_disable_type' });
    pb_epidemic.value = await listDictModel({ dictCode: 'pb_epidemic' });
    await getWordDay();
  });
  const [registerTable, { reload }] = useTable({
    api: getWardInfo,
    rowKey: 'id',
    columns: wardInfoColumns,
    showIndexColumn: false,
    striped: false,
    formConfig: {
      labelWidth: 120,
      autoSubmitOnEnter: true,
      baseColProps: { xs: 24, sm: 12, md: 12, lg: 8 },
      resetButtonOptions: {
        preIcon: 'icon-delete|iconfont',
      },
      submitButtonOptions: {
        preIcon: 'icon-search|iconfont',
      },
    },
    useSearchForm: false,
    actionColumn: {
      width: 120,
      title: '操作',
      dataIndex: 'action',
    },
    beforeFetch: handleBeforeFetch,
  });

  const [registerSailingsTable, { reload: SailingsReload }] = useTable({
    api: getSailings,
    columns: sailingsColumns,
    showIndexColumn: false,
    striped: false,
    formConfig: {
      labelWidth: 120,
      autoSubmitOnEnter: true,
      baseColProps: { xs: 24, sm: 12, md: 12, lg: 8 },
    },
    useSearchForm: false,
  });

  const [registerWardInfoModal, { openModal: openWardInfoModal }] = useModal();
  const [registerWorkDayModal, { openModal: openWorkDayModal }] = useModal();
  const [registerSailingEditModal, { openModal: openSailingModal }] = useModal();
  const tableSort = ref([
    {
      field: 'sort',
      direction: 'ASC',
    },
  ]);
  const selectType = ref();

  // 方法区
  // 获取病区信息前事件
  function handleBeforeFetch(params) {
    return { ...params, propertiesId: selectType.value, orders: tableSort.value };
  }
  //打开新增病区信息方法
  function handleAddInfo() {
    openWardInfoModal(true, {
      isUpdate: false,
    });
  }

  //打开编辑工作日方法
  function handleEditWorkDay() {
    openWorkDayModal(true, {
      record: workDays.value,
      isUpdate: true,
    });
  }

  // 打开编辑病区信息方法
  function handleEdit(record: Recordable) {
    openWardInfoModal(true, {
      record,
      isUpdate: true,
    });
  }
  // 停用启用病区方法
  async function handleDelWard(record) {
    await delWard([record.id]);
    createMessage.success('病区删除成功！');
    reload();
  }

  // 保存成功回调事件
  function handleWardInfoSuccess() {
    reload();
    SailingsReload();
  }

  // 获取工作日
  async function getWordDay() {
    const res = await getWorkingDay();
    const workDay = [];
    Object.keys(res).forEach((value, index) => {
      if (res[value]) {
        switch (value) {
          case 'monday': {
            workDay.push({
              name: value,
              key: index,
              value: res[value],
              label: '周一',
            });
            break;
          }

          case 'tuesday': {
            workDay.push({
              name: value,
              key: index,
              value: res[value],
              label: '周二',
            });
            break;
          }

          case 'wednesday': {
            workDay.push({
              name: value,
              key: index,
              value: res[value],
              label: '周三',
            });
            break;
          }

          case 'thursday': {
            workDay.push({
              name: value,
              key: index,
              value: res[value],
              label: '周四',
            });
            break;
          }

          case 'friday': {
            workDay.push({
              name: value,
              key: index,
              value: res[value],
              label: '周五',
            });
            break;
          }

          case 'saturday': {
            workDay.push({
              name: value,
              key: index,
              value: res[value],
              label: '周六',
            });
            break;
          }

          case 'sunday': {
            workDay.push({
              name: value,
              key: index,
              value: res[value],
              label: '周日',
            });
            break;
          }
        }
      }
    });
    workDays.value = workDay;
  }
  // 新增班次
  function handleAddSailing() {
    openSailingModal(true, {});
  }

  async function handleWorkDaySuccess() {
    await getWordDay();
  }

  async function handleSailingSuccess() {
    await SailingsReload();
  }
</script>

<style lang="less" scoped>
  ::v-deep(.ant-card-head) {
    background-color: #f6f8fa !important;
    color: #000a18;
    font-weight: 600;
    font-size: 18px;
  }

  .type-title {
    font-size: 14px;
    font-weight: bold;
    color: #000a18;
  }

  .attrs {
    background: #fff !important;
    height: 32px !important;
    line-height: 32px !important;
    font-weight: 400 !important;
    color: #17233d !important;
    font-size: 14px !important;
    border-radius: 4px !important;
    border: 1px solid #c2ccd4 !important;
  }

  .wrak-day {
    width: 28px;
    height: 20px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #000a18;
    line-height: 20px;
  }

  ::v-deep(.ant-btn-link) {
    color: rgb(61 65 85 / 100%);
  }

  ::v-deep(.fan-page-wrapper-content) {
    margin: 16px 0;
  }

  ::v-deep(.ant-table-body) {
    height: 500px !important;
  }

  ::v-deep(.ant-table-thead > tr > th) {
    text-align: left !important;
    color: #818694;
  }

  ::v-deep(.ant-table-tbody > tr > td) {
    text-align: left !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    border-left: 0 !important;
  }

  ::v-deep(.fan-basic-table .ant-table-wrapper table) {
    border: 0 !important;
  }

  ::v-deep(.fan-basic-table-action.center) {
    justify-content: left !important;
  }
</style>
