
<template>
  <div>
    <el-row :gutter="30" justify="space-evenly">
      <el-col :span="9">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="130px" size="large"
          style="border:solid 1px var(--el-border-color);border-radius:4px;padding:20px;">
          <el-row>
            <el-form-item prop="deliverNo">
              <template #label>
                <el-text>交验单号</el-text>
              </template>
              <el-select v-model="queryParams.deliverNo" placeholder="请选择" @change="handleQuery">
                <el-option v-for="dict in sapDeliverNoIn" :key="dict.deliverNo" :label="dict.deliverNo"
                  :value="dict.deliverNo">
                </el-option>
              </el-select>
            </el-form-item>
            <!-- <el-button icon="finished" plain type="primary" style="margin-left:10px;"
              @click="submitDeliver">提交</el-button> -->
          </el-row>
          <el-row>
            <el-form-item prop="materialSpec">
              <template #label>
                <el-text>物料</el-text>
              </template>
              <el-input v-model.lazy="queryParams.materialSpec" ref="specInput" clearable placeholder="请选择输入物料图号"
                @keyup.enter="materialCurrentChange">
                <template #append>
                  <el-button icon="search" @click="materialCurrentChange" />
                </template>
              </el-input>
            </el-form-item>
          </el-row>
          <el-form-item>
            <template #label>
              <el-text>BN / SN码</el-text>
            </template>
            <el-text>{{ form.bnSnCode }}</el-text>
          </el-form-item>
          <el-form-item>
            <template #label>
              <el-text>质检合格数量</el-text>
            </template>
            <el-text>{{ form.checkQty }}</el-text>
          </el-form-item>
          <el-form-item>
            <template #label>
              <el-text>已入库数量</el-text>
            </template>
            <el-text>{{ form.instoreQty }}</el-text>
          </el-form-item>
          <el-form-item prop="instoreQty">
            <template #label>
              <el-text>本次入库数量</el-text>
            </template>
            <el-input-number v-model="form.instoreQtyTemp" ref="numInput" :min="0"
              :max="form.checkQty - form.instoreQty" />
          </el-form-item>
          <el-form-item>
            <el-button icon="check" type="primary" @click="submitForm">{{ $t('btn.submit') }}</el-button>
            <el-button icon="refresh" @click="reset(); handleQuery()">{{ $t('btn.reset') }}</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="15">
        <!-- 数据区域 -->
        <el-card shadow="never">
          <el-card style="
               margin: 5px;
               width: 300px;
               float: left;" shadow="hover" v-for="cell in dataList" @click="materialSelected(cell)">
            <template #header>
              <el-text size="large">{{ cell.materialName }}</el-text>
              <el-text size="large" v-if="!cell.materialName.includes(cell.materialSpec)">{{ " " + cell.materialSpec
              }}</el-text>
            </template>
            <el-form :model="cell" label-width="100px" inline>
              <!-- <el-row>
                <el-form-item label="质检合格数量">{{ cell.checkQty }}</el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="入库数量">{{ cell.instoreQty }}</el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="BN / SN码">{{ cell.bnSnCode }}</el-form-item>
              </el-row> -->


              <el-form-item label="质检合格数量">{{ cell.checkQty }}</el-form-item>
              <el-form-item label="入库数量">{{ cell.instoreQty }}</el-form-item>
              <el-form-item label="BN / SN码">{{ cell.bnSnCode }}</el-form-item>
            </el-form>
          </el-card>
          <pagination class="mt10" style="clear:both;" background :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script setup name="qainspectrecord">
import {
  listQaInspectRecord, QueryCheckedSapDeliverData, getQaInspectRecord
} from '@/api/business/qainspectrecord.js'

import { AddCheckedSapDeliverInstoreDtlResult } from '@/api/business/ininstorerecord.js'

import { reactive } from 'vue';

const { proxy } = getCurrentInstance()

// 选中inspectId数组数组
const ids = ref([])
const loading = ref(false)
const showSearch = ref(true)
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  sort: '',
  sortType: 'asc',
})

const total = ref(0)
const dataList = ref([])
const sapDeliverNoIn = ref([])
const queryRef = ref()

