<template>
  <div style="height: calc(100vh - 126px)">
    <!-- 操作工具栏 -->
    <div
      style="
        height: 51px;
        border-bottom: 2px solid #e4e7ed;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
      "
    >
      <div style="display: flex; align-items: center">
        <!-- 日期选择tabs -->
        <el-tabs
          v-model="dateRange"
          type="card"
          class="date-tabs"
          @tab-click="handleDateTabClick"
          style="margin-right: 20px"
        >
          <el-tab-pane label="今日" name="today"></el-tab-pane>
          <el-tab-pane label="昨日" name="yesterday"></el-tab-pane>
          <!-- <el-tab-pane label="其他" name="other"></el-tab-pane> -->
        </el-tabs>

        <!-- 日期选择器 -->
        <el-date-picker
          v-model="dateRangeValue"
          type="daterange"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="handleDatePickerChange"
          style="width: 240px; margin-right: 20px"
        />

        <!-- 费用类型选择 -->
        <el-select
          v-model="formParams.chargeItemEnum"
          placeholder="请选择费用类型"
          clearable
          style="width: 150px; margin-right: 20px"
        >
          <el-option
            v-for="type in med_chrgitm_type"
            :key="type.value"
            :label="type.label"
            :value="type.value"
          />
        </el-select>

        <!-- 执行科室选择 -->
        <el-select
          v-model="formParams.orgId"
          placeholder="请选择执行科室"
          clearable
          style="width: 150px; margin-right: 20px"
        >
          <el-option
            v-for="dept in orgOptions"
            :key="dept.id"
            :label="dept.name"
            :value="dept.id"
          />
        </el-select>

        <!-- 查询按钮 -->
        <el-button type="primary" @click="onReset">重置</el-button>
        <el-button type="primary" @click="handleQuery">查询</el-button>
      </div>

      <div style="display: flex; align-items: center">
        <!-- 导出按钮 -->
        <el-button @click="handleExport">导出</el-button>

        <!-- 打印按钮 -->
        <!-- <el-button @click="handlePrint" style="margin-left: 15px">打印</el-button> -->
      </div>
    </div>

    <!-- 费用明细列表区域 -->
    <div
      style="padding: 10px; background-color: #eef9fd; height: 100%; overflow-y: auto"
      v-loading="loading"
    >
      <!-- 费用汇总信息 -->
      <div style="background-color: white; padding: 15px; margin-bottom: 10px; border-radius: 4px">
        <div style="display: flex; justify-content: space-between; align-items: center">
          <div>
            <h3 style="margin: 0; font-weight: normal; color: #303133">费用汇总</h3>
            <p style="margin: 5px 0; color: #606266; font-size: 14px">
              费用周期：{{ formatDateRange() }}
            </p>
          </div>
          <div style="text-align: right">
            <p style="margin: 0; font-size: 18px; font-weight: bold; color: #ff4d4f">
              合计金额：¥{{ totalAmount.toFixed(2) }}
            </p>
            <p style="margin: 5px 0; color: #606266; font-size: 14px">
              明细项数：{{ feeDetailList.length }}项
            </p>
          </div>
        </div>
      </div>

      <el-table
        ref="tableRef"
        :data="feeDetailList"
        border
        style="width: 100%"
        max-height="400px"
        :header-cell-style="{ background: '#eef9fd !important' }"
        @sort-change="handleSortChange"
      >
        <el-table-column label="项目名称" prop="chargeName" min-width="200" />
        <el-table-column
          label="费用类型"
          prop="chargeItemEnum_enumText"
          width="120"
          align="center"
        />
        <el-table-column label="单价" prop="unitPrice" width="100" align="center" sortable />
        <el-table-column label="数量" prop="quantityValue" width="100" align="center" sortable />
        <el-table-column label="金额" prop="totalPrice" width="100" align="center" sortable>
          <template #default="scope">
            <span style="color: #ff4d4f">{{ scope.row.totalPrice.toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column :prop="orgId" label="执行科室" width="120" align="center">
          <template #default="scope">
            {{ selectOrg(scope.row.orgId) }}
          </template>
        </el-table-column>

        <el-table-column label="执行人" prop="practitioner" width="100" align="center" />
        <el-table-column label="执行日期" prop="recordedTime" width="120" align="center">
          <template #default="scope">
            {{ moment(scope.row?.recordedTime).format('YYYY-MM-DD HH:mm:ss') }}
          </template>
        </el-table-column>

        <el-table-column label="医保类型" prop="chrgitmLv_enumText" width="100" align="center">
        </el-table-column>
        <el-table-column label="备注" prop="remark" min-width="150" />
      </el-table>

      <!-- 分页 -->
      <div style="margin-top: 15px; display: flex; justify-content: flex-end">
        <el-pagination
          v-model:current-page="formParams.pageNo"
          v-model:page-size="formParams.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

      <!-- 无数据提示 -->
      <el-empty v-if="!loading && feeDetailList.length === 0" description="暂无费用明细数据" />
    </div>

    <!-- 打印预览弹窗 -->
    <el-dialog
      v-model="printDialogVisible"
      title="打印预览"
      width="80%"
      :close-on-click-modal="false"
    >
      <div id="print-content">
        <div style="text-align: center; margin-bottom: 20px">
          <h2 style="margin: 0">费用明细清单</h2>
          <p style="margin: 5px 0">患者姓名：{{ patientInfo || '未选择患者' }}</p>
          <p style="margin: 5px 0">费用周期：{{ formatDateRange() }}</p>
        </div>

        <table style="width: 100%; border-collapse: collapse">
          <thead>
            <tr style="background-color: #eef9fd">
              <th style="border: 1px solid #e4e7ed; padding: 8px">项目名称</th>
              <th style="border: 1px solid #e4e7ed; padding: 8px">费用类型</th>
              <th style="border: 1px solid #e4e7ed; padding: 8px">单价</th>
              <th style="border: 1px solid #e4e7ed; padding: 8px">数量</th>
              <th style="border: 1px solid #e4e7ed; padding: 8px">金额</th>
              <th style="border: 1px solid #e4e7ed; padding: 8px">执行科室</th>
              <th style="border: 1px solid #e4e7ed; padding: 8px">执行日期</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in feeDetailList" :key="item.id">
              <td style="border: 1px solid #e4e7ed; padding: 8px">{{ item.itemName }}</td>
              <td style="border: 1px solid #e4e7ed; padding: 8px">{{ item.feeTypeName }}</td>
              <td style="border: 1px solid #e4e7ed; padding: 8px">
                {{ item.unitPrice.toFixed(2) }}
              </td>
              <td style="border: 1px solid #e4e7ed; padding: 8px">{{ item.quantity }}</td>
              <td style="border: 1px solid #e4e7ed; padding: 8px">{{ item.amount.toFixed(2) }}</td>
              <td style="border: 1px solid #e4e7ed; padding: 8px">{{ item.execDept }}</td>
              <td style="border: 1px solid #e4e7ed; padding: 8px">{{ item.executeDate }}</td>
            </tr>
          </tbody>
          <tfoot>
            <tr style="background-color: #f5f7fa">
              <td
                colspan="4"
                style="
                  border: 1px solid #e4e7ed;
                  padding: 8px;
                  text-align: right;
                  font-weight: bold;
                "
              >
                合计：
              </td>
              <td
                colspan="3"
                style="border: 1px solid #e4e7ed; padding: 8px; color: #ff4d4f; font-weight: bold"
              >
                ¥{{ totalAmount.toFixed(2) }}
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
      <template #footer>
        <el-button @click="printDialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="doPrint">打印</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {computed, onMounted, reactive, ref, watch} from 'vue';
import moment from 'moment';
import {ElMessage} from 'element-plus';
import {patientInfoList} from '../../components/store/patient.js';
import {formatDateStr} from '@/utils/index';
import {getCostDetail} from './api.js';
import {getOrgList} from '../../../basicmanage/ward/components/api.js';

const { proxy } = getCurrentInstance();
const { med_chrgitm_type } = proxy.useDict('med_chrgitm_type');

// 响应式数据
const loading = ref(false);
const feeDetailList = ref([]);
const dateRange = ref('today'); // today, yesterday, other
const dateRangeValue = ref([]);
const execDepartment = ref('');
const departmentOptions = ref([]);
const feeTypeOptions = ref([]);
const tableRef = ref(null);
const patientInfo = ref('');
const orgOptions = ref([]);
const formParams = reactive({
  chargeItemEnum: undefined,
  orgId: undefined,
  recordedTimeSTime: undefined,
  recordedTimeETime: undefined,
  pageSize: 10,
  pageNo: 1,
});

const props = defineProps({
  activeTab: {
    type: String,
  },
});

// 分页相关
const total = ref(0);

// 打印相关
const printDialogVisible = ref(false);

// 计算总金额
const totalAmount = computed(() => {
  return feeDetailList.value.reduce((sum, item) => {
    return sum + (item.totalPrice || 0);
  }, 0);
});

// 初始化
onMounted(() => {
  // 设置默认日期
  const today = new Date();
  dateRangeValue.value = [formatDateStr(today, 'YYYY-MM-DD'), formatDateStr(today, 'YYYY-MM-DD')];
});

watch(
  () => patientInfoList,
  (newValue) => {
    if (newValue.value.length > 1) {
      if (props.activeTab == 'expenseDetail') {
        ElMessage({
          type: 'error',
          message: '一次只能查询一位患者的费用明细',
        });
        return;
      }
    }
    if (newValue.value.length == 1) {
      if (!(dateRangeValue.value == null || dateRangeValue.value == undefined)) {
        formParams.recordedTimeSTime = dateRangeValue.value[0] + ' ' + '00:00:00';
        formParams.recordedTimeETime = dateRangeValue.value[1] + ' ' + '23:59:59';
      }
      patientInfo.value = newValue.value[0];
      formParams.encounterId = patientInfo.value.encounterId;
      getTableList();
    }
    if (newValue.value.length <= 0) {
      feeDetailList.value = [];
    }
  },
  { deep: true }
);
// 获取列表信息
const getTableList = async () => {
  const params = formParams;
  try {
    const res = await getCostDetail(params);
    feeDetailList.value = res.data.records;
    total.value = res.data?.total;
    console.log('data======>', JSON.stringify(feeDetailList.value));
  } catch (error) {}
};

// 监听患者选择变化
function watchPatientSelection() {
  // 定期检查患者选择状态变化
  setInterval(() => {
    if (patientInfoList.value && patientInfoList.value.length > 0) {
      const selectedPatient = patientInfoList.value.find((patient) => patient.selected === true);
      if (selectedPatient) {
        patientInfo.value = selectedPatient.patientName || '';
      } else {
        patientInfo.value = '未选择患者';
      }
    } else {
      patientInfo.value = '未选择患者';
    }
  }, 300);
}

/** 查询科室 */
const getLocationInfo = () => {
  getOrgList().then((res) => {
    orgOptions.value = res.data?.records[0]?.children;
    console.log('orgOptions======>', JSON.stringify(orgOptions.value));
  });
};
getLocationInfo();

// 映射
const selectOrg = (itemid) => {
  if (!itemid) return '';
  const item = orgOptions.value.find((item) => {
    return item.id == itemid;
  });
  return item?.name || '';
};
// 重置
const onReset = () => {
  const today = new Date();
  dateRangeValue.value = [formatDateStr(today, 'YYYY-MM-DD'), formatDateStr(today, 'YYYY-MM-DD')];
  formParams.orgId = undefined;
  formParams.chargeItemEnum = undefined;
  formParams.recordedTimeSTime = dateRangeValue.value[0] + ' ' + '00:00:00';
  formParams.recordedTimeETime = dateRangeValue.value[1] + ' ' + '23:59:59';
  getTableList();
};

// 加载费用类型选项
function loadFeeTypeOptions() {
  // 模拟费用类型数据
  feeTypeOptions.value = [
    { label: '检查费', value: 'examine' },
    { label: '治疗费', value: 'treatment' },
    { label: '药品费', value: 'medicine' },
    { label: '材料费', value: 'material' },
    { label: '床位费', value: 'bed' },
    { label: '其他费用', value: 'others' },
  ];
}

// 处理日期tabs点击
function handleDateTabClick(tab) {
  const rangeType = tab.paneName;
  const today = new Date();
  const yesterday = new Date();
  yesterday.setDate(today.getDate() - 1);

  switch (rangeType) {
    case 'today':
      dateRangeValue.value = [
        formatDateStr(today, 'YYYY-MM-DD'),
        formatDateStr(today, 'YYYY-MM-DD'),
      ];
      break;
    case 'yesterday':
      dateRangeValue.value = [
        formatDateStr(yesterday, 'YYYY-MM-DD'),
        formatDateStr(yesterday, 'YYYY-MM-DD'),
      ];
      break;
    // other 情况保持用户选择的值
  }
  if (!(dateRangeValue.value == null || dateRangeValue.value == undefined)) {
    formParams.recordedTimeSTime = dateRangeValue.value[0] + ' ' + '00:00:00';
    formParams.recordedTimeETime = dateRangeValue.value[1] + ' ' + '23:59:59';
  }
}

// 处理日期选择器变化
function handleDatePickerChange() {
  if (dateRangeValue.value.length > 0) {
    // dateRange.value = 'other';
  } else {
    formParams.recordedTimeSTime = undefined;
    formParams.recordedTimeETime = undefined;
  }
}

// 格式化日期范围显示
function formatDateRange() {
  if (dateRangeValue.value && dateRangeValue.value.length === 2) {
    return `${dateRangeValue.value[0]} 至 ${dateRangeValue.value[1]}`;
  }
  return '';
}

// 查询按钮点击
function handleQuery() {
  console.log('params=======>', formParams);
  getTableList();
}

// 处理排序变化
function handleSortChange({ prop, order }) {
  const sortedData = [...feeDetailList.value];

  if (order === 'ascending') {
    sortedData.sort((a, b) => (a[prop] > b[prop] ? 1 : -1));
  } else if (order === 'descending') {
    sortedData.sort((a, b) => (a[prop] < b[prop] ? 1 : -1));
  }

  feeDetailList.value = sortedData;
}

// 处理分页大小变化
function handleSizeChange(newSize) {
  formParams.pageSize = newSize;
  formParams.pageNo = 1;
  getTableList();
}

// 处理当前页变化
function handleCurrentChange(newCurrent) {
  formParams.pageNo = newCurrent;
  getTableList();
}

// 导出
async function handleExport() {
  if (feeDetailList.value.length === 0) {
    ElMessage.warning('暂无数据可导出');
    return;
  }

  try {
    // 实际项目中这里应该调用导出API或使用Excel库生成文件
    await proxy.$download.downloadGet(
      '/inhospitalnursestation/nursebilling/excel-out',
      {
        ...formParams,
      },
      `dict_${new Date().getTime()}.xlsx`
    );
  } catch (error) {}
}

// 打印预览
function handlePrint() {
  if (feeDetailList.value.length === 0) {
    ElMessage.warning('暂无数据可打印');
    return;
  }
  printDialogVisible.value = true;
}

// 执行打印 - 使用 hiprint
function doPrint() {
  try {
    // 获取要打印的内容
    const printContent = document.getElementById('print-content');
    if (printContent) {
      previewPrint(printContent);
    } else {
      ElMessage.warning('未找到打印内容');
    }
  } catch (e) {
    ElMessage.error('打印失败');
    console.error('Print error:', e);
  }
}

// 暴露方法供父组件调用
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: #eef9fd !important;
}

:deep(.el-table__row:hover > td) {
  background-color: #eef9fd !important;
}
</style>
