<template>
  <div>
    <!--<el-form-->
    <!--  :model="orderFormData"-->
    <!--  :rules="formRules"-->
    <!--  ref="dataForm"-->
    <!--  label-width="110px"-->
    <!--&gt;-->
    <!--  <el-card style="margin: 5px;">-->
    <!--    <el-row>-->
    <!--      <el-button-group-->
    <!--        style="display: flex; margin: 0px 0 15px 0; float: right">-->
    <!--        <el-button size="mini" type="primary" @click.native="chooseDraftOrder()" :loading="submitLoading"-->
    <!--                   style="margin-right: 8px;border-radius: 5%;"-->
    <!--        >选入草稿单据-->
    <!--        </el-button>-->
    <!--        <el-button size="mini" type="primary" @click.native="draftOrder()" :loading="submitLoading"-->
    <!--                   style="margin-right: 8px;border-radius: 5%;"-->
    <!--        >草稿保存-->
    <!--        </el-button>-->
    <!--        <el-button size="mini" type="primary" @click.native="submit()" :loading="submitLoading"-->
    <!--                   style="margin-right: 8px;border-radius: 5%;"-->
    <!--        >提交处理-->
    <!--        </el-button>-->
    <!--      </el-button-group>-->
    <!--    </el-row>-->
    <!--    <el-row v-if="false">-->
    <!--      <el-col :span="11">-->
    <!--        <el-form-item prop="corpOrderId" class="query-form-item" label="单据号:">-->
    <!--          <el-input-->
    <!--            v-model="orderFormData.corpOrderId"-->
    <!--            auto-complete="off"-->
    <!--            style="width: 90%"-->
    <!--            clearable-->
    <!--            :disabled="true"-->
    <!--          ></el-input>-->
    <!--        </el-form-item>-->
    <!--      </el-col>-->
    <!--      <el-col :span="11">-->
    <!--        <el-form-item prop="createTime" class="query-form-item" label="单据时间:">-->
    <!--          <el-date-picker-->
    <!--            v-model="orderFormData.createTime"-->
    <!--            type="datetime"-->
    <!--            placeholder="日期"-->
    <!--            clearable-->
    <!--            value-format="yyyy-MM-dd HH:mm:ss"-->
    <!--            :disabled="true"-->
    <!--            style="width: 90%"-->
    <!--          >-->
    <!--          </el-date-picker>-->
    <!--        </el-form-item>-->
    <!--      </el-col>-->
    <!--      <el-col :span="11">-->
    <!--        <el-form-item prop="invCode" class="query-form-item" label="当前仓库:">-->
    <!--          <el-select-->
    <!--            v-model="orderFormData.invCode"-->
    <!--            placeholder="当前仓库"-->
    <!--            style="width: 90%"-->
    <!--            :disabled="corpOrderIdDisabled || viewTypeKsck"-->
    <!--            @change="changeInv"-->
    <!--            filterable-->
    <!--          >-->
    <!--            <el-option-->
    <!--              v-for="item in curInvOptions"-->
    <!--              :key="item.name"-->
    <!--              :label="item.name"-->
    <!--              :value="item.code"-->
    <!--            >-->
    <!--              <span style="float: left">{{ item.name }}</span>-->
    <!--              <span style="float: right; color: #8492a6; font-size: 13px">{{-->
    <!--                  item.warehouseName-->
    <!--                }}</span>-->
    <!--            </el-option>-->
    <!--          </el-select>-->
    <!--        </el-form-item>-->
    <!--      </el-col>-->
    <!--      <el-col :span="11">-->
    <!--        <el-form-item prop="remark" class="query-form-item" label="单据备注:">-->
    <!--          <el-input-->
    <!--            v-model="orderFormData.remark"-->
    <!--            auto-complete="off"-->
    <!--            clearable-->
    <!--            style="width: 90%"-->
    <!--            placeholder="请输入备注信息"-->
    <!--          ></el-input>-->
    <!--        </el-form-item>-->
    <!--      </el-col>-->
    <!--    </el-row>-->
    <!--    <el-row>-->
    <!--      <el-col :span="8">-->
    <!--        <el-form-item prop="workPlaceCode" class="query-form-item" label="当前工位:">-->
    <!--          <el-select-->
    <!--            v-model="orderFormData.workPlaceCode"-->
    <!--            placeholder="当前工位"-->
    <!--            style="width: 90%"-->
    <!--            :disabled="corpOrderIdDisabled"-->
    <!--            filterable-->
    <!--            @change="changeInvRemind"-->
    <!--          >-->
    <!--            <el-option-->
    <!--              v-for="item in curWorkPlaces"-->
    <!--              :key="item.workplaceId"-->
    <!--              :label="item.workplaceName"-->
    <!--              :value="item.workplaceId"-->
    <!--            >-->
    <!--              <span style="float: left">{{ item.workplaceName }}</span>-->
    <!--              <span style="float: right; color: #8492a6; font-size: 13px">{{-->
    <!--                  item.workplaceId-->
    <!--                }}</span>-->
    <!--            </el-option>-->
    <!--          </el-select>-->
    <!--        </el-form-item>-->
    <!--      </el-col>-->

    <!--      <el-col :span="8">-->
    <!--        <el-form-item prop="remark" class="query-form-item" label="备注说明:">-->
    <!--          <el-input-->
    <!--            v-model="orderFormData.remark"-->
    <!--            auto-complete="off"-->
    <!--            clearable-->
    <!--            style="width: 90%"-->
    <!--            placeholder="请输入备注信息"-->
    <!--          ></el-input>-->
    <!--        </el-form-item>-->
    <!--      </el-col>-->
    <!--      <el-col :span="8">-->
    <!--        <el-form-item prop="fifoSplit" class="query-form-item" label="损耗方式:">-->
    <!--          <el-radio-group v-model="orderFormData.orderType"  @change="destroyChange">-->
    <!--            <el-radio :label="1">手动损耗</el-radio>-->
    <!--            <el-radio :label="2">扫码损耗</el-radio>-->
    <!--          </el-radio-group>-->
    <!--        </el-form-item>-->
    <!--      </el-col>-->
    <!--    </el-row>-->
    <!--  </el-card>-->


    <!--  <el-card style="margin: 5px;">-->
    <!--    <el-row>-->
    <!--      <el-col :span="18">-->
    <!--        <el-form-item prop="code" label="扫码录入:">-->
    <!--          <el-input-->
    <!--            id="inputer"-->
    <!--            @focus="getInputFocus($event)"-->
    <!--            @keypress.enter.native="enterKey($event)"-->
    <!--            ref="inputRef"-->
    <!--            style="ime-mode: disabled"-->
    <!--            type="tel"-->
    <!--            placeholder="请点击输入框进行扫码设置或者扫码录入"-->
    <!--            v-model="scanCode"-->
    <!--          ></el-input>-->
    <!--        </el-form-item>-->
    <!--      </el-col>-->
    <!--      <el-col :span="6">-->
    <!--        <el-button-group>-->
    <!--          <el-button-->
    <!--            type="primary"-->
    <!--            size="mini"-->
    <!--            @click.native.stop="addCode()"-->
    <!--            style="margin-left: 15px"-->
    <!--          >添加-->
    <!--          </el-button>-->
    <!--          &lt;!&ndash;              <el-button icon="el-icon-view" @click="hideSearch">显示/隐藏快捷设置</el-button>&ndash;&gt;-->
    <!--        </el-button-group>-->

    <!--      </el-col>-->
    <!--    </el-row>-->

    <!--    <el-alert-->
    <!--      title="扫码解析结果:"-->
    <!--      :type="scanResultType"-->
    <!--      :closable="false"-->
    <!--      :description="result">-->
    <!--    </el-alert>-->
    <!--  </el-card>-->
    <!--</el-form>-->
    <el-tabs type="border-card" style="margin: 5px">
      <el-tab-pane label="单据详情" v-if="viewCodeVisible">
        <el-row type="flex" justify="end">
          <el-button-group style="display: flex">
            <el-button-group style="display: flex;margin-bottom: 15px; margin-right: 50px">
              <el-button type="primary" @click.native.stop="selectProductFunction()" :loading="loading">工位存量录入
              </el-button>
            </el-button-group>
          </el-button-group>
        </el-row>
        <PanelDestroyDetail
          :idQuery="orderFormData"
          :refreshPanel="refreshCodesPanel"
          v-if="isCodeDetailAlive"
        ></PanelDestroyDetail>
      </el-tab-pane>
      <el-tab-pane label="扫码明细" v-if="!viewCodeVisible">
        <PanelDestroyCodeDetail
          :idQuery="orderFormData"
          :refreshPanel="refreshCodesPanel"
          v-if="isCodeDetailAlive"
        ></PanelDestroyCodeDetail>
        <!--:idQuery="orderFormData"-->
        <!--:refreshPanel="refreshCodesPanel"-->
        <!--v-if="isCodeAlive"-->
        <!--:viewType="viewType"-->
        <!--:selectRlTitle="selectRlTitle"-->
        <!--:editTitle="editTitle"-->
        <!--:selectUnitTitle="selectUnitTitle"-->
      </el-tab-pane>
    </el-tabs>

    <el-dialog
      title="选入草稿单据"
      :visible.sync="chooseDraftOrderVisible"
      width="80%"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      v-if="chooseDraftOrderVisible"
    >
      <chooseDraftOrderDialog
        :rowData="rowData"
        :closeChooseDialog="closeChooseDialog"
        :handleChoose="handleChoose"
      >
      </chooseDraftOrderDialog>
    </el-dialog>

    <el-dialog
      title="库存物资录入"
      :visible.sync="selectInvProductVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="85%"
      v-if="selectInvProductVisible"
      :append-to-body='true'
    >
      <dialogInvProduct
        :closeDialog="closeDialogC2"
        :invQueryData="invQueryData"
        :type="3"
      ></dialogInvProduct>
    </el-dialog>
  </div>

