<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                 label-width="100px">
            <el-form-item label="检验类型" prop="typeCode">
              <el-select
                v-model="queryParams.typeCode"
                clearable
                placeholder="请选择检验类型"
                @change="getCheckTypeList"
              >
                <el-option
                  v-for="dict in dict.type.check_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="检验节点" prop="checkType">
              <el-select
                v-model="queryParams.checkType"
                clearable
                placeholder="检验节点"
              >
                <el-option
                  v-for="dict in checkTypeList"
                  :key="dict.checkType"
                  :label="dict.checkName"
                  :value="dict.checkType"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="CPK品类编码" prop="materialCode">
                <el-input
                        v-model="queryParams.materialCode"
                        placeholder="请输入物料号"
                        clearable
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="CPK品类名称" prop="materialName">
                <el-input
                        v-model="queryParams.materialName"
                        placeholder="请输入物料名称"
                        clearable
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="检测项" prop="ruleName">
                <el-input
                        v-model="queryParams.ruleName"
                        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-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                        type="primary"
                        plain
                        icon="el-icon-plus"
                        size="mini"
                        @click="handleAdd"
                        v-hasPermi="['quality:cpkUpDowConfig:add']"
                >新增
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                        type="success"
                        plain
                        icon="el-icon-edit"
                        size="mini"
                        :disabled="single"
                        @click="handleUpdate"
                        v-hasPermi="['quality:cpkUpDowConfig:edit']"
                >修改
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                        type="danger"
                        plain
                        icon="el-icon-delete"
                        size="mini"
                        :disabled="multiple"
                        @click="handleDelete"
                        v-hasPermi="['quality:cpkUpDowConfig:remove']"
                >删除
                </el-button>
            </el-col>
            <!--
            <el-col :span="1.5">
                <el-button
                  type="primary"
                  plain
                  icon="el-icon-upload2"
                  size="mini"
                  @click="handleImport"
                  v-hasPermi="['mes:mesLine:export']"
                >导入
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
            </el-col>-->
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="updownList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column label="CPK品类编码" width="150" align="center" prop="materialCode"/>
            <el-table-column label="CPK品类名称" align="center" prop="materialName"/>
            <el-table-column label="检验类型" width="140" align="center" prop="typeCode">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.check_type" :value="scope.row.typeCode"/>
              </template>
            </el-table-column>  
            <el-table-column label="检验节点" width="140" align="center" prop="checkType"/>
            <el-table-column label="检测项编码" width="140" align="center" prop="ruleCode"/>
            <el-table-column label="检测项名称" width="140" align="center" prop="ruleName"/>
            <el-table-column label="上限" width="120" align="center" prop="upVal"/>
            <el-table-column label="下限" width="120" align="center" prop="downVal"/>
            <el-table-column label="创建时间" width="150" align="center" prop="createTime"/>
        </el-table>

        <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
        />

        <!-- 添加或修改物料CPK上下限维护对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="130px">
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="检验类型" prop="typeCode">
                    <el-select
                      v-model="form.typeCode"
                      clearable 
                      style="width:100%"
                      placeholder="请选择检验类型"
                      @change="getCheckTypeList"
                    >
                      <el-option
                        v-for="dict in dict.type.check_type"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      ></el-option>
                    </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="检验类型" prop="checkType">
                  <el-select
                    v-model="form.checkType"
                    clearable
                    style="width:100%"
                    placeholder="检验节点"
                    @change="getProjectListFunc"
                  >
                    <el-option
                      v-for="dict in checkTypeList"
                      :key="dict.checkType"
                      :label="dict.checkName"
                      :value="dict.checkType"
                    ></el-option>
                  </el-select>
                </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="CPK品类编码" prop="materialCode">
                  <!--
                      <el-input v-model="form.materialCode" placeholder="请输入物料号">
                      <el-button slot="append" @click="handleSelectProduct" icon="el-icon-search"></el-button>
                      </el-input>
                  -->
                    <el-select
                      v-model="form.materialCode"
                      placeholder="请选择CPK品类"
                      style="width:100%"
                    >
                      <el-option
                        v-for="dict in dict.type.qms_category"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      ></el-option>
                    </el-select>    
                  </el-form-item>
                </el-col>
                <!--
                <el-col :span="12">
                  <el-form-item label="CPK品类名称" prop="materialName">
                      <el-input v-model="form.materialName" placeholder="请输入物料名称" disabled/>
                  </el-form-item>
                </el-col>-->
                <el-col :span="12">
                  <el-form-item label="选择检测项" prop="ruleCode">
                      <el-select
                        v-model="form.ruleCode"
                        clearable
                        style="width:100%"
                        placeholder="检验节点"
                        filterable
                         @change="getProjectNameFunc"
                      >
                        <el-option
                        v-for="item in projectNoOptions"
                        :key="item.recordId"
                        :label="item.ruleName"
                        :value="item.recordId"
                        ></el-option>
                      </el-select>
                  </el-form-item>
                  
                </el-col>
                <el-col :span="12">
                  <el-form-item label="检测项名称" prop="ruleName" >
                      <el-input v-model="form.ruleName" placeholder="请输入物料名称" disabled/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="上限" prop="upVal">
                      <el-input v-model="form.upVal" type="number" placeholder="请输入上限" min="0"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="下限" prop="downVal">
                      <el-input v-model="form.downVal" type="number" placeholder="请输入下限" min="0"/>
                  </el-form-item>
                </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
            <ItemSelectMaterial
            ref="itemSelectMaterial"
            @onSelected="onSelectMaterial"
          ></ItemSelectMaterial>

    </div>
