<template>
  <page-layer>
    <template #header>
      <el-select v-model="currentStatus" placeholder="审核状态" style="width: 100px" clearable>
        <el-option v-for="item in allStatuses" :key="item.code" :label="item.name" :value="item.code"></el-option>
      </el-select>&nbsp;&nbsp;
      <el-date-picker v-model="applyMonth" type="month" style="width: 100px" @change="refreshApplies"></el-date-picker>
      <el-divider direction="vertical"></el-divider>
      <el-button icon="Refresh" type="primary" @click="refreshApplies">刷新数据</el-button>
    </template>
    <template #main>
      <el-table :data="filterApplies" stripe highlight-current-row>
        <el-table-column label="姓名" width="70">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <img class="sex-icon" :src="scope.row.gender === 1 ? maleIcon : femaleIcon"/>
              {{ scope.row.name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="patNo" label="住院号" width="65" align="center"></el-table-column>
        <el-table-column prop="wardName" label="病房"></el-table-column>
        <el-table-column prop="detailSn" label="流水号" width="60"></el-table-column>
        <el-table-column prop="chargeCodeMx" label="院内码" width="65"></el-table-column>
        <el-table-column prop="chargeAmount" label="数量" width="50"></el-table-column>
        <el-table-column prop="chargeFee" label="金额" width="50"></el-table-column>
        <el-table-column label="项目名称">
          <template #default="scope">
            <span v-html="makeApplyStatusText(scope.row.applyStatus, scope.row.chargeName)"></span>
          </template>
        </el-table-column>
        <el-table-column prop="chargeDate" label="收费日期"></el-table-column>
        <el-table-column prop="applyDatetime" label="申请时间"></el-table-column>
        <el-table-column prop="handlerName" label="处理人" width="50"></el-table-column>
        <el-table-column prop="handleDatetime" label="处理时间"></el-table-column>
        <el-table-column prop="handleRemark" label="备注"></el-table-column>
        <el-table-column>
          <template #default="scope">
            <el-button type="success" circle icon="Check" @click="approve(scope.row)" :disabled="scope.row.applyStatus === 1"></el-button>
            <el-button type="danger" circle icon="Close" @click="reject(scope.row)" :disabled="scope.row.applyStatus === 1"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </page-layer>
</template>

<script setup lang="ts">
import PageLayer from "@/layout/PageLayer";
import maleIcon from '@/assets/male-icon.png'
import femaleIcon from '@/assets/female-icon.png'
import {computed, onMounted, ref, Ref} from "vue";
import {getAllApplies, confirmHandleApply} from '@/api/medical-insurance/hospital-approval.js'
import {ElMessage, ElMessageBox} from "element-plus";
import {formatMonth} from "@/utils/date";

interface ApplyItem {
  name: string
  gender: number
  patNo: string
  times: number
  ledgerSn: number
  detailSn: number
  wardName: string
  chargeCodeMx: string
  chargeName: string
  chargeAmount: number
  chargeFee: number
  chargeDate: string
  oriDetailSn: number
  staffId: string
  staffName: string
  applyDatetime: string
  applyStatus: number
  applyHandler: string
  handlerName: string
  handleDatetime: string
  handleRemark: string
}

const currentStatus: Ref<number> = ref(-1)
const applyMonth: Ref<string> = ref(null)

const refreshApplies = (): void => {
  getAllApplies(formatMonth(applyMonth.value)).then(res => {
    applies.value = res
  }).catch(() => {
    applies.value = []
  })
}

const applies: Ref<ApplyItem[]> = ref([])
const filterApplies = computed(() => {
  return applies.value.filter(item => {
    return currentStatus.value === -1 ? true : item.applyStatus === currentStatus.value
  })
})

const approve = (row: ApplyItem): void => {
  ElMessageBox.confirm('是否确定审核通过？', '提示', {
    type: 'warning',
    confirmButtonText: '确定',
    cancelButtonText: '放弃',
  }).then(() => {
    row.applyStatus = 1
    row.handleRemark = '审批通过。'
    executeHandle(row)
  })
}
const reject = (row: ApplyItem): void => {
  ElMessageBox.prompt('请输入处理意见：', '驳回申请', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputValue: null,
    inputPattern: /\S/,
    inputErrorMessage: '处理意见不能为空',
  }).then(({value}) => {
    row.applyStatus = 2
    row.handleRemark = value
    executeHandle(row)
  })
}

const executeHandle = (row: ApplyItem): void => {
  confirmHandleApply(row).then(res => {
    ElMessage({
      message: res,
      type: 'success',
      duration: 2500,
      showClose: true
    })
  })
}

const allStatuses: object[] = [
  {code: -1, name: '全部'},
  {code: 0, name: '未处理'},
  {code: 1, name: '已通过'},
  {code: 2, name: '已驳回'},
]

const makeApplyStatusText = (status: number, chargeName: string): string => {
  if (status === 0) {
    return `<span style="color: gray">${chargeName}</span>`
  } else if (status === 1) {
    return `<span style="color: green">${chargeName}</span>`
  } else if (status === 2) {
    return `<span style="color: red">${chargeName}</span>`
  }
}

onMounted(() => {
  applyMonth.value = formatMonth(new Date())
  refreshApplies()
})

</script>