<template>
  <div class="main-content-container">
    <div class="title">{{ titleMap[$route.params.t] }}</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-select v-model="select_status" class="select-status" clearable placeholder="请选择状态">
          <el-option
            v-for="(item,index) in statusMap"
            :key="index"
            :label="item"
            :value="index"
          />
        </el-select>
        <el-input v-model="user_name" clearable placeholder="请输入操作人员" />
        <el-input v-model="selectReagentValue" clearable placeholder="请输入搜索试剂名称" />
        <div class="search">
          <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>
      <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="63vh"
      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="english_name" label="英文名称" width="150" show-overflow-tooltip />
      <el-table-column align="center" property="bar_code" label="试剂编码" />
      <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="use_quantity" 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="create_date" label="归还时间" width="150" />
      <el-table-column align="center" property="create_user_name" label="操作人员" />
      <el-table-column align="center" property="client_id" label="所属终端">
        <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 { drug_log_type_info } from '@/api/reagent/report'
import stringify from '@/utils/stringify'

export default {
  name: 'Record',
  data() {
    return {
      titleMap: {
        'store': '入库记录',
        'collect': '领用记录',
        'sendback': '归还记录'
      },
      record_type: {
        'store': '1',
        'collect': '2',
        'sendback': '3'
      },
      statusMap: ['在库', '出库', '空瓶'],
      statusColorMap: ['success', '', 'warning'],
      selectReagentValue: '',
      user_name: '',
      client_id: null,
      select_status: null,
      headerStyle: { 'background': '#E6E6E6' },
      page: 1,
      page_size: 15,
      total: 0,
      reagentData: [],
      loadingReagent: false,
      start_time: null,
      end_time: null
    }
  },
  created() {
    this.getStoreInfo()
  },
  methods: {
    // 搜索
    searchReagent() {
      this.pageChange(1)
    },
    // 翻页
    pageChange(page) {
      this.page = page
      this.getStoreInfo()
    },

    //  获取库存信息总览数据
    getStoreInfo() {
      this.loadingReagent = true
      drug_log_type_info(stringify({
        record_type: this.record_type[this.$route.params.t],
        name: this.selectReagentValue,
        user_name: this.user_name,
        status: this.select_status,
        client_id: this.client_id,
        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 - 110px);
  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{
        width:200px;
        margin-left: 1rem;
      }
      .el-input{
        width:200px;
        margin-right: 1rem;
      }
      .search{
        margin-top:1rem ;
        .el-date-editor{
          width:200px;
          margin-left: 0;
        }
      }
    }
  }
}
.select-status{
  margin-right: 1rem;
}

</style>
