<template>
  <div class="app-container">
    <el-tabs type="border-card">
  <el-tab-pane label="待检半成品">
     <el-card style="margin-top: 2px">
      <el-table
        v-loading="listLoading"
        :data="wproductList.results"
        border
        fit
        stripe
        highlight-current-row
        max-height="600"
      >
        <el-table-column type="index" width="50" />
        <el-table-column label="半成品名称">
          <template slot-scope="scope">{{ scope.row.material_.name }}</template>
        </el-table-column>

        <el-table-column label="半成品编号">
          <template slot-scope="scope">{{ scope.row.number }}</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 align="center" label="操作" width="220px">
          <template slot-scope="scope">
            <el-link
              v-if="checkPermission(['warehouse_update'])"
              @click="handleInspection(scope)"
              >检验</el-link
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="wproductList.count > 0"
        :total="wproductList.count"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.page_size"
        @pagination="getList"
      />
    </el-card>
  </el-tab-pane>
  <el-tab-pane label="已检半成品">
     <el-card style="margin-top: 2px">
      <el-table
        v-loading="listLoading"
        :data="wproductList1.results"
        border
        fit
        stripe
        highlight-current-row
        max-height="600"
      >
        <el-table-column type="index" width="50" />
        <el-table-column label="半成品名称">
          <template slot-scope="scope">{{ scope.row.material_.name }}</template>
        </el-table-column>

        <el-table-column label="半成品编号">
          <template slot-scope="scope">{{ scope.row.number }}</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 align="center" label="操作" width="220px">
          <template slot-scope="scope">
            <el-link
              v-if="checkPermission(['warehouse_update'])"
              @click="handlePutin(scope)"
              >入库</el-link
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="wproductList1.count > 0"
        :total="wproductList1.count"
        :page.sync="listQuery1.page"
        :limit.sync="listQuery1.page_size"
        @pagination="getList1"
      />
    </el-card>
  </el-tab-pane>
</el-tabs>
   
    <el-dialog title="物料检查表" :visible.sync="outerVisible">
      <el-select style="width: 100%" v-model="recordform" placeholder="请选择">
        <el-option
          v-for="item in recordformList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>

      <el-dialog
        width="50%"
        title="检查项目"
        :visible.sync="innerVisible"
        append-to-body
      >
        <el-form label-width="100px" label-position="right">
          <el-row
            :gutter="24"
            v-for="(item, $index) in fieldList"
            :key="$index"
          >
            <el-col :span="12">
              <el-form-item
                v-if="item.field_type === 'string'"
                :label="item.field_name"
              >
                <el-input placeholder="请输入" v-model="item.sort" />
              </el-form-item>
              <el-form-item
                v-else-if="item.field_type === 'int'"
                :label="item.field_name"
              >
                <el-input
                  width="120"
                  type="number"
                  placeholder="请输入"
                  v-model="item.sort"
                />
              </el-form-item>
              <el-form-item
                v-else-if="item.field_type === 'float'"
                :label="item.field_name"
              >
                <el-input
                  type="number"
                  placeholder="请输入"
                  v-model="item.sort"
                />
              </el-form-item>
              <el-form-item
                v-else-if="item.field_type === 'date'"
                :label="item.field_name"
              >
                <el-date-picker
                  v-model="item.create_time"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  style="width: 100%"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item
                v-else-if="item.field_type === 'datetime'"
                :label="item.field_name"
              >
                <el-date-picker
                  v-model="item.create_time"
                  type="datetime"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="width: 100%"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item
                v-else-if="item.field_type === 'select'"
                :label="item.field_name"
              >
                <el-select
                  style="width: 100%"
                  v-model="item.sort"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item1 in item.field_choice"
                    :key="item1"
                    :label="item1"
                    :value="item1"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                v-else-if="item.field_type === 'selects'"
                :label="item.field_name"
              >
                <el-select
                  style="width: 100%"
                  v-model="optio"
                  multiple
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item1 in item.field_choice"
                    :key="item1"
                    :label="item1"
                    :value="item1"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否检验合格" width="50px">
                <el-select
                  style="width: 100%"
                  v-model="item.is_testok"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in choice"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="是否合格" prop="sort_str">
              <el-radio v-model="is_testok" label="true">检查合格</el-radio>
              <el-radio v-model="is_testok" label="false">检查不合格</el-radio>
            </el-form-item>
          </el-row>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="innerVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitfield"
            >提交检查项目</el-button
          >
        </div>
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitrecordform"
          >填写检查项目</el-button
        >
      </div>
    </el-dialog>
    <el-dialog title="半成品入库" :visible.sync="dialogFormVisible">
  <el-form :model="form">
      <el-form-item label="仓库" :label-width="formLabelWidth">
        <el-select
                  style="width: 100%"
                  v-model="form.warehouse"
                  placeholder="请选择仓库"
                >
                  <el-option
                    v-for="item in WarehouseData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
    </el-form-item>
    <el-form-item label="备注" :label-width="formLabelWidth">
      <el-input v-model="form.remark" ></el-input>
    </el-form-item>
  
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="putin">确 定</el-button>
  </div>
