<template>
  <div class="app-container">
    <el-card style="margin-top: 2px">
      <el-descriptions title="任务详情" :column="4" 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="生产数量">{{productionplan.count}}</el-descriptions-item>
  <el-descriptions-item label="生产状态">{{state_[productionplan.state]}}</el-descriptions-item>
    <el-descriptions-item label="计划开工时间">{{productionplan.start_date}}</el-descriptions-item>
      <el-descriptions-item label="计划完工时间">{{productionplan.end_date}}</el-descriptions-item>
</el-descriptions>
     
    
        <el-table
                :data="wproduct"
                border
                fit
                stripe
                style="width: 100%"
               height="500"
              >
               
                <el-table-column type="index" label="序号" width="50" />
              

                <el-table-column label="玻璃编号/产品编号" >
                  <template slot-scope="scope" >{{ scope.row.number }}</template>
                </el-table-column>
                
                  <el-table-column label="所在子工序">
                  <template slot-scope="scope"  >{{
                    scope.row.step_.name
                  }}</template>
                </el-table-column>
                  <el-table-column label="产品状态" >
                  <template slot-scope="scope">{{
                    actstate_[scope.row.act_state]
                  }}</template>
                </el-table-column>
                 <el-table-column label="生产状态">
                  <template slot-scope="scope"  >{{
                    scope.row.step_.name
                  }}</template>
                </el-table-column>
                  <el-table-column label="最后检验结果">
                  <template slot-scope="scope"  >
                    <el-span v-if="scope.row.last_test_result==false">不合格</el-span>
            <el-span v-if="scope.row.last_test_result==true">合格</el-span>
                    
                  </template>
                </el-table-column>
                 <el-table-column label="生产记录">
                  <template slot-scope="scope"  >
                     <el-button @click="select(scope)">查看</el-button>
                  </template>
                </el-table-column>
               <el-table-column
          align="center"
          label="操作"
          width="220px"
        >
          <template slot-scope="scope">
          
            <el-link
              v-if="checkPermission(['material_delete'])"
              type="primary"
              @click="handleoption(scope)"
              >生成流程卡</el-link
            >
          </template>
        </el-table-column>
              
               
              </el-table>

       <!--检验记录-->
    <el-dialog title="检验记录" :visible.sync="limitedCheckRecord">
      <el-table
        :data="recordList"
        border
        height="400"
      >
        <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 align="center" label="操作">
          <template slot-scope="scope">
           
            <el-link
             
              @click="handleRecordDetail(scope)"
            >查看
            </el-link>
          
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      
      </div>
    </el-dialog>
      <!--非检查表显示-->
      <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 { getProductionplan,getsubproductionplanList } from "@/api/pm";
import {  getwproductList,getrecordList} from "@/api/wpm";
import checkPermission from "@/utils/permission";
import customForm from '@/components/customForm/index'
import {getrffieldList} from "@/api/mtm";

import { getTestRecord ,getTestRecordItem} from "@/api/qm";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
const defaultrecordform = {enabled:false};
export default {
  components: { Pagination,customForm },
  data() {
    return {
     productionplan:{
       number:""
     },
     activeName:"1",
     wproduct:[],
     recordList:[],
    limitedCheckRecord:false,
      listQuery: {
        page: 1,
        page_size: 20,
      },
     state_:{
        10:'制定中',
        20:'已下达',
        30:'已接受',
        40:'生产中',
        50:'已完成',
         60:'军检完成'},
       actstate_: {
        6: "待复检",
        10: "操作进行中",
        20: "待检验",
        30: "已合格",
        40: "库存中",
        50: "不合格",
        60: "待成品检验",
        8: "操作准备中",
        26: "待夹层检验",
        70: "报废",
      },
      process_json:null,
      productionplanID:null,
       dialogVisibleForm: false,
          tableForm:{
          name:'',
        },
        
        recordform: defaultrecordform,
        dialogType: "new",
        dialogVisible: false,
        dialogType1: "new",
        dialogVisible1: false,
        tableForm: defaultrecordform,
        checkForm: {
          hhh: '',
        },
         
        recordVisible: false,
      customfieldList: [],
      recordform: null,
      recordId: null,
      fifo_detail: "",
      formName: "项目检查表",
      hasPicture: false,
      fieldList: [],
           
    };
  },
  computed: {},
  watch: {},
  created() {
     this.id = this.$route.params.id;
     this.getList();
   
     this.getwproductList();
     
  },
  methods: {
    checkPermission,

     getList() {
      getProductionplan(this.id).then((response) => {
        if (response.data) {
          this.productionplan = response.data;
          this.productionplanID=response.data.id;
         
          let process_json = [];
          for(let item in response.data.process_json){
            let obj = new Object();
            obj = response.data.process_json[item];
            process_json.push(obj)
          }
          
         
          this.process_json= process_json;
        }
        
      });
    },
   
    getwproductList()
    {
      getwproductList({production_plan:this.id,page:0,}).then((response) => {
        if (response.data) {
          this.wproduct = response.data;
        }
        
      });
    },
    //查看该玻璃检验记录表
    handleoption(scope){

        this.$router.push({name: "processcard", params: { id: scope.row.id }, })
    
    },
    //查看生产记录
   select(scope)
   {
     this.limitedCheckRecord=true;
       getrecordList({wproduct: scope.row.id,page:0}).then(res => {
          if (res.code == 200) {
            this.recordList = res.data;
          } 
        })
   },
   
  //点击记录里的查看
    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>
