<template>
  <div class="contents">
    <div class="content left">
      <div class="title">试剂称重</div>
      <div class="img">
        <img src="@/assets/5-试剂入库/扫描试剂瓶.png" alt="">
      </div>
      <div class="text">
        请扫描或检测RFID
      </div>
    </div>
    <div class="content right">
      <div class="top">
        <div class="title">选择称重</div>
        <div class="tip">精度：0.01g±0.03g</div>
        <div class="show-data">
          <div class="top">
            <span class="num">{{ weight }}</span>
            <span class="unit">克(g)</span>
          </div>
          <div class="bottom">
            <el-radio v-model="radio" label="1">余量称重</el-radio>
            <el-radio v-model="radio" label="2">用量称重</el-radio>
            <el-button type="primary" @click="doWeigh">开始称重</el-button>
            <el-button type="primary" plain>去皮（初始化天平）</el-button>
            <el-input placeholder="手动输入" />
            <el-button type="warning">设置为空</el-button>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="title">详情信息</div>
        <el-descriptions class="margin-top" :column="2" border>
          <el-descriptions-item label-style="width:100px" span="2" label="试剂名称">{{ infoData.name }}</el-descriptions-item>
          <el-descriptions-item span="2" label="英文名称">{{ infoData.english_name }}</el-descriptions-item>
          <el-descriptions-item label="条码编号">{{ infoData.bar_code }}</el-descriptions-item>
          <el-descriptions-item label-style="width:100px" label="CAS码">{{ infoData.cas_number }}</el-descriptions-item>
          <el-descriptions-item label="试剂纯度">{{ infoData.purity }}</el-descriptions-item>
          <el-descriptions-item label="试剂余量">{{ infoData.remain }}</el-descriptions-item>
          <el-descriptions-item label="生产日期">{{ infoData.production_date }}</el-descriptions-item>
          <el-descriptions-item label="过期日期">{{ infoData.expiration_date }}</el-descriptions-item>
          <el-descriptions-item label="生产厂家">{{ infoData.manufacturer }}</el-descriptions-item>
          <el-descriptions-item label="经销商">{{ infoData.distributor }}</el-descriptions-item>
          <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-descriptions-item label="是否监管">{{ infoData.is_supervise }}</el-descriptions-item>
          <el-descriptions-item label="所属终端">{{ infoData.client_id }}</el-descriptions-item>
          <el-descriptions-item label="最后使用人">
            <el-tag v-if="infoData.by_user_name">{{ infoData.by_user_name }}</el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <Scannner @getcode="getCode" />
  </div>
</template>

<script>
import stringify from '@/utils/stringify'
import Scannner from '@/components/Scannner/index'
import { update_drug_remain, weigh, get_drug_info } from '@/api/reagent/weight'
import { set_drug_empty_bottle } from '@/api/reagent/management'

export default {
  name: 'Weighing',
  components: { Scannner },
  data() {
    return {
      headerStyle: { 'background': '#E6E6E6' },
      tableData: [],
      radio: '1',
      barCode: '',
      infoData: '',
      statusMap: ['在库', '出库', '空瓶'],
      statusColorMap: ['success', '', 'warning'],
      weight: '0.00'
    }
  },
  watch: {
    // 如果 `barCode` 发生改变，这个函数就会运行
    // 扫码后提交后台并自动选择下一行
    barCode: function(newCode, oldCode) {
      get_drug_info(stringify({ 'bar_code': newCode })).then(res => {
        this.infoData = res.data
        this.$message.success(res.data.name + '  试剂领扫描成功！')
      })
    }
  },
  methods: {
    getCode(code) {
      this.barCode = code
    },
    handleSetEmpty() {
      if (this.infoData.medicament_id) {
        const data = {
          medicament_id: this.infoData.medicament_id
        }
        set_drug_empty_bottle(stringify(data)).then(res => {
          this.$message.success(res.msg)
        })
      } else {
        this.$message.warning('请选择试剂！')
      }
    },
    doWeigh() {
      weigh().then(
        res => (this.weight = res.data)
      )
    },
    updateDrugRemain() {
      if (this.infoData.medicament_id) {
        const data = {
          'medicament_id': this.infoData.medicament_id,
          'reain': this.weight
        }
        update_drug_remain(stringify(data)).then(
          res => {
            this.$message.success(res.msg)
          }
        )
      } else {
        this.$message.warning('请选择试剂！')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.contents {
  margin: 1rem;
  display: flex;

  .content {
    width: 50%;
    height: calc(100vh - 110px);
    padding: 1rem;
    background: white;

    .title {
      font-size: 1.25rem;
      font-weight: bold;
      color: #000000;
    }

    .tip {
      width: 100%;
      font-size: 0.875rem;
      font-weight: 400;
      color: #C0C4CC;
      text-align: right;
    }

    .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;

      .top {
        .num {
          width: 660px;
          height: 124px;
          background: linear-gradient(180deg, #FFFFFF 0%, #F2F6FC 100%);
          box-shadow: inset 0px 4px 12px 1px #DCDFE6;
          border-radius: 4px 4px 4px 4px;
          opacity: 1;
        }
      }
    }

    .page {
      text-align: center;
    }
  }

  .left {
    margin-right: 1rem;
  }

  .right {
    background-color: #F7F7F7;
    padding: 0;

    .top {
      background: white;
      margin-bottom: 1rem;
      padding: 1rem;

      .show-data {
        .top {
          .num {
            padding: 0.75rem 8.25rem 0.75rem 8.25rem;
            width: 41.25rem;
            height: 7.75rem;
            display: inline-block;
            background: linear-gradient(180deg, #FFFFFF 0%, #F2F6FC 100%);
            box-shadow: inset 0rem 0.25rem 0.75rem 0.0625rem #DCDFE6;
            border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
            opacity: 1;
            font-size: 6.25rem;
            font-weight: 400;
            color: #606266;
            text-align: center;
          }

          .unit {
            font-size: 32px;
            font-weight: 400;
            color: #909399;
          }
        }

      }
    }

    .bottom {
      background: white;
      padding: 1rem;

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

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

