<template>
  <transition name="el-zoom-in-center">
    <div class="JNPF-preview-main">
      <Detail v-if="detailVisible" ref="Detail" @close="detailVisible = false" />
      <div class="JNPF-common-page-header">
        <el-page-header @back="goBack" content="详情" />
        <div class="options">
          <el-button @click="goBack">取 消</el-button>
        </div>
      </div>
      <el-row :gutter="15" class="main" :style="{ margin: '0 auto', width: '100%' }">
        <el-form ref="formRef" :model="dataForm" size="small" label-width="150px" label-position="right">
          <template v-if="!loading">
            <el-col :span="12">
              <jnpf-form-tip-item label="供应商" prop="supplierId">
                <p>{{ dataForm.supplierId }}</p>
              </jnpf-form-tip-item>
            </el-col>
            <el-col :span="12">
              <jnpf-form-tip-item label="物料编码" prop="materialCode">
                <p>{{ dataForm.materialCode }}</p>
              </jnpf-form-tip-item>
            </el-col>
            <el-col :span="12">
              <jnpf-form-tip-item label="规格">
                <p>{{ dataForm.materialCode_device_code }}</p>
              </jnpf-form-tip-item>
            </el-col>
            <el-col :span="12">
              <jnpf-form-tip-item label="生产日期（批号）" prop="productLot">
                <JnpfInput v-model="dataForm.productLot" placeholder="请输入" disabled detailed clearable :style="{ width: '100%' }"> </JnpfInput>
              </jnpf-form-tip-item>
            </el-col>
            <el-col :span="12">
              <jnpf-form-tip-item label="到货日期" prop="recieveDate">
                <p>{{ dataForm.recieveDate }}</p>
              </jnpf-form-tip-item>
            </el-col>
            <el-col :span="12">
              <jnpf-form-tip-item label="检验日期" prop="checkDate">
                <p>{{ dataForm.checkDate }}</p>
              </jnpf-form-tip-item>
            </el-col>
            <el-col :span="12">
              <jnpf-form-tip-item label="到货数量(kg)" prop="recieveKg">
                <JnpfNumber v-model="dataForm.recieveKg" placeholder="数字文本" disabled :step="10"> </JnpfNumber>
              </jnpf-form-tip-item>
            </el-col>
            <el-col :span="12">
              <jnpf-form-tip-item label="到货数量(件)" prop="recievePiece">
                <JnpfNumber v-model="dataForm.recievePiece" placeholder="数字文本" disabled :step="10"> </JnpfNumber>
              </jnpf-form-tip-item>
            </el-col>
            <el-col :span="12">
              <jnpf-form-tip-item label="抽检数量(件)" prop="sampleQty">
                <JnpfNumber v-model="dataForm.sampleQty" placeholder="数字文本" disabled :step="10"> </JnpfNumber>
              </jnpf-form-tip-item>
            </el-col>
            <el-col :span="12">
              <jnpf-form-tip-item label="检验结果" prop="checkResult">
                <p>{{ dataForm.checkResult }}</p>
              </jnpf-form-tip-item>
            </el-col>
            <el-col :span="12">
              <jnpf-form-tip-item label="处理结果" prop="processResult">
                <p>{{ dataForm.processResult }}</p>
              </jnpf-form-tip-item>
            </el-col>
            <el-col :span="12">
              <jnpf-form-tip-item label="问题原因" prop="problemReason">
                <p>{{ dataForm.problemReason }}</p>
              </jnpf-form-tip-item>
            </el-col>
            <el-col :span="12">
              <jnpf-form-tip-item label="备注" prop="remark">
                <p>{{ dataForm.remark }}</p>
              </jnpf-form-tip-item>
            </el-col>
            <el-col :span="24">
              <jnpf-form-tip-item label-width="0">
                <div class="JNPF-common-title">
                  <h2>检验数据明细</h2>
                </div>
                <el-table :data="dataForm.tableField120" size="mini">
                  <el-table-column type="index" width="50" label="序号" align="center" fixed="left" />
                  <el-table-column prop="avgValue" label="平均值" align="" fixed="${config.tableFixed}">
                    <template slot-scope="scope">
                      <JnpfNumber v-model="scope.row.avgValue" placeholder="数字文本" disabled :step="1"> </JnpfNumber>
                    </template>
                  </el-table-column>
                  <el-table-column prop="remark" label="备注" align="" fixed="${config.tableFixed}">
                    <template slot-scope="scope">
                      <JnpfInput v-model="scope.row.remark" placeholder="请输入" disabled detailed clearable :style="{ width: '100%' }"> </JnpfInput>
                    </template>
                  </el-table-column>
                  <el-table-column prop="checkResult" label="判定结果" align="" fixed="${config.tableFixed}">
                    <template slot-scope="scope">
                      <p>{{ scope.row.checkResult }}</p>
                    </template>
                  </el-table-column>
                </el-table>
              </jnpf-form-tip-item>
            </el-col>
            <el-col :span="24">
              <jnpf-form-tip-item label-width="0">
                <div class="JNPF-common-title">
                  <h2>样品数据</h2>
                </div>
                <el-table :data="dataForm.tableField126" size="mini">
                  <el-table-column type="index" width="50" label="序号" align="center" fixed="left" />
                  <el-table-column prop="actValue" label="实际的检验值" align="" fixed="${config.tableFixed}">
                    <template slot-scope="scope">
                      <JnpfNumber v-model="scope.row.actValue" placeholder="数字文本" disabled :step="1"> </JnpfNumber>
                    </template>
                  </el-table-column>
                </el-table>
              </jnpf-form-tip-item>
            </el-col>
          </template>
        </el-form>
      </el-row>
    </div>
  </transition>
</template>
<script>
  import request from '@/utils/request';

  import { getConfigData } from '@/api/onlineDev/visualDev';
  import jnpf from '@/utils/jnpf';
  import Detail from '@/views/basic/dynamicModel/list/detail';
  import { thousandsFormat } from '@/components/Generator/utils/index';
  export default {
    components: { Detail },
    props: [],
    data() {
      return {
        visible: false,
        detailVisible: false,
        loading: false,

        //掩码配置
        maskConfig: {
          productLot: {},
          qa_material_check_data_twremark: {},
        },
        //定位属性
        locationScope: {},

        dataForm: {},
        checkResultOptions: [
          { fullName: '合格', id: '1' },
          { fullName: '不合格', id: '0' },
        ],
        checkResultProps: { label: 'fullName', value: 'id' },

        checkResultOptions: [
          { fullName: '合格', id: '1' },
          { fullName: '不合格', id: '0' },
        ],
        checkResultProps: { label: 'fullName', value: 'id' },
      };
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
      toDetail(defaultValue, modelId) {
        if (!defaultValue) return;
        getConfigData(modelId).then(res => {
          if (!res.data || !res.data.formData) return;
          let formData = JSON.parse(res.data.formData);
          formData.popupType = 'general';
          this.detailVisible = true;
          this.$nextTick(() => {
            this.$refs.Detail.init(formData, modelId, defaultValue);
          });
        });
      },
      dataInfo(dataAll) {
        let _dataAll = dataAll;
        this.dataForm = _dataAll;
      },

      goBack() {
        this.$emit('refresh');
      },
      init(id) {
        this.dataForm.id = id || 0;
        this.visible = true;
        this.$nextTick(() => {
          if (this.dataForm.id) {
            this.loading = true;
            request({
              url: '/api/example/Qa_material_check_data/detail/' + this.dataForm.id,
              method: 'get',
            }).then(res => {
              this.dataInfo(res.data);
              this.loading = false;
            });
          }
        });
      },
    },
  };
</script>
