<template>
    <div class="app-container">
      <div v-show="viewState == 1">
        <button-bar
          ref="btnbar"
          view-title="入库记录列表"
          :btndisabled="btndisabled"
          @btnhandle="btnHandle"
        />
        <div class="main-content">
          <div class="searchcon">
            <el-button size="small" class="searchbtn" @click="clicksearchShow">
              {{ searchxianshitit }}
            </el-button>
            <div v-show="isSearchShow" class="search">
              <el-form
                ref="queryParams"
                :model="listQuery"
                :inline="true"
                class="tab-header"
              >
              <el-form-item label="仓库名称">
                  <el-select v-model="listQuery.inp_storehouse_id"  placeholder="请选择" clearable >
                  <el-option v-for="(item,i) in storehouse" :key="i" :label="item.storehouse_name" :value="item.id"></el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="批次号">
                  <el-input
                    v-model="listQuery.batch_number"
                    maxlength="20"
                    placeholder="请输入批次号"
                    class="addinputw"
                    clearable
                  />
                </el-form-item>
                <el-form-item label="物料编码">
                    <el-input
                    v-model="listQuery.materiel_no"
                    maxlength="20"
                    placeholder="请输入物料编码"
                    class="addinputw"
                    clearable
                  />
                </el-form-item>
                <el-form-item label="开始时间">
                  <el-date-picker v-model="listQuery.start_happen_time" type="date" style="width:100%" value-format="yyyy-MM-dd"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="解决时间">
                  <el-date-picker v-model="listQuery.end_happen_time" type="date" style="width:100%" value-format="yyyy-MM-dd"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="出库类型">
                  <el-select v-model="listQuery.type"  placeholder="请选择" clearable >
                    <el-option v-for="(item,i) in Materia" :key="i" :label="item" :value="i"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="物料名称">
                    <el-input
                    v-model="listQuery.materiel_name"
                    maxlength="20"
                    placeholder="请输入物料名称"
                    class="addinputw"
                    clearable
                  />
                </el-form-item>
              </el-form>
              <div class="btn" style="text-align: center">
                <el-button
                  type="primary"
                  size="small"
                  icon="el-icon-search"
                  @click="dosearch"
                  >查询</el-button
                >
                <el-button
                  type="primary"
                  size="small"
                  icon="el-icon-refresh"
                  @click="resetQuery"
                  >重置</el-button
                >
              </div>
            </div>
          </div>
  
          <el-table :data="logList" style="width: 100%" border>
            <el-table-column
              label="序号"
              type="index"
              width="80"
              :index="indexMethod"
              fixed
              align="center"
            />
            <el-table-column
              align="center"
              prop="storehouse_name"
              label="仓库名称"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="materiel_no"
              label="物料编号"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="materiel_name"
              label="物料名称"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="brand_name"
              label="物料品牌"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="price"
              label="物料单价"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="batch_number"
              label="批次号"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="materiel_group_text"
              label="物料规格"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="num"
              width="100"
              label="入货数量"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="actual_price"
              label="总价记录"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="unit"
              width="60"
              label="物料单位"
            >
            </el-table-column>
            <el-table-column
              align="center"
              width="80"
              prop="admin_name"
              label="经办人"
            >
            </el-table-column>
          </el-table>
          <div class="pages">
            <div class="tit" />
            <pagination
              v-show="logList.length > 0"
              :total="total"
              :page.sync="listQuery.page"
              :limit.sync="listQuery.limit"
              class="pagination"
              @pagination="loadLogList"
            />
          </div>
        </div>
      </div>
    </div>
  </template>
    
    <script>
  import req from "@/api/gfApi";
  import Pagination from "@/components/pagination";
  import ButtonBar from "@/components/ButtonBar";
  export default {
    components: {
      ButtonBar,
      Pagination,
    },
    data() {
      return {
        viewState: 1,
        tabActiveName: "uplog",
        index: "0",
        isSearchShow: false,
        searchxianshitit: "显示查询条件",
        btndisabled: false,
        btnList: [
          {
            type: "info",
            size: "small",
            icon: "cross",
            btnKey: "doClose",
            btnLabel: "关闭",
          },
        ],
        logList: [],
        tempList: [],
        Materia:{},
        storehouse:[],
        listQuery: {
          page: 1,
          limit: 10,
          inp_storehouse_id:'',
          batch_number:'',
          start_happen_time:'',
          end_happen_time:'',
          materiel_no:'',
          materiel_name:'',
          type:'',
        },
        total: 0,
        QueryList: {
          page: 1,
          limit: 50,
        },
      };
    },
    mounted() {
      // 初始化按钮
      this.$refs["btnbar"].setButtonList(this.btnList);
    },
    created() {
      // 初始化变量
      this.init();
      this.getMaterialGroup();
    },
    methods: {
      // 搜索条件效果
      clicksearchShow() {
        this.isSearchShow = !this.isSearchShow;
        if (this.isSearchShow) {
          this.searchxianshitit = "隐藏查询条件";
        } else {
          this.searchxianshitit = "显示查询条件";
        }
      },
      dosearch() {
        this.loadLogList();
      },
      resetQuery() {
        this.listQuery = {
          page: 1,
          limit: 10,
          inp_storehouse_id:'',
          batch_number:'',
          start_happen_time:'',
          end_happen_time:'',
          materiel_no:'',
          materiel_name:'',
          type:'',
        };
        this.total = 0;
        this.loadLogList();
      },
      // 右上角点击事件
      btnHandle(btnKey) {
        switch (btnKey) {
          case "doClose": // 关闭
            this.doClose();
            break;
          default:
            break;
        }
      },
      init() {
        this.loadLogList();
      },
      loadLogList() {
        req.getInStockMaterielList(this.listQuery).then((res) => {
          if(res.code==200){
            this.total = res.data.data.count
            this.logList = res.data.data.list
          }
        });
      },
      // 序号
      indexMethod(index) {
        var pagestart = (this.listQuery.page - 1) * this.listQuery.limit;
        var pageindex = index + 1 + pagestart;
        return pageindex;
      },
      resetState() {
        this.viewState = 1;
      },
      getMaterialGroup(){
        req.getInType().then((res) => {
          if(res.code==200){
            this.Materia=res.data.data
          }
        });
        req.getWarehouse(this.QueryList).then((res) => {
          if(res.code==200){
            this.storehouse = res.data.data.list
          }
      });
      },
      doClose() {
        this.$store.dispatch("tagsView/delView", this.$route);
        this.$router.go(-1);
      },
    },
  };
  </script>
    <style scoped>
  </style>
    