<template>
  <el-dialog
    v-dialogDrag
    title="出库操作"
    :visible.sync="open"
    width="1200px"
    append-to-body
    @open="dialogOpen"
    @close="dialogClose"
  >
    <!-- 添加栏 -->
    <el-form
      v-show="showSearch"
      ref="queryForm"
      :model="queryParams"
      size="small"
      label-width="68px"
      :disabled="searching"
    >
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="物料条码" prop="qrCode">
            <el-input
              ref="materialNos"
              v-model="queryParams.qrCode"
              placeholder="请输入/扫入物料条码"
              clearable
              @keyup.enter.native="getCurrentMaterial"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签数量" prop="receiptQty">
            <el-input v-model="queryParams.receiptQty" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="客户" prop="customer">
            <el-input v-model="queryParams.customer" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="客户编号" prop="customerCode">
            <el-input v-model="queryParams.customerCode" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="库存组织" prop="storageOrganization">
            <el-input v-model="queryParams.storageOrganization" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="物料名称" prop="materialName">
            <el-input v-model="queryParams.materialName" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="物料编码" prop="materialNo">
            <el-input v-model="queryParams.materialNo" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="仓库" prop="erpStockName">
            <el-input v-model="queryParams.erpStockName" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="日期" prop="returnTime">
            <el-date-picker
              v-model="queryParams.returnTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="退料类型" prop="returnType">
            <DictSelect
              v-model="queryParams.returnType"
              placeholder="请选择退料类型"
              dict-type="RETURN_TYPE"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="退料方式" prop="returnWay">
            <DictSelect
              v-model="queryParams.returnWay"
              placeholder="请选择退料方式"
              dict-type="RETURN_WAY"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="部门" prop="dept">
            <DepartmentSelect
              v-model="queryParams.dept"
              placeholder="请选择部门"
              @change="deptChange"
            />
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="备注" prop="note">
            <el-input
              v-model="queryParams.note"
              style="width: 100%"
              placeholder="请输入备注"
              type="textarea"
              rows="1"
            /> </el-form-item
        ></el-col>
        <el-col :span="8" class="text-right"
          ><el-button
            type="primary"
            plain
            size="mini"
            icon="el-icon-plus"
            @click="handleAdd"
            >添加</el-button
          ></el-col
        >
      </el-row>
    </el-form>

    <el-descriptions
      v-if="Object.keys(currentData).length > 0"
      size="mini"
      :column="3"
      border
      class="mb10"
      :label-style="{
        width: '80px',
      }"
    >
      <el-descriptions-item label="物料条码">
        {{ currentData.qrCode }}
      </el-descriptions-item>
      <el-descriptions-item label="物料编码">
        {{ currentData.materialNo }}
      </el-descriptions-item>
      <el-descriptions-item label="物料名称">
        {{ currentData.materialName }}
      </el-descriptions-item>
    </el-descriptions>

    <!-- 列表数据 -->
    <el-table :data="list" border size="mini">
      <el-table-column
        label="客户编码"
        align="center"
        prop="customerCode"
        show-overflow-tooltip
      />
      <el-table-column
        label="客户名称"
        align="center"
        prop="customer"
        show-overflow-tooltip
      />
      <el-table-column
        label="物料编码"
        align="center"
        prop="materialNo"
        show-overflow-tooltip
      />
      <el-table-column
        label="物料名称"
        align="center"
        prop="materialName"
        show-overflow-tooltip
      />
      <el-table-column
        label="库存组织"
        align="center"
        prop="storageOrganization"
      />
      <el-table-column label="仓库" align="center" prop="erpStockName" />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        fixed="right"
        width="80"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            class="text-danger"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div slot="footer" class="dialog-footer">
      <el-button
        :loading="buttonLoading"
        type="primary"
        :disabled="signDisable"
        @click="handleSubmit"
        >确定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import {
  getQrQodeMSG,
  createOutSourceReturnPage,
} from "@/api/wms/base/outSourceReturn";
import DepartmentSelect from "./DepartmentSelect.vue";

export default {
  components: {
    DepartmentSelect,
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      buttonLoading: false,
      // WMS 生产发料 主列表
      list: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 签收按钮禁用
      signDisable: false,
      // 显示搜索条件
      showSearch: true,
      searching: false,
      currentData: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        qrCode: "",
        remark: "",
        type: 1,
        qty: 0,
        maxAmount: 0,
        departmentNo: undefined,
        recipient: undefined,
        outType: undefined,
        encodedEmployeeId: undefined,
      },
      // form表单
      form: {},
    };
  },
  methods: {
    // 查询当前物料
    getCurrentMaterial() {
      if (!this.queryParams.qrCode) {
        this.$modal.msgWarning("请先扫入或输入标签码！");
        return;
      }
      this.searching = true;
      const { qrCode } = this.queryParams;
      const params = {
        qrCode,
      };
      getQrQodeMSG(params)
        .then((res) => {
          const { data = [] } = res;
          if (data.length === 0) {
            this.$modal.msgWarning("该标签码不存在");
          } else {
            this.currentData = this.queryParams = {
              ...res.data[0],
              ...this.queryParams,
              returnType: "1",
            };
          }
        })
        .finally(() => {
          this.searching = false;
        });
    },
    // 删除
    handleDelete(row) {
      const { qrCode } = row;
      const index = this.list.findIndex((item) => item.qrCode === qrCode);
      if (index > -1) {
        this.list.splice(index, 1);
      }
    },
    // 添加
    handleAdd() {
      const { qrCode } = this.currentData;
      const { note = null, dept = null, returnWay = null } = this.queryParams;
      if (!note || !dept || !returnWay) {
        this.$modal.msgWarning("退料说明/部门/退料类型不能为空！");
        return;
      }
      // 检测是否重复
      const isExitIndex = this.list.findIndex((i) => i.qrCode === qrCode);

      if (isExitIndex > -1) {
        this.$modal.msgWarning("已存在相同批次的物料，请勿重新添加！");
        return;
      }
      this.currentData = {
        ...this.currentData,
        ...this.queryParams,
      };
      //   添加到list
      this.list.push(JSON.parse(JSON.stringify(this.currentData)));
      this.queryParams.qrCode = undefined;
      this.currentData = {};
      this.autoFocus();
    },
    dialogOpen() {
      this.autoFocus();
    },
    // 自动聚焦
    autoFocus() {
      this.$nextTick(() => {
        this.$refs.materialNos.focus();
      });
    },
    // 重置
    reset() {
      this.queryParams = {};
      this.currentData = {};
      this.list = [];
      this.open = false;
    },
    // 签收/打印标签
    async handleSubmit() {
      if (this.list.length === 0) {
        this.$modal.notifyWarning("数据不能为空，请先扫码！");
        return;
      }
      try {
        const {
          returnType,
          returnWay,
          dept,
          departmentName,
          note,
          returnTime,
        } = this.queryParams;
        const finishParams = {
          list: this.list,
          returnType,
          returnWay,
          departmentName,
          departmentNo: dept,
          returnTime,
          note,
        };
        this.buttonLoading = true;
        await createOutSourceReturnPage(finishParams);
        this.$emit("complete");
        this.$modal.msgSuccess("操作成功!");
        this.reset();
      } catch (error) {
        console.log(error);
      } finally {
        this.buttonLoading = false;
      }
    },
    dialogClose() {
      this.list = [];
      this.queryParams = {};
    },
    // 部门选择
    deptChange(v) {
      const { name } = v;
      this.queryParams.departmentName = name;
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-form-item {
  margin-bottom: 0;
}
</style>
