<!--成品待入库查询-->
<!--页面渲染区域-->
<template>
  <div class="vue-element-page-wrap" ref="tableContainer">
    <el-row class="page-search" justify="space-between" align="bottom">
      <el-form
        ref="queryFormRef"
        :model="queryParamsOrder"
        :inline="true"
        label-position="left"
      >
        <el-row :gutter="20">
          <el-col :span="5">
            <el-form-item label="单据类型" prop="params.orderType">
              <el-select
                filterable
                v-model="queryParamsOrder.params.ORDERTYPE"
                placeholder="选择单据类型"
                style="width: 240px"
                @change="TYPEFn"
              >
                <el-option
                  v-for="item in state.orderTypeList"
                  :key="item.ENUMVALUE"
                  :label="item.DESCRIPTION"
                  :value="item.ENUMVALUE"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="单号" prop="SOURCEORDER">
              <el-Input
                v-model="queryParamsOrder.params.SOURCEORDER"
                placeholder="输入单号"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="物料编号" prop="params.PRODCUTSPECNAME">
              <el-Input
                v-model="queryParamsOrder.params.PRODCUTSPECNAME"
                placeholder="输入物料编号"
                clearable
                @change="getSdkInfo"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="品名" prop="params.MATERIALSPECNAME">
              <el-Input
                v-model="queryParamsOrder.params.MATERIALSPECNAME"
                placeholder="输入品名"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="选择规格" prop="params.SENDORDERNO">
              <el-select
                filterable
                v-model="queryParamsOrder.params.SDK_ID"
                placeholder="选择SDK规格"
              >
                <el-option
                  v-for="item in state.sdkList"
                  :key="item.text"
                  :label="item.text"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" v-if="queryParamsOrder.params.ORDERTYPE == 'A2'">
            <el-form-item label="车间">
              <el-select
                filterable
                v-model="queryParamsOrder.params.AREA"
                placeholder="下拉选择状态"
              >
                <el-option
                  v-for="item in areaList"
                  :key="item.AREANAME"
                  :label="item.DESCRIPTION"
                  :value="item.AREANAME"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="库存状态" prop="params.STOCKSTATE">
              <el-select
                v-model="queryParamsOrder.params.STOCKSTATE"
                placeholder="下拉选择状态"
                style="width: 240px"
              >
                <el-option
                  v-for="item in StockStateList"
                  :key="item.ENUMVALUE"
                  :label="item.DESCRIPTION"
                  :value="item.ENUMVALUE"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="入库时间" prop="params.USERNAME">
              <el-date-picker
                v-model="queryParamsOrder.params.DateValue"
                type="datetimerange"
                unlink-panels
                range-separator="To"
                v-model:start-placeholder="queryParamsOrder.params.FROMDATE"
                v-model:end-placeholder="queryParamsOrder.params.TODATE"
                :size="size"
              />
              <!-- :shortcuts="shortcuts2" -->
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row :gutter="20">
          
          
        </el-row> -->
      </el-form>
      <div class="page-search-btns">
        <el-button type="primary" @click="handleQueryInfo">搜索</el-button>
      </div>
    </el-row>
    <!--table 区域-->
    <div class="vue-element-page-table">
      <div class="table-layout">
        <div class="table-col">
          <div class="page-table-operate">
            <div class="page-table-title">
              <span>订单信息</span>
            </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="state.Column_Order" @updateList="updateList2" />
              </el-popover>
            </div>
          </div>
          <el-table
            border
            v-loading="loading"
            :data="state.productOrderList"
            highlight-current-row
            row-key="id"
            style="width: 100%"
            :height="tableHeight"
            @row-click="orderHandle"
          >
          <el-table-column type="index" width="50" />
            <template v-for="(col, index) in Column_Order" :key="index">
              <el-table-column v-if="!col.hide" :label="col.header" show-overflow-tooltip>
                <template #default="scope">
                  <span v-if="col.field === 'status'">
                    <span v-if="scope.row[col.field]" class="table-status-active">启用</span>
                    <span v-else class="table-status-inActive">禁用</span>
                  </span>
                  <span v-else-if="col.field === 'ORDERTYPE'">
                    <span v-if="scope.row[col.field] == 'DC'" class="table-status-active"
                      >调拨入库</span
                    >
                    <span v-else-if="scope.row[col.field] == 'A2'" class="table-status-active"
                      >产成品入库</span
                    >
                    <span v-else class="table-status-active">生产退料</span>
                  </span>
                  <span v-else-if="col.field == 'STOCKSTATE'" class="flag-layout">
                    <span style="background-color: lightgreen;display: inline-block;width: 100%" v-if="scope.row[col.field] == '已入库'">{{ scope.row[col.field] }}</span>
                    <span v-else style="background-color: yellow;display: inline-block;width: 100%">{{ scope.row[col.field] }}</span>
                  </span>
                  <span v-else>{{ scope.row[col.field] }}</span>
                </template>
              </el-table-column>
            </template>
            <template v-slot:empty>
              <svg-icon icon-class="noData" width="160px" height="160px" />
            </template>
          </el-table>
          <div>
            <pagination
              v-if="totalO > 0"
              :total="totalO"
              v-model:pageNumTo="queryParamsOrder.pageNum"
              v-model:pageSizeTo="queryParamsOrder.pageSize"
              @pagination="handleQuery"
            />
          </div>
        </div>
        <div class="table-col">
          <div class="page-table-operate">
            <div class="page-table-title">
              <span>待入库信息</span>
            </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="state.Column" @updateList="updateList" />
                </el-popover>
              </div>
          </div>
          <el-table
            border
            v-loading="loading"
            :data="state.BoxHistoryList"
            highlight-current-row
            row-key="id"
            style="width: 100%"
            :height="tableHeight"
          >
          <el-table-column type="index" width="50" />
            <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 v-if="col.field === 'status'">
                    <span v-if="scope.row[col.field]" class="table-status-active">启用</span>
                    <span v-else class="table-status-inActive">禁用</span>
                  </span>
                  <span v-else-if="col.field === 'RECEIVE_FLAG'" class="flag-layout">
                    <span v-if="scope.row[col.field] == 'N'" style="background-color: yellow;display: inline-block;width: 100%">未入库</span>
                    <span v-else style="background-color: lightgreen;display: inline-block;width: 100%">
                      <!-- {{scope.row[col.field] == 'N' ? '未入库' : '已入库'}} -->
                      已入库
                    </span>
                  </span>
                  <span v-else-if="col.field === 'PACKINGGRADE'" class="flag-layout">
                    <span v-if="!scope.row[col.field]" style="background-color: yellow;display: inline-block;width: 100%">待检</span>
                    <span v-else-if="scope.row[col.field]=='NG'" style="background-color: red;display: inline-block;width: 100%">
                      不合格
                    </span>
                    <span v-else style="background-color: lightgreen;display: inline-block;width: 100%">
                      合格
                    </span>
                  </span>
                  <span v-else>{{ scope.row[col.field] }}</span>
                </template>
              </el-table-column>
            </template>
            <template v-slot:empty>
              <svg-icon icon-class="noData" width="160px" height="160px" />
            </template>
          </el-table>
          <div>
            <pagination
              v-if="total > 0"
              :total="total"
              v-model:pageNumTo="queryParams.pageNum"
              v-model:pageSizeTo="queryParams.pageSize"
              @pagination="handleQuery2"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: 'ProductPreStockedQuery'
}
</script>
<!--script区域-->
<script lang="ts" setup>
/*引入区域*/
import { reactive, ref, onMounted, toRefs, getCurrentInstance, nextTick } from 'vue'
import { ElForm, ElMessageBox, ElTable } from 'element-plus'
import { getQueryList, getQueryPageList } from '@/api/common'
import { msToDate } from '@/utils/CommonUtil'
import router from '@/router'
import { getSdkList, getSpecList } from '@/api/label'
import { bTableHeight } from '../../../../composables/calcTableHeight'
const { tableContainer, tableHeight, updateTableHeight, handleResize } = bTableHeight(200)
const { proxy }: any = getCurrentInstance()
/*对象生成赋值区域*/

