<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="params.MATERIALSPECNAME">
              <el-Input v-model="queryParams.params.MATERIALSPECNAME" placeholder="物料号" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="批次" prop="params.MATERIALPACKINGNAME">
              <el-Input v-model="queryParams.params.MATERIALPACKINGNAME" placeholder="批次" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="hold状态" prop="params.HOLDSTATE">
              <el-select v-model="queryParams.params.HOLDSTATE" placeholder="hold状态" style="width: 240px">
                <el-option v-for="item in operateOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="库位" prop="params.LOCATIONNAME">
              <el-Input v-model="queryParams.params.LOCATIONNAME" placeholder="库位" clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="page-search-btns">
        <el-button type="primary" @click="queryInfo">搜索</el-button>
        <el-button @click="resetQuery">重置</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 class="page-table-operateBtns">
          <el-popover :persistent="false" placement="right" popper-class="config-table-wrap" trigger="click">
            <template #reference>
              <el-button class="operateBtns-setting">
                <svg-icon icon-class="table_title" width="16px" height="16px" />
              </el-button>
            </template>
            <ConfigTable :list="column" @updateList="updateList" />
          </el-popover>
        </div>
      </div>
      <el-table :height="tableHeight" border v-loading="loading" :data="state.boxList" 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 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>
      <pagination v-if="state.total" :total="state.total" v-model:pageNumTo="state.queryParams.pageNum"
        v-model:pageSizeTo="state.queryParams.pageSize" @pagination="handleQuery" />
    </div>
    <el-row class="page-search" justify="space-between" align="middle">
      <el-form ref="operateFormRef" :model="operateParams" :inline="true">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="原因" prop="operateParams.date">
              <!-- <el-select v-model="state.changeParams.body.REASONCODE" placeholder="原因" style="width: 240px">
                <el-option v-for="item in checkResultOptions" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select> -->
              <el-Input v-model="state.changeParams.body.REASONCODE" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="备注" prop="operateParams.date">
              <el-Input v-model="state.LASTEVENTCOMMENT" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="page-search-btns">
        <el-button type="primary" v-loading="state.loading2" @click="Hold()"
          :disabled="state.Button_state">冻结</el-button>
        <el-button type="primary" v-loading="state.loading3" @click="Release()"
          :disabled="state.Button_state2">释放</el-button>
      </div>
    </el-row>
  </div>
</template>

<script lang="ts">
export default {
  name: "holdAndRelease",
};
</script>

<script lang="ts" setup>
import { reactive, ref, onMounted, toRefs, getCurrentInstance, nextTick } from "vue";
import { ElForm, ElMessageBox, ElTable } from "element-plus";
import { BpelEvent, getQueryList, getQueryPageList } from "@/api/common";
import { IFTRUE } from "@/utils/CommonUtil"
import {localStorage} from "@/utils/storage";
import { bTableHeight } from "../../../composables/calcTableHeight";

const { tableContainer, tableHeight, updateTableHeight, handleResize } = bTableHeight(240);
const queryFormRef = ref(ElForm);
const operateFormRef = ref(ElForm);

const formDataRef = ref(ElForm);
const { proxy }: any = getCurrentInstance();

const state = reactive({
  rsa: "",
  Button_state: false,
  Button_state2: false,
  loading2: false,
  loading3: false,
  total: 0,
  queryParams: {
    queryId: "GetHoldAndRelease",
    version: "00001",
    params: {
      SITENAME: 'SDK',
      MATERIALPACKINGNAME: "",
      MATERIALSPECNAME: "",
      HOLDSTATE: "",
      LOCATIONNAME: "",
    },
    pageNum: 1,
    pageSize: 10,
  },
  changeParams: {
    header: {
      MESSAGENAME: "",
      LANGUAGE: "Chinese",
      EventUser: localStorage.get('userId')
    },
    body: {
      BOXLIST: [] as any,
      REASONCODE: "",
      HOLDSTATE: ""
    }
  },
  operateParams: {
    date: new Date(),
  },
  operateOptions: [
    {
      label: "Y",
      value: "Y",
    },
    {
      label: "N",
      value: "N",
    },
  ],
  actNoOptions: [] as any, // 抬头文本
  checkResultOptions: [
    {
      label: "OK",
      value: "OK",
    },
    {
      label: "NG",
      value: "NG",
    },
  ], // 质检结果
  loading: false,
  boxList: [] as any,
  LASTEVENTCOMMENT: "",
  column: [] as any,
  multipleSelection: [] as any,
});
const { rsa, queryParams, loading, boxList, column, operateParams, operateOptions, actNoOptions, checkResultOptions } = toRefs(state);

