

<template>
  <n-card>
    <n-card style="margin: 12px 0px">
      <n-grid :cols="2" style="margin: 10px">
        <n-gi>
          <span class="pgClass">物料名称：</span>
          <span>{{props.baseInfo.materialName}}</span>
        </n-gi>
        <n-gi>
          <span class="pgClass">物料编号：</span>
          <span>{{props.baseInfo.materialCode}}</span>
        </n-gi>
      </n-grid>
      <n-grid :cols="2" style="margin: 10px">
        <n-gi>
          <span class="pgClass">工序名称：</span>
          <span>{{props.baseInfo.processName}}</span>
        </n-gi>
        <n-gi>
          <span class="pgClass">派工编号：</span>
          <span>{{props.baseInfo.assingCode}}</span>
        </n-gi>
      </n-grid>
    </n-card>
    <n-data-table
        :columns="reportRecordsColums"
        size="small"
        :data="submitLogList"
        remote
        :scroll-x="600"
    />

    <div class="pagination-container" style="display: flex; justify-content: flex-end; margin-top: 12px">
      <n-pagination
          v-model:page="pagination.page"
          v-model:page-size="pagination.pageSize"
          :item-count="pagination.itemCount"
          :page-sizes="[2,10, 20, 50, 100]"
          show-size-picker
          show-quick-jumper
          @update:page="handlePageChange"
          @update:page-size="handlePageSizeChange"
      >
        <template #prefix>
          共 {{ pagination.itemCount }} 条
        </template>
      </n-pagination>
    </div>
  </n-card>
</template>
<script setup lang="ts">
import { NCard, NDataTable, NGi,NTag, NGrid,DataTableColumns} from "naive-ui";
import {onMounted, ref, h, reactive} from "vue";
import { dictDataApi } from '@/api/org'
import { SubmitLog,submitLogApi} from '@/api/submitLog'

const props =defineProps(
    {
      assingId:Number,
      baseInfo:Object
    }
)

//汇报状态字典
const submitStatusOptions = ref<{ label: string; value: any ;class:any}[]>([])


const pagination = reactive({
  page: 1,
  pageSize: 10,
  itemCount: 0
})

//汇报信息表格
const reportRecordsColums:DataTableColumns<SubmitLog> = [

  { title: '汇报数量', key: 'quantity',align: 'center'},
  { title: '合格数量', key: 'qualifiedQty',align: 'center'},
  { title: '报废数量', key: 'scrapQty',align: 'center'},
  { title: '汇报人', key: 'userName',align: 'center' },
  { title: '状态', key: 'submitStatus',align: 'center',
    render: (row) => {
      const val = row.submitStatus
      const opt = submitStatusOptions.value.find(o => o.value === val || String(o.value) === String(val))
      if (!opt) return val ?? '-'

      return h(NTag, { type: opt.class, size: 'small' }, { default: () => opt.label })
    }
  },
  { title: '汇报时间', key: 'createTime',align: 'center' },
]

// 加载字典选项
async function loadDictOptions() {
  try {
    const data = await dictDataApi.listByType('submit_status')
    submitStatusOptions.value = data.map(d => ({ label: d.dictLabel, value: (Number(d.dictValue) || d.dictValue),class:d.listClass }))
  }catch {}
}

//加载汇报信息
const submitLogList = ref<SubmitLog[]>([])
async function load() {
  const res = await submitLogApi.loadSumbitLog({
    assingId:props.assingId,
    page: pagination.page,
    pageSize: pagination.pageSize
  })
  submitLogList.value = res.list
  pagination.itemCount = res.total
}

function handlePageChange(page: number) {
  pagination.page = page
  load()
}

function handlePageSizeChange(pageSize: number) {
  pagination.pageSize = pageSize
  pagination.page = 1
  load()
}

onMounted(()=>{
  loadDictOptions()
  load()
})
</script>
<style scoped>

</style>