<template>
  <el-drawer title="新建到货单" size="700px">
    <el-row class="page-search" justify="space-between" align="middle">
      <el-form ref="queryFormRef" :model="queryParams.params" :inline="true">
        <el-form-item label="采购单" prop="RECEIVEREQUESTNAME">
          <el-Input v-model="queryParams.params.RECEIVEREQUESTNAME" placeholder="单号" clearable />
        </el-form-item>
      </el-form>
      <div class="page-search-btns">
        <el-button type="primary" @click="queryInfo">搜索</el-button>
        <el-button @click="resetQuery">重置</el-button>
        <el-button type="primary" @click="handleCreate" v-loading="state.loadings">创建</el-button>
      </div>
    </el-row>

    <div class="vue-element-page-table">
      <div class="page-table-operate">
        <div class="page-table-title">
          <span>采购订单</span>
        </div>
      </div>
      <el-table border v-loading="loading" :data="state.dataList"
                highlight-current-row row-key="id" @selection-change="handleSelection">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="SITENAME" label="工厂"/>
        <el-table-column prop="RECEIVEREQUESTNAME" label="订单编号"/>
      </el-table>
      <div>
        <pagination v-if="total > 0" :total="total" v-model:pageNumTo="queryParams.pageNum"
                    v-model:pageSizeTo="queryParams.pageSize" @pagination="handleQuery" />
      </div>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { getCurrentInstance, onMounted, reactive, ref, toRefs } from 'vue'
import { ElForm, ElMessageBox, ElTable } from 'element-plus'
import { localStorage } from '@/utils/storage'
import { getQueryPageList } from '@/api/common'
import { createDelivery } from '@/api/StockIn'

const queryFormRef = ref(ElForm)
const { proxy }: any = getCurrentInstance()
// 变量
let state = reactive({
  dataList: [] as any, // 表格数据
  total: 0, // 总数
  selection: [] as any, // 多选
  loadings: false,
  loading: true,
  // 查询参数
  queryParams: {
    queryId: 'GetPurchase',
    version: 'G5002',
    params: {
      SITENAME: localStorage.get('siteName') || 'SDK',
      RECEIVEREQUESTNAME: '' // 单号
    },
    pageNum: 1,
    pageSize: 10
  }
})
const { queryParams, loading, total } = toRefs(state)
onMounted(()=> {
  handleQuery()
})
// 多选
const handleSelection = (val: any) => {
  state.selection = val
}
// 查询
function queryInfo() {
  state.queryParams.pageNum = 1
  handleQuery()
}
// 查询
async function handleQuery() {
  state.loading = true
  await getQueryPageList(state.queryParams).then((res: any) => {
    if (res.data.list.length > 0) {
      state.dataList = res.data.list
      state.total = res.data.total
    } else {
      state.dataList = res.data.list
      proxy.$ElMessage.success('查询结果为空')
    }
    state.loading = false
  })
}
const emits = defineEmits(['refresh'])
// 创建入库单
function handleCreate() {
  if (state.selection.length == 0) {
    ElMessageBox.alert('请选择条目', { confirmButtonText: 'OK' })
    return
  }
  let name = "DK" + Date.now()
  createDelivery({
    receiveRequestName: name,
    siteName: 'SDK',
    dataList: state.selection
  }).then((res: any) => {
    if (res.success) {
      ElMessageBox.alert('创建到货单：' + name, '提醒框', {
        confirmButtonText: 'OK'
      }).then(() => {
        emits('refresh', name)
      })
    } else {
      proxy.$ElMessage.error(res.message)
    }
  })
}
function resetQuery() {
  queryFormRef.value.resetFields();
  handleQuery();
}
</script>