<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

// 模拟油站数据
const stations = [
  { label: '龙飞加油站', value: '1' },
  { label: '和平加油站', value: '2' },
  { label: '安全加油站', value: '3' }
]

// 模拟急救箱用品数据
const firstAidItems = reactive([
  { id: 1, name: '一次性手套', unit: '双', standardQty: 5, checkQty: 5 },
  { id: 2, name: '云南白药（气雾剂）', unit: '瓶', standardQty: 1, checkQty: 1 },
  { id: 3, name: '创可贴', unit: '片', standardQty: 30, checkQty: 30 },
  { id: 4, name: '医用酒精棉球或类似用品', unit: '瓶', standardQty: 2, checkQty: 2 },
  { id: 5, name: '红花油', unit: '瓶', standardQty: 1, checkQty: 1 },
  { id: 6, name: '绷带', unit: '卷', standardQty: 2, checkQty: 2 },
  { id: 7, name: '脱脂棉', unit: '包', standardQty: 2, checkQty: 2 },
  { id: 8, name: '脱脂棉签', unit: '包', standardQty: 1, checkQty: 1 },
  { id: 9, name: '风油精', unit: '瓶', standardQty: 2, checkQty: 2 },
  { id: 10, name: '胶带', unit: '卷', standardQty: 2, checkQty: 2 }
])

// 选中的油站
const selectedStation = ref('1')

// 保存修改
const saveChanges = () => {
  // 这里可以添加保存逻辑，如调用接口
  ElMessage.success('保存成功')
}
</script>

<template>
  <div class="first-aid-kit">
    <div class="search-container">
      <el-form :inline="true" label-position="right">
        <el-form-item label="油站" label-width="80px">
          <el-select v-model="selectedStation" placeholder="请选择油站" style="width: 200px">
            <el-option
              v-for="station in stations"
              :key="station.value"
              :label="station.label"
              :value="station.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <div class="table-container">
      <el-table :data="firstAidItems" border style="width: 100%">
        <el-table-column prop="name" label="用品名称"/>
        <el-table-column prop="unit" label="单位"/>
        <el-table-column prop="standardQty" label="标准数量"/>
        <el-table-column prop="checkQty" label="检查数量">
          <template #default="scope">
            <el-input-number
              v-model="scope.row.checkQty"
              :min="0"
              size="small"
              style="width: 120px"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="action-container">
      <el-button type="primary" @click="saveChanges">保存</el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.first-aid-kit {
  width: 100%;
  padding: 20px;
  background-color: #fff;
  
  .search-container {
    margin-bottom: 20px;
  }
  
  .table-container {
    width: 100%;
    margin-bottom: 20px;
  }
  
  .action-container {
    text-align: left;
  }
}
</style>
