<template>
  <div style="height: calc(100vh - 126px)">
    <!-- 操作工具栏 -->

    <!-- 主内容区域 - 左右布局 -->
    <div style="display: flex; height: calc(100% - 51px)">
      <!-- 左侧：医嘱列表 -->
      <div style="width: 50%; border-right: 1px solid #e4e7ed; overflow-y: auto">
        <!--筛选条件 -->
        <div style="display: flex; align-items: center; gap: 10px; padding: 10px 0 0 10px">
          <!-- 医嘱类型tabs -->
          <el-tabs
            v-model="orderType"
            type="card"
            class="date-tabs"
            @tab-click="handleOrderTypeClick"
            style="width: auto; margin-right: 0"
          >
            <el-tab-pane label="全部" name="all"></el-tab-pane>
            <el-tab-pane label="长期" name="long"></el-tab-pane>
            <el-tab-pane label="临时" name="temp"></el-tab-pane>
          </el-tabs>

          <!-- 医嘱类型选择 -->
          <el-form-item label="医嘱类型：" style="margin-bottom: 0">
            <el-select
              v-model="specificOrderType"
              placeholder="医嘱类型"
              clearable
              style="width: 120px"
            >
              <el-option label="请选择" value="" />
              <el-option
                v-for="type in orderTypeOptions"
                :key="type.value"
                :label="type.label"
                :value="type.value"
              />
            </el-select>
          </el-form-item>

          <!-- 显示有效勾选框 -->
          <el-checkbox v-model="showValid">显示有效</el-checkbox>
        </div>
        <div style="display: flex; align-items: center; gap: 10px; padding: 10px">
          <el-form-item label="开方科室：" style="margin-bottom: 0">
            <el-select
              v-model="prescribeDept"
              placeholder="开方科室"
              clearable
              style="width: 120px"
            >
              <el-option label="请选择" value="" />
              <el-option
                v-for="type in departmentOptions"
                :key="type.value"
                :label="type.label"
                :value="type.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="执行科室：" style="margin-bottom: 0">
            <el-select
              v-model="execDepartment"
              placeholder="执行科室"
              clearable
              style="width: 120px"
            >
              <el-option label="请选择" value="" />
              <el-option
                v-for="type in departmentOptions"
                :key="type.value"
                :label="type.label"
                :value="type.value"
              />
            </el-select>
            <button class="reset-btn" @click="resetExecDepartment" title="重置">
              <el-icon><Refresh /></el-icon>
            </button>
          </el-form-item>

          <!-- 执行科室选择 -->
        </div>
        <!-- 非医嘱计费 -->
        <div
          style="margin: 10px 0; border: 1px solid #e4e7ed; border-radius: 4px; overflow: hidden"
        >
          <div style="background-color: #f5f7fa; padding: 8px 12px; font-weight: bold">
            非医嘱计费
          </div>
          <table
            style="
              width: 100%;
              border-collapse: collapse;
              border: 1px solid #e4e7ed;
              border-top: none;
            "
          >
            <tbody>
              <tr style="border-bottom: 1px solid #e4e7ed">
                <td style="padding: 10px; width: 100px">床位计费</td>
                <td style="padding: 10px; text-align: right">
                  住院天数：{{ hospitalDays }}天 / 计费数量：{{ billingQuantity }}
                </td>
              </tr>
              <tr>
                <td style="padding: 10px; width: 100px">其他</td>
                <td style="padding: 10px; text-align: right">总费用：{{ totalCost.toFixed(2) }}</td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- 医嘱表格 -->
        <div v-loading="loading">
          <el-table
            ref="orderTableRef"
            :data="orderList"
            border
            style="width: 100%"
            :header-cell-style="{ background: '#f5f7fa !important' }"
          >
            <!-- <el-table-column type="selection" align="center" width="50" /> -->
            <el-table-column label="类型" prop="type" width="80" align="center" />
            <el-table-column label="医嘱内容" prop="content" />
            <el-table-column label="预计执行" prop="unit" width="100" align="center" />
            <el-table-column label="开始/停止" prop="period" width="180" align="center">
              <template #default="scope">
                {{ scope.row.startDate }}<br />
                {{ scope.row.endDate || '未停止' }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <!-- 右侧：费用列表 -->
      <div style="width: 50%; overflow-y: auto">
        <div
          style="
            height: 51px;
            border-bottom: 2px solid #e4e7ed;
            display: flex;
            align-items: center;
            padding: 0 15px;
          "
        >
          <div style="display: flex; align-items: center; gap: 10px">
            <el-tabs
              v-model="orderType"
              type="card"
              class="date-tabs"
              @tab-click="handleOrderTypeClick"
              style="width: auto; margin-right: 0"
            >
              <el-tab-pane label="费用明细" name="all"></el-tab-pane>
              <el-tab-pane label="按天汇总" name="long"></el-tab-pane>
            </el-tabs>
          </div>

          <div style="display: flex; align-items: center; gap: 10px; margin-left: 10px">
            <!-- 项目选择 -->
            <el-form-item label="项目：" style="margin-bottom: 0">
              <el-select
                v-model="selectedProject"
                placeholder="项目"
                clearable
                style="width: 120px"
              >
                <el-option label="请选择" value="" />
                <el-option
                  v-for="project in projectOptions"
                  :key="project.value"
                  :label="project.label"
                  :value="project.value"
                />
              </el-select>
            </el-form-item>

            <!-- 显示静脉勾选框 -->
            <el-checkbox v-model="showVenous">显示静脉</el-checkbox>

            <!-- 补费按钮 -->
            <el-button type="primary">补费</el-button>
          </div>
        </div>
        <div v-loading="loading">
          <el-table
            ref="feeTableRef"
            :data="feeList"
            border
            style="width: 100%"
            :header-cell-style="{ background: '#f5f7fa !important' }"
          >
            <el-table-column type="selection" align="center" width="50" />
            <el-table-column label="收费项目" prop="itemName" min-width="180" />
            <el-table-column label="单价" prop="unitPrice" width="100" align="center" />
            <el-table-column label="使用数量" prop="quantity" width="100" align="center" />
            <el-table-column label="金额" prop="amount" width="100" align="center" />
            <el-table-column label="退费审核" width="80" align="center">
              <template #default="scope">
                <el-button type="text" style="color: #409eff">退费申请</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { patientInfoList } from '../../medicalOrderExecution/store/patient.js';
import { formatDateStr } from '@/utils/index';

// 响应式数据
const loading = ref(false);
const orderList = ref([]); // 医嘱列表
const feeList = ref([]); // 费用列表
const hospitalDays = ref(0); // 住院天数
const billingQuantity = ref(0); // 计费数量
const totalCost = ref(0.0); // 总费用
const execDepartment = ref('');
const orderType = ref('all'); // all, long, temp
const specificOrderType = ref('');
const showValid = ref(true);
const prescribeDept = ref('');
const selectedProject = ref('');
const showVenous = ref(false);
const departmentOptions = ref([]);
const orderTypeOptions = ref([]);
const projectOptions = ref([]);
const orderTableRef = ref(null);
const feeTableRef = ref(null);

// 初始化
onMounted(() => {
  // 加载选项数据
  loadOptions();
  // 加载初始数据
  handleQuery();
  // 生成模拟床位计费数据
  generateBedBillingData();
});

// 加载选项数据
function loadOptions() {
  // 模拟科室数据
  departmentOptions.value = [
    { label: '内科', value: 'internal' },
    { label: '外科', value: 'surgery' },
    { label: '儿科', value: 'pediatrics' },
    { label: '妇产科', value: 'obstetrics' },
    { label: '其他科室', value: 'others' },
  ];

  // 模拟医嘱类型数据
  orderTypeOptions.value = [
    { label: '药品', value: 'drug' },
    { label: '检查', value: 'check' },
    { label: '检验', value: 'test' },
    { label: '治疗', value: 'treatment' },
  ];

  // 模拟项目数据
  projectOptions.value = [
    { label: '药品', value: 'drug' },
    { label: '检查', value: 'check' },
    { label: '检验', value: 'test' },
    { label: '治疗', value: 'treatment' },
  ];
}

// 处理医嘱类型切换
function handleOrderTypeClick(tab) {
  orderType.value = tab.paneName;
  // 只更新医嘱列表，不影响费用列表
  orderList.value = filterOrderList();
}

// 生成模拟床位计费数据
function generateBedBillingData() {
  // 模拟从接口获取的数据
  // 住院天数随机生成1-30天
  hospitalDays.value = Math.floor(Math.random() * 30) + 1;
  // 计费数量根据住院天数生成
  billingQuantity.value = Math.ceil(hospitalDays.value / 7);
  // 总费用根据计费数量计算
  totalCost.value = billingQuantity.value * 200; // 假设每部分费用200元
}

// 生成模拟医嘱数据
function generateMockOrderData() {
  return [
    {
      type: '长期',
      content: '维生素C片【0.1g*100片/瓶】(住院西药房)',
      unit: '0.1g(1片)',
      startDate: '2025-07-01',
      endDate: '',
      id: '1',
    },
    {
      type: '长期',
      content: '盐酸地芬尼多片【25mg*30片】(住院西药房)',
      unit: '25mg(1片)',
      startDate: '2025-07-01',
      endDate: '',
      id: '2',
    },
    {
      type: '长期',
      content: '注射用头孢他啶【0.5g/瓶】(住院西药房)',
      unit: '0.5g(1瓶)',
      startDate: '2025-07-01',
      endDate: '',
      id: '3',
    },
    {
      type: '长期',
      content: '静脉注射2.0分/每日一次(9点)',
      unit: '',
      startDate: '2025-07-01',
      endDate: '',
      id: '4',
    },
    {
      type: '长期',
      content: '注射用苄星青霉素(基)【120万单位/瓶*10瓶/盒】(住院西药房)',
      unit: '120万u/1瓶',
      startDate: '2025-07-01',
      endDate: '',
      id: '5',
    },
    {
      type: '长期',
      content: '维生素K1注射液(国基)【10mg*1ml*10支/盒】(住院西药房)',
      unit: '10mg/1支',
      startDate: '2025-07-01',
      endDate: '',
      id: '6',
    },
    {
      type: '护理',
      content: '护理级别：III级护理',
      unit: '',
      startDate: '2025-07-01',
      endDate: '',
      id: '7',
    },
    {
      type: '长期',
      content: '病情：病重',
      unit: '',
      startDate: '2025-07-01',
      endDate: '',
      id: '8',
    },
  ];
}

// 生成模拟费用数据
function generateMockFeeData() {
  return [
    {
      itemName: '盐酸地芬尼多片',
      unitPrice: 20.3,
      quantity: 5,
      amount: 3.4,
      id: '1',
    },
    {
      itemName: '维生素C片',
      unitPrice: 12,
      quantity: 5,
      amount: 0.6,
      id: '2',
    },
    {
      itemName: '盐酸地芬尼多片',
      unitPrice: 20.3,
      quantity: 1,
      amount: 0.68,
      id: '3',
    },
  ];
}
// 重置执行科室
function resetExecDepartment() {
  execDepartment.value = '';
}

// 处理医嘱列表筛选
function filterOrderList() {
  let filteredOrders = generateMockOrderData();

  // 应用红色框内的筛选条件（医嘱列表专用）
  if (orderType.value === 'long') {
    filteredOrders = filteredOrders.filter((item) => item.type === '长期');
  } else if (orderType.value === 'temp') {
    filteredOrders = filteredOrders.filter((item) => item.type === '临时');
  }

  // 执行科室筛选
  if (execDepartment.value) {
    // 这里可以根据实际业务逻辑进行筛选
  }

  // 医嘱类型筛选
  if (specificOrderType.value) {
    // 这里可以根据实际业务逻辑进行筛选
  }

  // 显示有效筛选
  if (showValid.value) {
    // 这里可以根据实际业务逻辑进行筛选
  }

  // 开方科室筛选
  if (prescribeDept.value) {
    // 这里可以根据实际业务逻辑进行筛选
  }

  return filteredOrders;
}

// 处理费用列表筛选
function filterFeeList() {
  let filteredFees = generateMockFeeData();

  // 应用绿色框内的筛选条件（费用列表专用）

  // 项目筛选
  if (selectedProject.value) {
    // 这里可以根据实际业务逻辑进行筛选
  }

  // 显示静脉筛选
  if (showVenous.value) {
    // 这里可以根据实际业务逻辑进行筛选
  }

  return filteredFees;
}

// 查询按钮点击
function handleQuery() {
  if (patientInfoList.value.length === 0) {
    ElMessage.warning('请先选择患者');
    return;
  }

  loading.value = true;

  // 模拟API调用延迟
  setTimeout(() => {
    // 分别独立筛选医嘱列表和费用列表
    orderList.value = filterOrderList();
    feeList.value = filterFeeList();

    loading.value = false;
  }, 500);
}

// 暴露方法供父组件调用
defineExpose({
  handleQuery,
});
</script>

<style scoped>
/* 日期tabs样式 */
.date-tabs .el-tabs__header {
  margin-bottom: 0;
}

.date-tabs .el-tabs__content {
  display: none;
}

:deep(.el-table__header th) {
  background-color: #f5f7fa !important;
  font-weight: bold;
}

:deep(.el-table__row:hover > td) {
  background-color: #f5f7fa !important;
}

/* 自定义复选框样式 */
:deep(.el-checkbox__label) {
  margin-left: 4px;
}

/* 调整按钮样式 */
:deep(.el-button--primary) {
  background-color: #409eff;
  border-color: #409eff;
}

:deep(.el-button--text) {
  color: #409eff;
}

.reset-btn {
  width: 24px;
  height: 24px;
  border: none;
  background-color: transparent;
  cursor: pointer;
  margin-left: 8px;
  padding: 0;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.reset-btn:hover {
  background-color: #f5f7fa;
  transform: scale(1.05);
}

.reset-btn:active {
  transform: scale(0.95);
}
</style>
