<template>
  <div class="layout_display_flex_y">
    <div>
      <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>
    </div>
    <div class="layout_flex_1-y layout_display_flex_y">
      <div class="layout_flex_1-y">
        <el-table :data="data.list" height="100%" 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>
      </div>
      <div>
        <el-pagination
            @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"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

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

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: '',
  totalSize: 0
})

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,
    })
  }
}
</script>