</template>

<script>

import A from "../../plugins/KeyScaner";
import PanelDestroyDetail from "@/views/collect/PanelDestroyDetail";
import PanelDestroyCodeDetail from "@/views/collect/PanelDestroyCodeDetail";
import {findInvRemind} from "@/api/inout/splitCode";
import {enterCodeWeb, saveOrderWeb} from "@/api/inout/order";
import {getUserBindWork} from "@/api/basic/collectPoint/userWorkplace";
import chooseDraftOrderDialog from "./chooseDraftOrderDialog"
import dialogInvProduct from "@/views/inout/DialogSelectInvProduct";

export default {
  name: "IoDestroyOrder1",
  props: {
    closeDialog: {
      type: Function,
      required: true,
    },
    orderQuery: {
      type: Object,
      required: true,
      default: {}
    },
  },
  watch: {
    resetKey(newVal, oldVal) {
      this.$refs.inputRef.focus();
    }
  },
  data() {
    return {
      orderFormData: {
        billNo: null,
        corpOrderId: null,
        action: null,
        invCode: null,
        fromCorp: null,
        fromCorpName: null,
        fromName: null,
        fromInvCode: null,
        remark: null,
        fromType: 2,
        errMsg: null,
        sickerAdNum: null,
        workPlaceCode: null,
        orderType: 1,
      },

      corpOrderIdDisabled: false,
      //库存选入
      selectInvProductVisible: false,
      chooseDraftOrderVisible: false,
      viewCodeVisible: true,
      result: "",
      scanResultType: "success",
      msgTip: "当前工位存量提醒：",
      curWorkPlaces: [],
      isCodeDetailAlive: true,
      loading: false,
      rowData: {},
      codeFormData: {
        code: "",
        batchNo: null,
        produceDate: null,
        expireDate: null,
        serialNo: null,
        relId: null,
      },
      scanCode: "",
    };
  },
  components: {
    PanelDestroyDetail, chooseDraftOrderDialog, dialogInvProduct,PanelDestroyCodeDetail
  },
  methods: {
    changeInvRemind(val) {
      let post = {
        workPlaceCode: val
      }
      this.defaultSplitType()
      findInvRemind(post).then((response) => {
        if (response.code === 20000) {
          this.msgTip = response.data
          this.$refs.inputRef.focus();
        }
      }).catch(() => {
      });
    },
    draftOrder() {
      let tQuery = Object.assign(
        JSON.parse(JSON.stringify(this.orderFormData))
      );
      tQuery.billNo = this.orderFormData.billNo;
      tQuery.orderType = 2;
      if (this.orderFormData.billNo == null) {
        this.$message.error("请先录入单据信息！");
        return;
      }
      this.saveLoading = true

      saveOrderWeb(tQuery).then((response) => {
        this.saveLoading = false
        if (response.code === 20000) {
          this.$message.success("保存成功")
          this.successCloseData()
        } else {
          this.$message.error(response.message);
        }
        this.loading = false;
        this.saveLoading = false
      });
    },

    refreshCodesPanel() {
      this.isCodeDetailAlive = false;
      this.$nextTick(() => {
        //重新加载组件
        this.isCodeDetailAlive = true;
      });
    },
    //获取当前工位
    findCurWorkPlaces(val) {
      let query = {
        workplaceCode: val,
        userId: this.$store.getters.userId,
        page: 1,
        limit: 100,
      }
      getUserBindWork(query).then((res) => {
        this.curWorkPlaces = res.data.list || [];
        if (this.curWorkPlaces.length == 1 && this.$isNotBlank(this.orderFormData.workPlaceCode)) {
          this.orderFormData.workPlaceCode = this.curWorkPlaces[0].workplaceId;
          this.defaultSplitType()
        }
      })
    },

    enterKey(event) {
      this.checkSuccess = true;
      if (this.getDMHotskeyValue(this.scanCode))
        return
      this.codeFormData.code = this.scanCode;
      let tQuery = {
        originCode: this.originCode,
        code: this.codeFormData.code.trim(),
      };
      enterCodeWeb(tQuery).then((response) => {
        if (response.code === 20000) {
          this.$refs.inputRef.focus();
          this.$refs.inputRef.select();
          this.isSuccess = true;
          this.printCodeResult(response.data)
          this.codeFormData.code = response.data.code;
          this.scanCode = ""
          this.addCode();
        } else {
          if (response.code == 502) {
            this.checkSuccess = false;
            this.isSuccess = false;
            this.scanCode = ""
            this.printCodeResult(response.data)
            this.codeFormData.code = response.data.code;
            this.originCode = this.codeFormData.code;
          } else if (response.code == 501) {
            this.checkSuccess = false;
            this.scanCode = ""
            this.$message.error(response.message);
          } else if (response.code == 503) {
            this.checkSuccess = false;
            this.isSuccess = false;
            this.scanCode = ""
            this.printCodeResult(response.data)
            this.codeFormData.code = response.data.code;
            this.$confirm(response.message, "提示", {
              type: "warning",
            })
              .then(() => {
                this.codeFormData.code = response.data.code;
                this.addCode();
              })
              .catch(() => {
                this.codeFormData.code = response.data.code;
              });
          } else if (response.code == 508) {
            this.scanCode = ""
            this.originCode = "";
            this.codeFormData.code = "01" + response.data.nameCode;
            this.originCode = this.codeFormData.code;
          } else {
            this.$alert(response.message, "提示", {
              confirmButtonText: "确定",
              type: "warning",
              closeOnClickModal: true,
              callback: (action) => {
                this.$refs.inputRef.focus();
                this.$refs.inputRef.select();
              },
            });
          }
        }
        this.loading = false;
      });
    },

    getDMHotskeyValue(str) {
      if (str.includes("DMHotskey")) {
        try {
          const jsonObj = JSON.parse(str);
          if (jsonObj.hasOwnProperty("DMHotskey")) {
            const dmhotskey = jsonObj.DMHotskey;
            if (dmhotskey.hasOwnProperty("workPlace")) {
              this.scanCode = ""
              this.orderFormData.workPlaceCode = dmhotskey.workPlace
              return true
            } else if (dmhotskey.hasOwnProperty("fifoSplit")) {
              this.scanCode = ""
              this.orderFormData.fifoSplit = dmhotskey.fifoSplit;
              return true;

            }
          }
        } catch (error) {
          console.log("字符串不是有效的 JSON 格式");
        }
      }
      return false;
    },
    printCodeResult(data, isSuccess) {
      const resultParts = ["扫码解析结果：" + data.code];

      if (data.udi) {
        resultParts.push("层级标识: " + data.udi);
      }
      if (data.batchNo) {
        resultParts.push("批次号: " + data.batchNo);
      }
      if (data.produceDate) {
        resultParts.push("生产日期: " + data.produceDate);
      }
      if (data.expireDate) {
        resultParts.push("失效日期: " + data.expireDate);
      }
      if (data.serialNo) {
        resultParts.push("序列号: " + data.serialNo);
      }
      this.result = resultParts.join(" , ");
    },
    getInputFocus(event) {
      event.currentTarget.select();
    },
    selectProductFunction() {
      if (this.$isBlank(this.orderFormData.workPlaceCode)) {
        this.$message.error("作业工位不能为空！")
        return;
      }
      this.selectInvProductVisible = true;
    },
    destroyChange(){
      if (this.orderFormData.orderType == 2){
        this.viewCodeVisible = false
        this.$refs.inputRef.focus();
      }else {
        this.viewCodeVisible = true
      }
    }
  },
  filters: {},
  mounted() {
    document.body.ondrop = function (event) {
      event.preventDefault();
      event.stopPropagation();
    };
    var that = this;
    var inputer = document.getElementById("inputer");
    window.sc = new A.KeyScaner(inputer); //传入要监听的DOM节点
    sc.onInput = function (text) {
      if (text.includes("delete")) {
        that.codeFormData.code = "";
        that.sictomText = "";
        that.originCode = "";
        return;
      }
      if (that.sitcomScan) {
        let tempTxt = text;
        let str = tempTxt.replace(/[\r]/g, "");
        that.sictomText = that.sictomText + str;
        that.codeFormData.code = that.sictomText;
      } else {
        that.codeFormData.code = text;
      }
    };
    inputer.focus();
    this.$refs.inputRef.focus();
  },
  created() {
    this.findCurWorkPlaces();
    if (this.$route.query.billNo != null) {
      this.orderFormData.billNo = this.$route.query.billNo
    }
    if (this.$route.query.workplaceId != null) {
      this.corpOrderIdDisabled = true
      this.workplaceId = Number(this.$route.query.workplaceId);
      this.orderFormData.workPlaceCode = Number(this.$route.query.workplaceId);
    }

  },
};
</script>