function getList() {
  loading.value = true
  listQaInspectRecord(queryParams).then(res => {
    const { code, data } = res
    if (code == 200) {
      dataList.value = data.result
      total.value = data.totalNum
      loading.value = false
      // console.log(data)
    }
  })
}
function getNoIn() {
  const para = reactive({ deliverNo: '', bomNo: '', })
  QueryCheckedSapDeliverData(para).then(res => {
    const { code, data } = res
    if (code == 200) {
      sapDeliverNoIn.value = data
      if (data.length > 0) {
        queryParams.deliverNo = sapDeliverNoIn.value[0].deliverNo
        handleQuery()
      }
    }
  })
}
getNoIn()
// 查询
function handleQuery() {
  queryParams.pageNum = 1
  // console.log(queryParams)
  getList()
  proxy.$refs['specInput'].focus()
}

/*************** form操作 ***************/
const formRef = ref()
const state = reactive({
  form: {},
  rules: {
    materialSpec: [{ required: true, message: "物料图号不能为空", trigger: "blur" }],
    // bnSnCode: [{ required: true, message: "BN/SN码不能为空", trigger: "blur" }],
    CheckOkQty: [{ required: true, message: "本次入库数量不能为空", trigger: "blur", type: "number" }],
  },
  options: {
    keyFlagOptions: [], // 关键件标识字典
    operationResultOptions: [],// 操作结果字典
    materialTypeOptions: [],// 物料类型字典
    qaResultOptions: []//质检结果字典
  }
})

const { form, rules, options } = toRefs(state)
var dictParams = [
  { dictType: 'my_key_flag', columnName: 'keyFlagOptions' },
  { dictType: 'my_operation_result', columnName: 'operationResultOptions' },
  { dictType: 'my_material_type', columnName: 'materialTypeOptions' },
  { dictType: 'my_qa_result', columnName: 'qaResultOptions' },
]
proxy.getDicts(dictParams).then((response) => {
  response.data.forEach((element) => {
    state.options[element.columnName] = element.list
  })
})

// 筛选物料
function materialCurrentChange() {
  loading.value = true
  // console.log(queryParams)
  listQaInspectRecord(queryParams).then(res => {
    const { code, data } = res
    if (code == 200) {
      dataList.value = data.result
      total.value = data.totalNum
      loading.value = false
      if (dataList.value.length == 1) {
        proxy.$refs['specInput'].focus()
        form.value = dataList.value[0]
        form.value.instoreQtyTemp = form.value.checkQty - form.value.instoreQty
        queryParams.materialSpec = data.materialSpec
        proxy.$refs['numInput'].focus()
      }
      else {
        queryParams.materialSpec = ""
      }
    }
  })
}
// 选择物料 getQaInspectRecord
function materialSelected(material) {
  loading.value = true
  getQaInspectRecord(material.inspectId).then(res => {
    const { code, data } = res
    if (code == 200) {
      // console.log(data)
      loading.value = false
      if (data != null) {
        proxy.$refs['specInput'].focus()
        form.value = data
        form.value.instoreQtyTemp = form.value.checkQty - form.value.instoreQty
        queryParams.materialSpec = data.materialSpec
        proxy.$refs['numInput'].focus()
      }
      else {
        queryParams.materialSpec = ""
      }
    }
  })
}

// 重置表单
function reset() {
  form.value = {
    inspectId: undefined,
    inspectNo: undefined,
    deliverNo: undefined,
    checkName: undefined,
    bomNo: undefined,
    rowNo: undefined,
    category: undefined,
    materialCode: undefined,
    materialName: undefined,
    materialSpec: undefined,
    keyFlag: undefined,
    bnSnCode: undefined,
    qty: undefined,
    checkQty: undefined,
    result: undefined,
    instoreQty: undefined,
    instoreResult: undefined,
    createBy: undefined,
    createTime: undefined,
    updateBy: undefined,
    updateTime: undefined,
    remark: undefined,
  };
  queryParams.materialSpec = undefined
  proxy.resetForm("formRef")
}


// 入库表单提交
function submitForm() {
  proxy.$refs["formRef"].validate((valid) => {
    if (valid) {
      if (form.value.instoreQtyTemp == 0) {
        proxy.$modal.msgWarning("请输入入库数量！")
      }
      else {
        form.value.instoreQty = form.value.instoreQtyTemp
        console.log(form.value)
        AddCheckedSapDeliverInstoreDtlResult(form.value).then((res) => {
          reset()
          queryParams.materialSpec = undefined
          proxy.$modal.msgSuccess("入库成功！")
          // getList()
          materialCurrentChange()
        })
      }
    }
  })
}

</script>

<style lang="scss" scoped>
.dialog-table-row {
  margin-bottom: 20px;
}

.dialog-table-row-head {
  float: right;
}
</style>
