<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="8" :offset="2">
          <el-form-item label="任务编号" prop="taskCode">
            <el-input v-model="form.taskCode" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-form-item label="仓库" prop="warehouseName">
            <el-input v-model="form.warehouseName" disabled/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" :offset="2">
          <el-form-item label="计划编号" prop="planCode">
            <el-input v-model="form.planCode" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-form-item label="明细编号" prop="planDetailCode">
            <el-input v-model="form.planDetailCode" disabled/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" :offset="2">
          <el-form-item label="物料名称" prop="materialName">
            <el-input v-model="form.materialName" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-form-item label="物料批次" prop="materialBatch">
            <el-input v-model="form.materialBatch" disabled/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8" :offset="2">
          <el-form-item label="计划出库数量" prop="outstockAmount">
            <el-input v-model="form.outstockAmount" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-form-item label="已出库数量" prop="realOutstockAmount">
            <el-input v-model="form.realOutstockAmount" disabled/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" :offset="2">
          <el-form-item label="申请人" prop="applyBy">
            <el-input v-model="form.applyBy" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-form-item label="申请时间" prop="applyDate">
            <el-input v-model="form.applyDate" disabled/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="16" :offset="2">
          <el-form-item label="申请原因" prop="applyReason">
            <el-input v-model="form.applyReason" type="textarea" disabled/>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row v-if="detailFlag">
        <el-col :span="8" :offset="2">
          <el-form-item label="审核人" prop="auditBy">
            <el-input v-model="form.auditBy" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-form-item label="审核时间" prop="auditDate">
            <el-input v-model="form.auditDate" disabled/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="16" :offset="2">
          <el-form-item label="审核原因" prop="auditReason">
            <el-input v-model="form.auditReason" type="textarea" :disabled="detailFlag"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-if="detailFlag">
        <el-col :span="6" :offset="2">
          <el-form-item label="出库类型" prop="taskType">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.wms_raw_outstock_task_type" :value="form.taskType"/>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="2">
          <el-form-item label="审核状态" prop="auditStatus">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.wms_audit_status" :value="form.auditStatus"/>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="2">
          <el-form-item label="执行状态" prop="executeStatus">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.wms_execute_status" :value="form.executeStatus"/>
            </template>
          </el-form-item>
        </el-col>
      </el-row>

      <el-divider content-position="center">原材料出库记录明细信息</el-divider>
      <el-table :data="wmsRawOutstockDetailList" :row-class-name="rowWmsRawOutstockDetailIndex"
                ref="wmsRawOutstockDetail">
        <el-table-column label="序号" align="center" prop="index" width="50"/>
        <el-table-column label="库位编码" prop="locationCode"/>
        <el-table-column label="物料条码" prop="materialBarcode"/>
        <el-table-column label="计划数量" prop="planAmount"/>
        <el-table-column label="出库数量" prop="outstockAmount" v-if="detailFlag"/>
      </el-table>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">关 闭</el-button>
    </div>
  </div>
</template>

<script>
import {
  getRawoutstock,
  auditRawOutstock,
} from "@/api/wms/rawoutstock";

export default {
  dicts: ['wms_audit_status', 'wms_execute_status', 'wms_erp_status','wms_raw_outstock_task_type'],
  name: "Rawoutstock",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 子表选中数据
      checkedWmsRawOutstockDetail: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 原材料出库记录表格数据
      rawoutstockList: [],
      // 原材料出库记录明细表格数据
      wmsRawOutstockDetailList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      detailFlag: true,
      warehouseName: '',
    };
  },
  created() {
    const rawOutstockId = this.$route.params && this.$route.params.rawOutstockId;
    const taskCode = this.$route.params && this.$route.params.taskCode;
    const detailFlag = this.$route.params && this.$route.params.detailFlag;
    const warehouseName = this.$route.params && this.$route.params.warehouseName;
    this.detailFlag = detailFlag == "1";
    this.form.rawOutstockId = rawOutstockId;
    this.form.taskCode = taskCode;
    this.warehouseName = warehouseName;
    this.getRawOutstock();

  },
  methods: {
    /** 根据任务编号获取出库明细 */
    getRawOutstock() {
      getRawoutstock(this.form.rawOutstockId).then(response => {
        this.form = response.data;
        this.form.warehouseName = this.warehouseName;
        this.wmsRawOutstockDetailList = response.data.wmsRawOutstockDetailList;
        this.open = true;
        this.title = "修改原材料出库记录";
      });
    },
    /** 原材料出库记录明细序号 */
    rowWmsRawOutstockDetailIndex({row, rowIndex}) {
      row.index = rowIndex + 1;
    },

    // 取消按钮
    cancel() {
      const obj = {path: "/wms/info/rawoutstock", query: {t: Date.now(), pageNum: this.$route.query.pageNum}};
      this.$tab.closeOpenPage(obj);
    },


    auditPass() {
      this.form.auditStatus = "1";
      this.submitForm();
    },

    auditFail() {
      this.form.auditStatus = "2";
      if (!this.form.auditReason || this.form.auditReason == "" || this.form.auditReason == undefined) {
        this.$modal.msgWarning("请输入审核原因!");
        return;
      }
      this.submitForm();
    },


    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          auditRawOutstock(this.form).then(response => {
            this.$modal.msgSuccess("保存成功");
            this.cancel();
          });
        }
      });
    },


  }
};
</script>
