<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"  placeholder="请输入搜索试剂名称" />-->
        <el-input v-model="seachUser" 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">导出报告</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="用户头像" />
      <el-table-column align="center" property="create_user_name" label="用户名称" />
      <el-table-column align="center" property="role_name" label="用户身份" />
      <el-table-column align="center" property="use_num" label="使用次数" />
      <el-table-column align="center" property="use_amount" label="总用量(g)" />
      <el-table-column width="150" align="center" property="ratio" label="占用百分比(%)">
        <template slot-scope="scope">
          <el-progress :percentage="parseInt(scope.row.ratio.slice(0,-1))" />
        </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_user_use_expend } from '@/api/reagent/report'
import stringify from '@/utils/stringify'

export default {
  name: 'UserConsum',
  data() {
    return {
      // selectReagentValue: '',
      seachUser: '',
      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_user_use_expend(stringify({
        // seach_word: this.selectReagentValue,
        seach_user: this.seachUser,
        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>
