<template>
  <el-container>
    <el-header style="padding: 0; height: 30px">
      <el-date-picker
          v-model="dateRange"
          :shortcuts="shortcuts"
          end-placeholder="结束日期"
          placeholder="选择日期"
          range-separator="至"
          size="small"
          start-placeholder="开始日期"
          style="width: 280px"
          type="daterange"
          @change="caoYaoShuJu.currentPage = 1"
      ></el-date-picker>
      <el-switch v-model="shiFouFaYao" :active-value="true" :inactive-value="false" active-color="#13ce66"
                 active-text="已发药" inactive-color="#ff4949" inactive-text="未发药">
      </el-switch>
      <el-divider direction="vertical"></el-divider>
      <el-button @click="dianJiChaXunYiZhu(0)">查询</el-button>
      <el-divider direction="vertical"></el-divider>
    </el-header>
    <el-main>
      <el-tabs v-model="tabsName">
        <el-tab-pane :name="0" label="历史信息">
          <el-table :data="caoYaoShuJu.data" :height="windowSize.h / 1.4">
            <el-table-column label="名称" prop="orderName"></el-table-column>
            <el-table-column label="开单时间" prop="inputDate" show-overflow-tooltip></el-table-column>
            <el-table-column label="医生" prop="doctorCodeName"></el-table-column>
            <el-table-column label="状态" prop="statusFlag">
              <template #default="scope">
                {{ getStatusFlag(scope.row.statusFlag) }}
              </template>
            </el-table-column>
            <el-table-column label="处方总额" prop="zongJia"></el-table-column>
            <el-table-column label="剂数" prop="quantity"></el-table-column>
            <el-table-column label="单剂金额" prop="orderJe"></el-table-column>
            <el-table-column label="医嘱号" prop="orderNo"></el-table-column>
            <el-table-column label="执行科室" prop="execDeptName"></el-table-column>
            <el-table-column label="操作" width="90">
              <template #default="scope">
                <el-button-group>
                  <el-button type="primary" @click="caoYaoYiZhuXiangQing(scope.row)" icon="View" title="查看详情"/>
                  <el-button icon="Delete" type="danger" @click="dianJiShanChu(scope.row, scope.$index)" title="删除"/>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              :current-page="caoYaoShuJu.currentPage"
              :page-size="caoYaoShuJu.pageSize"
              :pager-count="7"
              :total="caoYaoShuJu.total"
              layout="total, prev, pager, next"
              @current-change="handleCurrentChange"/>
        </el-tab-pane>
        <el-tab-pane :name="1" label="新增草药">
          <!--          <div :style="editorStyle">-->
          <xin-zheng-cao-yao :save-success="saveSuccess"/>
          <!--          </div>-->
        </el-tab-pane>
      </el-tabs>
    </el-main>
  </el-container>
  <el-dialog v-model="xiangQing.dialog" title="草药医嘱详情">
    <el-table :close-on-click-modal="false" :data="xiangQing.data" highlight-current-row stripe>
      <el-table-column label="编码" prop="chargeCode"></el-table-column>
      <el-table-column label="名称" prop="chargeCodeName"></el-table-column>
      <el-table-column label="药房" prop="groupNoName"></el-table-column>
      <el-table-column label="数量" prop="quantity"></el-table-column>
      <el-table-column label="单价" prop="unitPrice"></el-table-column>
      <el-table-column label="说明" prop="instruction"></el-table-column>
      <el-table-column label="包装规格" prop="serial">
        <template #default="scope">
          <span v-if="scope.row.serial === '01'">小包装</span>
          <span v-else-if="scope.row.serial === '99'">小包装</span>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script setup name="CaoYaoYiZhu">
import {shortcuts} from '@/data/shortcuts'
import {huanZheXinXi, youWuXuanZheHuanZhe} from '@/views/hospitalization/zhu-yuan-yi-sheng/public-js/zhu-yuan-yi-sheng'
import {getDateRangeFormatDate} from '@/utils/date'
import {huoQuCaoYaoShuJu, huoQuChaoYaoMingXi, shanChuCaoYao} from '@/api/zhu-yuan-yi-sheng/cao-yao-yi-zhu'
import store from '@/store'
import {stringIsBlank} from '@/utils/blank-utils'
import {computed, onActivated, ref, watch} from 'vue'
import router from '@/router'
import {ElMessageBox} from 'element-plus'
import XinZhengCaoYao from "@/views/hospitalization/zhu-yuan-yi-sheng/cao-yao-yi-zhu/XinZhengCaoYao";

const dateRange = ref([])
const caoYaoShuJu = ref({
  data: [],
  currentPage: 1,
  pageSize: 20,
  total: 0,
})
const shiFouFaYao = ref(false)
const windowSize = computed(() => {
  return store.state.app.windowSize
})

const editorStyle = {
  width: windowSize.value.w - 200 + 'px',
  height: windowSize.value.h - 100 + 'px',
  overflow: 'scroll'
}

const xiangQing = ref({
  dialog: false,
  data: [],
  yizhu: {},
})

const tabsName = ref(0)

const dianJiChaXunYiZhu = (val) => {
  if (youWuXuanZheHuanZhe()) return
  let dateS = getDateRangeFormatDate(dateRange.value)
  let data = {
    startTime: dateS.startTime,
    endTime: dateS.endTime,
    shiFouFaYao: shiFouFaYao.value,
    patNo: huanZheXinXi.value.inpatientNo,
    times: huanZheXinXi.value.admissTimes,
    currentPage: caoYaoShuJu.value.currentPage,
    pageSize: caoYaoShuJu.value.pageSize,
    total: val,
  }
  huoQuCaoYaoShuJu(data).then((res) => {
    caoYaoShuJu.value.data = res.records
    if (val === 0) {
      caoYaoShuJu.value.total = res.total
    }
  })
}

const saveSuccess = () => {
  handleCurrentChange(1)
  tabsName.value = 0
}

const handleCurrentChange = (val) => {
  caoYaoShuJu.value.currentPage = val
  dianJiChaXunYiZhu(0)
}

const caoYaoYiZhuXiangQing = (row) => {
  huoQuChaoYaoMingXi(row.orderNo).then((res) => {
    xiangQing.value.dialog = true
    xiangQing.value.data = res
    xiangQing.value.yizhu = row
  })
}

const dianJiShanChu = (row, index) => {
  ElMessageBox.confirm(`您确定要删除<span style="color: red">【${row.orderName}】</span>吗？`, '提示', {
    type: 'warning',
    dangerouslyUseHTMLString: true
  }).then(() => {
    shanChuCaoYao(row.inpatientNo, row.admissTimes, row.orderNo).then((res) => {
      caoYaoShuJu.value.data.splice(index, 1)
    })
  }).catch(() => {
  })
}

watch(
    () => huanZheXinXi.value,
    () => {
      dianJiChaXunYiZhu(0)
    }
)

onActivated(() => {
  dianJiChaXunYiZhu(0)
})


function getStatusFlag(val) {
  if (stringIsBlank(val)) return ''
  switch (val) {
    case '1':
      return '录入'
    case '2':
      return '收费'
    case '3':
      return '提交'
    case '4':
      return '发药'
    case 'd':
      return '删除'
    default:
      return ''
  }
}
</script>

<style scoped>
.el-main {
  padding: 0;
}

:deep(.el-dropdown-menu__item) {
  font-size: 14px !important;
  height: 26px;
  line-height: 26px;
  font-weight: bold;
}
</style>