onMounted(() => {
  state.column = [
    { header: "工厂", field: "SITENAME", hide: true },
    { header: "组织", field: "ERPFACTORY", hide: false },
    { header: "仓库", field: "ERPLOCATION", hide: false },
    { header: "仓库名称", field: "ERPLOCATIONDESC", hide: false },
    { header: "货位", field: "LOCATIONNAME", hide: false },
    { header: "货位名称", field: "LOCATIONNAMEDESC", hide: false },
    { header: "条码", field: "MATERIALPACKINGNAME", hide: false },
    { header: "批次", field: "CHARGE", hide: false },
    { header: "物料编号", field: "MATERIALSPECNAME", hide: false },
    { header: "是否冻结", field: "HOLDSTATE", hide: false },
    { header: "数量", field: "MATERIALQUANTITY", hide: false },
    { header: "单位", field: "UNIT", hide: false },
    { header: "原因", field: "REASONCODE", hide: false },
    { header: "品质状态", field: "PACKINGGRADE", hide: false },
    { header: "入库日期", field: "RECEIVETIME", hide: false },
    { header: "最近锁定人", field: "LASTHOLDUSER", hide: false },
  ];
  handleQuery();
  updateTableHeight();
  window.addEventListener('resize', handleResize);

});
// 更新列
function updateList(col: any) {
  state.column = col;
}
function queryInfo () {
  state.queryParams.pageNum = 1
  handleQuery();
}
function handleQuery() {
  state.boxList = []
  getQueryPageList(state.queryParams)
    .then((res: any) => {
      if(res.data.list.length==0){
        ElMessageBox.alert('查无数据！', '提醒框', {
          confirmButtonText: 'OK',
        })
      } else {
      state.boxList = res.data.list;
      state.total = res.data.total;}
    })
    .catch(() => { });
}

const handleSelectionChange = (val: any) => {
  state.multipleSelection = val;
  console.log("state.multipleSelection", state.multipleSelection); // 打印选中行的数据   
};

async function Hold() {
  state.changeParams.header.MESSAGENAME = "HoldBox"
  state.changeParams.body.HOLDSTATE = "Y"
  state.Button_state = true
  if (state.multipleSelection.length === 0) {
    state.Button_state = false
    ElMessageBox.alert("请选择批次！", '提示框', {
      confirmButtonText: 'OK',
    })
    return
  }
  state.loading2 = true
  console.log(state.changeParams.body.REASONCODE);
  if (state.changeParams.body.REASONCODE === '') {
    state.loading2 = false
    state.Button_state = false
    ElMessageBox.alert("请填写原因信息！", '提示框', {
      confirmButtonText: 'OK',
    })
    return
  }

  state.changeParams.body.BOXLIST = [];
  for (let k = 0; k < state.multipleSelection.length; k++) {
    let holdSatte = state.multipleSelection[k].HOLDSTATE
    if (holdSatte == "Y") {
      state.loading2 = false
      state.Button_state = false
      ElMessageBox.alert("不能重复锁定！" + state.multipleSelection[k].CHARGE, '提示框', {
        confirmButtonText: 'OK',
      })
      return
    }
    // 将 BOX 对象推送到 state.changeParams.body.BOXLIST 数组中  
    state.changeParams.body.BOXLIST.push({
      SITENAME: state.multipleSelection[k].SITENAME,
      MATERIALPACKINGNAME: state.multipleSelection[k].MATERIALPACKINGNAME,
      LASTEVENTCOMMENT: state.LASTEVENTCOMMENT,
    });
  }

  await BpelEvent(state.changeParams)
    .then((res: any) => {
      if ('200' == res.code) {
        handleQuery();
        ElMessageBox.alert("库存锁定成功", '提示框', {
          confirmButtonText: 'OK',
        })
        state.loading2 = false
        state.Button_state = false
      } else if('500' == res.code) {
        ElMessageBox.alert("库存锁定失败", '提示框', {
          confirmButtonText: 'OK',
        })
        state.loading2 = false
        state.Button_state = false
      }
    })
    .catch((error: any) => {
      ElMessageBox.alert(error, '提示框', {
        confirmButtonText: 'OK',
      })
      state.loading2 = false
      state.Button_state = false
    });
  state.loading2 = false
  state.Button_state = false
}

