<template>
  <page-layer>
    <template #header>
      <el-input size="small" placeholder="在此输入住院号" @keyup.enter="query()" v-model="inpatientNo" clearable prefix-icon="Search" style="width: 300px">
        <template #prepend>住院号</template>
      </el-input>
      <el-input size="small" placeholder="输入收费项目码" @keyup.enter="query()" v-model="chargeCodeMx" clearable prefix-icon="Search" style="width: 300px">
        <template #prepend>收费项目码</template>
      </el-input>
      <el-divider direction="vertical"></el-divider>
      <el-button type="primary" icon="Search" @click="query">查询</el-button>
    </template>
    <template #main>
      <el-table :data="data.list" :height="tableHeight" stripe highlight-current-row>
        <el-table-column prop="opIdCode" fixed label="操作人员"></el-table-column>
        <el-table-column fixed label="描述">
          <template #default="scope">
            {{ describe(scope.row.serial) }}
          </template>
        </el-table-column>
        <el-table-column prop="chargeCode" fixed width="100" show-overflow-tooltip label="药品/项目"></el-table-column>
        <el-table-column width="50" label="金额">
          <template #default="scope">
            <span v-if="scope.row.chargeFee > 0" style="color: blue">{{ scope.row.chargeFee }}￥</span>
            <span v-else style="color: red">{{ scope.row.chargeFee }} ￥</span>
          </template>
        </el-table-column>
        <el-table-column prop="chargeAmount" width="50" label="数量"></el-table-column>
        <el-table-column width="50" label="状态">
          <template #default="socpe">
            {{ costState(socpe.row.chargeStatus) }}
          </template>
        </el-table-column>
        <el-table-column prop="admissTimes" width="50" label="住院次数"></el-table-column>
        <el-table-column prop="chargeDate" sortable width="80" label="收费日期"></el-table-column>
        <el-table-column prop="deptCode" label="科室"></el-table-column>
        <el-table-column prop="detailSn" width="50" label="流水号"></el-table-column>
        <el-table-column prop="execUnit" show-overflow-tooltip label="执行科室"></el-table-column>
        <el-table-column prop="genTime" sortable width="80" label="系统时间"></el-table-column>
        <el-table-column width="50" label="是否为婴儿">
          <template #default="socpe">
            {{ babyOrNot(socpe.row.infantFlag) }}
          </template>
        </el-table-column>
        <el-table-column prop="ledgerSn" width="50" label="结算次数"></el-table-column>
        <el-table-column prop="orderNo" label="医嘱号"></el-table-column>
        <el-table-column width="50" label="是否自费">
          <template #default="socpe">
            {{ aerYouSure(socpe.row.selfFlag) }}
          </template>
        </el-table-column>
        <el-table-column prop="wardCode" show-overflow-tooltip label="病房"></el-table-column>
        <el-table-column label="修改金额" width="60">
          <template #default="scope">
            <el-button text @click="tijiao(scope.row)" size="small" type="warning">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          v-show="data.list.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchCriteria.currentPage"
          :page-sizes="[20, 30, 40, 50, 100]"
          :page-size="searchCriteria.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="data.totalSize"
          style="margin-top: 5px"
      ></el-pagination>
    </template>
  </page-layer>
</template>

<script>
import { reactive, ref } from '@vue/reactivity'
import { queryHospitalizationExpenses, totalModify } from '@/api/yz-data-mod/zy-charge-fee-modify'
import store from '@/store'
import { ElMessageBox, ElMessage, ElNotification } from 'element-plus'
import { describe, costState, aerYouSure, babyOrNot } from '@/utils/computed'
import PageLayer from "@/layout/PageLayer";

export default {
  name: 'ZyChargeFeeModify',
  components: {PageLayer},
  setup() {
    const windowSize = store.state.app.windowSize //获取到屏幕的大小
    const tableHeight = windowSize.h - 100 //获取宽度

    const searchCriteria = reactive({
      pageSize: 30,
      currentPage: 1,
      inpatientNo: '',
      chargeCodeMx: '',
    })

    const inpatientNo = ref('')
    const chargeCodeMx = ref('')
    const handleSizeChange = (val) => {
      searchCriteria.pageSize = val
      query()
    }
    const handleCurrentChange = (val) => {
      searchCriteria.currentPage = val
      query()
    }

    const data = reactive({
      list: [],
      data: '',
    })

    const tijiao = (val) => {
      ElMessageBox.prompt('输入修改金额', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[-\+]?\d{0,8}\.{0,1}(\d{1,2})?$/,
        inputErrorMessage: '请输入正确的金额',
        inputValue: String(val.chargeFee),
      })
        .then(({ value }) => {
          if (value === String(val.chargeFee)) {
            ElNotification.info({
              message: '数据没有变化，无需修改',
            })
            retuen
          }

          data.data = val
          data.data.newChargeFee = value
          totalModify(data.data)
            .then(() => {
              ElNotification({
                type: 'success',
                dangerouslyUseHTMLString: true,
                title: '金额修改成功',
                message: '修改前：' + data.data.chargeFee + '<br/>修改后: ' + value,
              })
              queryHospitalizationExpenses(searchCriteria).then((res) => {
                data.list = res.data
              })
            })
            .catch(() => {
              ElNotification({
                type: 'error',
                message: '修改失败',
              })
            })
        })
        .catch(() => {})
    }

    function query() {
      searchCriteria.inpatientNo = inpatientNo.value
      searchCriteria.chargeCodeMx = chargeCodeMx.value
      if (searchCriteria.inpatientNo !== '' && searchCriteria.chargeCodeMx !== '') {
        queryHospitalizationExpenses(searchCriteria)
          .then((res) => {
            data.list = res.data
            data.totalSize = res.total
          })
          .catch(() => {
            data.list = []
          })
      } else {
        ElMessage.error({
          message: '两项都需要填写',
          showClose: true,
          duration: 2000,
        })
      }
    }

    return {
      inpatientNo,
      chargeCodeMx,
      query,
      data,
      tijiao,
      searchCriteria,
      tableHeight,
      handleSizeChange,
      handleCurrentChange,
      describe,
      costState,
      babyOrNot,
      aerYouSure,
    }
  },
}
</script>

<style></style>
