<template>
  <div class="app-container">

    <h4 class="form-header h4">销售订单信息</h4>
    <el-form ref="saleOrderForm" :model="saleOrderForm" label-width="100px">
      <el-row>
        <el-col :span="8" :offset="2">
          <el-form-item label="销售订单编号" prop="saleorderCode">
            <el-input v-model="saleOrderForm.saleorderCode" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-form-item label="销售物料规格" prop="materialModel">
            <el-input v-model="saleOrderForm.materialModel" disabled/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" :offset="2">
          <el-form-item label="销售物料编号" prop="materialCode">
            <el-input v-model="saleOrderForm.materialCode" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-form-item label="销售物料名称" prop="materialName">
            <el-input v-model="saleOrderForm.materialName" disabled/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-row>
      <el-col :span="12">
        <h4 class="form-header h4">已选采购订单</h4>
        <el-form :model="allocatePurchaseOrderQueryParams" ref="allocateMaterialQueryForm" size="small" :inline="true"
                 v-show="showSearch"
                 label-width="68px">
          <el-form-item label="订单编号" prop="poNo">
            <el-input
              v-model="allocatePurchaseOrderQueryParams.poNo"
              placeholder="请输入物料编码"
              style="width:140px;"
              clearable
              @keyup.enter.native="handleAllocateMaterialQuery"
            />
          </el-form-item>
          <el-form-item label="物料编码" prop="materialCode">
            <el-input
              v-model="allocatePurchaseOrderQueryParams.materialCode"
              placeholder="请输入物料编码"
              style="width:140px;"
              clearable
              @keyup.enter.native="handleAllocateMaterialQuery"
            />
          </el-form-item>
          <el-form-item label="物料名称" prop="materialName">
            <el-input
              v-model="allocatePurchaseOrderQueryParams.materialName"
              placeholder="请输入物料名称"
              style="width:140px;"
              clearable
              @keyup.enter.native="handleAllocateMaterialQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleAllocateMaterialQuery">搜索
            </el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetAllocateMaterialQuery">重置</el-button>
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              @click="handleUnallocateBarCodes"
              v-hasPermi="['mes:productOrder:bind']"
            >删除
            </el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="allocateLoading" :data="allocatePurchaseOrderList"
                  @selection-change="handleAllocateMaterialSelectionChange">
          <el-table-column type="selection" width="55" align="center"/>
          <el-table-column label="订单编号" align="center" prop="poNo"/>
          <el-table-column label="物料编码" align="center" prop="materialCode"/>
          <el-table-column label="物料名称" align="center" prop="materialName"/>
          <el-table-column label="物料规格" align="center" prop="materialSpec"/>
          <el-table-column label="规格参数" align="center" prop="specificationParameter" :show-overflow-tooltip="true"/>
          <el-table-column label="数量" align="center" prop="orderAmount"/>
        </el-table>

        <pagination
          v-show="allocatePurchaseOrderTotal>0"
          :total="allocatePurchaseOrderTotal"
          :page.sync="allocatePurchaseOrderQueryParams.pageNum"
          :limit.sync="allocatePurchaseOrderQueryParams.pageSize"
          @pagination="getAllocatePurchaseOrderList"
        />
      </el-col>


      <el-col :span="12" >
        <h4 class="form-header h4">可选采购订单</h4>
        <el-form :model="purchaseOrderQueryParams" ref="materialQueryForm" size="small" :inline="true" v-show="showSearch"
                 label-width="68px">
          <el-form-item label="订单编号" prop="poNo">
            <el-input
              v-model="allocatePurchaseOrderQueryParams.poNo"
              placeholder="请输入物料编码"
              style="width:140px;"
              clearable
              @keyup.enter.native="handleAllocateMaterialQuery"
            />
          </el-form-item>
          <el-form-item label="物料编码" prop="materialCode">
            <el-input
              v-model="purchaseOrderQueryParams.materialCode"
              placeholder="请输入物料编码"
              style="width:140px;"
              clearable
              @keyup.enter.native="handlePurchaseOrderQuery"
            />
          </el-form-item>
          <el-form-item label="物料名称" prop="materialName">
            <el-input
              v-model="purchaseOrderQueryParams.materialName"
              placeholder="请输入物料名称"
              style="width:140px;"
              clearable
              @keyup.enter.native="handlePurchaseOrderQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handlePurchaseOrderQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetMaterialQuery">重置</el-button>
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              :disabled="allocateBarCodeBtnDisable"
              @click="submitForm"
              v-hasPermi="['mes:productOrder:bind']"
            >保存
            </el-button>
          </el-form-item>
        </el-form>


        <el-table v-loading="selectableLoading" :data="purchaseOrderList"
                  @selection-change="handleMaterialSelectionChange">
          <el-table-column type="selection" width="55" align="center"/>
          <el-table-column label="订单编号" align="center" prop="poNo"/>
          <el-table-column label="物料编码" align="center" prop="materialCode"/>
          <el-table-column label="物料名称" align="center" prop="materialName"/>
          <el-table-column label="物料规格" align="center" prop="materialSpec"/>
          <el-table-column label="规格参数" align="center" prop="specificationParameter" :show-overflow-tooltip="true"/>
          <el-table-column label="数量" align="center" prop="orderAmount"/>
        </el-table>

        <pagination
          v-show="purchaseOrderTotal>0"
          :total="purchaseOrderTotal"
          :page.sync="purchaseOrderQueryParams.pageNum"
          :limit.sync="purchaseOrderQueryParams.pageSize"
          @pagination="getUnbindPurchaseOrderList"
        />
      </el-col>
    </el-row>

  </div>
