<template>
  <div>
    <div>
      <p-card title="货位调整">
        <a-row>
          <a-col :span="24">
            <div>
              <p-grid-form ref="itemForm" :items="formItems"> </p-grid-form>
            </div>
            <a-row :gutter="[16, 16]" style="margin: 20px">
              <a-col :span="13">
                <viewer :images="photo" class="imgPhoto">
                  <template v-for="(src, index) in photo">
                    <img :class="index > 0 ? 'oneclass' : 'othersclass'" :src="src" :key="index" />
                  </template>
                </viewer>
              </a-col>
              <a-col :span="11">
                调整数量:
                <p-input-number class="inputNumber" size="large" v-model="adjustQty" :min="0" :disabled="qtyDisabled" />
                <br />
                <!-- <p-input-group size="large" :span='10'> -->
                <p-button :size="size" type="primary" style="margin-top: 20px" class="group-btn-b" @click="numberA"> -10 </p-button>
                <p-button :size="size" type="primary" style="margin-left: 15px" class="group-btn-b" @click="numberB"> -1 </p-button>
                <p-button :size="size" type="primary" style="margin-left: 15px" class="group-btn-b" @click="numberC"> +10 </p-button>
                <p-button :size="size" type="primary" style="margin-left: 15px" class="group-btn-b" @click="numberD"> +1 </p-button>
                <div class="testName">
                  {{ message }}
                </div>
              </a-col>
            </a-row>
          </a-col>
        </a-row>

        <div class="group-btn">
          <p-button type="primary" class="group-btn-a" style="margin-left: 300px" @click="lossUnregister">原货架归还</p-button>
          <p-button type="primary" class="group-btn-a" @click="targetReturn">目的货架归还</p-button>
          <p-button type="primary" class="group-btn-a" @click="taskUp"> 调出货架 </p-button>
          <p-button type="primary" class="group-btn-a" :disabled="btnStatus" @click="adjust"> 确认调整 </p-button>
        </div>
      </p-card>
    </div>
    <div>
      <p-modal title="调出货架\托盘" :width="1000" :visible="visible" :confirm-loading="confirmLoading" :footer="null" @ok="handleOk" @cancel="handleCancel">
        <div>
          <p-grid-form ref="detailForm" :items="detailItem" @submit="detailSub"> </p-grid-form>

          <p-table
            ref="logTable2"
            style="margin-top: 10px"
            :columns="tableColumns"
            rowKey="palletLocation"
            :remoteUrl="remoteUrl1"
            :remoteData="remoteData2"
            :autoLoad="true"
            :scroll="{ x: true }"
            dragle
            auto-width
            bordered
          >
            <div slot="action" href="javascript:;" slot-scope="text">
              <a href="#" @click="out(text)">调出</a>
            </div>
          </p-table>
        </div>
      </p-modal>
      <PModalTable
        ref="PModalTable"
        v-if="Pvisible"
        v-model="Pvisible"
        :width="1300"
        :tableColumns="prinTableColumns"
        :fromItem="goodsbarItem"
        :uniqueKey="uniqueKey"
        :remote="remoteData"
        :remoteMethod="remoteMethod"
        :remoteUrl="remoteUrl"
        :autoLoad="true"
        :selectType="1"
        @handleOk="handleOkbarcode"
      ></PModalTable>
    </div>
  </div>
</template>
<script>
import { formItems, tableColumns, detailItem, returnColumns, prinTableColumns, goodsbarItem } from "./js/config";
import { QN_BASEURL } from "../serviceSettings";
const baseUrl = QN_BASEURL;
import { confirmMaintain, getGoodsShelves, callOutGoodsShelves, adjustGoodsShelves, goodsShelvesReturn, queryOldNewQty, querygoodsBarcode, queryImages, uerySourcePalletLocationInfo } from "./api";
import { REGEX_letter } from "@/views/util";

import "viewerjs/dist/viewer.css";
import VueViewer from "v-viewer";
import Vue from "vue";
import Spill from "../takeStock/different/components/spill.vue";
import PModalTable from "../components/modal-table";
Vue.use(VueViewer);
const imgs = ["/img/盒子.png", "/img/盒子1.png", "/img/盒子2.png"];

