<template>
  <a-modal
      v-model:visible="visible"
      title="原材料详情"
      :width="800"
      :footer="false"
      @cancel="handleClose"
  >
    <a-table
        :columns="columns"
        :data="detailList"
        :loading="loading"
        :pagination="false"
        bordered
    >
      <template #imgUrl="{ record }">
        <a-image
            width="80"
            height="60"
            :src="record.imgUrl"
            fit="cover"
        />
      </template>
    </a-table>
  </a-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Message } from '@arco-design/web-vue'
import { getFullWorkOrderDetailList } from '@/apis/fullWorkOrder/fullWorkOrder'

const visible = ref(false)
const loading = ref(false)
const detailList = ref<any[]>([])

const columns = [
  { title: '称重重量(g)', dataIndex: 'weight', key: 'weight' },
  { title: '截图', dataIndex: 'imgUrl', key: 'imgUrl', slotName: 'imgUrl' }
]

const onOpen = async (id: string) => {
  visible.value = true
  loading.value = true
  try {
    const res = await getFullWorkOrderDetailList(id)
    if (res.code === '0') {
      detailList.value = res.data || []
    } else {
      Message.error(res.msg || '获取详情失败')
    }
  } catch (error) {
    console.error('获取详情失败:', error)
    Message.error('获取详情失败')
  } finally {
    loading.value = false
  }
}

const handleClose = () => {
  visible.value = false
  detailList.value = []
}

defineExpose({ onOpen })
</script>

<style scoped lang="scss">
</style>
