<template>
  <div class="contents">
    <div class="content left">
      <div class="title">{{ $store.state.app.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">{{ showWeigh }}</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="updateDrugRemain">更新重量</el-button>
            <el-button type="primary" plain @click="doTare">去皮（初始化天平）</el-button>
            <el-input v-model="inputWeigh" 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="所属终端">
            <div v-if="$store.getters.currentOptions.find(item => item.client_id === infoData.client_id)">
              {{ $store.getters.currentOptions.find(item => item.client_id === infoData.client_id).client_name }}
            </div>
            <div v-else>
              {{ infoData.client_id }}
            </div>
          </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, tare, zero } 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',
      timer: undefined,
      inputWeigh: '',
      surplusWeigh: ''
    }
  },
  computed: {
    showWeigh() {
      return this.checkInputWeigh() ? parseFloat(this.inputWeigh).toFixed(2) : this.weight
    }
  },
  mounted() {
    // 自动刷新获取数据(1000*60*60=>毫秒*秒*分钟，此时表示为60分钟)
    this.timer = setInterval(() => {
      this.doWeigh()
    }, 500)
    // this.doZero()
  },
  destroyed() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },

  methods: {
    getDrugInfo(code) {
      get_drug_info(stringify({ 'bar_code': code })).then(res => {
        this.infoData = res.data
        this.$message.success(res.data.name + '  试剂领扫描成功！')
      })
    },
    checkInputWeigh() {
      const w = parseFloat(this.inputWeigh)
      return !!w
    },
    getCode(code) {
      this.barCode = code
      this.getDrugInfo(this.barCode)
    },
    doWeigh() {
      weigh().then(
        res => {
          let weigh = null
          if (res.status === 0) {
            weigh = parseFloat(res.data)
            if (weigh == null) {
              return
            }
            // 保存余量数据
            this.surplusWeigh = weigh.toFixed(2)
            // 余量称重
            if (this.radio === '1') {
              this.weight = this.surplusWeigh
            } else {
              // 用量称重
              this.weight = parseFloat(this.infoData.remain).toFixed(2) - this.surplusWeigh
            }
          }
        }
      )
    },
    doTare() {
      tare().then(
        res => {
          this.$message.success('去皮操作成功')
        }
      )
    },
    doZero() {
      zero().then(
        res => {
          this.$message.success('清零成功')
        }
      )
    },
    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('请选择试剂！')
      }
    },
    updateDrugRemain() {
      if (this.infoData.medicament_id) {
        const w = this.checkInputWeigh()
        const data = {
          'medicament_id': this.infoData.medicament_id,
          'remain': w ? parseFloat(this.inputWeigh).toFixed(2) : this.surplusWeigh
        }
        update_drug_remain(stringify(data)).then(
          res => {
            this.$message.success(res.msg)
            this.getDrugInfo(this.infoData.bar_code)
          }
        )
      } 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>

