<template>
  <div class="medical-orders-page">
    <!-- Top Toolbar -->
    <div class="toolbar">
      <el-button class="tool-button" type="primary">
        <el-icon><Document /></el-icon>
        开立
      </el-button>
      <el-button class="tool-button">
        <el-icon><CircleClose /></el-icon>
        暂停/停止
      </el-button>
      <el-button class="tool-button">
        <el-icon><Select /></el-icon>
        全停
      </el-button>
      <el-button class="tool-button">
        <el-icon><Link /></el-icon>
        组合
      </el-button>
      <el-button class="tool-button">
        <el-icon><Collection /></el-icon>
        草药
      </el-button>
      <el-button class="tool-button">
        <el-icon><DocumentAdd /></el-icon>
        保存
      </el-button>
      <el-button class="tool-button">
        <el-icon><Plus /></el-icon>
        追加
      </el-button>
      <el-button class="tool-button">
        <el-icon><Back /></el-icon>
        退出
      </el-button>
      <el-button class="tool-button">
        <el-icon><Refresh /></el-icon>
        刷新
      </el-button>
      <el-button class="tool-button">
        <el-icon><List /></el-icon>
        保存模板
      </el-button>
      <el-button class="tool-button">
        <el-icon>
          <svg
            t="1746592136272"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2712"
            data-spm-anchor-id="a313x.search_index.0.i2.62b83a81ZEX1zZ"
            width="200"
            height="200"
          >
            <path
              d="M259.584 549.376c9.216-9.216 9.216-24.064 0-33.28s-24.064-9.216-33.28 0c-77.312 77.312-77.312 203.776 0 281.088 9.216 9.216 24.064 9.216 33.28 0 9.216-9.216 9.216-24.064 0-33.28-58.88-58.88-58.88-155.648 0-214.528z"
              p-id="2713"
            />
            <path
              d="M863.232 160.768c-111.616-111.616-293.376-111.616-404.992 0l-50.688 50.688-44.032 44.032-202.752 202.752c-111.616 111.616-111.616 293.376 0 404.992s293.376 111.616 404.992 0l202.752-202.752 44.032-44.032 50.688-50.688c112.128-111.616 112.128-293.376 0-404.992zM532.48 830.464c-93.696 93.696-245.76 93.696-338.944 0s-93.696-245.76 0-338.944l179.712-179.712c19.456 79.36 59.904 155.136 121.856 217.088 61.952 61.952 137.216 102.912 217.088 121.856L532.48 830.464z m-4.096-334.848C465.408 432.128 427.008 353.792 413.184 271.872L491.52 193.536c93.696-93.696 245.76-93.696 338.944 0s93.696 245.76 0 338.944l-78.336 78.336c-81.92-13.824-160.256-52.224-223.744-115.2z"
              p-id="2714"
              data-spm-anchor-id="a313x.search_index.0.i1.62b83a81ZEX1zZ"
              class="selected"
            />
          </svg>
        </el-icon>
        抗菌药
      </el-button>
      <el-button class="tool-button">
        <el-icon><Edit /></el-icon>
        手术
      </el-button>
      <el-button class="tool-button">
        <el-icon><Calendar /></el-icon>
        预约
      </el-button>
      <el-button class="tool-button">
        <el-icon><Printer /></el-icon>
        打印
      </el-button>
      <el-dropdown>
        <el-button class="tool-button">
          <el-icon><More /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>更多操作</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

    <!-- Tab Navigation -->
    <el-tabs type="card">
      <el-tab-pane label="开立医嘱" />
      <el-tab-pane label="长期医嘱" />
      <el-tab-pane label="临时医嘱" />
    </el-tabs>

    <!-- Orders Table -->
    <div class="table-container">
      <el-table :data="tableData" border stripe style="width: 100%">
        <el-table-column type="selection" width="50" />
        <el-table-column prop="orderType" label="医嘱类型" width="100" />
        <el-table-column prop="startTime" label="开始时间" width="150" />
        <el-table-column prop="orderName" label="医嘱名称" width="250" />
        <el-table-column prop="dosage" label="每次用量" width="100" />
        <el-table-column prop="unit" label="单位" width="80" />
        <el-table-column prop="group" label="组合" width="80" />
        <el-table-column prop="usageMethod" label="用法名称" width="100" />
        <el-table-column prop="frequency" label="频次名称" width="100" />
        <el-table-column prop="stopPerson" label="停止人" width="100" />
        <el-table-column prop="stopTime" label="停止时间" width="150" />
        <el-table-column prop="creator" label="开立医生" width="100" />
        <el-table-column prop="auditor" label="审核人" width="100" />
        <el-table-column prop="executor" label="执行人" width="100" />
        <el-table-column prop="firstDayDosage" label="首日量" width="80" />
        <el-table-column prop="totalQuantity" label="总量" width="80" />
        <el-table-column prop="totalAmount" label="总量单位" width="80" />
      </el-table>
    </div>

    <!-- Status Indicators -->
    <div class="status-indicators">
      <div class="status-item">
        <span class="status-dot not-submitted"></span>
        <span>未提交</span>
      </div>
      <div class="status-item">
        <span class="status-dot newly-created"></span>
        <span>新开立</span>
      </div>
      <div class="status-item">
        <span class="status-dot executed"></span>
        <span>已审核</span>
      </div>
      <div class="status-item">
        <span class="status-dot in-progress"></span>
        <span>已执行</span>
      </div>
      <div class="status-item">
        <span class="status-dot stopped"></span>
        <span>停止/作废</span>
      </div>
      <div class="status-item">
        <span class="status-dot scheduled"></span>
        <span>预停止</span>
      </div>
      <div class="status-item">
        <span class="status-dot displayed"></span>
        <span>全部显示</span>
      </div>
      <div class="status-item">
        <span class="status-dot available"></span>
        <span>有效医嘱</span>
      </div>
    </div>

    <!-- Form Area -->
    <div class="form-area">
      <div class="form-row">
        <div class="form-item">
          <label>医嘱类型:</label>
          <el-select v-model="orderForm.type" class="form-control" size="small">
            <el-option label="长期医嘱" value="长期医嘱" />
            <el-option label="临时医嘱" value="临时医嘱" />
          </el-select>
        </div>
        <div class="form-item">
          <label>文字医嘱</label>
          <el-input
            v-model="orderForm.textOrder"
            placeholder="输入"
            size="small"
          />
        </div>
        <div class="form-item">
          <label>名称:</label>
          <el-input v-model="orderForm.name" size="small" />
        </div>
        <div class="form-item">
          <label>数量:</label>
          <el-input-number v-model="orderForm.quantity" :min="0" size="small" />
        </div>
      </div>

      <div class="form-row">
        <div class="form-item">
          <label>每次用量:</label>
          <el-input
            v-model="orderForm.dosagePrefix"
            placeholder="开立数值"
            size="small"
            style="width: 80px"
          />
          <el-input
            v-model="orderForm.dosage"
            class="small-input"
            size="small"
          />
          <span>=</span>
          <el-input
            v-model="orderForm.dosageCalculated"
            class="small-input"
            size="small"
          />
        </div>
        <div class="form-item">
          <label>用法:</label>
          <el-select
            v-model="orderForm.usage"
            class="form-control"
            size="small"
          >
            <el-option label="口服" value="口服" />
            <el-option label="静脉注射" value="静脉注射" />
          </el-select>
        </div>
        <div class="form-item">
          <label>执行科室:</label>
          <el-select
            v-model="orderForm.department"
            class="form-control"
            size="small"
          >
            <el-option label="药剂科" value="药剂科" />
            <el-option label="护理部" value="护理部" />
          </el-select>
        </div>
      </div>

      <div class="form-row">
        <div class="form-item">
          <label>频次:</label>
          <el-select
            v-model="orderForm.frequency"
            class="form-control"
            size="small"
          >
            <el-option label="每日一次" value="每日一次" />
            <el-option label="每日两次" value="每日两次" />
          </el-select>
        </div>
        <div class="form-item">
          <label>首日量:</label>
          <el-input
            v-model="orderForm.firstDayDosage"
            placeholder="首日"
            size="small"
          />
        </div>
        <div class="form-item">
          <label>备注:</label>
          <el-select
            v-model="orderForm.remarks"
            class="form-control"
            size="small"
          >
            <el-option label="饭前" value="饭前" />
            <el-option label="饭后" value="饭后" />
          </el-select>
        </div>
      </div>

      <div class="form-row">
        <div class="form-item">
          <label>开始时间:</label>
          <el-date-picker
            v-model="orderForm.startDate"
            type="datetime"
            format="YYYY-MM-DD HH:mm"
            value-format="YYYY-MM-DD HH:mm"
            placeholder="选择日期时间"
            size="small"
          />
        </div>
        <div class="form-item">
          <label>停止时间:</label>
          <el-checkbox v-model="orderForm.hasEndTime" size="small" />
          <el-date-picker
            v-model="orderForm.endDate"
            type="datetime"
            format="YYYY-MM-DD HH:mm"
            value-format="YYYY-MM-DD HH:mm"
            placeholder="选择日期时间"
            :disabled="!orderForm.hasEndTime"
            size="small"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import {
  Document,
  CircleClose,
  Select,
  Link,
  Collection,
  DocumentAdd,
  Plus,
  Back,
  Refresh,
  List,
  Edit,
  Calendar,
  Printer,
  More,
} from "@element-plus/icons-vue";

