<template>
  <div class="main-content-container">
    <div class="title">库存信息总览</div>
    <div class="header">
      <div class="header-left">
        <el-button @click="$router.push('/reagent/report/index')">返回上一级</el-button>
        <el-input v-model="selectReagentValue" clearable placeholder="请输入搜索试剂名称" />
        <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">导出报告</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="cas_number" label="CAS码" />
      <el-table-column align="center" property="net_weight_unit" label="规格" />
      <el-table-column align="center" property="count_number" label="在库剩余数量(瓶)" />
      <el-table-column align="center" property="sum_remain" label="在库剩余总质量(g)" />
      <el-table-column align="center" property="client_id" label="所属终端" show-overflow-tooltip>
        <template slot-scope="scope">
          <div v-if="$store.getters.clientOptions.find(item => item.client_id === scope.row.client_id)">
            {{ $store.getters.clientOptions.find(item => item.client_id === scope.row.client_id).client_name }}
          </div>
          <div v-else>
            {{ scope.row.client_id }}
          </div>
        </template>
      </el-table-column>
    </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_data_info } from '@/api/reagent/report'
import stringify from '@/utils/stringify'
export default {
  name: 'StoreInfo',
  data() {
    return {
      selectReagentValue: '',
      headerStyle: { 'background': '#E6E6E6' },
      page: 1,
      page_size: 15,
      total: 0,
      reagentData: [],
      loadingReagent: false
    }
  },
  created() {
    this.getStoreInfo()
  },
  methods: {
    // 搜索
    searchReagent() {
      this.pageChange(1)
    },
    // 翻页
    pageChange(page) {
      this.page = page
      this.getStoreInfo()
    },

    //  获取库存信息总览数据
    getStoreInfo() {
      this.loadingReagent = true
      stock_data_info(stringify({
        name: this.selectReagentValue,
        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-input{
        width:200px;
        margin-right: 1rem;
        margin-left: 1rem;
      }
    }
  }
}

</style>