const queryFormRef = ref(ElForm)
const size = ref<'default' | 'large' | 'small'>('small') //formdata时间设置
const state = reactive({
  queryParamsOrder: {
    queryId: 'GetProductOrder',
    version: 'WEB00024',
    params: {
      SITENAME: localStorage.getItem('siteName') || 'SDK',
      MATERIALSPECNAME: '',
      STOCKSTATE: '',
      ERPLOCATION: '',
      ERPFACTORY: '',
      AREA: '',
      PRODCUTSPECNAME: '',
      SDK_ID: '',
      SOURCEORDER: '', // 单据号
      ORDERTYPE: '', // 单据类型
      DateValue: '',
      FROMDATE: '',
      TODATE: ''
    },
    pageNum: 1,
    pageSize: 10
  },
  queryParams: {
    queryId: 'GetProductOrderPkg',
    version: 'WEB00025',
    params: {
      SITENAME: localStorage.getItem('siteName') || 'SDK',
      SOURCEORDER: '',
      // MATERIALSPECNAME: '',
      PHASE:'',
      CHARGE:'',
      SDK_ID:'',
      // STOCKSTATE: '',
      // ERPLOCATION: '',
      // ERPFACTORY: '',
      // AREA: '',
      PRODCUTSPECNAME: '',
      FROMDATE:'',
      TODATE: ''
      // SDK_ID: '',
      // UNDOID: ''
    },
    pageNum: 1,
    pageSize: 10
  },
  queryParamsArea: {
    queryId: 'GetAreaList',
    version: 'WEB00026',
    params: {
      SITENAME: localStorage.getItem('siteName') || 'SDK'
    },
    pageNum: 1,
    pageSize: 10
  },
  queryParamsOrderType: {
    queryId: 'GetOrderTypeList',
    version: 'WEB00027',
    params: {
      SITENAME: localStorage.getItem('siteName') || 'SDK'
    },
    pageNum: 1,
    pageSize: 10
  },
  queryParamsStockState: {
    queryId: 'GetEnumDefValueList',
    version: 'WEB00001',
    params: {
      SITENAME: localStorage.getItem('siteName') || 'SDK',
      ENUMNAME: 'StockState'
    },
    pageNum: 1,
    pageSize: 10
  },
  queryParamsERPFactory: {
    queryId: 'GetErpFactoryList',
    version: 'WEB00001',
    params: {
      SITENAME: localStorage.getItem('siteName') || 'SDK'
    },
    pageNum: 1,
    pageSize: 10
  },
  queryParamsERPLocation: {
    queryId: 'GetErpLocationList',
    version: 'WEB00001',
    params: {
      SITENAME: localStorage.getItem('siteName') || 'SDK'
    },
    pageNum: 1,
    pageSize: 10
  },
  operateParams: {
    date: new Date()
  },
  Column: [] as any,
  Column_Order: [] as any,
  total: 0,
  totalO: 0,
  loading: false,
  BoxHistoryList: [] as any,
  productOrderList: [] as any,
  sdkList: [] as any,
  orderTypeList: [] as any,
  areaList: [] as any,
  Spec: {
    PRODCUTSPECNAME: ''
  },
  StockStateList: [{
      ENUMVALUE: '',
      DESCRIPTION: '全部'
    },
    {
      ENUMVALUE: 'N',
      DESCRIPTION: '未入库'
    },
    {
      ENUMVALUE: 'Y',
      DESCRIPTION: '已入库'
    }] as any,
  StockStateList2: [] as any,
  ERPFactoryList: [] as any,
  ERPLocationList: [] as any
})
const {
  areaList,
  queryParams,
  Column,
  Column_Order,
  total,
  totalO,
  loading,
  BoxHistoryList,
  operateParams,
  StockStateList,
  StockStateList2,
  ERPFactoryList,
  ERPLocationList,
  productOrderList,
  queryParamsOrder
} = toRefs(state)
//时间范围定义
const shortcuts2 = [
  {
    text: '',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    }
  },
  {
    text: '',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    }
  },
  {
    text: '',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    }
  }
]
/*钩子函数区域*/
onMounted(() => {
  state.Column_Order = [
    { header: '单据类型', field: 'ORDERTYPE', hide: false },
    { header: '单号', field: 'SOURCEORDER', hide: false },
    { header: '料号', field: 'PRODCUTSPECNAME', hide: false },
    { header: '规格', field: 'SDK_ID', hide: false },
    { header: '阶段', field: 'STAGECODE', hide: false },
    { header: '品名', field: 'DESC_CN', hide: false },
    { header: '车间', field: 'AREANAME', hide: false },
    { header: '标签数量', field: 'MAINQUANTITY', hide: false },
    { header: '状态', field: 'STOCKSTATE', hide: false }
  ]
  state.Column = [
    { header: '标签', field: 'LOTNAME', hide: false },
    { header: '批次', field: 'CHARGE', hide: false },
    { header: '完工报告', field: 'REQUESTNAME', hide: false },
    { header: '入库状态', field: 'RECEIVE_FLAG', hide: false },
    { header: '数量', field: 'QTY', hide: false },
    { header: '单位', field: 'UNIT', hide: false },
    { header: '判定结果', field: 'PACKINGGRADE', hide: false },
    { header: '车间', field: 'AREA', hide: false },
    { header: '料号', field: 'PRODUCTNAME', hide: false },
    { header: '品名', field: 'DESC_CN', hide: false },
    { header: '斯迪克规格', field: 'SDK_ID', hide: false },
    { header: '阶段', field: 'PHASE', hide: false },
    { header: '打印时间', field: 'SHIPTIME', hide: false },
    { header: '打印人', field: 'SHIPUSER', hide: false },
    { header: '入库时间', field: 'RECEIVE_TIME', hide: false }
  ]
  // StockStateListQuery();
  // ERPFactoryQuery()
  // ERPLocationQuery()
  // handleQuery()
  queryArea()
  queryOrderType()
  updateTableHeight()
  window.addEventListener('resize', handleResize)
})
/*其它函数区域*/
const updateList = (col: any) => {
  state.Column = col
}
const updateList2 = (col: any) => {
  state.Column_Order = col
}
function getSdkInfo() {
  state.Spec.PRODCUTSPECNAME = state.queryParamsOrder.params.PRODCUTSPECNAME
  console.log(state.queryParamsOrder.params.PRODCUTSPECNAME)
  getSpecList(state.Spec)
    .then((res: any) => {
      state.sdkList = res.resultObj
      // console.log(state.sdkList)
    })
    .catch(() => {})
}
function TYPEFn() {
  console.log(1111)
  if(state.queryParamsOrder.params.ORDERTYPE == 'A2'){
    state.StockStateList = [{
      ENUMVALUE: '',
      DESCRIPTION: '全部'
    },
    {
      ENUMVALUE: 'N',
      DESCRIPTION: '未入库'
    },
    {
      ENUMVALUE: 'Y',
      DESCRIPTION: '已入库'
    }]
  }else {
    state.StockStateList = [{
      ENUMVALUE: '',
      DESCRIPTION: '全部'
    },
    {
      ENUMVALUE: 'Created',
      DESCRIPTION: '未完成'
    },
    {
      ENUMVALUE: 'Completed',
      DESCRIPTION: '完成'
    }]
  }
}
function handleQueryInfo() {
  state.queryParamsOrder.pageNum = 1
  state.BoxHistoryList = []
  let orParams = state.queryParamsOrder.params
  if (!orParams.ORDERTYPE) {
    ElMessageBox.alert('选择订单类型进行查询', '提醒框', {
      confirmButtonText: 'OK'
    })
    return
  } else {
    // if(orParams.ORDERTYPE == 'A2' && !orParams.AREA) {
    //   ElMessageBox.alert('选择车间进行查询', '提醒框', {
    //       confirmButtonText: 'OK',
    //     })
    //     return
    // }
  }

  handleQuery()
}
function handleQuery() {
  if (state.queryParamsOrder.params.ORDERTYPE) {
    if (state.queryParamsOrder.params.ORDERTYPE == 'A2') {
      state.queryParamsOrder.queryId = 'GetProductOrder'
      state.queryParamsOrder.version = 'WEB00024'
    } else if (state.queryParamsOrder.params.ORDERTYPE == 'DC') {
      state.queryParamsOrder.queryId = 'GetProductOrder2'
      state.queryParamsOrder.version = 'WEB00024'
    } else {
      state.queryParamsOrder.queryId = 'GetProductOrder3'
      state.queryParamsOrder.version = 'WEB00024'
    }
    if (state.queryParamsOrder.params.DateValue.length > 0) {
      state.queryParamsOrder.params.FROMDATE = msToDate(
        state.queryParamsOrder.params.DateValue[0]
      ).hasTime
      state.queryParamsOrder.params.TODATE = msToDate(
        state.queryParamsOrder.params.DateValue[1]
      ).hasTime
    }
    getQueryPageList(state.queryParamsOrder).then((res: any) => {
      console.log(res.data.list)
      if (res.data.list.length > 0) {
        state.productOrderList = res.data.list
        state.totalO = res.data.total
      } else {
        state.productOrderList = res.data.list
        proxy.$ElMessage.success('查询结果为空')
      }
    })
  } else {
    ElMessageBox.alert('最少选择订单类型进行查询', '提醒框', {
      confirmButtonText: 'OK'
    })
    return
  }
}