<style scoped>
.scroll-alert {
  width: 100%; /* 或者你需要的宽度 */
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  /*border: 1px solid #f56c6c; !* 类似于 Element UI 警告框的边框 *!*/
  background-color: rgba(255, 235, 59, 0.1); /* 类似于 Element UI 警告框的背景色 */
  padding: 10px;
  position: relative;
}

.scroll-text {
  display: inline-block;
  padding-left: 100%; /* 初始位置在容器右侧 */
  animation: scroll 10s linear infinite; /* 滚动动画 */
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.query-form-item {
  margin-right: 5px;
  margin-bottom: 6px;
}

#inputer {
  width: 100%;
  min-height: 30px;
  background-color: white;
  border: #d0d0d0;
  border-style: solid;
  border-width: 0.1px;
  color: #4a4a4a;
}

#inputer:focus {
  width: 100%;
  min-height: 30px;
  background-color: white;
  border: #0080ff;
  border-style: solid;
  border-width: 0.1px;
  color: #4a4a4a;
}

.ime-disabled {
  ime-mode: disabled;
}

.result-display {
  border: 2px solid #ccc; /* 默认外框颜色 */
  border-radius: 10px;
  margin-top: 5px;
  margin-left: 15px;
  margin-right: 25px;
  padding-left: 25px;
  /* 不设置背景颜色 */
}

.result-success {
  border-color: #4CAF50; /* 成功时外框颜色 */
}

.result-failure {
  border-color: #0080ff; /* 失败时外框颜色 */
}

.result-text {
  height: 18px;
  /* 你可以在这里设置默认的文本颜色或其他样式 */
}

.result-text-success {
  color: #4CAF50; /* 成功时文本颜色 */
  font-size: 14px;
}

.result-text-failure {
  color: #0080ff; /* 失败时文本颜色 */
  font-size: 14px;
}


</style>



