<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="wproductList2.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="handleReview(scope)"
                  >
                  检验
                </el-link>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="wproductList2.count > 0"
            :total="wproductList2.count"
            :page.sync="listQuery2.page"
            :limit.sync="listQuery2.page_size"
            @pagination="getList2"
          />
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="已合格半成品">
        <el-card style="margin-top: 2px">
          <el-button type="primary" icon="el-icon-plus" @click="handleCreate">
            批量入库
          </el-button>
          <el-table
            v-loading="listLoading"
            :data="wproductList1.results"
            ref="multipleTable"
            border
            fit
            stripe
            highlight-current-row
            max-height="600"

          >
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <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-tab-pane label="夹层半成品">
        <el-card style="margin-top: 2px">
          <el-table
            v-loading="listLoading"
            :data="wproductList3.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="wproductList3.count > 0"
            :total="wproductList3.count"
            :page.sync="listQuery3.page"
            :limit.sync="listQuery3.page_size"
            @pagination="getList3"
          />
        </el-card>
      </el-tab-pane>
    </el-tabs>

    <el-dialog title="物料检查表" :close-on-click-modal="false" :visible.sync="outerVisible">
      <el-select style="width: 100%" v-model="recordform" placeholder="请选择" @change="recordformChange">
        <el-option
          v-for="item in recordformList"
          :key="item.name"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <el-dialog
        width="60%"
        :title="formName"
        :visible.sync="innerVisible"
        append-to-body
      >
        <customForm
          :results="fieldList"
          :hasPicture="hasPicture"
          :formID="recordform"
          :wproduct="wproduct"
          @formFunc="formFunc"
        />
      </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
      width="60%"
      :title="formName"
      :visible.sync="limitedReview"
    >
      <reviewForm
        :results="fieldList"
        :originList="originList"
        :formID="recordform"
        :hasPicture="hasPicture"
        :wproduct="wproduct"
        :origintest="origintest"
        @formFunc="formFunc"
      />
    </el-dialog>
    <el-dialog title="半成品入库" :close-on-click-modal="false" :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>
    <el-dialog title="半成品批量入库" :close-on-click-modal="false" :visible.sync="dialogFormVisibles">
      <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="dialogFormVisibles = false">取 消</el-button>
        <el-button type="primary" @click="putins">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import customForm from '@/components/customForm/index';
  import reviewForm from '@/components/customForm/review';
  import {getwproductList, wproductTest, wproductPutin, createputins,wproductReview} 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, customForm,reviewForm},
    data() {
      return {
        testitem: defaultetestitem,
        form: {remark: "", warehouse: ""},
        wproductList: {
          count: 0,
        },
        wproductList1: {
          count: 0,
        },
        wproductList2: {
          count: 0,
        },
         wproductList3: {
          count: 0,
        },
        listQuery: {
          page: 1,
          page_size: 20,
        },
        listQuery1: {
          page: 1,
          page_size: 20,
        },
        listQuery2: {
          page: 1,
          page_size: 20,
        },
         listQuery3: {
          page: 1,
          page_size: 20,
        },
        formLabelWidth:'',
        formLabelWidthL:'',
        actstate_: {
          6: "待复检",
          10: "生产中",
          20: "待检验",
          30: "已合格",
          40: "库存中",
          50: "不合格",
          60: "待成品检验",
            26:"待夹层检验",
        },
        choice: [
          {
            value: true,
            label: "合格",
          },
          {
            value: false,
            label: "不合格",
          },
        ],
        options: [],
        listLoading: true,
        fieldList: [],
        originList: [],
        is_testok: "true",
        field: [],
        recordformList: [],
        recordform: null,
        fifo_detail: "",
        listQueryrecordform: {
          page: 0,
        },
        origintest:null,
        mutipID: [],
        wproduct: null,
        hasPicture: false,
        outerVisible: false,
        innerVisible: false,
        limitedReview: false,
        dialogFormVisible: false,
        dialogFormVisibles: false,
        testrecord: {},
        WarehouseData: "",
        formName: '项目检查表',
      };
    },
    computed: {},
    watch: {},
    created() {
      this.getList();
      this.getList2();
      this.getList1();
        this.getList3();
      // this.getLists();
    },
    methods: {
      checkPermission,
      //待检半成品列表
      getList() {
        this.listLoading = true;
        this.listQuery.act_state = 20;
        getwproductList(this.listQuery).then((response) => {
          if (response.data) {
            this.wproductList = response.data;
          }
          this.listLoading = false;
        });
      },
      //复检半成品列表
      getList2() {

        this.listQuery2.act_state = 6;
        getwproductList(this.listQuery2).then((response) => {
          if (response.data) {
            this.wproductList2 = response.data;
          }

        });
      },
      //已合格半成品
      getList1() {

        this.listQuery1.act_state = 30;
        this.listQuery1.material__type = 2;
        getwproductList(this.listQuery1).then((response) => {
          if (response.data) {
            this.wproductList1 = response.data;
          }

        });
      },
     //夹层半成品列表
      getList3() {

        this.listQuery3.act_state = 26;
        getwproductList(this.listQuery3).then((response) => {
          if (response.data) {
            this.wproductList3 = response.data;
          }

        });
      },
      //半成品批量入库
      handleCreate() {
        this.dialogFormVisibles = true;
        this.getWarehouseLists();//仓库


      },
      //批量入库
      putins() {
        let _this = this
        _this.mutipID = []
        this.$refs.multipleTable.selection.forEach((item) => {
          _this.mutipID.push(item.id);
         
        });
        console.log(_this.mutipID);

        createputins({
          warehouse: this.form.warehouse,
          wproducts: _this.mutipID,
          remark: this.form.remark
        }).then((res) => {
          if (res.code >= 200) {
            this.$message.success("批量入库成功！");
            this.dialogFormVisibles = false;
            this.getList1();
          }
        });
      },
      //仓库列表
      getWarehouseLists() {
        getWarehouseList({page: 0}).then((response) => {
          if (response.data) {
            this.WarehouseData = response.data;
          }
        });
      },
      handleInspection(scope) {
        //调该物料对应的检查表
        // this.step = step;
        this.outerVisible = true;
        this.wproduct = scope.row.id;//半成品ID
        this.wproductactstate = scope.row.act_state;//半成品状态
        this.listQueryrecordform.material = scope.row.material;//
        this.listQueryrecordform.type = 2;
        this.recordform = "";
        getrecordformList(this.listQueryrecordform).then((response) => {
          if (response.data) {
            this.recordformList = response.data;
          }
        });
      },
      //半产品复检
      handleReview(scope) {
        let that = this;
        this.wproduct = scope.row.id;//半成品ID
        wproductReview({ wproduct: this.wproduct}).then((response) => {
          if (response.data) {
            that.hasPicture = false;
            that.formName = response.data.name;
            let fieldList = response.data.form_fields;
            that.fieldList = [...fieldList];
            that.origintest = response.data.origin_test.id;
            that.recordform = response.data.origin_test.form;
            let originList = response.data.origin_test.record_data_;
            that.originList = [...originList];
            let arr = fieldList.filter(item => {
              return item.field_type === 'draw'
            });
            if (arr.length > 0) {
              that.hasPicture = true;
            }
            this.limitedReview = true;
          }
        });
      },
      recordformChange() {
        let that = this;
        let arr = this.recordformList.filter(item => {
          return item.id === that.recordform;
        });
        that.formName = arr[0].name;
      },
      //根据选择的表，渲染检查项目
      submitrecordform() {
        let that = this;
        if (that.recordform != "") {
          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;
              }
              that.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//单项检查结果
          });
        });
        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();
            this.getList2();
             this.getList3();
          }
        });


      },*/
      //半成品入库
      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();
          }
        });
      },
      //提交检查项目
      formFunc(value) {
        wproductTest(value).then((res) => {
          if (res.code >= 200) {
            this.innerVisible = false;
            this.outerVisible = false;
            this.getList();
            this.getList1();
            this.getList2();
          }
        });
      },
    },
  }
</script>
