<template>
  <div class="contents">
    <div class="content left">
      <div class="title">{{ this.$route.name === 'Receiving' ? '试剂领用' : '试剂归还' }}</div>
      <div class="img">
        <img src="@/assets/5-试剂入库/扫描试剂瓶.png" alt="">
      </div>
      <div class="text">
        请扫描或检测RFID
      </div>
    </div>
    <div class="content">
      <div class="title">{{ this.$route.name === 'Receiving' ? '试剂领用列表' : '试剂归还列表' }}</div>
      <div class="show-data">
        <el-table
          v-loading="loading"
          stripe
          element-loading-text="拼命加载中"
          :data="tableData"
          style="width: 100%"
          height="76vh"
          :header-cell-style="headerStyle"
        >
          <el-table-column
            align="center"
            type="index"
            width="50"
            label="序号"
          />
          <el-table-column
            prop="name"
            label="试剂名称"
            align="center"
          />
          <el-table-column
            prop="bar_code"
            label="条码编号"
            align="center"
          />
          <el-table-column
            prop="cas_number"
            label="CAS码"
            align="center"
          />
          <el-table-column
            prop="purity"
            label="纯度"
            align="center"
          />
        </el-table>
      </div>
      <div class="page my-pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :disabled="loading"
          :current-page.sync="page"
          :page-size.sync="page_size"
          @current-change="pageChange"
        />
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="40%">
      <el-radio-group v-model="place">
        <el-radio :label="3">备选项1</el-radio>
        <el-radio :label="6">备选项2</el-radio>
        <el-radio :label="9">备选项3</el-radio>
        <el-radio :label="12">备选项4</el-radio>
        <el-radio :label="19">备选项5</el-radio>
      </el-radio-group>
      <div style="text-align: center">
        <el-button type="primary" @click="btnClick">提交</el-button>
      </div>
    </el-dialog>
    <Scannner @getcode="getCode" />
  </div>
</template>

<script>
import Scannner from '@/components/Scannner/index'
import { use, drug_return, use_or_return_list } from '@/api/reagent/receivingReturn'
import stringify from '@/utils/stringify'
export default {
  name: 'ReceivingAndReturn',
  components: { Scannner },
  data() {
    return {
      barCode: '',
      headerStyle: { 'background': '#E6E6E6' },
      tableData: [],
      page: 1,
      page_size: 15,
      total: 0,
      loading: false,
      dialogVisible: false,
      place: null
    }
  },
  watch: {
    // 如果 `barCode` 发生改变，这个函数就会运行
    // 扫码后提交后台并自动选择下一行
    barCode: function(newCode, oldCode) {
      if (this.$route.name === 'Receiving') {
        use(stringify({ 'bar_code': newCode })).then(res => {
          this.tableData.push(res.data)
          this.$message.success(res.data.name + '  试剂领用成功！')
        })
      } else {
        this.dialogVisible = true
        // drug_return(stringify({ 'bar_code': newCode, 'place': '' })).then(res => {
        //   this.tableData.push(res.data)
        // })
      }
    }
  },
  created() {
    this.pageChange(1)
  },
  methods: {
    btnClick() {
      drug_return(stringify({ 'bar_code': this.barCode, 'place': this.place })).then(res => {
        this.tableData.push(res.data)
        this.dialogVisible = false
        this.$message.success('归还成功！')
      })
    },
    getCode(code) {
      this.barCode = code
    },
    getList() {
      const data = {
        status: this.$route.name === 'Receiving' ? 2 : 3,
        page: this.page,
        page_size: this.page_size
      }
      this.loading = true
      use_or_return_list(stringify(data)).then(res => {
        this.tableData = res.data.data
        this.total = res.data.total_count
      }).finally(() => (this.loading = false))
    },
    pageChange(page) {
      this.page = page
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.contents{
  margin: 1rem;
  display: flex;
  .content{
    width: 50%;
    height: calc(100vh - 110px);
    padding: 1rem;
    background: white;
    .title{
      font-size: 20px;
      font-weight: bold;
      color: #000000;
    }
    .img{
      text-align: center;
      margin-top: 6rem;
      img{
        width: 25.25rem;
      }
    }
    .text{
      margin-top: 2rem;
      text-align: center;
      font-size: 1.8rem;
      font-weight: 400;
      color: #909399;
    }
    .show-data{
      margin-top: 1rem;
    }
    .page{
      text-align: center;
    }
  }
  .left{
    margin-right: 1rem;
  }
}

</style>
