<!--
  功能：功能描述  形态转换
  作者：陶庆峰
-->
<template>
  <div class="vue-element-page-wrap" ref="tableContainer">
    <el-row class="page-search" justify="space-between" align="bottom">
      <el-form
        ref="queryFormRef"
        @submit.prevent
        :model="queryParams"
        :inline="true"
        label-width="80px"
        label-position="left"
      >
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="转换单据" prop="params.RECEIVEREQUESTNAME">
              <el-Input v-model="queryParams.params.RECEIVEREQUESTNAME" clearable />
            </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>-->
      <!--                        </template>-->
      <!--                    </el-table-column>-->
      <!--                </template>-->
      <!--            </el-table>-->
      <!--            { header: "ERP明细ID", field: "DETAILID", hide: true },-->
      <!--            { header: "单号", field: "RECEIVEREQUESTNAME", hide: false },-->
      <!--            { header: "行号", field: "RECEIVEREQUESTDETAILNAME", hide: false },-->
      <!--            { header: "料号", field: "MATERIALSPECNAME", hide: false },-->
      <!--            { header: "SDK_ID", field: "SDK_ID", hide: true },-->
      <!--            { header: "规格", field: "SPECNAME", hide: false },-->
      <!--            { header: "阶段", field: "PHASE", hide: false },-->
      <!--            { header: "批号", field: "CHARGE", hide: false },-->
      <!--            { header: "单位", field: "MATERIALUNIT", hide: false },-->
      <!--            { header: "数量", field: "MATERIALQUANTITY", hide: false },-->
      <!--            { header: "生产日期", field: "MAKEDATE", hide: false },-->
      <!--            { header: "到日期", field: "EXPIRDATE", hide: false },-->
      <!--            { header: "库位", field: "ERPLOCATION", hide: false },-->
      <!--            { header: "货位", field: "LOCATIONNAME", hide: false},-->
      <!--            { header: "组织", field: "ERPFACTORY", hide: false },-->
      <!--            { header: "出库日期", field: "OUTDATE", hide: false },-->
      <!--            { header: "库管员", field: "WAREMANGER", hide: false },-->
      <!--            { header: "转换类型", field: "TYPE", hide: false },-->
      <!--            { header: "订单ID", field: "ERPID", hide: false },-->
      <!--            { header: "行ID", field: "ERPDETAILID", hide: false }-->
      <el-table
        :height="tableHeight"
        style="min-height: 50px"
        border
        v-loading="loading"
        :data="batchList"
        highlight-current-row
        row-key="id"
        @row-click="handle"
      >
        <el-table-column
          prop="DETAILID"
          fixed="left"
          label="ERP明细ID"
          v-if="false"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="RECEIVEREQUESTNAME"
          fixed="left"
          label="单号"
          v-if="false"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="RECEIVEREQUESTDETAILNAME"
          fixed="left"
          label="行号"
          v-if="false"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="SDK_ID"
          label="斯迪克规格ID"
          v-if="false"
          width="80"
        ></el-table-column>
        <el-table-column prop="DESCRIPTION" label="物料规格" width="100"></el-table-column>
        <el-table-column prop="SPECNAME" label="斯迪克规格" width="100"></el-table-column>
        <el-table-column prop="PHASE" label="阶段" width="80"></el-table-column>
        <el-table-column
          prop="MATERIALSPECNAME"
          fixed="left"
          label="料号"
          width="100"
        ></el-table-column>
        <el-table-column prop="DESC_CN" label="品名" width="280"></el-table-column>
        <el-table-column prop="CHARGE" label="批次" width="200"></el-table-column>
        <el-table-column prop="ERPFACTORY" label="组织" width="100"></el-table-column>
        <el-table-column prop="ERPLOCATION" label="库位" width="180"></el-table-column>
        <el-table-column prop="LOCATIONNAME" label="货位" width="180"> </el-table-column>
        <el-table-column prop="MATERIALQUANTITY" label="数量" width="100"></el-table-column>
        <el-table-column prop="MAKEDATE" label="生产日期" width="150"></el-table-column>
        <el-table-column prop="EXPIRDATE" label="保质期" width="150"></el-table-column>
        <el-table-column prop="MATERIALUNIT" label="单位" width="80"></el-table-column>
        <el-table-column prop="OUTDATE" label="出库日期" width="80"></el-table-column>
        <el-table-column prop="WAREMANGER" label="库管员" width="80"></el-table-column>
        <el-table-column prop="TYPE" label="转换类型" width="100"></el-table-column>
        <el-table-column prop="ERPID" label="订单ID" width="80"></el-table-column>
        <el-table-column prop="ERPDETAILID" label="行ID" width="80"></el-table-column>
        <el-table-column prop="REMARK" label="备注" width="180"></el-table-column>
      </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>转换后信息</span>
          </div>
        </div>
      </div>

      <el-table
        border
        v-loading="loading"
        :data="state.batchListTo"
        highlight-current-row
        row-key="id"
        style="width: 100%; min-height: 50px"
        @row-click="handle"
      >
        <el-table-column
          prop="DETAILID"
          fixed="left"
          label="ERP明细ID"
          v-if="false"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="RECEIVEREQUESTNAME"
          fixed="left"
          label="单号"
          v-if="false"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="RECEIVEREQUESTDETAILNAME"
          fixed="left"
          label="行号"
          v-if="false"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="SDK_ID"
          label="斯迪克规格ID"
          v-if="false"
          width="80"
        ></el-table-column>
        <el-table-column prop="DESCRIPTION" label="物料规格" width="100"></el-table-column>
        <el-table-column prop="SPECNAME" label="斯迪克规格" width="100"></el-table-column>
        <el-table-column prop="PHASE" label="阶段" width="80"></el-table-column>
        <el-table-column
          prop="MATERIALSPECNAME"
          fixed="left"
          label="料号"
          width="100"
        ></el-table-column>
        <el-table-column prop="DESC_CN" label="品名" width="280"></el-table-column>
        <el-table-column prop="CHARGE" label="批次" width="200"></el-table-column>
        <el-table-column prop="ERPFACTORY" label="组织" width="100"></el-table-column>
        <el-table-column prop="ERPLOCATION" label="库位" width="180"></el-table-column>
        <el-table-column prop="LOCATIONNAME" label="货位" width="180">
          <template #default="scope">
            <el-select
              v-model="scope.row.LOCATIONNAME"
              @click="getDESCRIPTION(scope)"
              placeholder="选择货位"
              style="width: 170px"
              :filter-method="getPOCreateLocationAll"
              default-first-option
              filterable
            >
              <el-option
                v-for="item in state.POCreateLocationList"
                :key="item.VALUE"
                :label="item.LABEL"
                :value="item.VALUE"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="MATERIALQUANTITY" label="数量" width="100"></el-table-column>
        <el-table-column prop="MATERIALUNIT" label="单位" width="80"></el-table-column>
        <el-table-column prop="MAKEDATE" label="生产日期" width="150"></el-table-column>
        <el-table-column prop="EXPIRDATE" label="保质期" width="150"></el-table-column>
        <el-table-column prop="OUTDATE" label="出库日期" width="80"></el-table-column>
        <el-table-column prop="WAREMANGER" label="库管员" width="80"></el-table-column>
        <el-table-column prop="TYPE" label="转换类型" width="100"></el-table-column>
        <el-table-column prop="ERPID" label="订单ID" width="80"></el-table-column>
        <el-table-column prop="ERPDETAILID" label="行ID" width="80"></el-table-column>
        <el-table-column prop="REMARK" label="备注" width="180"></el-table-column>
      </el-table>
    </div>

    <el-row class="page-search" justify="end" align="middle">
      <div style="margin-right: 20px; padding-top: 10px">
        <el-form-item label="是否提交并打印" v-model="state.PRINTNAME">
          <el-select v-model="state.ISPRINT" placeholder="请选择" style="width: 80px">
            <el-option
              v-for="item in state.ISLIST"
              :key="item.VALUE"
              :label="item.LABEL"
              :value="item.VALUE"
            />
          </el-select>
        </el-form-item>
      </div>
      <div style="margin-right: 20px; padding-top: 10px">
        <el-form-item label="选择打印机" v-model="state.PRINTNAME">
          <el-select v-model="state.PRINTNAME" placeholder="请选择打印机" style="width: 240px">
            <el-option
              v-for="item in state.PRINTLIST"
              :key="item.VALUE"
              :label="item.LABEL"
              :value="item.VALUE"
            />
          </el-select>
        </el-form-item>
      </div>
      <div class="block" style="padding-top: 10px">
        <el-form-item label="过账日期" prop="state.commitDate">
          <el-date-picker
            :clearable="true"
            :editable="true"
            v-model="state.commitDate"
            type="date"
            placeholder="选择过账时间"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
      </div>
      <div class="page-search-btns">
        <!-- <el-button type="primary" @click="printFn" :disabled="state.button_print" v-loading="state.loading_print">打印</el-button> -->
        <el-button
          type="primary"
          @click="submitForm"
          :disabled="state.Button_state"
          v-loading="state.button_loading"
          >提交</el-button
        >
      </div>
    </el-row>
  </div>