</template>

<script>
import {listCpkUpdown,getCpkUpdown, delCpkUpdown,addCpkUpdown,updateCpkUpdown } from "@/api/quality/cpkUpdown";
import ItemSelectMaterial from "@/views/quality/cpkUpDowConfig/selectMaterial";
import {getCheckTypeList,getProjectOptionList} from "@/api/quality/qcTable";
    export default {
        name: "Updown",
        dicts: ["check_type","qms_category"],
        components: {ItemSelectMaterial},
        data() {
            return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            checkTypeList: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 物料CPK上下限维护表格数据
            updownList: [],
            projectNoOptions: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                typeCode: null,
                checkType: null,
                factoryCode: null,
                materialCode: null,
                materialName: null,
                upVal: null,
                downVal: null
            },
            // 表单参数
            form: {downVal:0,upVal:0},
            // 表单校验
            rules: {
              typeCode: [{ required: true, message: "检验类型", trigger: "blur" }],
              checkType: [{ required: true, message: "检验节点", trigger: "blur" }],
              materialCode: [{ required: true, message: "CPK品类名称", trigger: "blur" }],
              ruleName: [{ required: true, message: "检测项名称", trigger: "blur" }],
            }
          };
        },
        created() {
            this.getList();
        },
        methods: {
          /** 查询物料CPK上下限维护列表 */
          getList() {
              this.loading = true;
              listCpkUpdown(this.queryParams).then(response => {
                  this.updownList = response.rows;
                  this.total = response.total;
                  this.loading = false;
              });
          },
          // 取消按钮
          cancel() {
              this.open = false;
              this.reset();
          },
          // 表单重置
          reset() {
              this.form = {
                id: null,
                typeCode: null,
                checkType: null,
                createBy: null,
                createTime: null,
                updateBy: null,
                updateTime: null,
                factoryCode: null,
                delFlag: null,
                materialCode: null,
                materialName: null,
                upVal: null,
                downVal: null
              };
              this.resetForm("form");
          },
          /** 搜索按钮操作 */
          handleQuery() {
              this.queryParams.pageNum = 1;
              this.getList();
          },
          /** 重置按钮操作 */
          resetQuery() {
              this.resetForm("queryForm");
              this.handleQuery();
          },
          // 多选框选中数据
          handleSelectionChange(selection) {
              this.ids = selection.map(item => item.id)
              this.single = selection.length !== 1
              this.multiple = !selection.length
          },
          /** 新增按钮操作 */
          handleAdd() {
              this.reset();
              this.open = true;
              this.title = "添加物料CPK上下限维护";
          },
          /** 修改按钮操作 */
          handleUpdate(row) {
              this.reset();
              const id =
              row.id || this.ids
              getCpkUpdown(id).then(response => {
                  this.form = response.data;
                  this.open = true;
                  this.title = "修改物料CPK上下限维护";
         
                  this.getCheckTypeList(this.form.typeCode);

                  this.getProjectListFunc(this.form.checkType)
              });
          },
          /** 提交按钮 */
          submitForm() { 
            this.$refs["form"].validate(valid => {
              if (valid) {

                let options0 = this.dict.type.qms_category;
                const selectedOptionObj = options0.find(option => option.value === this.form.materialCode);  
                this.form.materialName = selectedOptionObj ? selectedOptionObj.label : '';

                if (this.form.id != null) {
                  updateCpkUpdown(this.form).then(response => {
                    this.$modal.msgSuccess("修改成功");
                    this.open = false;
                    this.getList();
                  });
                } else {
                  addCpkUpdown(this.form).then(response => {
                    this.$modal.msgSuccess("新增成功");
                    this.open = false;
                    this.getList();
                  });
                }
              }
			      })
          },
          /** 删除按钮操作 */
          handleDelete(row) {
            const ids = row.id || this.ids;
            this.$modal.confirm('是否确认删除数据项？').then(function() {
              return delCpkUpdown(ids);
            }).then(() => {
              this.getList();
              this.$modal.msgSuccess("删除成功");
            }).catch(() => {});
          },
          		/** 导出按钮操作 */
        handleExport() {
          this.download('quality/cpkUpdown/export', {
            ...this.queryParams
          }, `cpkUpDow_${new Date().getTime()}.xlsx`)
        },
        getCheckTypeList(val) {
          getCheckTypeList(val).then((response) => {
            this.checkTypeList = response;
          });
        },
            //产品编码格式化
        productCodeFormate(row, column, cellValue) {
          if (cellValue != null) {
            return cellValue.slice(7, 18); //返回值
          }
        },
        //物料选择
        handleSelectProduct(val) {
          //this.$refs.itemSelectMaterial.showFlag = true;
          let options0 = this.dict.type.qms_category;
          const selectedOptionObj = options0.find(option => option.value === val);  
          this.form.materialName = selectedOptionObj ? selectedOptionObj.label : '';
        },
        //物料选择确认
        onSelectMaterial(obj) {
          this.form.materialName = obj[0].productName;
          this.form.materialCode = obj[0].productCode;
        },
        //获取定量检测项
        getProjectListFunc(val) {
          getProjectOptionList(val).then((response) => {
            this.projectNoOptions = response;
          });
        },
        getProjectNameFunc(value){
          const selectedOption = this.projectNoOptions.find(option => option.recordId === value);  
          if (selectedOption) {  
            this.form.ruleName = selectedOption.ruleName;
          }  
        }
	}
};
</script>
