<template>
  <div class="app-container">
    <el-card style="margin-top: 2px">
       <el-tabs v-model="activeName" type="card"  @tab-click="handleClick">
    <el-tab-pane label="总览" name="1" >
 <el-table
        v-loading="listLoading"
        :data="fifodetailList1.results"
        border
        fit
        stripe
        highlight-current-row
       height="620"
         v-el-height-adaptive-table="{bottomOffset: 40}"
      >
        <el-table-column type="index" width="50" />
         <el-table-column label="物料批次">
          <template slot-scope="scope">{{ scope.row.batch }}</template>
        </el-table-column>
        <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.material_.specification
          }}</template>
        </el-table-column>
         <el-table-column label="物料单位">
          <template slot-scope="scope">{{ scope.row.material_.unit }}</template>
        </el-table-column>
        <el-table-column label="总数量">
          <template slot-scope="scope">{{ scope.row.count }}</template>
        </el-table-column>
        <el-table-column label="检查状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.is_tested == false">未检查</el-tag>
            <el-tag v-else>已检查</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="检查是否合格">
          <template slot-scope="scope" v-if="scope.row.is_tested == true">
            <el-tag v-if="scope.row.is_testok == false">不合格</el-tag>
            <el-tag v-else>合格</el-tag>
          </template>
        </el-table-column>
  <el-table-column label="创建时间">
          <template slot-scope="scope">{{ scope.row.create_time }}</template>
        </el-table-column>
      
      </el-table>
      <pagination
        v-show="fifodetailList1.count > 0"
        :total="fifodetailList1.count"
        :page.sync="listQuery1.page"
        :limit.sync="listQuery1.page_size"
        @pagination="getList1"
      />

    </el-tab-pane>
    <el-tab-pane label="待检物料" name="2">
       <el-table
        v-loading="listLoading"
        :data="fifodetailList2.results"
        border
        fit
        stripe
        highlight-current-row
       height="620"
         v-el-height-adaptive-table="{bottomOffset: 40}"
      >
        <el-table-column type="index" width="50" />
         <el-table-column label="物料批次">
          <template slot-scope="scope">{{ scope.row.batch }}</template>
        </el-table-column>
        <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.material_.specification
          }}</template>
        </el-table-column>
         <el-table-column label="物料单位">
          <template slot-scope="scope">{{ scope.row.material_.unit }}</template>
        </el-table-column>
        <el-table-column label="总数量">
          <template slot-scope="scope">{{ scope.row.count }}</template>
        </el-table-column>
      
  <el-table-column label="创建时间">
          <template slot-scope="scope">{{ scope.row.create_time }}</template>
        </el-table-column>
      
      </el-table>
      <pagination
        v-show="fifodetailList2.count > 0"
        :total="fifodetailList2.count"
        :page.sync="listQuery2.page"
        :limit.sync="listQuery2.page_size"
        @pagination="getList2"
      />
    </el-tab-pane>
    <el-tab-pane label="合格物料" name="3">
       <el-table
        v-loading="listLoading"
        :data="fifodetailList3.results"
        border
        fit
        stripe
        highlight-current-row
       height="620"
         v-el-height-adaptive-table="{bottomOffset: 40}"
      >
        <el-table-column type="index" width="50" />
         <el-table-column label="物料批次">
          <template slot-scope="scope">{{ scope.row.batch }}</template>
        </el-table-column>
        <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.material_.specification
          }}</template>
        </el-table-column>
         <el-table-column label="物料单位">
          <template slot-scope="scope">{{ scope.row.material_.unit }}</template>
        </el-table-column>
          <el-table-column label="仓库">
          <template slot-scope="scope">{{ scope.row.warehouse_.name }}</template>
        </el-table-column>
        
        <el-table-column label="入库数量">
          <template slot-scope="scope">{{ scope.row.count }}</template>
        </el-table-column>
     
  <el-table-column label="创建时间">
          <template slot-scope="scope">{{ scope.row.create_time }}</template>
        </el-table-column>
      
      </el-table>
      <pagination
        v-show="fifodetailList3.count > 0"
        :total="fifodetailList3.count"
        :page.sync="listQuery3.page"
        :limit.sync="listQuery3.page_size"
        @pagination="getList3"
      />
    </el-tab-pane>
    <el-tab-pane label="不合格物料" name="4">
       <el-table
        v-loading="listLoading"
        :data="fifodetailList4.results"
        border
        fit
        stripe
        highlight-current-row
       height="620"
         v-el-height-adaptive-table="{bottomOffset: 40}"
      >
        <el-table-column type="index" width="50" />
         <el-table-column label="物料批次">
          <template slot-scope="scope">{{ scope.row.batch }}</template>
        </el-table-column>
        <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.material_.specification
          }}</template>
        </el-table-column>
         <el-table-column label="物料单位">
          <template slot-scope="scope">{{ scope.row.material_.unit }}</template>
        </el-table-column>
    
  <el-table-column label="创建时间">
          <template slot-scope="scope">{{ scope.row.create_time }}</template>
        </el-table-column>
      
      </el-table>
      <pagination
        v-show="fifodetailList4.count > 0"
        :total="fifodetailList4.count"
        :page.sync="listQuery4.page"
        :limit.sync="listQuery4.page_size"
        @pagination="getList4"
      />
    </el-tab-pane>
  </el-tabs>
     
    </el-card>

  

    
  </div>
