<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="workorderCode">
        <el-input
          v-model="queryParams.workorderCode"
          placeholder="请输入工单号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="退料数量" prop="backNum">
        <el-input
          v-model="queryParams.backNum"
          placeholder="请输入退料数量"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="批次号" prop="batchNo">
        <el-input
          v-model="queryParams.batchNo"
          placeholder="请输入批次号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="卷号" prop="packNo">
        <el-input
          v-model="queryParams.packNo"
          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 @selection-change="handleSelectionChange">
      <el-table-column label="产品编码" align="center" prop="sapItemCode" />
      <el-table-column label="产品名称" align="center" prop="itemName" />
      <el-table-column label="单位" align="center" prop="unitOfMeasure" />
      <el-table-column label="申请单号" align="center" prop="applyNo" />
      <el-table-column label="生产工单" align="center" prop="workorderCode"/>
      <el-table-column label="批次号" align="center" prop="batchNo" />
      <el-table-column label="卷号" align="center" prop="packNo" />
      <el-table-column label="是否副产品" align="center" prop="coproduct" >
      <template slot-scope="scope">
          <dict-tag
            :options="dict.type.sys_yes_no"
            :value="scope.row.coproduct"
          />
        </template>
      </el-table-column>
      <el-table-column label="申请退料数量" align="center" prop="backNum" />
      <el-table-column label="已退料数量" align="center" prop="returnNum" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
        <template slot-scope="scope">
           <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleView(scope.row)"
            v-hasPermi="['pro:materialReturn:view']"
          >查看</el-button>
          <!-- <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['pro:materialReturn:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['pro:materialReturn:remove']"
          >删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>



      <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="workorderCode">
              <el-input v-model="form.workorderCode" 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" placeholder="请输入产品名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="申请数量" prop="backNum">
              <el-input v-model="form.backNum" placeholder="请输入申请数量" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="工作单元" prop="workunitName">
              <el-input v-model="form.workunitName" 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 >
            <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-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>

      <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 WorkstationSelect from "@/components/workstationSelect/simpletableSingle.vue"
  import { listMaterialReturn, getMaterialReturn } from "@/api/mes/pro/return";
  export default {
    name: "ProtaskSelect",
    dicts: ['sys_yes_no','pro_grant_num_type'],
    components: {WorkstationSelect},
    props:{
      applyNos: {
        type: String,
        default: null
      },
    },
    watch: {
      showFlag(newVal, oldVal) {
        console.log(newVal, oldVal)
        if(newVal) {
          this.$nextTick(() =>{
              this.queryParams.applyNo = this.applyNos ? this.applyNos : "";
              this.getList();
          })
        }
      }
    },
    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,
        taskId: null,
        itemCode: null,
        itemName: null,
        createBy: null,
        createTime: null,
        issueLineId: null,
        workOrderId: null,
        workorderCode: null,
        isQualified: null,
        returnNum: null,
        windCase: null,
        backNum: null,
        arrangeCode: null,
        batchNo: null,
        packNo: null,
        attr1: null,
        attr2: null,
        attr3: null,
        attr4: null,
        },
        // 表单参数
        form: {},
        rules: {},
        optType: ""
      };
    },
    created() {
      this.getList();
    },
    methods: {
      handleSelectionChange() {},
      submitForm() {},

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

      /** 查询生产任务列表 */
      getList() {
        this.loading = true;
        listMaterialReturn(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();
      },

      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;
        }
      },
      getSummaries(param){
        const { columns, data } = param
        console.log(data);
        const sums = []
        columns.forEach((column, index) => {
          if (index === 1) {
            sums[index] = '总数量'
          } else if (column.label === '申请退料数量') {
            sums[index] = data.reduce((prev, curr) => {
              return prev + Number(curr.backNum);
            }, 0);
          } else if (column.label === '已退料数量') {
            sums[index] = data.reduce((prev, curr) => {
              return prev + Number(curr.returnNum);
            }, 0);
          } else {
            sums[index] = ''
          }
        })
        return sums
      },
        //  查询明细按钮操作
    handleView(row) {
      this.reset();
      console.log( row.materialReturnId);
      const materialReturnId = row.materialReturnId;
      getMaterialReturn(materialReturnId).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 = {
  materialReturnId: null,
        applyNo: null,
        itemId: null,
        taskId: null,
        issueLineId: null,
        workOrderId: null,
        workorderCode: null,
        backNum: null,
        itemCode: null,
        itemName: null,
        createBy: null,
        createTime: null,
        isQualified: null,
        batchNo: null,
        packNo: null,
        remark: null,
        attr1: null,
        attr2: null,
        attr3: null,
        attr4: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        returnNum: null,
        arrangeCode: null,
        windCase: 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>
