<template>
  <div class="app-container">
    <el-card style="margin-top: 2px">
      <el-descriptions title="任务详情" :column="5" border  style="margin-bottom: 20px">
  <el-descriptions-item label="任务编号">{{productionplan.number}}</el-descriptions-item>
  <el-descriptions-item label="产品名称" v-if="productionplan.product_">{{productionplan.product_.name}}</el-descriptions-item>
  <el-descriptions-item label="规格型号" v-if="productionplan.product_">{{productionplan.product_.specification}}</el-descriptions-item>
  <el-descriptions-item label="生产状态">{{state_[productionplan.state]}}</el-descriptions-item>
   <el-descriptions-item label="不合格品数量">不合格数没有</el-descriptions-item>
    <el-descriptions-item label="玻璃编号">{{wproductnumber}}</el-descriptions-item>
     <el-descriptions-item label="玻璃所在子工序">{{process}}</el-descriptions-item>
    
   
</el-descriptions>

      <el-table
        :data="recordList.results"
        border
        fit
        stripe
        style="width: 100%"
        height="300"
      >
        <el-table-column type="index" width="50" />
        <el-table-column label="表单名称">
          <template slot-scope="scope">{{ scope.row.form_.name }}</template>
        </el-table-column>
        <el-table-column label="检查类型">
          <template slot-scope="scope">{{
            checkTypes[scope.row.type]
          }}</template>
        </el-table-column>
        <el-table-column label="是否提交">
          <template slot-scope="scope">
            <span v-if="scope.row.is_submited">已提交</span>
            <span v-else>未提交</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-link @click="handleRecordDetail(scope)">查看 </el-link>
          </template>
        </el-table-column>
      </el-table>

      <!--非检查表显示-->
      <el-dialog
        width="60%"
        :title="formName"
        :visible.sync="recordVisible"
        :close-on-click-modal="false"
        @close="recordCancel"
      >
        <customForm
          v-if="recordVisible"
          :results="fieldList"
          :hasPicture="hasPicture"
          :formID="recordform"
          :wproduct="wproduct"
          :recordId="recordId"
          :isDisabled="isDisabled"
          @recordSubmit="recordSubmit"
          @recordSave="recordSave"
          @recordCancel="recordCancel"
        />
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import checkPermission from "@/utils/permission";
import { getProductionplan,getsubproductionplanList } from "@/api/pm";
import { getMaterialList, getrecordformList, getrffieldList } from "@/api/mtm";
import customForm from "@/components/customForm/index";
import { getTestRecord ,getTestRecordItem} from "@/api/qm";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination

export default {
  components: { Pagination, customForm },
  data() {
    return {
      recordList: "",
      checkTypes: {
        10: "子工序检验",
        20: "工序检验",
        30: "工序复检",
        36: "夹层检验",
        40: "成品检验",
      },
       state_:{
        10:'制定中',
        20:'已下达',
        30:'已接受',
        40:'生产中',
        50:'已完成',
         60:'军检完成'},
      recordVisible: false,
      customfieldList: [],
      recordform: null,
      recordId: null,
      fifo_detail: "",
      formName: "项目检查表",
      hasPicture: false,
      fieldList: [],
      isDisabled: false,
       productionplan:{
       number:""
     },
     wproductnumber:null,
     process:null,
    };
  },
  computed: {},
  watch: {},
  created() {
    this.id = this.$route.params.id;
     this.productionplanid = this.$route.params.productionplanid;
     this.wproductnumber=this.$route.params.number;
     this.process=this.$route.params.process;
    
      this.getListp();
    this.getList();
   
  },
  methods: {
    checkPermission,
  getListp() {
      
      getProductionplan(this.productionplanid).then((response) => {
        if (response.data) {
          this.productionplan = response.data;
        }
      });
    },
    getList() {
      getTestRecord({ wproduct: this.id }).then((res) => {
        if (res.code == 200) {
          this.recordList = res.data;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //点击记录里的查看
    handleRecordDetail(scope) {
      let that = this;
      that.recordVisible = false;
      that.recordId = scope.row.id;
      that.recordform = scope.row.form;
      that.formName = scope.row.form_.name;
      getrffieldList({ form: this.recordform, page: 1, page_size: 100 }).then(
        (response) => {
          if (response.data) {
            that.hasPicture = false;
            let fieldList = response.data.results;
            that.fieldList = [...fieldList];
            let arr = fieldList.filter((item) => {
              return item.field_type === "draw";
            });
            if (arr.length > 0) {
              that.hasPicture = true;
            }
            getTestRecordItem(scope.row.id).then((res) => {
              let arr = [];
              let fieldList = res.data.record_data;
              for (let i = 0; i < that.fieldList.length; i++) {
                let obj = that.fieldList[i];
                obj.is_testok = null;
                for (let j = 0; j < fieldList.length; j++) {
                  if (that.fieldList[i].field_key === fieldList[j].field_key) {
                    obj.id = fieldList[j].id;
                    obj.is_testok = fieldList[j].is_testok;
                    obj.field_value = fieldList[j].field_value;
                  }
                }
                arr.push(obj);
              }
              that.fieldList = arr;
              that.$nextTick(() => {
                that.isDisabled = true;
                that.recordVisible = true;
              });
            });
          }
        }
      );
    },
  },
};
</script>