</template>

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

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

const { tableContainer, tableHeight, updateTableHeight, handleResize } = bTableHeight(480)

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

const { proxy }: any = getCurrentInstance()

const state = reactive({
  ISPRINT: false,
  LOCATIONLIST: [] as any,
  ISLIST: [{VALUE:true, LABEL: '是'},{VALUE:false, LABEL: '否'}],
  Button_state: false,
  button_loading: false,
  button_print: false,
  loading_print: false,
  PRINTLIST: [] as any, //打印机
  PRINTNAME: '',
  queryParams: {
    queryId: 'GetTRANSFORMList',
    version: '00001',
    params: {
      RECEIVEREQUESTNAME: '',
      TYPE: '',
      SITENAE: 'SDK'
    }
  },
  commitDate: '',
  loading: false,
  batchList: [],
  batch_column: [] as any,
  batchListTo: [] as any,
  inventory_loading: false,
  inventory_column: [] as any,
  selectItem: undefined as any,
  POCreateLocationAll: [] as any,
  POCreateLocationList: []
})

const {
  LOCATIONLIST,
  PRINTNAME,
  loading_print,
  button_print,
  button_state,
  loading,
  batchList,
  batch_column,
  queryParams,
  inventory_column,
  inventory_loading,
  ISPRINT
} = toRefs(state)

