<!--
  功能：抬头文本解绑Box
-->
<template>
  <div class="vue-element-page-wrap" ref="tableContainer">
    <el-row class="page-search" justify="space-between" align="bottom">
      <el-form
        ref="queryFormRef"
        :model="queryParams"
        :inline="true"
        label-width="80px"
        label-position="left"
      >
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="到货单号" prop="queryParams.params">
              <el-select
                v-model="state.queryParams.params.RECEIVEREQUESTNAME"
                placeholder="到货单号"
                style="width: 160px"
                @change="changereFn"
                filterable
                clearable
              >
                <el-option
                  v-for="item in state.ReceiveACTNameList"
                  :key="item.RECEIVEREQUESTNAME"
                  :label="item.RECEIVEREQUESTNAME"
                  :value="item.RECEIVEREQUESTNAME"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="工厂" prop="params.SITENAME">
              <el-Input v-model="queryParams.params.SITENAME" disabled clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="入库单" prop="queryParams.params">
              <el-select
                v-model="state.queryParams.params.RECEIVEACTNO"
                placeholder="入库单"
                style="width: 160px"
                filterable
                clearable
              >
                <el-option
                  v-for="item in state.ReceiveACTList"
                  :key="item.RECEIVEACTNO"
                  :label="item.RECEIVEACTNO"
                  :value="item.RECEIVEACTNO"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="page-search-btns">
        <el-button type="primary" @click="handleQuery">搜索</el-button>
      </div>
    </el-row>
    <div class="vue-element-page-table">
      <div class="page-table-operate">
        <div class="page-table-title">
          <div class="page-table-title-left">
            <span>入库单详情信息</span>
          </div>
        </div>
      </div>
      <el-table
        border
        v-loading="loading"
        :data="batchList"
        highlight-current-row
        row-key="id"
        style="width: 100%"
        @row-click="handleRowClick"
      >
        <template v-for="(col, index) in batch_column" :key="index">
          <el-table-column v-if="!col.hide" :label="col.header" show-overflow-tooltip>
            <template #default="scope">
              <!-- <span>{{ scope.row[col.field] }}</span> -->
              <span>{{
                col.field === 'MAKEDATE'
                  ? dayjs(scope.row[col.field]).format('YYYY-MM-DD')
                  : scope.row[col.field]
              }}</span>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
    <div class="vue-element-page-table">
      <div class="page-table-operate">
        <div class="page-table-title">
          <div class="page-table-title-left">
            <span>BOX信息</span>
          </div>
        </div>
      </div>
      <el-table
        border
        v-loading="inventory_loading"
        :data="state.batchListTo"
        highlight-current-row
        row-key="id"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="40" />
        <template v-for="(col, index) in inventory_column" :key="index">
          <el-table-column v-if="!col.hide" :label="col.header" show-overflow-tooltip>
            <template #default="scope">
              <span>{{ scope.row[col.field] }}</span>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
    <el-row class="page-search" justify="end" align="middle">
      <div class="page-search-btns">
        <el-button type="primary" @click="submitForm" :disabled="state.Button_state"
          >修改</el-button
        >
      </div>
    </el-row>
  </div>
</template>

<script lang="ts">
export default {
  name: 'modifyReceiveActNo'
}
</script>

<script lang="ts" setup>
import { reactive, ref, onMounted, toRefs, getCurrentInstance, computed, onActivated } from 'vue'
import { ElForm, ElMessageBox, ElTable, ElMessage } from 'element-plus'
import { getQueryList, dessiginBoxByAct, BpelEvent } from '@/api/common'
import { IFTRUE } from '@/utils/CommonUtil'
import { localStorage } from '@/utils/storage'
import dayjs from 'dayjs'

import queryListStore from '@/store/modules/queryList' // 统一查询接口
const store: any = queryListStore()
const dataArr = computed(() => store.dataArr)
const dataArr2 = computed(() => store.dataArr2)
const list = computed(() => store.list)
const detailList = computed(() => store.detailList)

const queryFormRef = ref(ElForm)
const formDataRef = ref(ElForm)

const { proxy }: any = getCurrentInstance()

const state = reactive({
  Button_state: false,
  queryParams: {
    queryId: 'GetReceiveList',
    version: '50001',
    listCode: '', // 查询类型
    params: {
      RECEIVEACTNO: '',
      RECEIVEREQUESTNAME: '',
      SITENAME: 'SDK'
    }
  },
  loading: false,
  batchList: [] as any,
  batch_column: [] as any,
  batchListTo: [] as any,
  inventory_loading: false,
  inventory_column: [] as any,
  selectItem: undefined as any,
  ReceiveACTNameList: [] as any,
  ReceiveACTList: [] as any,
  multipleSelection: [] as any,
})

