<template>
  <el-dialog title="单号对应物料"
    v-if="showFlag"
    :visible.sync="showFlag"
    :modal= false
    width="80%"
    >
    <el-form :model="queryParams" @submit.native.prevent ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="产品编号" prop="sapItemCode">
        <el-input v-model="queryParams.sapItemCode" placeholder="请输入产品编号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="产品名称" prop="itemName">
        <el-input v-model="queryParams.itemName" placeholder="请输入产品名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="领用数量" prop="applyNum">
        <el-input v-model="queryParams.applyNum" placeholder="请输入领用数量" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="生产工单" prop="workorderCode">
        <el-input v-model="queryParams.workorderCode" placeholder="请输入生产工单" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
       <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
    </el-form>

      <el-table v-loading="loading" :data="protaskList" :summary-method="getSummaries" show-summary @current-change="handleCurrent" @row-dblclick="handleRowDbClick">
        <el-table-column label="产品编号" align="center" prop="sapItemCode" width="300" />
      <el-table-column label="产品名称" align="center" prop="itemName" width="300" />
      <el-table-column label="单位" align="center" prop="unitOfMeasure" width="120" />
      <el-table-column label="生产工单" align="center" prop="workorderCode" width="200" />
      <el-table-column label="申请单号" align="center" prop="applyNo" width="200" />
      <el-table-column label="领用数量" align="center" prop="applyNum" width="200"/>
      <el-table-column label="发料状态" align="center" prop="grantNumType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.pro_grant_num_type" :value="scope.row.grantNumType" />
        </template>
      </el-table-column>
      <el-table-column label="已发放数量" align="center" prop="grantNum" width="150"/>
      <el-table-column label="操作" width="150" align="center" class-name="small-padding fixed-width" fixed="right">
        <template v-slot="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)"
            v-hasPermi="['pro:materialRequest:view']">查看</el-button>
          <!-- <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click=" handleUpdate(scope.row)"
            v-hasPermi="['pro:materialRequest:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['pro:materialRequest:remove']"
          >删除</el-button> -->
        </template>
      </el-table-column>
      <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" :disabled="form.materialRequestId && optType != 'edit'"
        label-width="100px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="申请号" prop="applyNo">
              <el-input v-model="form.applyNo" placeholder="请输入申请号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="任务单号" prop="taskCode">
              <el-input v-model="form.taskCode" placeholder="请输入任务单号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="编排单号" prop="arrangeCode">
              <el-input v-model="form.arrangeCode" placeholder="请输入编排单号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="产品编号" prop="sapItemCode">
              <el-input v-model="form.sapItemCode" placeholder="请输入任务单号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品名称" prop="itemName">
              <el-input v-model="form.itemName" type="textarea" placeholder="请输入产品名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="申请数量" prop="applyNum">
              <el-input v-model="form.applyNum" placeholder="请输入申请数量" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="工作中心" prop="workstationCode">
              <el-input v-model="form.workstationCode" placeholder="请输入工作中心编码" />
              <el-input v-model="form.workstationName" type="textarea" placeholder="请输入工作中心名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工作单元" prop="workunitCode">
              <el-input v-model="form.workunitCode" placeholder="请输入工作单元编码" />
              <el-input v-model="form.workunitName" type="textarea" placeholder="请输入工作单元名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创建人" prop="createBy">
              <el-input v-model="form.createBy" placeholder="请输入创始人" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="申请时间" prop="createTime">
              <el-date-picker clearable v-model="form.createTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择申请时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="需求日期" prop="startTime">
              <el-date-picker clearable v-model="form.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择需求日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel" v-if="optType == 'view'">返回</el-button>
        <el-button type="primary" @click="submitForm" v-if="optType != 'view'">确 定</el-button>
        <el-button @click="cancel" v-if="optType != 'view'">取 消</el-button>
      </div>
    </el-dialog>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <div slot="footer" class="dialog-footer">
      <el-button @click="cancels">返 回</el-button>
    </div>
    </el-dialog>
  </template>

  <script>
  import {listMaterialRequest,getMaterialRequest } from "@/api/mes/pro/request";
  import WorkstationSelect from "@/components/workstationSelect/simpletableSingle.vue"
  export default {
    name: "ProtaskSelect",
    dicts: ['sys_yes_no','pro_grant_num_type'],
    components: {WorkstationSelect},
    props:{
      applyNos: {
        type: String,
        default: null
      },
    },
    watch: {
      applyNos:{
        handler(newVal, oldVal){
          this.$nextTick(() =>{
            if(this.applyNos !='' && this.applyNos!=null){
              this.queryParams.applyNo=this.applyNos;
              this.getList();
            }
          })
        },
        immediate: true,
        deep: true
      }
    },
    data() {
      return {
        showFlag: false,
        selectedTaskId: undefined,
        selectedRow: undefined,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 生产任务表格数据
        protaskList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
        pageSize: 10,
        applyNo:  null,
        itemId: null,
        itemName: null,
        taskId: null,
        taskCode: null,
        taskName: null,
        arrangeCode: null,
        createTime: null,
        applyNum: null,
        attr1: null,
        attr2: null,
        attr3: null,
        attr4: null,
        workorderCode: null,
        WorkunitName: null,
        workstationId: null,
        workstationCode: null,
        workstationName: null,
        materialType: null,
        confirm: null,
        windCase: null,
        createBy: null,
        grantNum: null,
        startTime: null,
        endTime: null,
        },
        // 表单参数
        form: {},
      };
    },
    created() {
      this.getList();
    },
    methods: {


 // 取消按钮
 cancel() {
      this.open = false;
      this.reset();
    },

      /** 查询生产任务列表 */
      getList() {
        this.loading = true;
        listMaterialRequest(this.queryParams).then(response => {
          this.protaskList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },

      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      getSummaries(param){
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 1) {
            sums[index] = '总数量'
          } else if (column.label === '领用数量') {
            const temp = data.reduce((prev, curr) => {
              return prev + Number(curr.applyNum);
            }, 0)
            sums[index] =  Number.isInteger(temp) ? temp : temp.toFixed(3);
          } else {
            sums[index] = ''
          }
        })
        return sums
      },
      handleCurrent(row){
        if(row){
            this.selectedRow = row;
          }
      },
      //行双击选中
      handleRowDbClick(row){
        if(row){
          console.log(row)
          this.selectedRow = row;
          this.$emit('onSelected',this.selectedRow);
          this.showFlag = false;
        }
      },
        //  查询明细按钮操作
    handleView(row) {
      this.reset();
      console.log( row.materialRequestId);
      const materialRequestId = row.materialRequestId;
      getMaterialRequest(materialRequestId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "查看领料申请";
        this.optType = "view";
      });
    },


           // 取消按钮
    cancels() {
      this.showFlag=false
      this.queryParams();
    },

      // 单选选中数据
      handleRowChange(row) {
        debugger;
        if(row){
          this.selectedRow = row;
        }
      },
      // 表单重置
    reset() {

this.form = {
  materialRequestId: null,
  applyNo: null,
  itemId: null,
  itemCode: null,
  itemName: null,
  taskId: null,
  taskCode: null,
  taskName: null,
  applyNum: null,
  arrangeCode: null,
  workorderCode: null,
  materialType: null,
  WorkunitName: null,
  workstationId: null,
  workstationCode: null,
  workstationName: null,
  createTime: null,
  remark: null,
  attr1: null,
  attr2: null,
  attr3: null,
  attr4: null,
  createBy: "admin",
  createTime: null,
  updateBy: null,
  updateTime: null,
  windCase: null,
  grantNum: null,
  startTime: null,
  endTime: null,
};

this.resetForm("form");
},

      //确定选中
      confirmSelect(){
          if(this.selectedTaskId ==null || this.selectedTaskId==0){
              this.$notify({
                  title:'提示',
                  type:'warning',
                  message: '请至少选择一条数据!'
              });
              return;
          }
          this.$emit('onSelected',this.selectedRow);
          this.showFlag = false;
      }
    }
  };
  </script>