onMounted(() => {
  var newDate = new Date()
  var year = newDate.getFullYear()
  var moth = newDate.getMonth() + 1
  if (moth < 10) moth = '0' + moth
  var day = newDate.getDate()
  if (day < 10) day = '0' + day
  state.commitDate = year + '-' + moth + '-' + day
  state.batch_column = [
    { header: 'ERP明细ID', field: 'DETAILID', hide: true },
    { header: '单号', field: 'RECEIVEREQUESTNAME', hide: false },
    { header: '行号', field: 'RECEIVEREQUESTDETAILNAME', hide: false },
    { header: '料号', field: 'MATERIALSPECNAME', hide: false },
    { header: 'SDK_ID', field: 'SDK_ID', hide: true },
    { header: '规格', field: 'SPECNAME', hide: false },
    { header: '阶段', field: 'PHASE', hide: false },
    { header: '批号', field: 'CHARGE', hide: false },
    { header: '单位', field: 'MATERIALUNIT', hide: false },
    { header: '数量', field: 'MATERIALQUANTITY', hide: false },
    { header: '生产日期', field: 'MAKEDATE', hide: false },
    { header: '到日期', field: 'EXPIRDATE', hide: false },
    { header: '库位', field: 'ERPLOCATION', hide: false },
    { header: '货位', field: 'LOCATIONNAME', hide: false },
    { header: '组织', field: 'ERPFACTORY', hide: false },
    { header: '出库日期', field: 'OUTDATE', hide: false },
    { header: '库管员', field: 'WAREMANGER', hide: false },
    { header: '转换类型', field: 'TYPE', hide: false },
    { header: '订单ID', field: 'ERPID', hide: false },
    { header: '行ID', field: 'ERPDETAILID', hide: false }
  ]
  state.inventory_column = [
    { header: 'ERP明细ID', field: 'DETAILID', hide: true },
    { header: '单号', field: 'RECEIVEREQUESTNAME', hide: false },
    { header: '行号', field: 'RECEIVEREQUESTDETAILNAME', hide: false },
    { header: '料号', field: 'MATERIALSPECNAME', hide: false },
    { header: 'SDK_ID', field: 'SDK_ID', hide: true },
    { header: '规格', field: 'SPECNAME', hide: false },
    { header: '阶段', field: 'PHASE', hide: false },
    { header: '批号', field: 'CHARGE', hide: false },
    { header: '单位', field: 'MATERIALUNIT', hide: false },
    { header: '数量', field: 'MATERIALQUANTITY', hide: false },
    { header: '生产日期', field: 'MAKEDATE', hide: false },
    { header: '到日期', field: 'EXPIRDATE', hide: false },
    {
      header: '仓库',
      field: 'ERPLOCATION',
      hide: false,
      text: true,
      time: true,
      dispaly: false,
      ERPLocation: false,
      flag: false
    },
    {
      header: '货位',
      field: 'LOCATIONNAME',
      hide: false,
      text: true,
      time: true,
      dispaly: false,
      ERPLocation: true,
      flag: false
    },
    { header: '组织', field: 'ERPFACTORY', hide: false },
    { header: '入库日期', field: 'IOUTDATE', hide: false },
    { header: '库管员', field: 'WAREMANGER', hide: false },
    { header: '转换类型', field: 'TYPE', hide: false },
    { header: '订单ID', field: 'ERPID', hide: false },
    { header: '行ID', field: 'DETAILID', hide: false }
  ]
  getPRINTLIST()
  updateTableHeight()
  window.addEventListener('resize', handleResize)
})
function getPRINTLIST() {
  getQueryList({
    queryId: 'getPRINTLIST',
    version: '00001',
    params: {}
  }).then((res: any) => {
    state.PRINTLIST = res.data
  })
}
function printFn(data: any) {
  // state.button_print = true;
  // state.loading_print = true;
  let list = data.length > 0 ? data : state.batchListTo;
  let PRINT = {
    LIST: list,
    PRINTNAME: state.PRINTNAME,
    USER: localStorage.get('userId')
  }
  printLabel(PRINT)
    .then((res: any) => {
      console.log('re', res)
      //   state.button_print = false;
      // state.loading_print = false;
    })
    .catch(() => {
      // state.button_print = false;
      // state.loading_print = false;
    })
  ElMessageBox.alert('标签打印成功', {
    confirmButtonText: 'OK'
  })
}
function getDESCRIPTION(data: any) {
  console.log(data.row.ERPLOCATION)
  getQueryList({
    queryId: 'GetLocationForCreatePO',
    version: '00001',
    params: {
      SITENAME: 'SDK',
      ERPLOCATION: data.row.ERPLOCATION //PO
    } as any
  }).then((res: any) => {
    console.log(res)
    state.POCreateLocationAll = res.data
    getPOCreateLocationAll('')
  })
}
function getPOCreateLocationAll(query: any) {
  let arr = state.POCreateLocationAll.filter((item: any) => {
    return item.LABEL.includes(query) || item.VALUE.includes(query)
  })
  if (arr.length > 50) {
    state.POCreateLocationList = arr.slice(0, 50)
  } else {
    state.POCreateLocationList = arr
  }
}
function handle(row: any, event: any, column: any) {
  state.POCreateLocationList = []
  getQueryList({
    queryId: 'GetLocationForCreatePO',
    version: '00001',
    params: {
      SITENAME: 'SDK',
      ERPLOCATION: row.ERPLOCATION //PO
    } as any
  }).then((res: any) => {
    // state.POCreateLocationList = res.data
    state.POCreateLocationAll = res.data
    getPOCreateLocationAll('')
  })
}

