<template>
  <div class="main-container-text">
    <div class="title">试剂分类</div>
    <div class="header">
      <el-input v-model="name" clearable placeholder="请输入名称" />
      <el-button type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
      <!-- <el-button type="primary" plain icon="el-icon-plus" @click="handleFormOpen('add')">编辑</el-button> -->
      <!-- <el-button type="danger" plain icon="el-icon-close" @click="handleEmpty">清空数据</el-button> -->
      <div class="right">
        <!-- <el-button icon="el-icon-delete" circle @click="handleDel" /> -->
        <el-button icon="el-icon-refresh" circle @click="getList" />
      </div>
    </div>
    <el-table
      v-loading="loading"
      :data="tableData"
      element-loading-text="拼命加载中"
      :header-cell-style="headerStyle"
      height="69vh"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column type="index" width="50" />
      <el-table-column prop="name" show-overflow-tooltip label="药剂名称" align="center" />
      <el-table-column prop="english_name" show-overflow-tooltip label="英文名称" align="center" />
      <el-table-column prop="cas_number" show-overflow-tooltip label="药剂cas码" align="center" />
      <el-table-column prop="purity" label="纯度" align="center" />
      <el-table-column prop="total" label="总量" align="center" />
      <el-table-column prop="net_weight_unit" label="净含量单位" align="center" />
      <el-table-column prop="net_weight" label="净含量" align="center" />
      <el-table-column prop="inventory_warning_value" label="库存预警量" align="center" />
      <el-table-column prop="shelf_life_warning_value" label="保质期到期提前预警天数" align="center" />
      <el-table-column prop="use_days_warning_value" label="领用超期预警天数" align="center" />
      <el-table-column prop="empty_count" label="空瓶数量" align="center" />
      <el-table-column prop="use_count" label="当前领用数量" align="center" />
      <el-table-column prop="normal_count" label="在库数量" align="center" />
      <el-table-column prop="total_count" label="总数量" align="center" />
      <el-table-column prop="create_date" label="创建日期" align="center" />
      <el-table-column prop="create_user_name" label="创建用户名称" align="center" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button @click="handleFormEdit(scope.row)">编辑</el-button>
        </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"
        :disabled="loading"
        @current-change="pageChange"
      />
    </div>
    <el-dialog :title="dialogTitile" :close-on-click-modal="false" :visible.sync="dialogVisible" @close="onClose">
      <el-row :gutter="15">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="150px">
          <el-col :span="24">
            <el-form-item label="药剂名称" prop="name">
              <el-input v-model="formData.name" placeholder="请输入药剂名称" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="英文名称" prop="english_name">
              <el-input v-model="formData.english_name" placeholder="请输入英文名称" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="药剂cas码" prop="cas_number">
              <el-input v-model="formData.cas_number" placeholder="请输入药剂cas码" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纯度" prop="purity">
              <el-input v-model="formData.purity" placeholder="请输入纯度" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="总量" prop="total">
              <el-input v-model="formData.total" placeholder="请输入总量" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="净含量单位" prop="net_weight_unit">
              <el-input v-model="formData.net_weight_unit" placeholder="请输入净含量单位" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="净含量" prop="net_weight">
              <el-input v-model="formData.net_weight" placeholder="请输入净含量" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="库存预警量" prop="inventory_warning_value">
              <el-input v-model="formData.inventory_warning_value" placeholder="请输入库存预警量" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保质期提前预警天数" prop="shelf_life_warning_value">
              <el-input v-model="formData.shelf_life_warning_value" placeholder="请输入保质期到期提前预警天数" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="领用超期预警天数" prop="use_days_warning_value">
              <el-input v-model="formData.use_days_warning_value" placeholder="请输入领用超期预警天数" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="空瓶数量" prop="empty_count">
              <el-input v-model="formData.empty_count" placeholder="请输入空瓶数量" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="当前领用数量" prop="use_count">
              <el-input v-model="formData.use_count" placeholder="请输入当前领用数量" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="在库数量" prop="normal_count">
              <el-input v-model="formData.normal_count" placeholder="请输入在库数量" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="总数量" prop="total_count">
              <el-input v-model="formData.total_count" placeholder="请输入总数量" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer" style="text-align: center">
        <el-button @click="onClose">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import stringify from '@/utils/stringify'
// import {
//   get_list,
//   add_or_update,
//   update_status,
//   get_client_drawer,
//   get_drawer_power,
//   user_ban_relieve, set_drawer_power, user_ban_list, user_ban_confirm, del, client_empty
// } from '@/api/reagent/client'
// import { client_list } from '@/api/common'
import {
  variety_get_list,
  variety_update
} from '@/api/reagent/variety'

export default {
  name: 'Client',
  data() {
    return {
      page: 1,
      page_size: 15,
      total: 0,
      name: '',
      loading: false,
      multipleSelection: [],
      tableData: [],
      headerStyle: { 'background': '#E6E6E6' },
      formData: {},
      rules: {
        name: [{
          required: true,
          message: '请输入药剂名称',
          trigger: 'blur'
        }],
        cas_number: [{
          required: true,
          message: '请输入药剂cas码',
          trigger: 'blur'
        }],
        purity: [{
          required: true,
          message: '请输入纯度',
          trigger: 'blur'
        }],
        total: [{
          required: true,
          message: '请输入总量',
          trigger: 'blur'
        }],
        inventory_warning_value: [{
          required: true,
          message: '请输入库存预警量',
          trigger: 'blur'
        }],
        shelf_life_warning_value: [{
          required: true,
          message: '请输入保质期到期提前预警天数',
          trigger: 'blur'
        }],
        use_days_warning_value: [{
          required: true,
          message: '请输入领用超期预警天数',
          trigger: 'blur'
        }],
        empty_count: [],
        use_count: [],
        normal_count: [],
        total_count: []
      },
      dialogVisible: false,
      dialogTitile: ''
    }
  },
  created() {
    this.getList()
  },
  destroyed() {
    // 更新client数据供后续使用
  },
  methods: {
    // 点击保存,更新数据
    handelConfirm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        const data = JSON.parse(JSON.stringify(this.formData))
        variety_update(stringify(data)).then(res => {
          this.$message.success(res.msg)
          this.dialogVisible = false
          this.getList()
        })
      })
    },
    // h
    getList() {
      this.loadingReagent = true
      const data = {
        seach_word: this.name
      }
      variety_get_list(stringify(data)).then(
        res => {
          this.tableData = res.data.data_list
          this.total = res.data.total_count
        }).finally(() => { this.loadingReagent = false })
    },
    handleFormEdit(row) {
      this.dialogTitile = '编辑试剂品类信息'
      this.formData = { ...row }
      this.dialogVisible = true
    },
    // 用户多选
    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    // 柜体分页
    pageChange(page) {
      this.page = page
      this.getList()
    },
    onClose() {
      this.dialogVisible = false
      this.formData = {}
      this.$refs['elForm'].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.main-container-text {
  min-height: calc(100vh - 110px);
  padding: 1rem;
  margin: 1rem;
  background: white;

  .title {
    font-size: 20px;
    font-weight: bold;
    color: #000000;
  }

  .header {
    margin: 1rem 0 1rem 0;

    .right {
      float: right;
    }

    .el-input {
      width: 9.375rem;
      margin-right: 1rem;
    }

    .el-select {
      margin-right: 1rem;
    }

    .header-right {
      float: right;
    }
  }
}

.user-header {
  margin-bottom: 1rem;

  .el-input {
    width: 12.5rem;
    margin-right: 1rem;
  }

  .el-select {
    width: 12.5rem;
    margin-right: 1rem;
  }
}
</style>
