<template>
  <div class="container">
    <!-- 顶部操作区域 -->
    <el-card class="header-card" shadow="never">
      <el-row :gutter="20" align="middle">
        <el-col :span="6">
          <span class="descriptions-item-label">住院号：</span>
          <el-input
            v-model="queryParams.searchKey"
            placeholder="请输入内容"
            clearable
            style="width: 300px"
            @keyup.enter="getPatientInfo"
          />
          <el-button type="primary" @click="getPatientInfo" style="margin-left: 10px">
            查询
          </el-button>
        </el-col>
        <el-col :span="18" style="text-align: right">
          <el-space>
            <el-button type="primary" @click="confirmCharge()">收预交金</el-button>
            <el-button type="primary" @click="showPatient()">在院患者</el-button>
          </el-space>
        </el-col>
      </el-row>
    </el-card>

    <!-- 患者信息区域 -->
    <el-card class="patient-info-card" shadow="never">
      <el-row align="middle" :gutter="20">
        <el-avatar
          :size="40"
          src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
          style="margin-left: 20px"
        />
        <el-col :span="10">
          <div>
            <span
              class="descriptions-item-label"
              style="font-size: 16px; margin: 0 0"
              v-if="patientInfo.patientName"
            >
              {{ patientInfo.patientName }} / {{ patientInfo.genderEnum_enumText }} /
              {{ patientInfo.age }}
            </span>
            <span class="descriptions-item-label"> 住院号: </span>
            <span class="descriptions-item-value"> {{ patientInfo.busNo }} </span>
          </div>
        </el-col>
        <el-col :span="4" style="text-align: left; margin-top: 10px">
          <span class="descriptions-item-label">预交金总额：</span>
          <el-text type="primary" size="large">
            {{ patientInfo.totalAmount ? patientInfo.totalAmount.toFixed(2) + ' 元' : '0.00 元' }}
          </el-text>
        </el-col>
        <el-col :span="4" style="text-align: left; margin-top: 10px">
          <span class="descriptions-item-label">余额：</span>
          <el-text type="primary" size="large">
            {{
              patientInfo.balanceAmount ? patientInfo.balanceAmount.toFixed(2) + ' 元' : '0.00 元'
            }}
          </el-text>
        </el-col>
      </el-row>
      <el-row :gutter="24" style="margin-top: 10px">
        <el-col :span="23">
          <span class="descriptions-item-label">在院科室/病区: </span>
          <span class="descriptions-item-value" v-if="patientInfo.inHospitalOrgName">
            {{ patientInfo.inHospitalOrgName }} /
            {{
              patientInfo.wardName +
              formatValue(patientInfo.houseName) +
              formatValue(patientInfo.bedName)
            }}
          </span>
        </el-col>
        <el-col :span="1">
          <el-button type="primary" @click="refund()">退费</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 表格区域 -->
    <el-card class="table-card" shadow="never">
      <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        v-loading="loading"
        border
      >
        <!-- <el-table-column prop="payWay" label="支付方式" /> -->
        <!-- <el-table-column prop="paymentEnum_enumText" label="状态" /> -->
        <el-table-column type="index" label="序号" width="70" align="center" />
        <el-table-column prop="paymentNo" label="收据号" width="280" align="center" />
        <el-table-column prop="tenderedAmount" label="金额" align="center">
          <template #default="scope">
            <span :class="{ 'negative-amount': scope.row.tenderedAmount < 0 }">
              {{
                scope.row.tenderedAmount ? scope.row.tenderedAmount.toFixed(2) + ' 元' : '0.00 元'
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="paymentEnum_enumText"
          label="票据类型"
          align="center"
          min-width="120"
        />
        <!-- <el-table-column prop="afterBalance" label="可退金额" min-width="120">
          <template #default="scope">
            <span>
              {{
                scope.row.afterBalance ? scope.row.afterBalance.toFixed(2) : scope.row.afterBalance
              }}
            </span>
          </template>
        </el-table-column> -->
        <el-table-column prop="operateTime" label="收款时间" align="center" min-width="180" />
        <el-table-column prop="enterer" label="收款员" align="center" min-width="100" />
        <!-- <el-table-column label="操作" min-width="100" align="center" fixed="right">
          <template #default="scope">
            <el-button link type="primary" size="small">补打</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getPatientInfo"
      />
    </el-card>
    <!-- 患者列表弹窗 -->
    <PatientList
      :drawerVisible="showPatientList"
      ref="showPatientRef"
      :wardListOptions="wardListOptions"
      @patientSelected="handlePatientSelected"
      @triggerSearch="handleTriggerSearch"
    />
    <ChargeDialog
      ref="chargeListRef"
      :open="openDialog"
      @close="handleClose"
      :patientInfo="patientInfo"
      :payLists="payLists"
    />
    <RefundDialog
      :open="openRefundDialog"
      @close="handleClose"
      :patientInfo="patientInfo"
      :payLists="payLists"
    />
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue';
import { getDepositInfo, getDepositInfoPage } from './components/api';
import PatientList from './components/patientList.vue';
import ChargeDialog from './components/chargeDialog.vue';
import RefundDialog from './components/refundDialog.vue';
const showPatientList = ref(false);
const showPatientRef = ref();
const openDialog = ref(false);
const openRefundDialog = ref(false);
const chargeListRef = ref();
const loading = ref(false);
const tableData = ref([]);
const wardListOptions = ref(undefined);
const payLists = ref(undefined);
const total = ref(0);
const { proxy } = getCurrentInstance();
const patientInfo = ref({});
const queryParams = ref({
  pageNo: 1,
  pageSize: 10,
  searchKey: undefined, // 供应商名称
});
const tableRowClassName = ({ row, rowIndex }) => {
  if (row.amount < 0) {
    // 根据图片，当金额为负数时，整行（或特定列）文字变红
    // 这里我们给整行添加一个class，然后在style中定义颜色
    // 或者也可以只给特定列的文字变红，如金额列
    return 'negative-row-text';
  }
  return '';
};

/**
 * 获取患者信息
 */
function getPatientInfo() {
  console.log(queryParams.searchKey, 'queryParams.searchKey');
  if (!queryParams.value.searchKey) {
    proxy.$modal.msgError('请先输入住院号！');
    return;
  }
  console.log(queryParams.value, 'queryParams.value');
  getDepositInfo({ busNo: queryParams.value.searchKey }).then((res) => {
    queryParams.value.searchKey = '';
    if (res.code == 200 && res.data.records[0].encounterId) {
      patientInfo.value = res.data.records[0];
      getDepositInfoPage({ encounterId: res.data.records[0].encounterId }).then((res) => {
        tableData.value = res.data;
      });
    }
  });
}

/**
 * 显示患者列表
 */
function showPatient() {
  showPatientList.value = true;
  nextTick(() => {
    proxy.$refs['showPatientRef'].show();
  });
}

// 确认收费
function confirmCharge() {
  console.log(patientInfo.value, 'patientInfo.valueconfirmCharge');
  if (patientInfo.value.patientId) {
    openDialog.value = true;
  } else {
    proxy.$modal.msgError('请先选择病人！');
  }
}

function refund() {
  if (patientInfo.value.patientId) {
    openRefundDialog.value = true;
  } else {
    proxy.$modal.msgError('请先选择病人！');
  }
}

/** 选择病人 */
function handlePatientSelected(row) {
  // console.log(row, 'rowwwwwwwwhandlePatientSelected');
  // queryParams.value.searchKey = row.admissionNo;
  patientInfo.value = row;
  // nextTick(() => {
  //   getPatientInfo();
  // });
}
/** 重置操作表单 */
function reset() {
  form.value = {
    id: undefined,
    patientName: undefined,
    genderEnum_enumText: undefined,
    ageString: undefined,
    payWay: undefined,
    patientId: undefined,
    organizationId_dictText: undefined,
    totalPrice: undefined,
    deposit: undefined,
    balanceAmount: undefined,
    bedLocationId_dictText,
  };
  proxy.resetForm('formRef');
}

// 复制文本到剪贴板
async function copyText() {
  console.log('复制文本:', form.value);
  try {
    // 使用 navigator.clipboard.writeText 复制文本
    await navigator.clipboard.writeText(form.value.admissionNo);
    proxy.$modal.msgSuccess('复制成功！');
  } catch (err) {
    proxy.$modal.msgError('复制失败！' + err);
  }
}

function formatValue(value) {
  return value ? '-' + value : '';
}

/**
 * 处理关闭事件
 *
 * @returns {void} 无返回值
 */
function handleClose(data) {
  openDialog.value = false;
  openRefundDialog.value = false;
  if (data?.status === 'success' && data?.busNo) {
    queryParams.value.searchKey = data.busNo;
    getPatientInfo();
  }
}
//在院患者查询
function handleTriggerSearch(busNo) {
  queryParams.value.searchKey = busNo; // 将选中患者的住院号赋值给搜索参数
  getPatientInfo(); // 调用现有查询方法
}
</script>

<style lang="scss" scoped>
.container {
  padding: 15px;
  background-color: #f0f2f5; // 类似图片背景色
  min-height: 90vh;
}

.header-card,
.patient-info-card,
.table-card {
  margin-bottom: 15px;
  border: none; // 移除卡片边框，更接近图片效果
  :deep(.el-card__body) {
    // 调整卡片内边距
    padding: 15px;
  }
}
.patient-info-card {
  :deep(.el-card__body) {
    padding-bottom: 0; // 患者信息卡片底部不需要太多padding
  }
}

.patient-details {
  margin-top: 15px;
  :deep(.el-descriptions__label.el-descriptions__cell.is-bordered-label) {
    background-color: #fafafa; // 表头背景色
  }
  :deep(td),
  :deep(th) {
    // 移除边框，更像图片
    border: none;
  }
}

:deep(.custom-label .el-input__inner) {
  color: #ff7100 !important; // 橙色高亮
  font-weight: bold;
}
.amount-highlight-balance {
  color: #ff7100; // 橙色高亮
  font-weight: bold;
}

// 表格样式调整
.el-table {
  :deep(th) {
    background-color: #f0f8ff !important; // 表头淡蓝色背景
    color: #333;
    font-weight: normal;
  }
  :deep(td),
  :deep(th.is-leaf) {
    border-bottom: 1px solid #ebeef5; // 只保留底部边框
    border-left: none;
    border-right: none;
    border-top: none;
  }
  :deep(.el-table__row):hover > td {
    // 鼠标悬浮时背景色
    background-color: #f5f7fa;
  }
}

.negative-amount {
  color: red;
}

// 如果需要整行文字变红
.el-table .negative-row-text {
  color: red;
  td {
    color: red !important; // 确保覆盖默认样式
  }
  .el-button--primary.is-link {
    // 如果按钮也需要变红
    color: red !important;
  }
}
.action-red {
  // 单独给退还按钮变红
  color: red !important;
}

// 移除el-input-group__append的边框，使其与输入框融为一体
:deep(.el-input-group__append) {
  border-left: 0;
  background-color: #409eff;
  color: white;
  .el-button {
    color: white;
    &:hover {
      background-color: #66b1ff;
    }
  }
}

:deep(.custom-label .el-form-item__label) {
  background-color: #fafafa; /* 设置背景色 */
  padding: 4px 8px; /* 可选：添加一些内边距 */
  border: #e9e8e8 solid 1px; /* 可选：添加边框 */
  display: flex; /* 使用 flex 布局 */
  align-items: center; /* 垂直居中 */
  // justify-content: center; /* 水平居中 */
}
</style>
