<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-select v-model="client_id" clearable placeholder="请选择柜体">
          <el-option
            v-for="item in $store.getters.clientOptions"
            :key="item.id"
            :label="item.client_name"
            :value="item.client_id"
          />
        </el-select>
        <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="100" show-overflow-tooltip />
      <el-table-column align="center" property="english_name" label="英文名称" width="100" show-overflow-tooltip />
      <el-table-column align="center" property="bar_code" label="试剂编码" show-overflow-tooltip />
      <el-table-column align="center" property="speci" label="规格" />
      <el-table-column align="center" property="remain" label="余量(g)" />
      <el-table-column align="center" property="purity" label="纯度" width="100" show-overflow-tooltip />
      <el-table-column align="center" property="production_date" label="生产日期" width="150" />
      <el-table-column align="center" property="put_in_date" label="入库日期" width="150" />
      <!--      <el-table-column align="center" property="net_weight_unit" label="开瓶日期" />-->
      <el-table-column align="center" property="put_in_user_name" label="试剂管理人" />
      <!--      <el-table-column align="center" property="is_supervise" label="是否监管" />-->
      <el-table-column align="center" property="status" label="状态">
        <template slot-scope="scope">
          <el-tag :type="statusColorMap[scope.row.status-1]">{{ statusMap[scope.row.status - 1] }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" property="by_user_name" label="最后使用人" />
      <el-table-column align="center" property="client_id" 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 { drug_details_info } from '@/api/reagent/report'
import stringify from '@/utils/stringify'

export default {
  name: 'ReagentInfo',
  data() {
    return {
      selectReagentValue: '',
      client_id: null,
      headerStyle: { 'background': '#E6E6E6' },
      page: 1,
      page_size: 15,
      total: 0,
      reagentData: [],
      loadingReagent: false,
      statusMap: ['在库', '出库', '空瓶'],
      statusColorMap: ['success', '', 'warning']
    }
  },
  created() {
    this.getStoreInfo()
  },
  methods: {
    // 搜索
    searchReagent() {
      this.pageChange(1)
    },
    // 翻页
    pageChange(page) {
      this.page = page
      this.getStoreInfo()
    },

    //  获取库存信息总览数据
    getStoreInfo() {
      this.loadingReagent = true
      drug_details_info(stringify({
        seach_word: this.selectReagentValue,
        client_id: this.client_id,
        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-select {
        margin-left: 1rem;
      }

      .el-input {
        width: 200px;
        margin-right: 1rem;
        margin-left: 1rem;
      }
    }
  }
}

</style>
