<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.id"
        :class="['prescription-item', {active: item.id === activeId}]"
        @click="handleItemClick(item)"
      >
        <!-- 时间 -->
        <div class="item-time">{{ item.time }}</div>
        <!-- 处方类型 -->
        <div class="item-type">{{ item.type }}</div>
        <!-- 处方ID -->
        <div class="item-id">处方ID：{{ item.id }}</div>
        <!-- 已编辑角标 -->
        <div v-if="item.isEdited" class="edit-badge">
          <span>已编辑</span>
        </div>
      </div>
    </div>
  </el-card>
</template>

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

// 搜索值
const searchValue = ref('');

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

// 处方列表数据
const prescriptionList = ref([
  {
    id: '194705349732148019',
    time: '2025-07-23 10:57:18',
    type: '长期处方',
    isEdited: false
  },
  {
    id: '194754209113291980',
    time: '2025-07-22 14:19:53',
    type: '配置处方',
    isEdited: true
  },
  {
    id: '194753542425735168',
    time: '2025-07-22 13:53:23',
    type: '长期处方',
    isEdited: true
  },
  {
    id: '194746976848480665',
    time: '2025-07-22 09:32:30',
    type: '长期处方',
    isEdited: false
  },
  {
    id: '194746840280684134',
    time: '2025-07-22 09:27:04',
    type: '长期处方',
    isEdited: false
  },
  {
    id: '194746840280681234',
    time: '2025-07-21 16:28:56',
    type: '长期处方',
    isEdited: true
  }
]);

// 点击处方项
const handleItemClick = (item) => {
  activeId.value = item.id;
};
</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>
