<template>
  <div class="app-container">
    <el-form
      ref="queryRef"
      :model="queryParams"
      :inline="true"
      label-width="100px"
    >
      <el-form-item label="统计时间：">
        <el-date-picker 
          v-model="occurrenceTime" 
          type="daterange" 
          start-placeholder="开始日期" 
          end-placeholder="结束日期"
          style="width: 300px" 
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item
        label="统计类型："
        prop="statisticsType"
      >
        <el-select
          v-model="queryParams.statisticsType"
          placeholder=""
          clearable
          style="width: 150px"
        >
          <el-option
            label="门诊收入分类"
            value="outpatientIncome"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="医院："
        prop="hospital"
      >
        <el-select
          v-model="queryParams.hospital"
          placeholder=""
          clearable
          style="width: 150px"
        >
          <el-option
            :label="userStore.hospitalName"
            value="sameHospital"
          />
        </el-select>
      </el-form-item>

      <el-form-item
        label="科室："
        prop="department"
      >
        <el-select 
          v-model="queryParams.department" 
          placeholder="请选择科室" 
          clearable 
          style="width: 150px"
          @change="handleDepartmentChange"
        >
          <el-option
            label="全部"
            value="all"
          />
          <el-option 
            v-for="dept in departmentOptions" 
            :key="dept.value" 
            :label="dept.label" 
            :value="dept.value" 
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="项目类型："
        prop="itemType"
      >
        <el-select 
          v-model="queryParams.itemType" 
          placeholder="请选择项目类型" 
          clearable 
          style="width: 150px"
          :disabled="!queryParams.department || queryParams.department === 'all'"
        >
          <el-option
            label="全部"
            value="all"
          />
          <el-option 
            v-for="item in filteredItemTypeOptions" 
            :key="item.value" 
            :label="item.label" 
            :value="item.value" 
          />
        </el-select>
      </el-form-item>
    </el-form>
    <el-row
      :gutter="10"
      class="mb8"
    >
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Search"
          @click="handleQuery"
        >
          查询
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="CircleClose"
          @click="handleClear"
        >
          重置
        </el-button>
      </el-col>
    </el-row>

    <el-table
      v-loading="loading"
      :data="processedTableData"
      :span-method="spanMethod"
      height="calc(100vh - 300px)"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="50"
        align="center"
      />
      <el-table-column
        key="department"
        label="科室"
        align="center"
        prop="department"
        width="120"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        key="category"
        label="类别"
        align="center"
        prop="category"
        width="120"
      />
      <el-table-column
        key="amount"
        label="金额"
        align="center"
        prop="amount"
        width="120"
      >
        <template #default="scope">
          <span
            :class="{ 
              'subtotal-text': scope.row.rowType === 'subtotal', 
              'drug-text': scope.row.rowType === 'drug',
              'total-text': scope.row.rowType === 'total' 
            }"
          >
            {{ formatDisplayValue(scope.row.amount, scope.row.rowType) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="药品成本"
        align="center"
        prop="drugCost"
        width="120"
      >
        <template #default="scope">
          <span
            :class="{ 
              'subtotal-text': scope.row.rowType === 'subtotal', 
              'drug-text': scope.row.rowType === 'drug',
              'total-text': scope.row.rowType === 'total' 
            }"
          >
            {{ formatDrugCostDisplay(scope.row.drugCost, scope.row.rowType) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="净收入"
        align="center"
        prop="netIncome"
        width="120"
      >
        <template #default="scope">
          <span
            :class="{ 
              'subtotal-text': scope.row.rowType === 'subtotal', 
              'drug-text': scope.row.rowType === 'drug',
              'total-text': scope.row.rowType === 'total' 
            }"
          >
            {{ formatDisplayValue(scope.row.netIncome, scope.row.rowType) }}
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup name="OutpatientDepartmentMetrics">
import {getOutpatientDepartmentMetrics} from './statisticalManagent';
import {computed, reactive, ref, toRefs} from 'vue';
import useUserStore from '@/store/modules/user';

const userStore = useUserStore();
const loading = ref(true);
const total = ref(0);
const data = reactive({
  form: {},
  queryParams: {
    pageNo: 1,
    pageSize: 10,
    searchKey: undefined,
    statisticsType: undefined,
    hospital: undefined,
    department: undefined,
    itemType: undefined
  },
  rules: {},
});
const { queryParams } = toRefs(data);

// 原始数据
const originalData = ref([
  { department: '内科门诊', category: '西药', amount: 115.64, drugCost: 100.56, netIncome: 15.084 },
  { department: '内科门诊', category: '医用耗材', amount: 6.00, drugCost: 0, netIncome: 6 },
  { department: '内科门诊', category: '护理', amount: 30.00, drugCost: 0, netIncome: 30 },
  { department: '妇科', category: '西药', amount: 148.70, drugCost: 112.44, netIncome: 36.255 },
  { department: '妇科', category: '治疗', amount: 18.00, drugCost: 0, netIncome: 18 },
]);

// 动态生成科室选项
const departmentOptions = computed(() => {
  const departments = [...new Set(originalData.value.map(item => item.department))];
  return departments.map(dept => ({
    label: dept,
    value: dept
  }));
});

// 所有项目类型选项
const allItemTypeOptions = computed(() => {
  const categories = [...new Set(originalData.value.map(item => item.category))];
  return categories.map(category => ({
    label: category,
    value: category
  }));
});

// 根据选择的科室过滤项目类型选项
const filteredItemTypeOptions = computed(() => {
  if (!queryParams.value.department || queryParams.value.department === 'all') {
    return allItemTypeOptions.value;
  }
  
  // 获取该科室下的所有项目类型
  const deptCategories = [...new Set(
    originalData.value
      .filter(item => item.department === queryParams.value.department)
      .map(item => item.category)
  )];
  
  return allItemTypeOptions.value.filter(item => 
    deptCategories.includes(item.value)
  );
});

// 科室变化时的处理
const handleDepartmentChange = (value) => {
  // 如果选择了具体科室，重置项目类型为"全部"
  if (value && value !== 'all') {
    queryParams.value.itemType = 'all';
  }
};

// 过滤后的数据（根据查询条件）
const filteredData = computed(() => {
  let data = [...originalData.value];
  
  // 科室筛选
  if (queryParams.value.department && queryParams.value.department !== 'all') {
    data = data.filter(item => item.department === queryParams.value.department);
  }
  
  // 项目类型筛选
  if (queryParams.value.itemType && queryParams.value.itemType !== 'all') {
    data = data.filter(item => item.category === queryParams.value.itemType);
  }
  
  return data;
});

const formatCurrency = (value) => {
  return value ? value.toFixed(2) : '0.00';
}

const formatDisplayValue = (value, rowType) => {
  if (rowType === 'drug' && typeof value === 'string') {
    return value; // 药品占比行显示百分比字符串
  }
  return formatCurrency(value);
}

const formatDrugCostDisplay = (value, rowType) => {
  if (rowType === 'drug') {
    return '药品占比'; // 药品占比行显示文字"药品占比"
  }
  return formatCurrency(value);
}

// 动态获取所有科室（基于过滤后的数据）
const departments = computed(() => {
  return [...new Set(filteredData.value.map(item => item.department))];
})

// 构建完整的表格数据（包含小计、药品金额和占比、总计）
const processedTableData = computed(() => {
  const data = [];
  
  // 处理每个科室
  departments.value.forEach(dept => {
    const deptData = filteredData.value.filter(item => item.department === dept);
    
    // 添加详细数据
    data.push(...deptData.map(item => ({
      ...item,
      rowType: 'detail'
    })));
    
    // 计算小计
    const subtotal = deptData.reduce((sum, item) => ({
      amount: sum.amount + item.amount,
      drugCost: sum.drugCost + item.drugCost,
      netIncome: sum.netIncome + item.netIncome
    }), { amount: 0, drugCost: 0, netIncome: 0 });
    
    // 添加小计行
    data.push({
      department: dept,
      category: '小计',
      amount: Number(subtotal.amount.toFixed(2)),
      drugCost: Number(subtotal.drugCost.toFixed(2)),
      netIncome: Number(subtotal.netIncome.toFixed(2)),
      rowType: 'subtotal'
    });
    
    // 计算药品金额和占比
    const drugAmount = deptData
  .filter(item => item.category.includes('药'))
  .reduce((sum, item) => sum + item.amount, 0);

    const totalAmount = subtotal.amount;
    const drugRatio = totalAmount > 0 ? ((drugAmount / totalAmount) * 100).toFixed(2) + '%' : '0.00%';
    
    // 添加药品金额和占比行
    data.push({
      department: dept,
      category: '药品金额',
      amount: Number(drugAmount.toFixed(2)), // 在金额列显示药品金额
      drugCost: '药品占比', // 在药品成本列显示文字"药品占比"
      netIncome: drugRatio, // 在净收入列显示占比值
      rowType: 'drug'
    });
  });
  
  // 计算合计
  const totalData = filteredData.value.reduce((sum, item) => ({
    amount: sum.amount + item.amount,
    drugCost: sum.drugCost + item.drugCost,
    netIncome: sum.netIncome + item.netIncome
  }), { amount: 0, drugCost: 0, netIncome: 0 });
  

  // 计算合计的药品金额和占比
  const totalDrugAmount = filteredData.value.filter(item => item.category.includes('药')).reduce((sum, item) => sum + item.amount, 0);
  const totalDrugRatio = totalData.amount > 0 ? 
    ((totalDrugAmount / totalData.amount) * 100).toFixed(2) + '%' : '0.00%';
  
  // 添加合计行
  data.push({
    department: '合计',
    category: '合计',
    amount: Number(totalData.amount.toFixed(2)),
    drugCost: Number(totalData.drugCost.toFixed(2)),
    netIncome: Number(totalData.netIncome.toFixed(2)),
    rowType: 'total'
  });
  
  // 添加总计的药品占比行
  data.push({
    department: '药品金额',
    category: '药品金额',
    amount: Number(totalDrugAmount.toFixed(2)),
    drugCost: '药品占比',
    netIncome: totalDrugRatio,
    rowType: 'drug'
  });
  
  return data;
});

// 预计算合并信息
const spanInfo = computed(() => {
  const info = [];
  let currentDept = null;
  let startIndex = 0;
  let rowCount = 0;
  
  for (let i = 0; i < processedTableData.value.length; i++) {
    const row = processedTableData.value[i];
    
    if (row.department !== currentDept) {
      if (currentDept !== null) {
        info.push({ startIndex: startIndex, rowCount: rowCount });
      }
      currentDept = row.department;
      startIndex = i;
      rowCount = 1;
    } else {
      rowCount++;
    }
    
    // 最后一个元素
    if (i === processedTableData.value.length - 1) {
      info.push({ startIndex: startIndex, rowCount: rowCount });
    }
  }
  
  return info;
});

const spanMethod = ({ row, column, rowIndex, columnIndex }) => {
  // 合并科室列（第一列）
  if (columnIndex === 1) {
    for (const info of spanInfo.value) {
      if (rowIndex >= info.startIndex && rowIndex < info.startIndex + info.rowCount) {
        if (rowIndex === info.startIndex) {
          // 该科室的第一行，合并所有行
          return { rowspan: info.rowCount, colspan: 1 };
        } else {
          // 该科室的其他行隐藏
          return { rowspan: 0, colspan: 0 };
        }
      }
    }
  }
  
  return { rowspan: 1, colspan: 1 };
}

/** 查询调拨管理项目列表 */
function getList() {
  loading.value = true;
  getOutpatientDepartmentMetrics(queryParams.value).then((res) => {
    loading.value = false;
    // 这里将接口返回的数据赋值给 originalData
    if (res.data && res.data.records) {
      originalData.value = res.data.records;
    }
    total.value = res.data.total;
  });
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNo = 1;
  getList();
}

/** 重置按钮操作 */
function handleClear() {
  // 重置查询参数
  queryParams.value = {
    pageNo: 1,
    pageSize: 10,
    searchKey: undefined,
    statisticsType: undefined,
    hospital: undefined,
    department: undefined,
    itemType: undefined
  };
  getList();
}

/** 多选框选中数据 */
function handleSelectionChange(selection) {
  // 处理选中数据
  console.log('选中数据:', selection);
}

// 初始化加载
getList();
</script>

<style scoped>
.subtotal-text {
  font-weight: bold;
  color: #409EFF;
}

.drug-text {
  font-weight: bold;
  color: #67C23A;
}

.total-text {
  font-weight: bold;
  color: #F56C6C;
}

/* 行样式 */
:deep(.el-table .el-table__row) {
  &[data-row-type="subtotal"] td {
    background-color: #f0f9ff;
  }
  &[data-row-type="drug"] td {
    background-color: #f0f9ff;
  }
  &[data-row-type="total"] td {
    background-color: #f5f7fa;
  }
}

/* 禁用状态样式 */
:deep(.el-select .el-input.is-disabled .el-input__inner) {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #c0c4cc;
  cursor: not-allowed;
}
</style>