<template>
  <el-dialog
    :model-value="modelValue"
    title="核检废品日统计"
    fullscreen
    destroy-on-close
    :before-close="() => emits('update:modelValue', false )"
  >
    <el-container>
      <!-- 按钮部分 -->
      <el-header>
        <el-button
          type="primary"
          size="large"
          @click="handleExcel"
        >导出到Excel
        </el-button>
        <el-button
          type="primary"
          size="large"
          @click="() => emits('update:modelValue', false )"
        >退出
        </el-button>
      </el-header>

      <el-main>

        <el-input
          v-model="input"
          placeholder="输入工单编号"
          style="width: 200px;margin-bottom: 10px"
        />
        <el-button
          type="primary"
          :loading="isLoading"
          style="margin-bottom: 10px; margin-left: 5px;"
          @click="handleSearch"
        >刷新
        </el-button>
        <el-input
          v-model="inputCpmc"
          readonly
          style="width: 50vw;margin-bottom: 10px;margin-left: 5px"
        />
        <el-table
          ref="multipleTable"
          height="70vh"
          :data="tableData"
          row-key="ID"
          highlight-current-row
          border
          show-overflow-tooltip
          :row-style="{ height: '20px' }"
          :cell-style="{ padding: '0px' }"
          :header-row-style="{ height: '20px' }"
          :header-cell-style="{ padding: '0px' }"
        >
          <!-- 循环渲染表格列 -->
          <el-table-column
            v-for="column in tableColumns"
            :key="column.prop"
            :prop="column.prop"
            :label="column.label"
            :width="column.width"
          />
        </el-table>

      </el-main>

    </el-container>
  </el-dialog>
</template>

<script>
export default {
  name: 'Gongdanzhijianfeipintongji',
}

// 8工单质检废品统计
import service from '@/utils/request'
export const getOrderWasteTotal = (params) => {
  return service({
    url: '/mes_server/work_order_verification/getOrderWasteTotal',
    method: 'get',
    params
  })
}
</script>

<script setup>
import { watch, ref, reactive, defineProps, defineEmits } from 'vue'

const props = defineProps(['modelValue', 'val'])
const emits = defineEmits(['update:modelValue'])

const tableColumns = reactive([
  { label: '工单编号', prop: 'gdbh', width: '150' },
  { label: '产品代号', prop: 'product_code', width: '150' },
  { label: '产品名称', prop: 'product_name', width: '150' },
  { label: '订单数量', prop: '订单数量', width: '150' },
  { label: '实际投料', prop: 'aaa', width: '150' },
  { label: '计量单位', prop: '计量单位', width: '150' },
  { label: '交货日期', prop: '交货日期', width: '150' },
  { label: '入仓数量', prop: 'aaa', width: '150' },
  { label: '入仓日期', prop: 'aaa', width: '150' },
  { label: '印件号', prop: 'qczl_yjno', width: '150' },
  { label: '联数', prop: 'yj_ls', width: '150' },
  { label: '工序号', prop: 'fp_gxh', width: '150' },
  { label: '流程单号', prop: 'qczl_num', width: '150' },
  { label: '员工编号', prop: 'fp_bh', width: '150' },
  { label: '员工姓名', prop: 'aaa', width: '150' },
  { label: '废品类别', prop: 'fp_lb', width: '150' },
  { label: '数量', prop: 'fp_sl', width: '150' },
])
const tableData = ref([])
const input = ref(props.val)
const inputCpmc = ref('')
const isLoading = ref(false)

const handleExcel = () => {
}

const handleSearch = async() => {
  if (!input.value) { return }
  const params = { order: input.value }

  isLoading.value = true
  const res = await getOrderWasteTotal(params)
  isLoading.value = false
  if (res.code === 0) {
    inputCpmc.value = res.data?.[0]?.['product_name']
    const val = res.data.map(item => {
      return { ...item, gdbh: params.order }
    })
    console.log(res.data)
    tableData.value = val
  }
}

</script>

<style scoped>

:deep(.el-table td .cell) {
  line-height: 20px !important;
}
</style>
