<template>
  <el-card class="left-card">
    <!-- 搜索框 -->
    <div class="search-box">
      <el-input v-model="searchValue" placeholder="请输入处方ID" class="search-input">
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
    </div>

    <!-- 处方列表 -->
    <div class="prescription-list">
      <div
        v-for="item in prescriptionList"
        :key="item.settlementId"
        :class="['prescription-item', {active: item.settlementId === activeId}]"
        @click="handleItemClick(item)"
      >
        <!-- 时间 -->
        <div class="item-time">{{ item.orderTime }}</div>
        <!-- 处方类型 -->
        <div class="item-type">{{ item.chargeTypeMame }}</div>
        <!-- 处方ID -->
        <div class="item-id">处方ID：{{ item.settlementId }}</div>
        <!-- 已编辑角标 -->
        <div v-if="item.isEdited" class="edit-badge">
          <span>已编辑</span>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import {ref, onMounted} from 'vue';
import {Search} from '@element-plus/icons-vue';

import { listEnteralNutritionHistory,listEnteralNutritionDetail} from '@/api/patients/nutrition';
import {useHistoryStore} from '@/store/modules/history';
 

const historyStore = useHistoryStore();

// 搜索值
const searchValue = ref('');
const {patientInfo} = defineProps<{patientInfo: any}>();

const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  patientId: patientInfo.id
});

const prescriptionList = ref([]);
const getListEnteralNutritionFn = () => {
  listEnteralNutritionHistory(queryParams.value).then((res) => {
    prescriptionList.value = res.rows;    
    // 如果有数据，自动选中第一个处方
    if (prescriptionList.value && prescriptionList.value.length > 0) {
      const firstPrescription = prescriptionList.value[0];
      activeId.value = firstPrescription.settlementId;

      listEnteralNutritionDetail(firstPrescription.settlementId).then(detailRes => {
        let data = detailRes.data;
        data.nutritionList.forEach(lt=>{
          lt.paymentStatus=firstPrescription.paymentStatus;
          lt.delFlag=firstPrescription.delFlag;
          lt.stopFlag=firstPrescription.stopFlag;
          lt.settlementId=firstPrescription.settlementId;          
          lt.prescriptionDate=firstPrescription.chargeType=='4'?lt.prescriptionDate.substring(0,10):null;
        });

        historyStore.setHistoryList({
          nutritionList: data.nutritionList || [],
          consumableList: data.consumableList || []
        });
      });      
    }
  });
  // console.log(patientInfo, 'patientInfo');
};

onMounted(() => {
  getListEnteralNutritionFn();
});

// 当前选中的处方ID
const activeId = ref('');

// 点击处方项
const handleItemClick = (item) => {
  activeId.value = item.settlementId;

  listEnteralNutritionDetail(item.settlementId).then(detailRes => {
    let data = detailRes.data;
    data.nutritionList.forEach(lt=>{
          lt.paymentStatus=item.paymentStatus;
          lt.delFlag=item.delFlag;
          lt.stopFlag=item.stopFlag;
          lt.settlementId=item.settlementId;
          lt.prescriptionDate=item.chargeType=='4'?lt.prescriptionDate.substring(0,10):null;
        });

    historyStore.setHistoryList({
      nutritionList: data.nutritionList || [],
      consumableList: data.consumableList || []
    });
  }); 
 
};
</script>

<style lang="scss" scoped>
.left-card {
  width: 300px;
  height: calc(100vh - 40px);

  :deep(.el-card__body) {
    height: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .search-box {
    .search-input {
      .el-input__wrapper {
        box-shadow: none;
        border: 1px solid #dcdfe6;
        border-radius: 4px;

        &:hover {
          border-color: #c0c4cc;
        }

        &.is-focus {
          border-color: var(--el-color-primary);
        }
      }
    }
  }

  .prescription-list {
    flex: 1;
    overflow-y: auto;

    .prescription-item {
      position: relative;
      padding: 16px;
      border-radius: 4px;
      background: #f5f7fa;
      cursor: pointer;
      transition: all 0.3s;

      &:not(:last-child) {
        margin-bottom: 12px;
      }

      &:hover {
        background: #ebeef5;
      }

      &.active {
        background: #e6f2ff;
      }

      .item-time {
        font-size: 16px;
        color: #303133;
        margin-bottom: 8px;
      }

      .item-type {
        font-size: 14px;
        color: #303133;
        margin-bottom: 4px;
      }

      .item-id {
        font-size: 13px;
        color: #909399;
      }

      .edit-badge {
        position: absolute;
        top: 8px;
        right: -10px;
        transform: rotate(35deg);
        background: #fff;
        padding: 2px 16px;
        font-size: 12px;
        color: #ffa801;
        border-radius: 2px;
        white-space: nowrap;
      }
    }
  }
}
</style>
