<template>
  <el-container>
    <el-header>
      <span>病区：</span>
      <el-select v-model="currentWard" style="width: 100px" @change="fetchPatientList">
        <el-option v-for="item in userWards" :key="item.code" :label="item.name" :value="item.code"></el-option>
      </el-select>
      <el-divider direction="vertical"></el-divider>
      <span style="margin-left: 8px">医嘱日期：</span>
      <el-date-picker v-model="adviseDate" :disabled-date="disabledDate" style="width: 120px"></el-date-picker>
      <el-divider direction="vertical"></el-divider>
      <el-button type="primary">
        <i class="iconfont icon-yaopin" style="font-size: 12px"></i>
        &nbsp;&nbsp;生成药品
      </el-button>
      <el-button type="primary">
      <i class="iconfont icon-menzhen" style="font-size: 12px"></i>
        &nbsp;&nbsp;生成诊疗
      </el-button>
    </el-header>
    <el-main>
      <el-table ref="patListRef" :height="tableHeight" :data="patientList" stripe highlight-current-row>
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="patNo" label="住院号"></el-table-column>
        <el-table-column prop="times" label="住院次数"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="admdate" label="入院时间"></el-table-column>
        <el-table-column prop="bedNo" label="床号"></el-table-column>
        <el-table-column prop="totalCharge" label="总费用"></el-table-column>
        <el-table-column prop="balance" label="余额">
          <template #default="scope">
            <span v-html="coloredBalance(scope.row.balance)"></span>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>

<script lang="ts" setup>
import {onMounted, Ref, ref} from "vue";
import store from '@/store'
import {getDate,formatDate} from '@/utils/date'
import { ElTable } from 'element-plus'
import {getWardsApi} from '@/api/login'
import {selectPatientList} from '@/api/inpatient/doctors-advise'
import Sleep from '@/utils/sleep'

interface Ward {
  code: string
  name: string
}

interface Patient {
  patNo: string
  times: number
  name: string
  admdate: string
  bedNo: string
  totalCharge: number
  balance: number
}

const nowTimestamp:number = new Date().getTime()
const tableHeight:number = store.state.app.windowSize.h - 60;

const adviseDate:Ref<string> = ref()

const userWards:Ref<Ward[]> = ref()
const currentWard:Ref<string> = ref()

const patListRef:Ref<InstanceType<typeof ElTable>> = ref()

const patientList:Ref<Patient[]> = ref()

const disabledDate = (date):boolean => {
  const offset:number = (nowTimestamp - date.getTime()) / 1000 / 60 / 60 / 24
  return offset > 7 || offset < 0
}

const coloredBalance = (balance:number):string => {
  const color:string = balance > 0 ? 'green' : balance < 0 ? 'red' : 'gray'
  return `<span style="color: ${color}">${balance}</span>`
}

const fetchPatientList = ():void => {
  if (currentWard.value) {
    selectPatientList(currentWard.value).then(async res => {
      patientList.value = res
      await Sleep(100)
      patientList.value.forEach((row: Patient) => {
        if (row.balance >= 0) {
          patListRef.value.toggleRowSelection(row, undefined)
        }
      })
    })
  }
}

onMounted(() => {
  adviseDate.value = getDate()
  getWardsApi().then(res => {
    userWards.value = res
    currentWard.value = res[0].code
    fetchPatientList()
  })
})
</script>