function getStorageSpec(row) {
  state.POCreateLocationList = []
  getQueryList({
    queryId: 'GetLocationForCreatePO',
    version: '00001',
    params: {
      SITENAME: 'SDK',
      ERPLOCATION: row.ERPLOCATION //PO
    } as any
  }).then((res: any) => {
    state.POCreateLocationList = res.data
  })
}
function handleQuery() {
  // state.queryParams = {}
  state.batchList = []
  state.batchListTo = []
  state.queryParams.params.TYPE = '2'
  if (state.queryParams.params.RECEIVEREQUESTNAME == '') {
    ElMessageBox.alert('输入查询条件', '提醒框', {
      confirmButtonText: 'OK'
    })
    return
  }
  getQueryList(state.queryParams).then((res: any) => {
    state.batchList = res.data
    if (state.batchList.length == 0) {
      ElMessageBox.alert('查无结果', '提醒框', {
        confirmButtonText: 'OK'
      })
      return
    }
  })

  state.queryParams.params.TYPE = '3'
  getQueryList(state.queryParams).then((res: any) => {
    state.batchListTo = res.data
    if (state.batchListTo.length == 0) {
      ElMessageBox.alert('查无结果', '提醒框', {
        confirmButtonText: 'OK'
      })
      return
    }
  })
}