function Release() {
  state.changeParams.header.MESSAGENAME = "ReleaseBox"
  state.changeParams.body.HOLDSTATE = "N"

  if (state.multipleSelection.length === 0) {
    ElMessageBox.alert("请选择批次！", '提示框', {
      confirmButtonText: 'OK',
    })
    return
  }
  state.loading3 = true
  if (state.changeParams.body.REASONCODE === '') {
    state.loading3 = false
    ElMessageBox.alert("请填写原因信息！", '提示框', {
      confirmButtonText: 'OK',
    })
    return
  }
  state.Button_state2 = true
  state.changeParams.body.BOXLIST = [];
  for (let k = 0; k < state.multipleSelection.length; k++) {
    let holdSatte = state.multipleSelection[k].HOLDSTATE
    if (holdSatte == "N") {
      state.loading3 = false
      state.Button_state2 = false
      ElMessageBox.alert("不能重复解锁！" + state.multipleSelection[k].CHARGE, '提示框', {
        confirmButtonText: 'OK',
      })
      return
    }
    let LASTHOLDUSER = state.multipleSelection[k].LASTHOLDUSER
    if (LASTHOLDUSER != localStorage.get('userId')) {
      state.loading3 = false
      state.Button_state2 = false
      ElMessageBox.alert("不能解锁别人的锁定库存！" + state.multipleSelection[k].CHARGE, '提示框', {
        confirmButtonText: 'OK',
      })
      return
    }

    // 将 BOX 对象推送到 state.changeParams.body.BOXLIST 数组中  
    state.changeParams.body.BOXLIST.push({
      SITENAME: state.multipleSelection[k].SITENAME,
      MATERIALPACKINGNAME: state.multipleSelection[k].MATERIALPACKINGNAME,
      LASTEVENTCOMMENT: state.LASTEVENTCOMMENT,
    });
  }
  BpelEvent(state.changeParams)
    .then((res: any) => {
      if (IFTRUE(res)) {
        handleQuery();
        ElMessageBox.alert("库存解锁成功", '提示框', {
          confirmButtonText: 'OK',
        })
        state.loading2 = false
        state.Button_state2 = false
        state.loading3 = false
      } else {
        ElMessageBox.alert(res.data.RETURNCODE + '->' + res.data.RETURNMESSAGE, '', {
          confirmButtonText: 'OK',
        })
        state.loading2 = false
        state.Button_state2 = false
        state.loading3 = false
      }
    })
    .catch((error: any) => {
      ElMessageBox.alert(error, '提示框', {
        confirmButtonText: 'OK',
      })
      state.Button_state2 = false
      state.loading3 = false
    });
  state.loading3 = false
  state.Button_state2 = false
}
function resetQuery() {
  queryFormRef.value.resetFields();
  handleQuery();
}
</script>
<style scoped lang="scss">
.operate-bottom {
  width: 80px;
  height: 28px;
  float: right;
  margin-top: 20px;
}
</style>
