<template>
  <el-dialog
    :title="title"
    v-model="visible"
    width="900px"
    append-to-body
  >
    <el-form
   @submit.prevent
      :inline="true"
      class="demo-form-inline"
    >
      <el-form-item label="药品名称">
        <el-input
          v-model="searchForm.medicineName"
          placeholder="请输入药品名称或条码"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="searchArchives"
        >查询</el-button>
        <el-button
          icon="Refresh"
          @click="resetQuery"
        >重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="filteredArchiveList"
      :border="parentBorder"
      style="width: 100%"
      @row-click="selectRow"
    >
        <el-table-column
        label="序号"
        type="index"
        width="50"
        />
      <el-table-column
        label="药品名称"
        align="center"
        prop="medicineName"
      />
      <el-table-column
        label="生产厂家"
        align="center"
        prop="manufacturer"
      />
      <el-table-column
        label="条码"
        align="center"
        prop="barcode"
      />
      <el-table-column
        label="规格"
        align="center"
        prop="specification"
      />
      
      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        width="100"
      >
      
        <template #default="scope">
          <el-button
            type="text"
            size="small"
            @click="confirmSelection(scope.row)"
          >选择</el-button>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <!-- <el-button
          type="primary"
          @click="confirmSelection(selectedArchive.value)"
        >选择</el-button> -->
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { listArchive } from '@/api/healthcare/inventory/DrugFiling/archive.js';

const props = defineProps({
  title: String,
});

const emit = defineEmits(['selectedArchive']);

const visible = ref(false);
const archiveList = ref([]);
const filteredArchiveList = ref([]);
const selectedArchive = ref(null);
const parentBorder = ref(false);
const searchForm = reactive({
  medicineName: ''
});

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

// 加载药品档案列表
function loadArchives() {
  listArchive({}).then(response => {
    archiveList.value = response.rows || [];
    filteredArchiveList.value = archiveList.value;
  }).catch(error => {
    console.error('Error fetching data:', error);
  });
}

// 查询药品档案
function searchArchives() {
  const searchValue = searchForm.medicineName.trim().toLowerCase();
  const filteredData = archiveList.value.filter(item =>
    item.medicineName.toLowerCase().includes(searchValue) ||
    item.barcode.toLowerCase().includes(searchValue)
  );
  filteredArchiveList.value = filteredData;
}
// 重置按钮
  function resetQuery() {
  searchForm.medicineName = '';
  searchArchives()
}
// 选择行时触发
function selectRow(row) {
  selectedArchive.value = row;
}

// 确认选择并关闭弹窗
function confirmSelection(row) {
  if (row) {
    emit('selectedArchive', row);
    visible.value = false;
  }
}

// 显示弹窗
const showSelector = () => {
  visible.value = true;
};
defineExpose({ showSelector });
</script>