</template>
<script>
import { getfifodetailList } from "@/api/inm";
import checkPermission from "@/utils/permission";
import { createTestrecord } from "@/api/inm";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination

export default {
  components: { Pagination },
  data() {
    return {
      InventoryList: {
        count: 0,
      },
      fifodetailList1: {
        count: 0,
      },
      listQuery1: {
        page: 1,
        page_size: 20,
      },
       listQuery2: {
        page: 1,
        page_size: 20,
      },
       listQuery3: {
        page: 1,
        page_size: 20,
      },
       listQuery4: {
        page: 1,
        page_size: 20,
      },
      is_testok: "true",
       fifodetailList2:{
        count: 0,
      },
       fifodetailList3:{
        count: 0,
      },
       fifodetailList4:{
        count: 0,
      },
    activeName:"1"
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getList1();
  },
  methods: {
    checkPermission,

    getList1() {
      this.listLoading = true;
 this.listQuery1.material=1;
      this.listQuery1.fifo__type = 1;
      getfifodetailList(this.listQuery1).then((response) => {
        if (response.data) {
          this.fifodetailList1 = response.data;
        }
        this.listLoading = false;
      });
    },
    //待检
      getList2() {
      this.listLoading = true;
       this.listQuery2.fifo__type = 1;
       this.listQuery2.material=1;
      this.listQuery2.is_tested = false;
      getfifodetailList(this.listQuery2).then((response) => {
        if (response.data) {
          this.fifodetailList2 = response.data;
        }
        this.listLoading = false;
      });
    },
     //合格物料
      getList3() {
      this.listLoading = true;
       this.listQuery3.fifo__type = 1;
        this.listQuery3.material=1;
      this.listQuery3.is_testok = true;
      getfifodetailList(this.listQuery3).then((response) => {
        if (response.data) {
          this.fifodetailList3 = response.data;
        }
        this.listLoading = false;
      });
    },
     //不合格物料
      getList4() {
      this.listLoading = true;
       this.listQuery4.fifo__type = 1;
        this.listQuery1.material=1;
      this.listQuery4.is_testok = false;
      this.listQuery4.is_tested = true;
      getfifodetailList(this.listQuery4).then((response) => {
        if (response.data) {
          this.fifodetailList4 = response.data;
        }
        this.listLoading = false;
      });
    },
    //选项卡切换
    handleClick(tab) {
 
     
       if(tab.name==1)
       {
          this.getList1()
       }
       else if(tab.name==2)
       {
          this.getList2()
       }
       else if(tab.name==3)
        {
          this.getList3()
       }
        else 
        {
          this.getList4()
       }
    },
  },
};
</script>