const tableData = ref<any[]>([]);

const orderForm = reactive({
  type: "长期医嘱",
  textOrder: "",
  name: "",
  quantity: 0,
  dosagePrefix: "",
  dosage: "",
  dosageCalculated: "",
  usage: "",
  department: "",
  frequency: "",
  firstDayDosage: "",
  remarks: "",
  startDate: new Date("2025-04-23 11:31"),
  hasEndTime: false,
  endDate: new Date("2025-04-23 12:29"),
});
</script>

<style scoped>
/* 样式同原，略 */
.medical-orders-page {
  font-family: Arial, sans-serif;
  padding: 10px;
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 5px 0;
  border-bottom: 1px solid #ddd;
}
.tool-button {
  font-size: 12px;
  padding: 5px 10px;
}
.table-container {
  flex: 1;
  overflow-y: auto;
  margin: 10px 0;
  border: 1px solid #e0e0e0;
}
.status-indicators {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding: 10px 0;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.status-item {
  display: flex;
  align-items: center;
  font-size: 12px;
}
.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 5px;
}
.not-submitted {
  background-color: #8bc34a;
  border: 1px solid #558b2f;
}
.newly-created {
  background-color: #4caf50;
  border: 1px solid #2e7d32;
}
.executed {
  background-color: #2196f3;
  border: 1px solid #1565c0;
}
.in-progress {
  background-color: #ff9800;
  border: 1px solid #ef6c00;
}
.stopped {
  background-color: #f44336;
  border: 1px solid #c62828;
}
.scheduled {
  background-color: #9c27b0;
  border: 1px solid #6a1b9a;
}
.displayed {
  background-color: #00bcd4;
  border: 1px solid #00838f;
}
.available {
  background-color: #9e9e9e;
  border: 1px solid #616161;
}
.form-area {
  padding: 10px 0;
}
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 10px;
}
.form-item {
  display: flex;
  align-items: center;
}
.form-item label {
  font-size: 12px;
  margin-right: 5px;
  white-space: nowrap;
}
.form-control {
  min-width: 150px;
}
.small-input {
  width: 60px;
}
</style>
