<template>
    <div class="page">
      <topBar
        v-if="topList.length > 0"
        :topList="topList"
        :moren="moren"
      ></topBar>
      <div class="main">
        <div class="form_all">
          <el-form ref="select" :model="select" label-width="auto">
            <el-row :gutter="10">
              <el-col :span="4">
                <el-form-item :label="'产品编号'">
                  <el-input clearable v-model="select.productCode"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item :label="'产品名称'">
                  <el-input clearable v-model="select.productName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="仓库" prop="pkWarehouse">
                  <el-select clearable v-model="select.pkWarehouse">
                    <el-option
                      v-for="item in storeList"
                      :key="item.pkId"
                      :label="item.name"
                      :value="item.pkId"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item :label="'库存公司'">
                  <el-select
                    clearable
                    v-model="select.pkCorp"
                    :placeholder="'请选择'"
                    @change="getStore"
                  >
                    <el-option
                      v-for="(item, index) in corpList"
                      :key="index"
                      :label="item.corpName"
                      :value="item.pkId"
                    ></el-option>
                  </el-select>
                  
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="供应商" prop="pkCubasdoc">
                  <el-select
                    clearable
                    v-model="select.pkCubasdoc"
                    :placeholder="'请选择'"
                  >
                    <el-option
                      v-for="(item, index) in supplierList"
                      :key="index"
                      :label="item.custName"
                      :value="item.pkId"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-button type="primary" @click="getDataList">
                  {{ '搜索' }}</el-button
                >
                <el-button type="" @click="reset"> {{ '重置' }}</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <!-- <div class="maintop">
            <div class="mainbtn">
              <el-button size="small" @click="openDig" class="addBtn">{{
                '添加'
              }}</el-button>
            </div>
          </div> -->
        <div class="maintable">
          <el-table
            :data="tableData"
            style="width: 100%"
            :header-cell-style="{ background: '#EEEEEE' }"
            :row-class-name="tableRowClassName"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column
              align="center"
              prop="productCode"
              :label="'产品编号'"
            >
            </el-table-column>
  
            <el-table-column
              align="center"
              prop="productName"
              :label="'产品名称'"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="specsName"
              :label="'产品规格'"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="unitName"
              :label="'单位'"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="storehouseName"
              label="仓库"
            >
            </el-table-column>
            <el-table-column align="center" prop="corpName" :label="'库存公司'">
            </el-table-column>
            <el-table-column
              align="center"
              prop="cubasdocName"
              label="供应商"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="nonhandnum"
              label="现存数量"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="batchCode"
              label="批次号"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="time"
              width="150"
              :label="'操作'"
              fixed="right"
            >
              <template slot-scope="scope">
                <el-button
                  @click="goDetail(scope.row)"
                  type="text"
                  style="color: #f3a900"
                  size="small"
                >
                  {{ '查看详情' }}
                </el-button>
               
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getDataList"
      />
  
     
    </div>
  </template>
    
    <script>
  import topBar from "@/components/topBar";
  import * as api from "@/api/supply.js";
  export default {
    name: "QuantityOnhand",
    components: {
      topBar,
    },
    filters: {
      isAgree(val) {
        if (!val) {
          return '允许';
        } else {
          return '禁止';
        }
      },
    },
    data() {
      return {
        moren: "quantityOnhand",
        topList: [
          {
            name: "现存量",
            path: "quantityOnhand",
          },
        ],
        select: {},
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 50,
        },
        total: 0,
        tableData: [],
        corpList: [],
        storeList:[],
        supplierList:[]
      };
    },
    mounted() {
      this.getOthers();
      // 获取列表
      this.getDataList();
    },
    methods: {
      getStore(e) {
          if (e) {
            api
              .getStoreRefer({
                pkCorp: e,
              })
              .then((res) => {
                this.storeList = res.rows;
              });
          }
        },
      getOthers() {
        api.corpList().then((res) => {
          this.corpList = res.rows;
        });
        api.supplierList().then((res) => {
            this.supplierList = res.rows;
          });
      },
      reset() {
        this.select = {};
        this.getDataList();
      },
      
      goDetail(row){
        this.$router.push({
            path: "quantityOnhandDetail",
            query: {
              pkId: row.pkId,
            },
          });
      },
      getDataList() {
        api
          .getHandnumList(Object.assign({}, this.queryParams, this.select))
          .then((res) => {
            this.tableData = res.rows;
            this.total = res.total;
          });
      },
      handleSelectionChange(val) {},
  
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex % 2 == 1) {
          return "warning-row";
        } else if (rowIndex % 2 == 0) {
          return "success-row";
        }
        return "";
      },
    },
  };
  </script>
    <style scoped lang="scss">
  ::v-deep .el-table .warning-row {
    background: #f9f9f9;
  }
  
  ::v-deep .el-table .success-row {
    background: #ffffff;
  }
  ::v-deep .el-table thead {
    color: #000000;
  }
  ::v-deep .el-select {
    width: 100%;
  }
  .uploadIcon ::v-deep .el-upload--picture-card {
    display: none !important; /* 上传按钮隐藏 */
  }
  .page {
    padding: 20px;
    background: #f9f9f9;
    font-size: 14px;
    .main {
      background: #ffffff;
      border-radius: 8px;
      box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
      .form_all {
        padding: 0px 20px 0 20px;
        // margin-bottom: 20px;
        background: #fff;
        border-radius: 8px;
      }
      .maintop {
        display: flex;
        padding: 0px 0px;
        justify-content: space-between;
        align-items: center;
  
        background: #f8f8f8;
        .mainbtn {
          .thebtn1 {
            background: #3181e5;
            color: #ffffff;
          }
          .thebtn2 {
            background: #ffad41;
            color: #ffffff;
          }
        }
        .maintitle {
          font-size: 10px;
          font-family: MicrosoftYaHei;
          color: #999999;
        }
      }
    }
    .tem {
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 28px;
        height: 20px;
        margin-right: 3px;
      }
    }
    .isRed {
      color: #ed1d25;
    }
    .isGreen {
      color: #1ab62b;
    }
    .bgImg {
      width: 48px;
      height: 48px;
    }
  }
  .openClose {
    text-align: right;
    margin-right: 10px;
    color: #3181e5;
  }
  .dizhi {
    ::v-deep .el-cascader {
      width: 100%;
    }
  }
  ::v-deep .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: auto;
  }
  </style>
    