function resetQuery() {
  queryFormRef.value.resetField()
  handleQuery()
}

/**
 * 点击行
 * */
function handleRowClick() {}

/**
 * 保存
 */
function submitForm() {
  console.log(state.ISPRINT)

  if (state.commitDate == null) {
    ElMessageBox.alert('过账时间不可清空', {
      confirmButtonText: 'OK'
    })
    state.loadings = false
    state.button_state = false
    state.button_loading = false
    return
  }

  if (state.PRINTNAME == null || state.PRINTNAME == '') {
    ElMessageBox.alert('请选择打印机', {
      confirmButtonText: 'OK'
    })
    return
  }
  if (state.batchListTo.length == 0) {
    ElMessageBox.alert('打印清单为空', {
      confirmButtonText: 'OK'
    })
    return
  }

  // if(!state.batchListTo.every((item:any) => !!item.LOCATIONNAME)) {
  //   ElMessageBox.alert('请选择货位', {
  //     confirmButtonText: 'OK',
  //   })
  //   return;
  // }
  // eslint-disable-next-line no-constant-condition
  if ('1' == '1') {
    console.log(state.batchList.length)
    if (state.batchList.length <= 0) {
      ElMessageBox.alert('没有转换前明细，请确认')
      return
    }
    // if(state.batchListTo.length <= 0) {
    //     ElMessageBox.alert('没有转换后明细，请确认')
    //     return
    // }
    const commitDate = state.commitDate + ' 00:00:00'

    if (state.batchListTo.some((item: any) => !!item.CHARGE == false)) {
      ElMessageBox.alert('转换后的批号不能为空', '提示框', {
        confirmButtonText: 'OK'
      })
      return
    }

    // if (state.batchListTo.some((item: any) => !!item.LOCATIONNAME == false)) {
    //   ElMessageBox.alert('转换后的货位不能为空', '提示框', {
    //     confirmButtonText: 'OK'
    //   })
    //   return
    // }

    if (state.batchListTo.some((item: any) => !!item.MAKEDATE == false)) {
      ElMessageBox.alert('转换后的生产日期不能为空', '提示框', {
        confirmButtonText: 'OK'
      })
      return
    }

    if (state.batchListTo.some((item: any) => !!item.EXPIRDATE == false)) {
      ElMessageBox.alert('转换后的保质期不能为空', '提示框', {
        confirmButtonText: 'OK'
      })
      return
    }

    state.Button_state = true
    state.loading = true
    state.button_loading = true
    let params = {
      from: [],
      to: [],
      user: localStorage.get('userId'),
      commitDate: commitDate
    }
    state.Button_state = true

    params.from = state.batchList
    params.to = state.batchListTo
    // params.push(this.batchListTo)
    MoveTransform(params)
      .then((res: any) => {
        // handle(tempRow);
        // handleQuery();1111111111111
        if (res.errorCode == '200') {
          state.Button_state = false
          state.button_loading = false
          // ElMessageBox.alert(res.message, '提示框', {
          //     confirmButtonText: 'OK',
          // })
          // handleQuery()
          console.log(res.resultObj)
          if(state.ISPRINT) {
            printFn(res.resultObj);
          }
          
          state.batchList = []
          state.batchListTo = []
        } else {
          ElMessageBox.alert(res.errmsg, '提示框', {
            confirmButtonText: 'OK'
          })
          state.Button_state = false
          state.button_loading = false
        }
      })
      .catch((error: any) => {
        console.log(error)
        ElMessageBox.alert(error.response.data.message, '提示框', {
          confirmButtonText: 'OK'
        })
        state.Button_state = false
        state.button_loading = false
      })
  }
  // state.Button_state = false
  state.loading = false
  state.button_loading = false
}
/**
 * 取消关闭弹窗
 */
function cancel() {
  //state.dialog.visible = false;
}
</script>

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