<template>
  <div class="page-container">
    <!-- 用户列表 -->
    <n-card class="user-list-card" size="small">
      <!-- 搜索表单 -->
      <div class="search-form">
        <n-form  
          :model="searchForm" 
          label-placement="left"
        >
        <n-grid :cols="24" :x-gap="24">
          <n-form-item-gi :span="6" label="工艺名称">
            <n-input v-model:value="searchForm.processName" placeholder="请输入工艺名称" clearable />
          </n-form-item-gi>
          <n-form-item-gi :span="6">
            <n-space> 
              <n-button type="primary" @click="search">
                <template #icon><n-icon><SearchOutline /></n-icon></template>
                搜索
              </n-button>
              <n-button @click="reset"> 
                <template #icon><n-icon><RefreshOutline /></n-icon></template>
                重置
              </n-button>
            </n-space>
          </n-form-item-gi>
        </n-grid>
          
        </n-form>
      </div>

      

      <!-- 表格 -->
      <n-data-table
        :columns="columns"
        size="small"
        striped
        :data="datalist" 
        :bordere="false"
        :single-line="false"
        :loading="loading"
        remote
      />

      <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="[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>
    <PlmModelDrawer ref="plmModelDrawerRef" />
  </div>
</template>

<script setup lang="ts">
import { 
  ref, 
  reactive, 
  h, 
  onMounted,
  watch, 
} from 'vue'


import { 
  NButton, 
  NIcon, 
  NSpace, 
  NPagination, 
  NGrid, 
  // NGi, 
  NTag,
  useMessage,
  useDialog,
  //type FormInst, 
} from 'naive-ui'

import { 
  SearchOutline, 
  RefreshOutline
} from '@vicons/ionicons5'

import { useUserStore } from '@/stores/user'
import { dictDataApi } from '@/api/org'
import { 
  mytasks,
  inspectio 
} from '@/api/production'
import PlmModelDrawer from '@/components/PlmModelDrawer.vue'
import type { PlmModelOpenContext } from '@/api/plmModel'
import  AssingWorkVue from '@/views/biz/flowingAround/assingWork.vue'
import { qualityTestingApi, type QualityTesting } from '@/api/qualityTesting'
import SumbitDetailCard from '@/components/SumbitDetailCard.vue'
import { SubmitLog } from '@/api/submitLog'

const dialog = useDialog()

const message = useMessage()

const userStore = useUserStore()

// 权限检查
//const hasPermission = (permission: string) => userStore.hasPermission(permission)


//派工状态字典
const qcAssingStatusOptions = ref<{ label: string; value: any;class:any }[]>([])

// ==================== 搜索表单 ====================
const searchForm = reactive({
  page: 1,
  pageSize: 20,
  processId:'',
  processName:'',
})



// ==================== 表格 ====================
const datalist = ref<any>([])
const loading = ref(false)

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


const columns = [
  // { 
  //   type: 'selection',
  //   minWidth:60
  // },
    {
    align:"center",
    title:"立加",
    key:"materialName",
    minWidth:150,
    render(row:any) {
      var opt = row.materialName
      if(opt) return opt
      return '-'
    }
  },
  {
    align:"center",
    title:"刨铣",
    key:"materialCode",
    minWidth:150,
    render(row:any) {
      var opt = row.materialCode
      if(opt) return opt
      return '-'
    }
  },
  {
    align:"center",
    title:"圆板",
    key:"assingCode",
    minWidth:150
  },
  
  // {
  //   align:'center',
  //   title: '操作',
  //   key: 'actions',
  //   width: 250,
  //   fixed: 'right',
  //   render(row:any) {
  //     const buttons:any = []
    
  //         if(hasPermission('biz:assingWork:edit')){
  //             buttons.push(h(NButton, { 
  //             size: 'small',
  //             type:'primary',  
  //             ghost:true,
  //             onClick: () => { handlpause(row) } }, 
  //             { default:  () =>  '完工汇报'}
  //           ))
  //         }
  //         buttons.push(h(NButton, {
  //           size: 'small',
  //           type: 'info',
  //           ghost: true,
  //           onClick: () => openPlmModel(row),
  //         }, { default: () => '模型' }))

  //         buttons.push(h(NButton, {
  //           size: 'small',
  //           type: 'info',
  //           ghost: true,
  //           onClick: ()=> cancelQuality(row)
  //         }, { default: () => '质检撤回' }))

  //     return buttons.length > 0 ? h(NSpace, {justify:'center'}, { default: () => buttons }) : '-'
  //   }
  // }
]





//搜索数据
function search() {
  pagination.page = 1
  searchForm.page = 1
  searchForm.pageSize = 20
  getlist()
}

//重置
function reset() {
  searchForm.processId =''
  searchForm.processName = ''
}

//获取列表数据
function getlist() {
  mytasks(searchForm).then((rps:any) => {
    datalist.value = rps.records
    pagination.itemCount = rps.total
  })
}



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

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



// watch(()=>pauseform.qcNum,v => {
//   pauseform.qcNum = v.replace(/[^\d]/g,'')
// })












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







onMounted(() => {
  getlist()
 loadDictOptions()

})
</script>

<style scoped>

</style>
