<template>
  <div class="app-container">
    <!-- 按钮操作栏 -->
    <el-row :gutter="10" class="mb10">
      <el-col :span="1.5">
        <el-button
          :disabled="detailDisable"
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >新增</el-button
        >
        <el-button
          type="danger"
          :disabled="detailDisable"
          icon="el-icon-delete"
          size="mini"
          @click="handleDelete"
          >删除</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-check"
          size="mini"
          :disabled="detailDisable"
          :loading="ensureLoading"
          @click="submitForm"
          >提交</el-button
        >
      </el-col>
    </el-row>
    <!-- 搜索工作栏 -->
    <el-form
      v-show="showSearch"
      ref="queryForm"
      :model="queryParams"
      size="small"
      label-width="68px"
      :disabled="detailDisable"
    >
      <SearchBar :show-more="false" :collapse-span="6">
        <template #header>
          <el-col :span="8">
            <el-form-item label="送货单号" prop="deliveryOrderNo">
              <el-input
                v-model="queryParams.deliveryOrderNo"
                clearable
                placeholder="请扫入/输入送货单号"
                @keyup.enter.native="handleCode"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供应商" prop="supplierCode" label-width="88px">
              <el-select
                v-model="queryParams.supplierCode"
                placeholder="请选择供应商"
              >
                <el-option
                  v-for="item in supplierOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注" prop="remark" label-width="88px">
              <el-input
                v-model="queryParams.remark"
                placeholder="请输入备注"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
        </template>
        <!-- <template #buttons>
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="handleAdd"
          >新增</el-button>
          <el-button
            type="primary"
            icon="el-icon-check"
            :loading="ensureLoading"
            @click="submitForm"
          >提交</el-button>
        </template> -->
      </SearchBar>
    </el-form>

    <!-- 列表 -->
    <el-table
      v-loading="loading"
      :data="list"
      border
      size="mini"
      :row-class-name="tableRowClassName"
      @selection-change="tableSelected"
    >
      <el-table-column
        type="selection"
        width="55"
        fixed="left"
        align="center"
      />
      <el-table-column
        label="来料类型"
        align="center"
        prop="receiptType"
        width="120"
        fixed="left"
      >
        <template slot-scope="scope">
          <DictSelect
            v-model="scope.row.receiptType"
            :disabled="detailDisable"
            dict-type="WMS_MATERIAL_RECEIVING_CATEGORY"
            @change="receiptTypeChange"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="采购订单"
        align="center"
        prop="purchaseOrderNo"
        width="120"
      >
        <template slot-scope="scope">
          <OrderSelect
            ref="purchaseOrder"
            v-model="scope.row.purchaseOrderNo"
            :disabled="detailDisable"
            clearable
            @change="OrderNoChange"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="客户编码"
        align="center"
        prop="customerCode"
        width="120"
      >
        <template slot-scope="scope">
          <CustomerSelect
            ref="customerSelect"
            v-model="scope.row.customerCode"
            :disabled="detailDisable"
            clearable
            filterable
          />
        </template>
      </el-table-column>
      <el-table-column label="送货批次" align="center" prop="deliverBatch">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.deliverBatch"
            :disabled="detailDisable"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="物料编码"
        align="center"
        prop="materialNo"
        width="150"
      >
        <template slot-scope="scope">
          <MaterialSelect
            ref="materialOrder"
            v-model="scope.row.materialNo"
            :disabled="detailDisable"
            clearable
            @change="materialNoChange"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="生产日期"
        align="center"
        prop="produceDate"
        width="170"
      >
        <template slot-scope="scope">
          <el-date-picker
            v-model="scope.row.produceDate"
            format="yyyy-MM-dd"
            :disabled="detailDisable"
            value-format="yyyy-MM-dd"
            type="date"
            style="width: 140px"
          />
        </template>
      </el-table-column>
      <el-table-column label="包数" align="center" prop="bagQty">
        <template slot-scope="scope">
          <el-input v-model="scope.row.bagQty" :disabled="detailDisable" />
        </template>
      </el-table-column>
      <el-table-column label="每包数量" align="center" prop="pieceQty">
        <template slot-scope="scope">
          <el-input v-model="scope.row.pieceQty" :disabled="detailDisable" />
        </template>
      </el-table-column>
      <el-table-column label="尾数" align="center" prop="mantissaQty">
        <template slot-scope="scope">
          <el-input v-model="scope.row.mantissaQty" :disabled="detailDisable" />
        </template>
      </el-table-column>
      <el-table-column label="到货数量" align="center" prop="receiptQty">
        <template slot-scope="scope">
          <el-input v-model="scope.row.receiptQty" :disabled="detailDisable" />
        </template>
      </el-table-column>
      <el-table-column label="长度(m)" align="center" prop="length" width="100">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.length"
            :disabled="detailDisable"
            placeholder="请输入长度"
          />
        </template>
      </el-table-column>
      <el-table-column label="宽度(mm)" align="center" prop="width" width="100">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.width"
            :disabled="detailDisable"
            placeholder="请输入宽度"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="厚度(mm)"
        align="center"
        prop="thickness"
        width="100"
      >
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.thickness"
            :disabled="detailDisable"
            placeholder="请输入厚度(mm)"
          />
        </template>
      </el-table-column>
      <el-table-column label="规格" align="center" prop="size" width="120">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.size"
            :disabled="detailDisable"
            placeholder="请输入规格"
          />
        </template>
      </el-table-column>
      <!-- <el-table-column
        label="操作"
        align="center"
        width="100"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            class="text-danger"
            icon="el-icon-delete"
            :disabled="detailDisable"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <!-- 分页组件 -->
    <!-- <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getDetails"
    /> -->
  </div>
