<template>
  <div class="main-content-container">
    <div class="title">库存消耗</div>
    <div class="header">
      <div class="header-left">
        <el-button @click="$router.push(`/${$store.getters.classification}/report/index`)">返回上一级</el-button>
        <el-input v-model="selectReagentValue" clearable placeholder="请输入搜索试剂名称" />
        <el-date-picker
          v-model="start_time"
          type="datetime"
          placeholder="选择生产日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          clearable
        />
        <el-date-picker
          v-model="end_time"
          type="datetime"
          placeholder="选择过期日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          clearable
        />
        <el-button type="primary" icon="el-icon-search" @click="searchReagent">搜索</el-button>
      </div>
      <div class="header-right">
        <el-button type="primary" plain icon="el-icon-download" @click="handleExport">导出报告</el-button>
        <el-button icon="el-icon-refresh" circle @click="getStoreInfo" />
      </div>
    </div>
    <el-table
      v-loading="loadingReagent"
      element-loading-text="拼命加载中"
      :header-cell-style="headerStyle"
      :data="reagentData"
      height="69vh"
      stripe
    >
      <el-table-column align="center" type="index" width="50" label="序号" />
      <el-table-column align="center" property="name" label="试剂名称" width="150" show-overflow-tooltip />
      <el-table-column align="center" property="purity" label="纯度" width="100" show-overflow-tooltip />
      <el-table-column align="center" property="cas_number" label="CAS码" />
      <!--      <el-table-column align="center" property="remain" label="重点监控" />-->
      <el-table-column align="center" property="enter_stock" label="入库数量" />
      <!--      <el-table-column align="center" property="in_stock" label="当前库存总量" />-->
      <el-table-column align="center" property="in_stock" label="当前在库数量" />
      <el-table-column align="center" property="up_stock" label="当前借出数量" />
      <el-table-column align="center" property="no_stock" label="消耗数量" />
    </el-table>
    <div class="my-pagination" style="text-align: center">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page.sync="page"
        :total="total"
        :page-size.sync="page_size"
        @current-change="pageChange"
      />
    </div>
  </div>
</template>

<script>
import { stock_loss_info } from '@/api/reagent/report'
import { dowload_stock_loss_info, click_dowload } from '@/api/reagent/dowload_file'
import stringify from '@/utils/stringify'

export default {
  name: 'WarehousingInfo',
  data() {
    return {
      selectReagentValue: '',
      headerStyle: { 'background': '#E6E6E6' },
      page: 1,
      page_size: 15,
      total: 0,
      reagentData: [],
      loadingReagent: false,
      start_time: null,
      end_time: null
    }
  },
  created() {
    this.getStoreInfo()
  },
  methods: {
    // 导出
    handleExport() {
      const data = {
        seach_word: this.selectReagentValue,
        start_time: this.start_time,
        end_time: this.end_time,
        page: this.page,
        page_size: this.page_size,
        download_type: 4,
        file_name: '库存消耗'
      }
      dowload_stock_loss_info(data).then(
        res => {
          this.$message.success(res.statusText)
          click_dowload(data, res)
        }
      )
    },
    // 搜索
    searchReagent() {
      this.pageChange(1)
    },
    // 翻页
    pageChange(page) {
      this.page = page
      this.getStoreInfo()
    },

    //  获取库存信息总览数据
    getStoreInfo() {
      this.loadingReagent = true
      stock_loss_info(stringify({
        seach_word: this.selectReagentValue,
        start_time: this.start_time,
        end_time: this.end_time,
        page: this.page,
        page_size: this.page_size
      })).then(res => {
        this.reagentData = res.data.data
        this.total = res.data.total_count
      }).finally(() => { this.loadingReagent = false })
    }
  }
}
</script>

<style lang="scss" scoped>
.main-content-container{
  margin: 1rem;
  background: white;
  //min-height: calc(100vh - 12rem);
  padding: 1rem;
  .title {
    font-size: 1.25rem;
    font-weight: bold;
    color: #000000;
    margin-bottom: 1rem;
  }
  .header{
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    .header-left{
      .el-date-editor{
        width: 12.5rem;
      }
      .el-input{
        width:12.5rem;
        margin-right: 1rem;
        margin-left: 1rem;
      }
    }
  }
}

</style>