const { loading, batchList, batch_column, queryParams, inventory_column, inventory_loading } =
  toRefs(state)

onMounted(() => {
  state.batch_column = [
    { header: '工厂', field: 'SITENAME', hide: false },
    { header: 'PO号', field: 'RECEIVEREQUESTNAME', hide: false },
    { header: '抬头文本', field: 'RECEIVEACTNO', hide: false },
    { header: '接收数量', field: 'RECEIVEQUANTITY', hide: false },
    { header: '订单行项', field: 'RECEIVEREQUESTDETAILNAME', hide: false },
    { header: '生产日期', field: 'MAKEDATE', hide: false }
  ]
  state.inventory_column = [
    { header: 'BOXID', field: 'MATERIALPACKINGNAME', hide: false },
    { header: '批次', field: 'CHARGE', hide: false },
    { header: '物料号', field: 'MATERIALSPECNAME', hide: false },
    { header: '物料总数量', field: 'MATERIALQUANTITY', hide: true },
    { header: '到货单号', field: 'RECEIVEREQUESTNAME', hide: false },
    { header: '入库单号', field: 'RECEIVEACTNO', hide: false }
  ];
  
})
onActivated( () => {
  SReceiveNameAct();
  
})

function handleQuery(): void {
  if (
    state.queryParams.params.RECEIVEACTNO != '' &&
    state.queryParams.params.RECEIVEACTNO != null &&
    state.queryParams.params.RECEIVEACTNO != undefined
  ) {
    // state.queryParams = {}
    if(state.queryParams.params.RECEIVEREQUESTNAME == undefined) {
        state.queryParams.params.RECEIVEREQUESTNAME = ""
    }
    state.queryParams.queryId = 'GetReceiveList'
    state.queryParams.version = '50001'
    state.queryParams.listCode = 'list'
    store.getQueryList(state.queryParams)
    state.batchList = list
  } else {
    ElMessageBox.alert('入库单为空！', '提醒框', {
      confirmButtonText: 'OK'
    })
  }
}

// 查询列表详情
function queryRecDetailList(params: any): void {
  // getQueryList(params).then((res: any) => {
  //     state.batchListTo = res.data
  // });
  store.getQueryList(params)
  state.batchListTo = detailList
}
function changereFn(e: any): void {
  state.queryParams.params.RECEIVEREQUESTNAME = e
  SelectReceiveAct();
}

//查询所有的入库单
function SelectReceiveAct(): void {
  state.queryParams.queryId = 'GetNormalReceiveActNoList'
  state.queryParams.version = 'H0002'
  state.queryParams.listCode = 'select'
  store.getQueryList(state.queryParams)
  state.ReceiveACTList = dataArr
}

//查询所有的到货单
function SReceiveNameAct(): void {
  state.queryParams.queryId = 'GetNormalReceiveActNameList'
  state.queryParams.version = 'H0002'
  state.queryParams.listCode = 'select2'
  
  store.getSlectyList(state.queryParams)
  state.ReceiveACTNameList = dataArr2
}

/**
 * 点击行
 * */
function handleRowClick(row: any): void {
  console.log('row', row)
  queryRecDetailList({
    queryId: 'GetBoxInfo',
    version: '50002',
    listCode: 'detail',
    params: {
      RECEIVEACTNO: row?.RECEIVEACTNO,
      SITENAME: 'SDK',
      RECEIVEREQUESTDETAILNAME: row?.RECEIVEREQUESTDETAILNAME,
      RECEIVEREQUESTNAME: row?.RECEIVEREQUESTNAME
    }
  })
}
// 勾选
function handleSelectionChange(selection: any): void {
  state.multipleSelection = selection
}

/**
 * 保存
 */
function submitForm(): void {
  // eslint-disable-next-line no-constant-condition
  console.log(state.batchList.length)
  if (state.multipleSelection <= 0) {
    ElMessageBox.alert('没有勾选，请勾选')
    return
  }
  let params = {
    user: localStorage.get('userId'),
    boxList: state.multipleSelection
  }
  dessiginBoxByAct(params).then((res: any) => {
    ElMessage({
      message: '修改成功',
      type: 'success'
    })
    this.handleQuery()
  })
  state.Button_state = false
  state.loading = false
}
</script>

<style scoped lang="scss"></style>
