<template>
  <div
    class="app-container"
    style="border: 1px solid #e0e0e0; border-radius: 4px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1)"
  >
    <el-row :gutter="10" justify="end" align="middle" style="margin-bottom: 10px">
      <el-button type="danger" plain icon="Refresh" @click="handleSendDrug" :disabled="!busNo">
        发药
      </el-button>
      <el-button type="primary" plain icon="Download" @click="handleExport" :disabled="!busNo">
        导出
      </el-button>
    </el-row>
    <div class="tableContainer">
      <el-table
        :data="tableData"
        style="width: 100%; height: 70vh"
        :header-cell-style="headerCellStyle"
        :row-style="rowStyle"
        :cell-style="{ textAlign: 'center' }"
      >
        <el-table-column prop="currentIndex" label="序号" min-width="60" />
        <el-table-column prop="itemName" label="项目名称" min-width="150">
          <template #default="scope">
            {{ scope.row.itemName || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="totalVolume" label="规格" min-width="120">
          <template #default="scope">
            {{ scope.row.totalVolume || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="lotNumber" label="批次号" min-width="100">
          <template #default="scope">
            {{ scope.row.lotNumber || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="quantity" label="数量" min-width="80" align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.quantity" size="mini">
              {{ scope.row.quantity }}
            </el-tag>
            <el-tag v-if="scope.row.maxUnitCode_dictText" size="mini" type="danger">
              {{ scope.row.maxUnitCode_dictText }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="sourceLocationName" label="发放地点" min-width="100">
          <template #default="scope">
            {{ scope.row.sourceLocationName || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="manufacturerText" label="生产厂家" min-width="120">
          <template #default="scope">
            {{ scope.row.manufacturerText || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="busNo" label="单据号" min-width="150">
          <template #default="scope">
            {{ scope.row.busNo || '-' }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { totalSendDrug } from './api.js';
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
// 定义组件属性
const props = defineProps({
  tableData: {
    type: Array,
    default: () => [],
  },
  selectedId: {
    type: String,
    default: '',
  },
  busNo: {
    type: String,
    default: '',
  },
});

// 定义响应式数据
const selectedRows = ref([]);
// 定义loading状态
const loading = ref(false);

// 表格样式
const headerCellStyle = {
  backgroundColor: '#f5f7fa',
  color: '#333',
  fontWeight: 'bold',
  height: '48px',
  textAlign: 'center',
  lineHeight: '48px',
  padding: '0',
  fontSize: '14px',
};

const rowStyle = {
  height: '40px',
};

// 发药功能
const handleSendDrug = () => {
  if (!props.busNo) {
    ElMessage.warning('请先选择单据号');
    return;
  }
  let data = [{ busNo: props.busNo }];
  loading.value = true;
  proxy.$modal
    .confirm('确定要发药吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    .then(async () => {
      const response = await totalSendDrug(data);
      if (response.code === 200) {
        ElMessage.success('发药成功');
        loading.value = false;
      }
    })
    .catch(() => {
      loading.value = false;
    });
};

// 定义暴露给父组件的数据和方法
defineExpose({
  selectedRows,
});
</script>

<style lang="scss" scoped>
.medicationTableDetail {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;

  .buttonGroup {
    display: flex;
    justify-content: flex-end;
    padding: 10px 0;
    gap: 10px;
    margin-right: 20px;

    :deep(.el-button) {
      padding: 6px 16px;
      font-size: 14px;
    }
  }

  .tableContainer {
    flex: 1;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    border-radius: 4px;

    :deep(.el-table) {
      height: 100%;

      .el-table__header {
        th {
          background-color: #f5f7fa;
          height: 48px !important;
          lineheight: 48px !important;
          padding: 0 !important;
        }
      }

      .el-table__row:hover {
        background-color: #f5f7fa;
      }
    }
  }
}
</style>