</template>

<script>
import {
  createIncomingReceiptMaster,
  getDeliveryOrderNo,
  getDetailPage,
} from "@/api/wms/incoming/temporaryReceipt";
import { getSupplierPage } from "@/api/wms/base/supplier";
import OrderSelect from "./TempOrderSelect.vue";
import CustomerSelect from "../../register/components/CustomerSelect.vue";
import MaterialSelect from "./TempMaterialSelect.vue";

export default {
  name: "DeliveryConfimation",
  components: {
    OrderSelect,
    CustomerSelect,
    MaterialSelect,
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      ensureLoading: false,
      supplierOptions: [],
      // 选中的数据
      currentRows: [],
      // 总条数
      total: 0,
      // 列表
      list: [],
      // 弹出层标题
      receiptShow: false,
      OrderShow: false,
      // 是否显示弹出层
      open: false,
      detailDisable: false,
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        remark: null,
        supplierCode: null,
        deliveryOrderNo: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
    };
  },
  created() {
    this.getSupplierList();
    if (this.$route.query.masterId) {
      this.detailDisable = true;
      this.getDetails();
    } else {
      this.detailDisable = false;
    }
  },
  methods: {
    /** 取消按钮 */
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 表单重置 */
    reset() {
      this.form = {
        id: undefined,
        detailErpId: undefined,
        inStockId: undefined,
        erpInStockOrderId: undefined,
        erpInStockOrderNo: undefined,
        detailNumber: undefined,
        materialNo: undefined,
        materialName: undefined,
        materialQty: undefined,
        materialModels: undefined,
        unitName: undefined,
        shouldReceiveAmount: undefined,
        receiveQty: undefined,
        returnQty: undefined,
        materialStatus: undefined,
        supplierCode: undefined,
        supplierName: undefined,
        batch: undefined,
        price: undefined,
        taxPrice: undefined,
        allAmount: undefined,
        taxRate: undefined,
        comment: undefined,
        deliveryTime: undefined,
        erpMark: undefined,
      };
      this.resetForm("form");
    },
    dialogClose() {
      this.queryParams.remark = null;
      this.queryParams.supplierCode = null;
      this.queryParams.deliveryOrderNo = null;
      this.list = [];
    },
    // 新增
    handleAdd() {
      this.list.push({
        receiptType: "",
        purchaseOrderNo: "",
        customerCode: "",
        deliverBatch: "",
        materialNo: "",
        receiptQty: "",
        produceDate: "",
        bagQty: "",
        pieceQty: "",
        mantissaQty: "",
        size: "",
        length: "",
        thickness: "",
        width: "",
        wmsPurchaseOrderDetailId: "",
      });
    },
    // 收料类别
    receiptTypeChange(v) {
      if (v === "1") {
        this.receiptShow = true;
        this.OrderShow = false;
      } else {
        this.receiptShow = false;
        this.OrderShow = true;
      }
    },
    // 来料暂收保存
    submitForm() {
      const { deliveryOrderNo, supplierCode, remark } = this.queryParams;
      if (remark === null) {
        this.$modal.msgWarning("请先输入备注!");
        return;
      }
      const params = {
        detail: this.list,
        supplierCode,
        remark,
        deliveryOrderNo,
      };
      this.ensureLoading = true;
      createIncomingReceiptMaster(params)
        .then((res) => {
          this.$modal.msgSuccess("提交成功!");
          this.open = false;
          this.$emit("saveComplete");
          // 关闭当前窗口
          this.$tab.closeOpenPage();
          this.$router.go(-1);
        })
        .finally(() => {
          this.ensureLoading = false;
        });
    },
    OrderNoChange(item) {
      if (item) {
        const { id } = item;
        this.$refs.materialOrder.inStockId = id;
        this.materialDisabled = false;
      }
    },
    materialNoChange(item) {
      if (item) {
        const { wmsPurchaseOrderDetailId, materialNo } = item;
        const temps = this.list.filter((i) => i.materialNo === materialNo);
        temps.map((items) => {
          items.wmsPurchaseOrderDetailId = wmsPurchaseOrderDetailId;
        });
      }
    },
    // 扫供应商送货单
    handleCode() {
      const params = {
        deliveryOrderNo: this.queryParams.deliveryOrderNo,
      };
      getDeliveryOrderNo(params).then((res) => {
        this.queryParams = res.data;
        this.list = res.data.detail;
      });
    },
    // 供应商列表
    getSupplierList() {
      const params = {
        pageNo: 1,
        pageSize: 100,
      };
      getSupplierPage(params).then((res) => {
        this.supplierOptions = res.data.list;
      });
    },
    // 查看明细
    getDetails() {
      const params = {
        masterId: this.$route.query.masterId,
      };
      getDetailPage(params).then((res) => {
        this.list = res.data.list;
        this.queryParams = res.data.master;
      });
    },
    tableRowClassName(row, index) {
      row.row.index = row.rowIndex;
    },
    // 表格选中
    tableSelected(val) {
      val.forEach((item) => {
        this.currentRows.push(item.index);
      });
    },
    // 删除
    handleDelete() {
      if (this.currentRows.length < 0) {
        this.$modal.msgWarning("请选择您要删除的数据!");
        return;
      }
      this.list = this.list.filter((item, index) => {
        const arrList = this.currentRows;
        return !arrList.includes(index);
      });
    },
  },
};
</script>
