<template>
  <div>
      <el-dialog title="检验报告确认"
        v-if="showFlag"
        :visible.sync="showFlag"
        :modal= false
        width="1000px"
      >
      <el-tabs v-model="activeName0">
    			<el-tab-pane label="检验任务" name="first">
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="检验任务编号" prop="checkNo">
                    <el-input v-model="form.checkNo" placeholder="请输入检验任务编号" disabled/>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="检验类型" prop="checkType" >
                    <el-select v-model="form.checkType" placeholder="请选择检验类型" style="width: 100%;" disabled>
                      <el-option
                        v-for="dict in checkTypes"
                        :key="dict.id"
                        :label="dict.checkName"
                        :value="dict.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="订单号" prop="orderNo">
                    <el-input v-model="form.orderNo" placeholder="请输入检验任务编号" disabled/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                    <el-form-item label="产品名称" prop="materialName">
                      <el-input v-model="form.materialName"/>
                    </el-form-item>
                    
                </el-col>

                <el-col :span="8">
                  <el-form-item label="产品号" prop="materialCode">
                    <el-input v-model="form.materialCode"/>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="生产数量" prop="quality">
                    <el-input type="number" v-model="form.quality" placeholder="请输入生产数量" disabled/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                  <el-col :span="8">
                  <el-form-item label="生产时间" prop="incomeTime">
                    <el-date-picker clearable
                      v-model="form.incomeTime"
                      type="datetime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      placeholder="请选择生产时间" disabled>
                    </el-date-picker>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="单位" prop="unit" >
                    <el-select v-model="form.unit" placeholder="请选择单位" style="width: 100%;">
                      <el-option
                        v-for="dict in dict.type.unit"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="批次号" prop="incomeBatchNo">
                    <el-input v-model="form.ordincomeBatchNoerNo" placeholder="请输入检验任务编号"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="抽样数量" prop="sampleQuality">
                    <el-input type="number" v-model="form.sampleQuality" placeholder="请输入抽样数量" disabled/>
                  </el-form-item>
                </el-col>
                <el-col :span="6" v-for="(item,index) in defects" :key="index">
                  <el-form-item :label="item.defectSubclass" prop="">
                    <el-input type="number" v-model="item.noOkQuality" placeholder="请输入不合格数量" disabled/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="车间名称" prop="supplierName" >
                    <el-input v-model="form.supplierName" placeholder="请输入所属车间名称" disabled>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="车间编码" prop="supplierCode">
                    <el-input v-model="form.supplierCode" placeholder="请输入所属车间编码" disabled/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="检测人姓名" prop="checkManName">
                    <el-input v-model="form.checkManName" placeholder="请选择检测人姓名">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="检测人工号" prop="checkManCode" >
                    <el-input v-model="form.checkManCode" placeholder="请输入检测人工号"/>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="检测地点" prop="checkLoc">
                    <el-input v-model="form.checkLoc" placeholder="请输入检测地点" disabled/>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="检测结果" prop="checkResult">
                    <el-input v-model="form.checkResult"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="16">
                  <el-form-item label="检验原因" prop="reason">
                    <el-input v-model="form.reason" placeholder="请选择检验原因" disabled/>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="生产类型" prop="productType" > 
                    <el-input v-model="form.productType" placeholder="请输入生产类型" disabled/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-divider></el-divider>
              <el-row>
                <el-col :span="5">
                  <el-form-item label="审核主管" prop="confirmManName">
                    <el-input v-model="form.confirmManName" disabled>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="审核主管工号" prop="confirmManCode" >
                    <el-input v-model="form.confirmManCode" disabled/>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="确认" prop="confirm" >
                    <el-radio v-model="form.confirm" label="1">YES</el-radio>
                    <el-radio v-model="form.confirm" label="0">NO</el-radio>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="确认时间" prop="confirmTime" >
                    <el-input v-model="form.confirmTime" disabled/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="审核意见" prop="confirmRemark">
                    <el-input type="textarea" v-model="form.confirmRemark" placeholder="请输入审核意见" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item style="aling:right">
                      <el-button type="primary" @click="submitConfirmFunc" v-show="form.confirmTime == null && form.myself">审 核</el-button>
                      <el-button @click="cancelForm">取 消</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="检测项明细" name="second">
            <el-table v-loading="loading" :data="itemList" ref="myTable" >
                <el-table-column width="50" align="center" type="selection">
                </el-table-column>
                <!-- 序号 -->
                <el-table-column label="检测规则Id"  align="left" prop="recordId"  v-if="false"/>
                <el-table-column label="检测规则编码"  align="left" prop="projectNo"  width="120"/>
                <el-table-column label="检验规则名称"  align="left" prop="ruleName" width="300"/>
                <el-table-column label="检验规则属性"  align="left" prop="propertyCode"  width="120" >
                  <template slot-scope="scope">
                    <dict-tag
                      :options="dict.type.qc_rule_prop"
                      :value="scope.row.propertyCode"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="测量值"  align="left"  prop="actualValue"  width="120"/>
                <el-table-column label="检测结果" key="status" align="center" prop="status" width="90"/>
                <el-table-column label="不良描述"  align="left"  prop="remark"  width="120"/>
                <el-table-column label="附件" align="center" prop="files" width="200">
                  <template slot-scope="scope">
                      <el-image v-for="(item,index) in scope.row.files" 
                    :src="item.fileAddress" 
                    style="width: 100px; height: 100px" 
                    :preview-src-list="scope.row.fileUrls"
                    :fit="fit" />
                  </template>
                </el-table-column>
              </el-table>

              <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
              />
          </el-tab-pane>
        </el-tabs> 
      </el-dialog>
    </div>