function queryArea() {
  getQueryList(state.queryParamsArea).then((res: any) => {
    state.areaList = res.data
    state.areaList.unshift({
        DESCRIPTION:'全部',
        AREANAME: ''
      })
  })
}

function queryOrderType() {
  getQueryList(state.queryParamsOrderType).then((res: any) => {
    state.orderTypeList = res.data
  })
}

function orderHandle(row: any, event: any, column: any) {
  console.log(row)
  state.queryParams.params.SOURCEORDER = row.SOURCEORDER
  state.queryParams.params.PRODCUTSPECNAME = row.PRODCUTSPECNAME
  state.queryParams.params.PHASE = row.STAGECODE
  state.queryParams.params.CHARGE = row.CHARGE
  state.queryParams.params.SDK_ID = row.SDK_IDS
  console.log(state.queryParams)
  if (state.queryParamsOrder.params.DateValue.length > 0) {
      state.queryParams.params.FROMDATE = msToDate(
        state.queryParamsOrder.params.DateValue[0]
      ).hasTime
      state.queryParams.params.TODATE = msToDate(
        state.queryParamsOrder.params.DateValue[1]
      ).hasTime
    }

  if (state.queryParamsOrder.params.ORDERTYPE == 'A2') {
    state.queryParams.queryId = 'GetProductOrderPkg'
    state.queryParams.version = 'WEB00025'
    handleQuery2()
  } else if (state.queryParamsOrder.params.ORDERTYPE == 'DC') {
    state.queryParams.queryId = 'GetProductOrderPkg2'
    state.queryParams.version = 'WEB00025'
    handleQuery2()
  } else {
    state.queryParams.queryId = 'GetProductOrderPkg3'
    state.queryParams.version = 'WEB00025'
    handleQuery2()
  }
}
function handleQuery2() {

  getQueryPageList(state.queryParams).then((res: any) => {
    if (res.data.list.length > 0) {
      state.BoxHistoryList = res.data.list
      state.total = res.data.total
    } else {
      state.BoxHistoryList = res.data.list
      proxy.$ElMessage.success('查询结果为空')
    }
  })
}

//库位状态查询
function StockStateListQuery() {
  getQueryList(state.queryParamsStockState)
    .then((res: any) => {
      state.StockStateList = res.data
      state.StockStateList.unshift({
        ENUMVALUE: ''
      })
    })
    .catch(() => {})
}
//ERP库位查询
function ERPLocationQuery() {
  getQueryList(state.queryParamsERPLocation)
    .then((res: any) => {
      state.ERPLocationList = res.data
      state.ERPLocationList.unshift({
        ENUMVALUE: ''
      })
    })
    .catch(() => {})
}
//ERP工厂查询
function ERPFactoryQuery() {
  getQueryList(state.queryParamsERPFactory)
    .then((res: any) => {
      state.ERPFactoryList = res.data
      state.ERPFactoryList.unshift({
        ENUMVALUE: ''
      })
    })
    .catch(() => {})
}
</script>
<!--style 区域-->
<style scoped lang="scss">
.table-layout {
  display: flex;
  justify-content: space-between;
}
.table-col {
  width: 49%;
}
.flag-layout {
  width: 100%;
  display: inline-block;
}
</style>