</template>

<script>
import {
  removeSalesBindPurchase,
  saleBindPurchaseOrderList,
  saveSalesBindPurchase,
  unbindPurchaseOrderList
} from "@/api/mes/purchaseOrder";

export default {
  name: "BindingPurchase",
  data() {
    return {
      // 已选采购订单遮罩层
      allocateLoading: true,
      // 可选采购订单遮罩层
      selectableLoading: true,
      // 已选采购订单选中数组
      orderBindIds: [],
      //可选采购订单信息选中数组
      barcodeInfos: [],
      //可选采购订单ID选中数组
      purchaseOrderIds: [],
      // 已选采购订单非单个禁用
      allocateMaterialSingle: true,
      // 已选采购订单非多个禁用
      allocateMaterialMultiple: true,
      // 可选采购订单非单个禁用
      materialSingle: true,
      // 可选采购订单非多个禁用
      materialMultiple: true,
      // 显示搜索条件
      showSearch: true,
      // 已选采购订单总条数
      allocatePurchaseOrderTotal: 0,
      //可选采购订单总条数
      purchaseOrderTotal: 0,
      // 已选采购订单信息表格数据
      allocatePurchaseOrderList: [],
      // 可选采购订单信息表格数据
      purchaseOrderList: [],
      // 已选采购订单编号List
      allocatePoNos: [],
      //库位信息
      saleOrderForm: {},
      allocateBarCodeBtnDisable: true,
      // 已选采购订单信息查询参数
      allocatePurchaseOrderQueryParams: {
        pageNum: 1,
        pageSize: 10,
        saleOrderId: null,
        materialCode: null,
        materialName: null,
        poNo: null,
      },
      // 可选采购订单信息查询参数
      purchaseOrderQueryParams: {
        pageNum: 1,
        pageSize: 10,
        saleOrderId: null,
        materialCode: null,
        materialName: null,
        poNo: null
      },
    };
  },
  created() {
    this.allocateBarCodeBtnDisable = false;
    const saleOrderId = this.$route.params && this.$route.params.saleOrderId;
    let saleorderCode  = this.$route.query && this.$route.query.saleorderCode;
    this.purchaseOrderQueryParams.saleOrderId = saleOrderId;
    // this.purchaseOrderQueryParams.saleorderCode = saleorderCode;
    this.allocatePurchaseOrderQueryParams.saleOrderId = saleOrderId;
    // this.allocatePurchaseOrderQueryParams.saleorderCode = saleorderCode;

    this.saleOrderForm.saleorderCode = saleorderCode;
    this.saleOrderForm.saleOrderId = saleOrderId;
    this.saleOrderForm.materialCode = this.$route.query && this.$route.query.materialCode;
    this.saleOrderForm.materialName = this.$route.query && this.$route.query.materialName;
    this.saleOrderForm.materialModel = this.$route.query && this.$route.query.materialModel;
    this.getAllocatePurchaseOrderList();
    this.getUnbindPurchaseOrderList();
  },
  methods: {
    /** 查询已选采购订单信息列表 */
    getAllocatePurchaseOrderList() {
      this.allocateLoading = true;
      saleBindPurchaseOrderList(this.allocatePurchaseOrderQueryParams).then(response => {
        this.allocatePurchaseOrderList = response.rows;
        this.allocatePurchaseOrderTotal = response.total;
        this.allocateLoading = false;
      });
    },

    /** 查询可选采购订单信息列表 */
    getUnbindPurchaseOrderList() {
      this.selectableLoading = true;
      unbindPurchaseOrderList(this.purchaseOrderQueryParams).then(response => {
        this.purchaseOrderList = response.rows;
        this.purchaseOrderTotal = response.total;
        this.selectableLoading = false;
      });
    },

    /** 已选采购订单搜索按钮操作 */
    handleAllocateMaterialQuery() {
      this.allocatePurchaseOrderQueryParams.pageNum = 1;
      this.getAllocatePurchaseOrderList();
    },
    /** 已选采购订单重置按钮操作 */
    resetAllocateMaterialQuery() {
      this.resetForm("allocateMaterialQueryForm");
      this.handleAllocateMaterialQuery();
    },
    /** 已选采购订单多选框选中数据 */
    handleAllocateMaterialSelectionChange(selection) {
      this.orderBindIds = selection.map(item => item.orderBindId)
      this.allocatePoNos = selection.map(item => item.poNo)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 可选采购订单搜索按钮操作 */
    handlePurchaseOrderQuery() {
      this.purchaseOrderQueryParams.pageNum = 1;
      this.getUnbindPurchaseOrderList();
    },
    /** 可选采购订单重置按钮操作 */
    resetMaterialQuery() {
      this.resetForm("materialQueryForm");
      this.handlePurchaseOrderQuery();
    },
    // 可选采购订单多选框选中数据
    handleMaterialSelectionChange(selection) {
      this.purchaseOrderIds = selection.map(item => item.purchaseOrderId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

    handleUnallocateBarCodes() {
      const orderBindIds = this.orderBindIds.join(",");
      const allocatePoNos = this.allocatePoNos;
      const params = {
        orderBindIds: orderBindIds
      }
      this.$modal.confirm('是否确认删除采购订单编号为"' + allocatePoNos + '"的数据项？').then(function () {
        return removeSalesBindPurchase(params);
      }).then(() => {
        this.getAllocatePurchaseOrderList();
        this.getUnbindPurchaseOrderList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.allocateBarCodeBtnDisable = true;
      const saleOrderId = this.saleOrderForm.saleOrderId;
      const purchaseOrderIds = this.purchaseOrderIds.join(",");
      saveSalesBindPurchase({
        saleOrderId: saleOrderId,
        purchaseOrderIds: purchaseOrderIds
      }).then((response) => {
        this.$modal.msgSuccess("保存成功");
        this.selectBarCodeAllocationWarehouse();
        this.getAllocatePurchaseOrderList();
        this.allocateBarCodeBtnDisable = false;
      }).catch(() => {
        this.getAllocatePurchaseOrderList();
        this.getUnbindPurchaseOrderList();
        this.allocateBarCodeBtnDisable = false;
      });
    },

  }
};
</script>
