<template>
  <div class="main-container-text">
    <div class="title">库存盘点</div>
    <div class="header">
      <el-select v-model="client_id" placeholder="请选择柜体">
        <el-option
          v-for="item in $store.getters.clientOptions"
          :key="item.id"
          :label="item.client_name"
          :value="item.client_id"
        />
      </el-select>
      <el-button type="primary" plain @click="handleAddReagent"><i class="el-icon-edit" />录入库存</el-button>
      <el-button type="primary" @click="handleCheck">提交校验</el-button>
      <div class="header-right">
        <el-button type="primary" plain @click="handleHistory">历史记录</el-button>
        <el-button icon="el-icon-refresh" circle @click="handleRefresh" />
      </div>
    </div>
    <el-table
      stripe
      :data="tableData"
      :header-cell-style="headerStyle"
      height="69vh"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
      />
      <el-table-column
        align="center"
        type="index"
        width="50"
        label="序号"
      />
      <el-table-column
        prop="name"
        show-overflow-tooltip
        label="试剂名称"
        align="center"
      />
      <el-table-column
        prop="purity"
        label="纯度"
        align="center"
      />
      <el-table-column
        show-overflow-tooltip
        prop="address"
        label="人工录入库存量"
        align="center"
      />
      <el-table-column
        prop="address"
        label="系统校验库存量"
        align="center"
      />
      <el-table-column
        prop="address"
        label="校验结果"
        align="center"
      />
      <el-table-column
        prop="address"
        label="操作用户"
        align="center"
      />
      <el-table-column
        prop="address"
        label="最新一次校验时间"
        align="center"
      />
    </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>
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      width="30%"
      title="录入库存"
      @close="onClose"
    >
      <div v-for="item in multipleSelection" :key="item.id" class="add-item">
        <div>{{ `${item.name} （${item.purity}）` }}</div>
        <el-input v-model.number="item.num" placement="请输入校验在库数量" />
      </div>
      <div slot="footer" style="text-align: center">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" :visible.sync="dialogHistoryVisible" width="60%" title="历史记录">
      <div class="header">
        <div class="header-left">
          <!--          <el-date-picker-->
          <!--            v-model="value1"-->
          <!--            type="date"-->
          <!--            placeholder="选择日期">-->
          <!--          </el-date-picker>-->
          <!--          <el-time-picker-->
          <!--            v-model="value2"-->
          <!--            is-range-->
          <!--            range-separator="至"-->
          <!--            start-placeholder="开始时间"-->
          <!--            end-placeholder="结束时间"-->
          <!--            placeholder="选择时间范围">-->
          <!--          </el-time-picker>-->
          <el-date-picker
            v-model="value2"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
          <el-select v-model="history_client_id" class="header-select" 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="name" placeholder="搜索试剂名称" />
          <el-button type="primary" icon="el-icon-search" @click="searchHistory">搜索</el-button>
        </div>
      </div>
      <el-table
        v-loading="loadingHistory"
        element-loading-text="拼命加载中"
        :header-cell-style="headerStyle"
        :data="historyData"
        height="420"
      >
        <el-table-column align="center" property="name" label="试剂名称" />
        <el-table-column align="center" property="english_name" label="英文名称" />
        <el-table-column align="center" property="bar_code" label="试剂编码" />
        <el-table-column align="center" property="purity" label="纯度" />
        <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="create_date" label="归还时间" />
        <el-table-column align="center" property="create_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="history_page"
          :total="history_total"
          :page-size.sync="history_page_size"
          @current-change="pageChange"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Inventory',
  data() {
    return {
      page: 1,
      page_size: 15,
      total: 100,
      client_id: '',
      dialogVisible: false,
      tableData: [
        {
          id: 1,
          name: '硫酸',
          purity: 'AR',
          num: 0
        },
        {
          id: 2,
          name: '硼氢化钾',
          purity: 'AR',
          num: 0
        },
        {
          id: 3,
          name: '氢氧化1-(3-硫代丙基)-2-13-(3-硫代丙基)-2(3H)-苯并噻唑亚' +
            '基]甲基}萘并[1.2-d]噻唑内盐,三乙基铵盐（AR）',
          purity: 'AR',
          num: 0
        }
      ],
      headerStyle: { 'background': '#E6E6E6' },
      multipleSelection: [],
      dialogHistoryVisible: false,
      loadingHistory: false,
      historyData: [],
      name: '',
      history_client_id: '',
      value1: '',
      value2: ['', ''],
      history_page: 1,
      history_page_size: 15,
      history_total: 100
    }
  },
  methods: {
    pageChange(page) {
      this.page = page
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleHistory() {
      this.dialogHistoryVisible = true
    },
    handleRefresh() {

    },
    // 录入库存
    handleAddReagent() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请选择试剂！')
        return
      }
      this.dialogVisible = true
    },
    // 提交校验
    handleCheck() {

    },
    onClose() {
    },
    close() {
      this.dialogVisible = false
    },
    handelConfirm() {

    },
    searchHistory() {

    }
  }
}
</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;

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

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

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

.add-item {
  margin-bottom: 1rem;
}
</style>