export default {
  components: {
    Spill,
    PModalTable,
    // 'img-list': imgList,
    // 'p-viewer': VueViewer,
  },
  data() {
    return {
      formItems: formItems(this),
      goodsbarItem: goodsbarItem(this),
      disableItem: [],
      size: "large",
      message: null,
      Pvisible: false,
      uniqueKey: "id",
      remoteMethod: "post",
      remoteUrl1: { url: baseUrl + "/api/v1/locationAdjustment/findShelvesPage", method: "post" },
      remoteUrl: baseUrl + "/api/v1/locationAdjustment/uerySourcePalletLocationInfo",
      prinTableColumns,
      visible: false,
      confirmLoading: false,
      tableColumns: tableColumns,
      dataSource: [],
      tabLoding: false,
      photo: ["/img/盒子.png", "/img/盒子1.png", "/img/盒子2.png"], //预览图
      detailItem: detailItem(this),
      // visOut: false,
      // outText: '是否继续调出',
      adjustQty: 0, //调整数量
      qtyDisabled: false,
      remoteData: {},
      stationNo: "",
      btnStatus: false,
      wareGoodsId: "",
      remoteData2: {},
      // vsRetrun:false,
      // returnColumns:returnColumns,
      // returnData:[],
    };
  },
  created() {
    // this.imgPhoto = this.photo[0]
  },
  watch: {
    adjustQty: function (newVal, oldVal) {
      let qty = +this.$refs.itemForm.form.getFieldsValue().qty;
      if (newVal > qty) {
        // this.qtyDisabled = true
        this.$message.error(this.$lang("调整数量不能大于原目标货位数量"));
      }
    },
    wareGoodsId: {
      handler(val) {
        const wareGoodsId = val;
        queryImages({ wareGoodsId }).then((res) => {
          if (res.success) {
            if (res.data && res.data.length > 0) {
              this.photo = res.data;
            } else {
              this.photo = imgs;
            }
          }
        });
      },
    },
  },
  methods: {
    //条码弹框
    selectChange(selectedRowKeys, selectedRows) {
      // 勾选框
      this.selectedRows = selectedRows;
      console.log(selectedRowKeys, selectedRows);
      // this.selectedRowKeys = selectedRowKeys
    },
    getgoodsinfo(palletLocation) {
      // this.Pvisible = true
      let { stationNo } = this.$refs.itemForm.form.getFieldsValue();

      this.remoteData = { palletLocation, stationNo };
      uerySourcePalletLocationInfo(this.remoteData).then((res) => {
        if (res.success) {
          this.$refs.itemForm.form.setFieldsValue(res.data);
        }
      });
    },
    getTargetContainer() {
      let { goodsId, palletLocation, inPalletLocation } = this.$refs.itemForm.form.getFieldsValue();
      palletLocation = palletLocation.toUpperCase();
      inPalletLocation = inPalletLocation.toUpperCase();
      const params = {
        goodsId,
        palletLocation,
        inPalletLocation,
      };
      querygoodsBarcode(params).then((res) => {
        if (res.success) {
          let num = res.data.length > 0 ? res.data[0].qty : 0,
            targetGoodsId = res.data.goodsId;
          this.$refs.itemForm.form.setFieldsValue({ storeQty: num, containerNo: "XN0001", targetGoodsId });
        } else {
          this.targetContainerReset();
          this.$exception(res);
        }
      });
    },
    handleOkbarcode(data) {
      console.log(data, "data");
      this.$refs.itemForm.form.setFieldsValue(data[0]);
      this.wareGoodsId = data[0].wareGoodsId;
    },
    checkApi() {
      console.log("2222");
      let params = this.$refs.PModalTable.$refs.queryTable.$refs.form.$refs.form.form.getFieldsValue();
      this.$refs.PModalTable.$refs.queryTable.handleQueryEvent(params);
    },
    //弹框确认
    handleOk(e) {
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.dataSource = [];
        this.confirmLoading = false;
      }, 2000);
    },
    // 弹框关闭
    handleCancel(e) {
      this.visible = false;
      this.dataSource = [];
    },

    // 原货架归还
    lossUnregister() {
      const params = this.$refs.itemForm.form.getFieldsValue();
      const { inPalletLocation, containerNo, storeQty } = this.$refs.itemForm.form.getFieldsValue();

      const resetData = () => {
        this.$refs.itemForm.form.resetFields();
        this.$refs.itemForm.form.setFieldsValue({ inPalletLocation, containerNo, storeQty, stationNo: this.stationNo });
        this.photo = imgs;
        this.wareGoodsId = "";
      };
      var data = {};
      data.stationNo = params.stationNo;
      data.sourcePalletNo = params.palletNo;
      if (params.palletNo === params.containerNo) {
        data.palletNo = params.palletNo;
        data.containerNo = params.containerNo;
        goodsShelvesReturn(data).then((res) => {
          if (!res.success) {
            this.$exception(res);
            return false;
          }
          this.$message.success(this.$lang("归还成功"));
          // this.$refs.itemForm.form.resetFields()
          resetData();
        });
      } else {
        data.palletNo = params.palletNo;
        goodsShelvesReturn(data).then((res) => {
          if (!res.success) {
            this.$exception(res);
            return false;
          }
          this.$message.success(this.$lang("归还成功"));
          // this.$refs.itemForm.form.resetFields()
          resetData();
        });
      }
    },
    targetContainerReset() {
      const params = this.$refs.itemForm.form.getFieldsValue(),
        inPalletLocation = "",
        containerNo = "",
        storeQty = "";
      this.$refs.itemForm.form.setFieldsValue({ inPalletLocation, containerNo, storeQty });
    },

    //目的货架归还
    targetReturn() {
      const params = this.$refs.itemForm.form.getFieldsValue(),
        inPalletLocation = "",
        containerNo = "",
        storeQty = "",
        resetData = () => {
          this.$refs.itemForm.form.setFieldsValue({
            inPalletLocation,
            containerNo,
            storeQty,
            stationNo: this.stationNo,
          });
          this.photo = imgs;
          this.wareGoodsId = "";
        };
      var data = {};
      data.stationNo = params.stationNo;
      data.palletNo = params.inPalletLocation;
      if (params.containerNo === params.palletNo) {
        data.palletNo = params.palletNo;
        data.targetPalletNo = params.containerNo;
        goodsShelvesReturn(data).then((res) => {
          if (!res.success) {
            this.$exception(res);
            return false;
          }
          this.$message.success(this.$lang("归还成功"));
          this.$refs.itemForm.form.resetFields();
          resetData();
        });
      } else {
        data.palletNo = params.containerNo;
        goodsShelvesReturn(data).then((res) => {
          if (!res.success) {
            this.$exception(res);
            return false;
          }
          this.$message.success(this.$lang("归还成功"));
          resetData();
          // this.$refs.itemForm.form.setFieldsValue({
          //   containerNo: '',
          //   inPalletLocation: '',
          // })
        });
      }
    },
    //-10
    numberA() {
      this.adjustQty = this.adjustQty - 10;
    },
    //-1
    numberB() {
      this.adjustQty = this.adjustQty - 1;
    },
    //+10
    numberC() {
      this.adjustQty = this.adjustQty + 10;
    },
    //+1
    numberD() {
      this.adjustQty = this.adjustQty + 1;
    },

    // 按钮-调出货架
    taskUp() {
      this.visible = true;
      // const params = this.$refs.itemForm.form.getFieldsValue()
      // let data = {
      //   stationNo: params.stationNo,
      // }
      // this.tabLoding = true
      // getGoodsShelves(data).then((res) => {
      //   this.tabLoding = false
      //   if (!res.success) {
      //     this.$exception(res)
      //     return false
      //   }
      //   this.dataSource = res.data
      // })
    },
    //调整确认
    adjust() {
      console.log(arguments);
      const params = this.$refs.itemForm.form.getFieldsValue();
      const { palletLocation, inPalletLocation, goodsId, id, targetGoodsId, goodsOwnerId, goodsPackId, ownerGoodsId, lotId, itemHealthCategoryName } = this.$refs.itemForm.form.getFieldsValue();
      if (this.adjustQty > params.qty) {
        this.$message.warning(this.$lang("调整数量不能大于原货位数量"));
        return;
      }
      if (this.adjustQty < 1) {
        this.$message.warning(this.$lang("调整数量必须大于0"));
        return;
      }
      console.log(params.palletNo, "params.palletNo");
      console.log(params.containerNo, "params.containerNo");
      console.log();
      if (!params.palletNo || !params.inPalletLocation) {
        this.$message.warning(this.$lang("请获取货位数据"));
        return;
      }
      // if(params.qty < 1) {
      //   this.$message.warning(this.$lang('请输入大于0的数量'))
      //   return
      // }
      let data = {
        sourcePalletLocation: params.palletLocation.toUpperCase(),
        sourcePalletNo: params.palletNo.toUpperCase(),
        targetPalletLocation: params.inPalletLocation.toUpperCase(),
        targetPalletNo: params.containerNo.toUpperCase(),
        bizPropertyId: params.bizPropertyId.toUpperCase(),
        adjustQty: this.adjustQty,
        id,
        goodsId,
        targetGoodsId,
        goodsOwnerId,
        goodsPackId,
        ownerGoodsId,
        lotId,
        itemHealthCategoryName,
      };
      console.log(data, "datadatadatadata");
      let formdata = this.$refs.itemForm.form.getFieldsValue();
      data = { ...data, ...formdata };
      this.btnStatus = true;
      adjustGoodsShelves(data).then((res) => {
        this.btnStatus = false;
        if (!res.success) {
          this.$exception(res);
          return false;
        }
        this.adjustQty = 0;
        queryOldNewQty({
          palletLocation: params.palletLocation,
          inPalletLocation: params.inPalletLocation,
          stationNo: params.stationNo,
          goodsId: params.goodsId,
        }).then((res) => {
          if (!res.success) {
            this.$exception(res);
            return false;
          }
          console.log(res, "res");
          this.$refs.itemForm.form.setFieldsValue({
            qty: res.data.qty,
            storeQty: res.data.storeQty,
          });
        });
        this.message = "调整成功";
        this.$message.success(this.$lang("调整成功"));
      });
    },
    //调出
    out(text) {
      delete text.batchExpiredDate;
      delete text.batchExpiredDateShow;
      delete text.batchProductionDate;
      delete text.batchProductionDateShow;
      const stationNo = this.$refs.itemForm.form.getFieldsValue().stationNo.toUpperCase();
      callOutGoodsShelves({ params: text, stationNo: stationNo }).then((res) => {
        if (!res.success) {
          this.$exception(res);
          return false;
        }
        // this.$refs.itemForm.form.setFieldsValue(text)
        this.visible = false;
        this.message = "请扫描原货位";
        this.$message.success(this.$lang("货架调出成功，请等待货架到位"));
      });
    },
    // 调出查询
    detailSub(evnet, form) {
      evnet.preventDefault();

      form.validateFields((error, values) => {
        console.log(error, values, "valuesvaluesvaluesvaluesvalues");

        if (!error) {
          this.remoteData2 = { ...this.remoteData2, ...values };
        }
      });
      return;
      const params = this.$refs.detailForm.form.getFieldsValue();
      this.tabLoding = true;
      console.log(params);

      console.log(this.remoteData2);
      this.remoteData2 = { ...this.remoteData2, ...params };

      //   this.$refs.logTable2.reload(params);
      // getGoodsShelves(data).then((res) => {
      //   this.tabLoding = false
      //   if (!res.success) {
      //     this.$exception(res)
      //     return false
      //   }
      //   this.dataSource = res.data
      // })
    },

    //养护确认
    ok() {
      const params = this.$refs.itemForm.form.getFieldsValue();
      confirmMaintain(params).then((res) => {
        if (!res.success) {
          this.$exception(res);
          return false;
        }
        this.$message.success(this.$lang("确认成功"));
      });
    },
  },
};
</script>
<style lang="less">
/deep/ .ant-input {
  font-weight: bold;
}
.oneclass {
  display: none;
}
.group-btn {
  // float: right;
  //  border: 1px solid #409eff;
  margin: 15px;
  font-weight: bold;
  font-size: 15px;
  .group-btn-a {
    margin-left: 40px;
    height: 50px;
    width: 150px;
  }
}
.group-btn-b {
  width: 50px;
}
.select-a {
  .select-b {
    margin-top: 15px;
    width: 180px;
  }
}
.testName {
  font-weight: bold;
  font-size: 30px;
  color: red;
}
.num {
  font-weight: bold;
  font-size: 35px;
}
.input-b {
  margin-left: 5px;
  width: 220px;
}
.imgPhoto {
  margin-left: 150px;
  height: 170px;
  overflow: hidden;
}
.inputNumber {
  width: 100px;
  height: 50px;
}
</style>