</template>
<script>

import { getCkeckProjectList} from "@/api/quality/income";
import { getCheckTypes} from "@/api/quality/qcProduce";
import { getTaskInfo,submitConfirm} from "@/api/quality/produceReport";
import { getDefectTypeListByDefectType } from "@/api/quality/defectType";
import { } from "@/api/quality/produceReport";
export default {
  name: "itemSelectUser",
  dicts: ["check_result","qc_rule_prop","unit"],
  data() {
    return {
      viewStatus : '0',
      showFlag : false,
      // 选中数组
      selectedRows: {},
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // BOM产品表格数据
      itemList: null,
     checkTypes:[],
     defects:[],
      //树名称
      bomCode: undefined,
      defaultProps: {
        id: "id",
        label: "label"
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        belongTo:''
        //,userCode: '',
        //userName : ''
      },
      data:{},
      dynamicValidateForm: {
          domains: [{
            value: ''
          }]
      },
      // 是否显示弹出层
			valueOpen: false,
      //检测详情的id
      recordId:'',
      typeCode:'',//检测类型
      defectList:[],//不良名称
      activeName0: 'first',
      // 表单参数
			form: {},
      rules: {
				confirmRemark:[
					{ required: true, message: "确认意见不能为空", trigger: "blur" }
				],
        confirm:[
					{ required: true, message: "确认不能为空", trigger: "blur" }
				]
      }
    };
  },
  created() {
    this.handleDefectType();
    this.getCheckTypes();
  },
  methods: {
    init(rowdata){
      this.data=rowdata;
      this.queryParams.belongTo = this.data.recordId;
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;

      this.getTaskInfoFunc();
      this.getList();
    },

		//获取检验节点
		getCheckTypes() {
        getCheckTypes('produce').then(response => {
          this.checkTypes = response;
        });
		},
    handleDefectType() {
			const defectType = "produce";
			getDefectTypeListByDefectType(defectType).then(response => {
				this.defects = response.rows;
			});
		},
    /** 查询任务表单*/
    getTaskInfoFunc() {
      this.reset();
      getTaskInfo(this.data).then(data => {
          this.form = data;
      });
    },

    /** 查询表格列表*/
    getList() {
      this.loading = true;
      getCkeckProjectList(this.queryParams).then(response => {
          this.itemList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    //提交检测结果确认
    submitConfirmFunc() {
      let confirmVal = 1;
      if(this.form.confirm != null){
        confirmVal = this.form.confirm;
      }
      submitConfirm(
        this.data.recordId,
        this.data.orderNo,
        this.data.checkType,
        this.form.confirmRemark,
        confirmVal
      ).then(response => {
          this.$modal.msgSuccess("检测完成");
          this.$emit('saveCheck');
          this.showFlag = false;
      });
    },

    //取消
    cancelForm() {
       this.showFlag = false;
    },
// 表单重置
		reset() {
			this.form = {
				recordId: null,
				checkNo: null,
				incomeBatchNo: null,
				orderNo: null,
				materialCode: null,
				materialName: null,
				quality: null,
				unit: null,
				supplierCode: null,
				supplierName: null,
				incomeTime: null,
				checkLoc: null,
				checkStatus: null,
				checkManCode: null,
				checkManName: null,
				checkTime: null,
				checkResult: null,
				status: null,
				attr1: null,
				attr2: null,
				attr3: null,
				attr4: null,
				createBy: null,
				createTime: null,
				updateBy: null,
				updateTime: null,
				factoryCode: null,
				delFlag: null,
				//defects: [],
        confirmManCode:null,
        confirmManName:null,
        confirmRemark:null
			};
			this.resetForm("form");
		}
  }
};
</script>
<style>
.el-dialog__body {
  padding: 2px 20px;
}
</style>