<template>
  <el-container>
    <el-header height="30px">
      <el-tag>患者姓名: {{ patient.name }}</el-tag>
      <el-tag>住院号: {{ patient.inpatientNo }}</el-tag>
      <el-tag>床号: {{ patient.bedNo }}</el-tag>
      <el-tag>住院次数: {{ patient.admissTimes }}</el-tag>
      <el-tag>性别: {{ cptSex(patient.sex) }}</el-tag>
      <br /><br />
      医嘱号：
      <el-input style="width: 120px" v-model="actOrderNo"></el-input>
      医嘱名称：
      <el-select v-model="orderCode" remote filterable clearable :remote-method="remoteMethodOrderCode">
        <el-option v-for="item in orderCodeNameData" :key="item.code" :label="item.name" :value="item.code">
          <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
          <el-divider direction="vertical"></el-divider>
          <span>{{ item.name }}</span>
        </el-option>
      </el-select>
      医嘱时间：
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :shortcuts="shortcuts"
        style="width: 260px"
      ></el-date-picker>
      <el-button style="margin-left: 10px" type="primary" icon="Search" @click="queryActOrder">搜索</el-button>
      <el-button style="margin-left: 10px" type="danger" icon="Delete" @click="yiZhuTuiFeiClick">医嘱退费 </el-button>
      <el-button style="margin-left: 10px" type="warning" icon="Close" @click="closeDialog">关闭</el-button>
    </el-header>
    <el-main style="margin-top: 50px">
      <el-table :data="yzActOrderData" :height="tableHeight - 20" stripe highlight-current-row @selection-change="selectionTuiFeiYiZhu">
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="actOrderNo" label="医嘱号"></el-table-column>
        <el-table-column prop="orderCode" label="医嘱编码"></el-table-column>
        <el-table-column prop="orderName" label="医嘱名称"></el-table-column>
        <el-table-column prop="drugQuan" label="执行用量"></el-table-column>
        <el-table-column prop="supplyCodeName" label="给药方式"></el-table-column>
        <el-table-column prop="frequCode" label="频次"></el-table-column>
        <el-table-column prop="physicianName" label="医生"></el-table-column>
        <el-table-column prop="startTime" label="开始时间" width="80px"></el-table-column>
        <el-table-column prop="endTime" label="结束时间" width="80px"></el-table-column>
        <el-table-column prop="dose" label="计量"></el-table-column>
        <el-table-column prop="doseUnit" label="计量单位"></el-table-column>
        <el-table-column prop="groupNo" label="药房号"></el-table-column>
        <el-table-column prop="drugFlagName" label="医嘱类型"></el-table-column>
        <el-table-column prop="discription" label="描述"></el-table-column>
        <el-table-column prop="tfFlag" label="是否退费">
          <template #default="scope">
            <span v-html="tfFlag(scope.row.tfFlag)"></span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[20, 30, 40, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-top: 5px"
      ></el-pagination>
    </el-main>
  </el-container>
</template>

<script>
import { onMounted, ref, watch } from '@vue/runtime-core'
import store from '@/store'
import { getChargeCode } from '@/api/inpatient/xiang-mu-lu-ru'
import { cptSex } from '@/utils/computed'
import { shortcuts } from '@/data/shortcuts'
import { getDateRangeFormatDate } from '@/utils/date'
import { getOrderList, yiZhuTuiFei } from '@/api/inpatient/yi-zhu-tui-fei'
import { ElMessage, ElMessageBox } from 'element-plus'
import { baseinfo } from '@/data/inpatient'
import { computed } from 'vue'

export default {
  props: {
    initYiZhu: {
      type: Number,
    },
  },
  setup(props, cxt) {
    const windowSize = store.state.app.windowSize
    const tableHeight = windowSize.h - 120

    const actOrderNo = ref('')
    const orderCode = ref('')
    // 根据医嘱名称来查询
    const orderCodeNameData = ref([])
    const dateRange = ref(null)
    // 退费编码
    const tuiFeiCode = ref(3)

    const currentPage = ref(1)
    const pageSize = ref(20)
    const total = ref(0)

    const patient = computed(() => {
      return baseinfo()
    })

    const yzActOrderData = ref([])

    const handleSizeChange = (val) => {
      pageSize.value = val
      queryActOrder()
    }

    const handleCurrentChange = (val) => {
      currentPage.value = val
      queryActOrder()
    }

    /**
     * 远程搜索
     */
    const remoteMethodOrderCode = (val) => {
      if (val.length >= 2) {
        getChargeCode(val).then((res) => {
          orderCodeNameData.value = res
        })
      }
    }

    const closeDialog = () => {
      cxt.emit('closeYiZhuTuiFei')
    }

    watch(
      () => props.initYiZhu,
      () => {
        orderCode.value = ''
        actOrderNo.value = ''
        dateRange.value = null
        currentPage.value = 1
        pageSize.value = 20
        queryActOrder()
      }
    )

    onMounted(() => {
      queryActOrder()
    })

    const queryActOrder = () => {
      let date = getDateRangeFormatDate(dateRange.value)
      let queryTerm = {
        queryStartTime: date.startTime,
        queryEndTime: date.endTime,
        orderCode: orderCode.value,
        actOrderNo: actOrderNo.value,
        inpatientNo: patient.value.inpatientNo,
        admissTimes: patient.value.admissTimes,
        currentPage: currentPage.value,
        pageSize: pageSize.value,
        tfFlag: tuiFeiCode.value,
      }
      getOrderList(queryTerm)
        .then((res) => {
          total.value = res.total
          yzActOrderData.value = res.records
        })
        .catch(() => {
          total.value = 0
          yzActOrderData.value = []
        })
    }

    // 获取退费医嘱
    const tuiFaiYiZhu = ref([])

    const selectionTuiFeiYiZhu = (val) => {
      tuiFaiYiZhu.value = val
    }

    // 开始退费
    const yiZhuTuiFeiClick = () => {
      if (tuiFaiYiZhu.value.length <= 0) {
        return ElMessage.error({
          message: '请先选择需要退费的数据',
          showClose: true,
        })
      }

      ElMessageBox.confirm(`共${tuiFaiYiZhu.value.length}条数据退费,请认真审核。`, '提示', {
        type: 'warning',
      })
        .then(() => {
          let tuiFei = {
            inpatientNo: patient.inpatientNo,
            admissTimes: patient.admissTimes,
            tuiFeiList: tuiFaiYiZhu.value,
          }
          yiZhuTuiFei(tuiFei).then((res) => {
            queryActOrder()
          })
        })
        .catch(() => {})
    }

    // 监听如果选择的退费类型 那么就要从第一页开始 不然会有bug
    watch(
      () => tuiFeiCode.value,
      () => {
        currentPage.value = 1
        queryActOrder()
      }
    )

    return {
      actOrderNo,
      orderCode,
      orderCodeNameData,
      remoteMethodOrderCode,
      closeDialog,
      patient,
      cptSex,
      dateRange,
      shortcuts,
      queryActOrder,
      total,
      yzActOrderData,
      tableHeight,
      currentPage,
      pageSize,
      handleCurrentChange,
      handleSizeChange,
      selectionTuiFeiYiZhu,
      yiZhuTuiFeiClick,
      tfFlag,
      tuiFeiCode,
    }
  },
}

function tfFlag(val) {
  switch (val) {
    case 0:
      return `<span style="color: #67C23A">未退费</span>`
    case 1:
      return `<span style="color: #F56C6C">已退费</span>`
    case 2:
      return `<span style="color: #F56C6C">退费数据</span>`
    default:
      return `<span style="color: #909399">未知</span>`
  }
}
</script>

<style></style>