</el-dialog>
  </div>
</template>
<script>
import { getwproductList ,wproductTest,wproductPutin} from "@/api/wpm";
import checkPermission from "@/utils/permission";
import { getWarehouseList } from "@/api/inm";
import { getMaterialList, getrecordformList, getrffieldList } from "@/api/mtm";
import { genTree } from "@/utils";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
const defaultetestitem = {};
export default {
  components: { Pagination },
  data() {
    return {
      testitem: defaultetestitem,
      form:{},
      wproductList: {
        count: 0,
      },
       wproductList1: {
        count: 0,
      },
      listQuery: {
        page: 1,
        page_size: 20,
      },
        listQuery1: {
        page: 1,
        page_size: 20,
      },
      actstate_: {
        1: "生产中",
        2: "待检测",
        3: "已合格",
        4: "库存中",
      },
      choice: [
        {
          value: true,
          label: "合格",
        },
        {
          value: false,
          label: "不合格",
        },
      ],
      options: [],
      listLoading: true,
      fieldList: "",
      is_testok: "true",
      field: [],
      recordformList: [],
      recordform: "",
      fifo_detail: "",
      listQueryrecordform: {
        page: 0,
      },
      outerVisible: false,
      innerVisible: false,
      dialogFormVisible:false,
         testrecord: {},
         WarehouseData:"",
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getList();
     this.getList1();
    this.getLists();
  },
  methods: {
    checkPermission,
    //半成品列表
    getList() {
      this.listLoading = true;
      this.listQuery.act_state = 2;
      getwproductList(this.listQuery).then((response) => {
        if (response.data) {
          this.wproductList = response.data;
        }
        this.listLoading = false;
      });
    },
      getList1() {
      
      this.listQuery1.act_state = 3;
      getwproductList(this.listQuery1).then((response) => {
        if (response.data) {
          this.wproductList1 = response.data;
        }
       
      });
    },
   //仓库列表
   getWarehouseLists(){

     getWarehouseList({page:0}).then((response) => {
        if (response.data) {
          this.WarehouseData = response.data;
        }
       
      });
   },
    handleInspection(scope) {
      //调该物料对应的检查表
      this.outerVisible = true;
      this.wproduct=scope.row.id;//半成品ID
      this.listQueryrecordform.material =  scope.row.material;//
      this.listQueryrecordform.type = 2;
      this.recordform="";
      getrecordformList(this.listQueryrecordform).then((response) => {
        if (response.data) {
          this.recordformList = response.data;
        }
      });
    },
    //根据选择的表，渲染检查项目
    submitrecordform() {
      if (this.recordform != "") {
        getrffieldList({ form: this.recordform, page: 0 }).then((response) => {
          if (response.data) {
            this.fieldList = response.data;
            this.innerVisible = true;
          }
        });
      } else this.$message.error("请选择检查表！");
    },
    //提交检查项目
    submitfield() {
      let _this = this;
      _this.field = []; //检查项目
      this.fieldList.forEach((item) => {
      
        _this.field.push({
          form_field:item.id,
          field_value:item.sort,
          is_testok:item.is_testok//单项检查结果
        });
      });

      console.log(this.recordform);
      this.testrecord.form = this.recordform;//检查表
      this.testrecord.record_data = _this.field;//检查项列表
      this.testrecord.is_testok = this.is_testok;//检查表检查结果
       this.testrecord.wproduct = this.wproduct;//半成品ID
      wproductTest(this.testrecord).then((res) => {
        if (res.code >= 200) {
          this.innerVisible = false;
          this.outerVisible = false;
          this.getList();
           this.getList1();
        }
      });
    },
    //半成品入库
    handlePutin(scope){
     this.dialogFormVisible=true;
     this.getWarehouseLists();//仓库
     this.id=scope.row.id;//半成品id
    },
    putin(){
       wproductPutin(this.id,this.form).then((res) => {
        if (res.code >= 200) {
         this.$message.success("入库成功！");
           this.dialogFormVisible=false;
           this.getList1();
        }
      });
    }
  },
};
</script>
