<template>
  <div class="main-container-text">
    <div class="title">{{ $store.state.app.title }}管理</div>
    <div class="header">
      <el-select v-model="client_id" clearable placeholder="请选择柜体">
        <el-option
          v-for="item in $store.getters.currentOptions"
          :key="item.id"
          :label="item.client_name"
          :value="item.client_id"
        />
      </el-select>
      <el-input v-model="name" clearable placeholder="请输入搜索名称" />
      <el-input v-model="b_code" clearable placeholder="请输入搜索试剂编码" />
      <el-button type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
      <el-button type="primary" plain @click="handleSetEmpty">
        <svg-icon icon-class="cup" />
        设为空瓶
      </el-button>
      <el-button icon="el-icon-edit" @click="handleEdit">编辑{{ $store.state.app.title }}</el-button>
      <el-button @click="showHistory">
        <svg-icon icon-class="流转" />
        查看流转记录
      </el-button>
      <el-button icon="el-icon-user" @click="handleDisable">分配禁用用户</el-button>

      <!-- 母液配置管理块 -->
      <!-- <el-button type="primary" @click="MuyeConf">母液管理配置</el-button> -->

      <div class="header-right">
        <el-button icon="el-icon-delete" circle @click="handleDel" />
        <el-button icon="el-icon-refresh" circle @click="handleRefresh" />
      </div>
    </div>
    <el-table
      ref="table"
      v-loading="loading"
      :data="tableData"
      stripe
      element-loading-text="拼命加载中"
      :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"
        width="100"
      />
      <el-table-column
        prop="english_name"
        show-overflow-tooltip
        label="英文名称"
        align="center"
        width="100"
      />
      <el-table-column
        v-if="$store.getters.classification === 'standard'"
        prop="unit_code"
        label="单位编号"
        align="center"
      />
      <el-table-column
        v-if="$store.getters.classification === 'standard'"
        prop="standard_code"
        label="危化品批号"
        align="center"
      />
      <el-table-column
        prop="bar_code"
        label="试剂编码"
        align="center"
      />
      <el-table-column
        show-overflow-tooltip
        prop="cas_number"
        label="CAS码"
        align="center"
      />
      <el-table-column
        prop="speci"
        label="规格"
        align="center"
      />
      <el-table-column
        prop="remain"
        label="余量(g)"
        align="center"
      />
      <el-table-column
        prop="purity"
        label="纯度"
        align="center"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="category"
        label="分类"
        align="center"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="price"
        label="价格"
        align="center"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="remark10"
        label="开启日期"
        align="center"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="production_date"
        label="生产日期"
        align="center"
        width="150"
      />
      <el-table-column
        prop="put_in_date"
        label="入库时间"
        align="center"
        width="150"
      />
      <!--      <el-table-column-->
      <!--        prop="is_supervise"-->
      <!--        label="是否监管"-->
      <!--        align="center"-->
      <!--      />-->

      <el-table-column
        label="图片信息"
        align="center"
      >
        <template slot-scope="scope">
          <el-button @click="() => handleShowImage(scope.row)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag :type="statusColorMap[scope.row.status-1]">{{ statusMap[scope.row.status - 1] }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="client_id"
        label="所属终端"
        align="center"
      >
        <template slot-scope="scope">
          <div v-if="$store.getters.currentOptions.find(item => item.client_id === scope.row.client_id)">
            {{ $store.getters.currentOptions.find(item => item.client_id === scope.row.client_id).client_name }}
          </div>
          <div v-else>
            {{ scope.row.client_id }}
          </div>
        </template>
      </el-table-column>
      <!--      <el-table-column-->
      <!--        prop="inventory_warning_value"-->
      <!--        label="预警量(瓶)"-->
      <!--        align="center"-->
      <!--      />-->
      <!--      <el-table-column-->
      <!--        prop="use_days_warning_value"-->
      <!--        label="提前预警(天)"-->
      <!--        align="center"-->
      <!--      />-->
      <el-table-column
        v-if="$store.getters.classification === 'standard'"
        prop="storage_condition"
        label="存储条件"
        align="center"
      />
      <el-table-column
        v-if="$store.getters.classification === 'standard'"
        prop="storage_type"
        label="管理分类"
        align="center"
      />
      <el-table-column
        prop="by_user_name"
        label="最后使用人"
        align="center"
      />
      <el-table-column
        v-for="item in extra_form"
        :key="item.id"
        align="center"
        :prop="item.name"
        :label="item.name"
        width="100"
        show-overflow-tooltip
      />
    </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
      :close-on-click-modal="false"
      :visible.sync="dialogHistoryVisible"
      width="60%"
      title="查看流转记录"
      @close="handleHistoryClose"
    >
      <el-table
        v-loading="loadingHistory"
        element-loading-text="拼命加载中"
        :header-cell-style="headerStyle"
        :data="historyData"
        height="420"
      >
        <el-table-column align="center" type="index" width="50" label="序号" />
        <el-table-column align="center" property="name" label="试剂名称" />
        <el-table-column align="center" property="bar_code" label="试剂编码" width="100" show-overflow-tooltip />
        <el-table-column align="center" property="cas_number" label="CAS码" />
        <el-table-column align="center" property="purity" label="纯度" width="100" show-overflow-tooltip />
        <el-table-column align="center" property="client_id" label="所属终端">
          <template slot-scope="scope">
            <div v-if="$store.getters.currentOptions.find(item => item.client_id === scope.row.client_id)">
              {{ $store.getters.currentOptions.find(item => item.client_id === scope.row.client_id).client_name }}
            </div>
            <div v-else>
              {{ scope.row.client_id }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" property="status" label="操作类型">
          <template slot-scope="scope">
            <el-tag :type="statusColorMap[scope.row.status-1]">{{ recodeStatusMap[scope.row.status - 1] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" property="create_date" label="操作时间" width="150" />
        <el-table-column align="center" property="create_user_name" 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"
          :disabled="loadingHistory"
          @current-change="HistoryPageChange"
        />
      </div>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" :visible.sync="dialogUserVisible" width="60%" title="分配禁用用户">
      <div class="user-header">
        <el-input v-model="seach_user" clearable placeholder="请输入内容" />
        <el-button type="primary" icon="el-icon-search" @click="getUserList">搜索</el-button>
        <el-button plain type="danger" @click="handleDisUser">
          <svg-icon icon-class="确认禁用" />
          确认禁用
        </el-button>
        <el-button plain type="success" @click="handleEnUser">
          <svg-icon icon-class="解除禁用" />
          解除禁用
        </el-button>
      </div>
      <el-table
        v-loading="loadingUser"
        element-loading-text="拼命加载中"
        :header-cell-style="headerStyle"
        :data="userData"
        height="420"
        stripe
        @selection-change="handleUserSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column type="index" width="50" />
        <el-table-column align="center" property="name" label="用户头像">
          <template slot-scope="scope">
            <el-avatar :size="20" :src="scope.row.circleUrl" />
          </template>
        </el-table-column>
        <el-table-column align="center" property="real_name" label="用户名称" />
        <el-table-column align="center" property="role_name" label="用户身份" />
        <el-table-column align="center" label="禁用状态">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status_type === 1?'danger':'success'">
              {{ scope.row.status_type === 1 ? '已禁用' : '未禁用' }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
      <div class="my-pagination" style="text-align: center">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page.sync="user_page"
          :total="user_total"
          :page-size.sync="user_page_size"
          :disabled="loadingUser"
          @current-change="userPageChange"
        />
      </div>

    </el-dialog>
    <el-dialog
      :visible.sync="dialogEditVisible"
      :close-on-click-modal="false"
      width="60%"
      :title="`编辑${$store.state.app.title}`"
      @close="onClose"
    >
      <el-row :gutter="15">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="110px">
          <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="条码编号" prop="bar_code">
              <el-input v-model="formData.bar_code" 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="shelf_life">
              <el-input v-model="formData.shelf_life" placeholder="请输入保质期" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生产日期" prop="production_date">
              <el-date-picker
                v-model="formData.production_date"
                style="width: 100%"
                type="datetime"
                placeholder="选择过期日期"
                value-format="yyyy-MM-dd HH:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="过期日期" prop="expiration_date">
              <el-date-picker
                v-model="formData.expiration_date"
                style="width: 100%"
                type="datetime"
                placeholder="选择过期日期"
                value-format="yyyy-MM-dd HH:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="规格" prop="speci">
              <el-input v-model="formData.speci" 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="field115">-->
          <!--              <el-input v-model="formData.field115" placeholder="请输入说明" clearable :style="{width: '100%'}" />-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col :span="6">-->
          <!--            <el-form-item label="是否监管" prop="is_supervise">-->
          <!--              <el-switch v-model="formData.is_supervise" />-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col :span="4">-->
          <!--            <el-form-item label="是否称重" prop="is_weigh">-->
          <!--              <el-switch v-model="formData.is_weigh" />-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <el-col v-if="$store.getters.classification === 'standard'" :span="12">
            <el-form-item label="单位编号" prop="unit_code">
              <el-input v-model="formData.unit_code" placeholder="请输入单位编号" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="价格" prop="price">
              <el-input v-model="formData.price" placeholder="请输入价格" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分类" prop="category">
              <el-input v-model="formData.category" placeholder="请输入分类" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
          <el-col v-if="$store.getters.classification === 'standard'" :span="12">
            <el-form-item label="危化品批号" prop="standard_code">
              <el-input v-model="formData.standard_code" placeholder="请输入危化品批号" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
          <el-col v-if="$store.getters.classification === 'standard'" :span="12">
            <el-form-item label="存储条件" prop="storage_condition">
              <el-input v-model="formData.storage_type" placeholder="请输入存储条件" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
          <el-col v-if="$store.getters.classification === 'standard'" :span="12">
            <el-form-item label="管理分类" prop="storage_type">
              <el-input v-model="formData.storage_type" placeholder="请输入管理分类" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
          <el-col v-for="item in extra_form" :key="item.id" :span="12">
            <el-form-item :label="item.name" :prop="item.name">
              <el-input
                v-model="formData[item.name]"
                :placeholder="'请输入' + item.name "
                clearable
                :style="{width: '100%'}"
              />
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div style="text-align: center">
        <el-button @click="onClose">取消</el-button>
        <el-button type="primary" @click="handelConfirm">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="图片信息"
      :visible.sync="dialogImageVisible"
      :close-on-click-modal="false"
      width="500"
      @close="handleImageClose"
    >
      <div
        v-if="srcList.length > 0"
        v-loading="loadingImageList"
        element-loading-text="拼命加载中"
      >
        <div style="text-align: center">
          <ul class="el-upload-list el-upload-list--picture-card">
            <li
              v-for="file in srcList"
              :key="file.image_id"
              :class="['el-upload-list__item', 'is-success', focusing ? 'focusing' : '']"
              tabindex="0"
              style="border: none"
              @focus="focusing = true"
              @blur="focusing = false"
              @click="focusing = false"
            >
              <slot :file="file">
                <img
                  style="width:100px"
                  class="el-upload-list__item-thumbnail"
                  :src="getImageUrl(file)"
                  alt=""
                >
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handleImageView(file)"
                  >
                    <i class="el-icon-zoom-in" />
                  </span>
                  <span
                    class="el-upload-list__item-delete"
                    @click="handleDelFile(file.image_id)"
                  >
                    <i class="el-icon-delete" />
                  </span>
                </span>

              </slot>
            </li>
          </ul>
        </div>
      </div>
      <div
        v-else
        v-loading="loadingImageList"
        element-loading-text="拼命加载中"
        style="text-align: center;margin-bottom: 40px"
      >
        请上传
      </div>
      <el-image-viewer v-if="imgViewerVisible" :z-index="3000" :url-list="srcViewrList" :on-close="closeImgViewer" />
      <div style="display: flex;justify-content: center">
        <el-upload
          class="upload-demo"
          :action="UPLOAD_URL"
          :show-file-list="false"
          :before-upload="beforeUpload"
          :on-success="uploadSuccess"
          :on-error="uploadErr"
          :data="{
            variety_id: currentItem.variety_id,
            medicament_id: currentItem.medicament_id
          }"
        >
          <el-button type="primary">普通上传</el-button>
        </el-upload>
        <el-button type="success" @click="handleGaoPiYi">高拍仪上传</el-button>
      </div>
    </el-dialog>

    <!-- 设置空瓶备注模块 -->
    <el-dialog
      :title="opTitle"
      width="30%"
      :close-on-click-modal="false"
      :visible.sync="drugSetEmptyVisble"
      @close="drugSetEmptyClose"
    >
      <el-input
        v-model="drugSetEmptyStr"
        placeholder="请填写空瓶质量"
      />
      <div style="text-align: center;margin-top: 10px;">
        <el-button type="primary" @click="SetEmpty">保存</el-button>
      </div>
    </el-dialog>

    <!-- 母液管理配置块 -->
    <el-dialog
      :title="opTitle"
      width="70%"
      :close-on-click-modal="false"
      :visible.sync="drugMotherLiquorVisble"
      @close="MotherLiquorClose"
    >
      <div class="header-select">
        <el-button type="primary" @click="handleMotherLiquorOpen('add')">新增</el-button>
        <el-button type="primary" @click="handleMotherLiquorOpen('update')">编辑</el-button>
        <el-button type="danger" @click="delMotherLiquorList">删除</el-button>
        <el-button type="primary" @click="MotherLiquorprinterLabel">打印标签</el-button>
      </div>
      <div class="content">
        <el-table
          style="width: 100%"
          size="medium"
          height="400"
          :data="MotherLiquorData"
          @selection-change="MotherLiquorSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column align="center" property="start_time" label="配置日期" />
          <el-table-column align="center" property="end_time" label="有效期" />
          <el-table-column align="center" property="purity" label="配置浓度" />
          <el-table-column align="center" property="mother_liquor_code" label="母液编码" />
          <el-table-column align="center" property="basis" label="配置依据" />
          <el-table-column align="center" property="doc_log" label="配置记录" />
          <el-table-column align="center" property="unit_code" label="单位编号" />
        </el-table>
      </div>

    </el-dialog>
    <el-dialog
      :title="baseTitle"
      width="50%"
      :close-on-click-modal="false"
      :visible.sync="editorMotherLiquorVisble"
      @close="MotherLiquoronClose"
    >
      <!-- 新增 -->
      <mother-liquir-form :oldmotherliquor="oldMotherLiquor" @handlefunc="addMotherLiquorList" />
    </el-dialog>

    <el-dialog
      :title="baseTitle"
      width="50%"
      :close-on-click-modal="false"
      :visible.sync="addupdateMotherLiquorVisble"
      @close="updateMotherLiquorClose"
    >
      <!-- 修改 -->
      <mother-liquir-form :oldmotherliquor="oldMotherLiquor" @handlefunc="updateMotherLiquorList" />
    </el-dialog>
    <Scannner @getcode="getMotherLiquorList" />
  </div>
</template>

<script>
import {
  del,
  drug_list,
  get_durg_record,
  set_drug_empty_bottle,
  update,
  user_ban_confirm,
  user_ban_list,
  user_ban_relieve,
  get_medicament_image,
  del_medicament_image,
  use_gaopaiyi
} from '@/api/reagent/management'
import stringify from '@/utils/stringify'
import { get_use } from '@/api/reagent/customform'
// import { mother-liquir-form } from '@/views/reagent/management/motherliquir/index'
import Scannner from '@/components/Scannner/index'
export default {
  name: 'Management',
  components: {
    'el-upload-list': () => import('element-ui/packages/upload/src/upload-list'),
    'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer'),
    'mother-liquir-form': () => import('@/views/reagent/management/motherliquir/index'),
    Scannner
    // 'get-code-scanner' : () => import('@/components/Scannner/index')
  },
  data() {
    return {
      page: 1,
      page_size: 15,
      total: 0,
      recodeStatusMap: ['入库', '领用', '归还'],
      statusMap: ['在库', '出库', '空瓶', '', '预备入库'],
      statusColorMap: ['success', '', 'warning'],
      headerStyle: { 'background': '#E6E6E6' },
      client_id: null,
      name: null,
      b_code: null,
      multipleSelection: [],
      tableData: [],
      loading: true,
      //  查看流转记录
      dialogHistoryVisible: false,
      loadingHistory: false,
      historyData: [],
      history_page: 1,
      history_page_size: 15,
      history_total: 0,

      // 设置空瓶弹窗
      drugSetEmptyVisble: false,
      drugSetEmptyStr: '',

      // 母液配置管理
      drugMotherLiquorVisble: false,
      addupdateMotherLiquorVisble: false,
      editorMotherLiquorVisble: false,
      opTitle: '',
      baseTitle: '',
      m_id: null,
      drug_code: null,
      loadingMotherLiquor: false,
      MotherLiquorData: [],
      MotherLiquorSelection: [],
      // oldmotherliquor: {},
      oldMotherLiquor: {},

      // 分配禁用用户
      dialogUserVisible: false,
      loadingUser: false,
      seach_user: '',
      userData: [],
      user_page: 1,
      user_page_size: 15,
      user_total: 0,
      multipleUserSelection: [],
      // 编辑试剂
      formData: {
        medicament_id: undefined,
        name: undefined,
        english_name: undefined,
        bar_code: undefined,
        cas_number: undefined,
        purity: undefined,
        shelf_life: undefined,
        production_date: '14:09:53',
        expiration_date: null,
        // use_days_warning_value: undefined,
        // shelf_life_warning_value: undefined,
        // inventory_warning_value: undefined,
        speci: undefined,
        net_weight_unit: undefined,
        net_weight: undefined,
        // field115: undefined,
        // is_supervise: undefined,
        // is_weigh: undefined,
        unit_code: undefined,
        price: undefined,
        category: undefined,
        standard_code: undefined,
        storage_condition: undefined,
        storage_type: undefined
      },
      rules: {
        price: [{
          required: true,
          message: '请输入价格',
          trigger: 'blur'
        }, {
          validator: (rule, value, callback) => {
            if (!value) {
              callback(new Error('金额不能为空'))
            } else {
              if (!this.isNumber(value)) {
                callback(new Error('请输入数字值'))
              } else {
                callback()
              }
            }
          },
          trigger: 'blur'
        }],
        name: [{
          required: true,
          message: '请输入试剂名称',
          trigger: 'blur'
        }],
        english_name: [],
        bar_code: [],
        cas_number: [{
          required: true,
          message: '请输入CAS码',
          trigger: 'blur'
        }],
        purity: [{
          required: true,
          message: '请输入试剂纯度',
          trigger: 'blur'
        }],
        shelf_life: [{
          required: true,
          message: '请输入保质期',
          trigger: 'blur'
        }],
        production_date: [{
          required: true,
          message: '请选择生产日期',
          trigger: 'change'
        }],
        expiration_date: [{
          required: true,
          message: '请选择过期日期',
          trigger: 'change'
        }],
        // use_days_warning_value: [{
        //   required: true,
        //   message: '请输入出库预警天数',
        //   trigger: 'blur'
        // }],
        // shelf_life_warning_value: [{
        //   required: true,
        //   message: '请输入保质期预警天数',
        //   trigger: 'blur'
        // }],
        // inventory_warning_value: [{
        //   required: true,
        //   message: '请输入预警量',
        //   trigger: 'blur'
        // }],
        speci: [],
        net_weight_unit: [],
        net_weight: []
        // field115: [],
        // is_supervise: [],
        // is_weigh: []
      },
      dialogEditVisible: false,
      extra_form: [],
      // 图片信息
      dialogImageVisible: false,
      srcList: [],
      srcViewrList: [],
      imgViewerVisible: false,
      currentItem: {},
      loadingImageList: false,
      focusing: false,
      UPLOAD_URL: process.env.VUE_APP_BASE_API + '/api/drug/save_drug_img'
    }
  },
  created() {
    get_use().then(res => {
      this.extra_form = res.data
      this.getList()
    })
  },
  methods: {
    // 设置空瓶
    SetEmpty() {
      const data = {
        medicament_id: this.multipleSelection[0].medicament_id,
        empty_str: this.drugSetEmptyStr
      }
      set_drug_empty_bottle(stringify(data)).then(res => {
        this.$message.success(res.msg)
        this.drugSetEmptyClose()
        this.getList()
      })
    },
    handleSetEmpty() {
      if (this.multipleSelection.length !== 1) {
        this.$message.warning('请选择一个试剂！')
        return
      }
      this.drugSetEmptyVisble = true
      this.opTitle = '备注'
      // const data = {
      //   medicament_id: this.multipleSelection[0].medicament_id
      // }
      // set_drug_empty_bottle(stringify(data)).then(res => {
      //   this.$message.success(res.msg)
      //   this.getList()
      // })
    },
    drugSetEmptyClose() {
      this.drugSetEmptyVisble = false
      this.drugSetEmptyStr = ''
      this.opTitle = ''
    },
    /* 图片信息展示*/
    // 高拍仪请求
    handleGaoPiYi() {
      this.loadingImageList = true
      const data = {
        variety_id: this.currentItem.variety_id,
        medicament_id: this.currentItem.medicament_id
      }
      use_gaopaiyi(stringify(data)).then(res => {
        this.$message.success(res.msg)
        this.getImageList()
      }).finally(() => { this.loadingImageList = false })
    },
    // 得到图片数据
    getImageList() {
      const data = {
        variety_id: this.currentItem.variety_id,
        medicament_id: this.currentItem.medicament_id
      }
      this.loadingImageList = true
      get_medicament_image(stringify(data)).then(res => {
        this.srcList = res.data
      }).finally(() => {
        this.loadingImageList = false
      })
    },
    // 获取图片url
    getImageUrl(file) {
      return process.env.VUE_APP_BASE_API + '/api/drug/get_img_info/' + file.pic_url
    },
    // 显示全部图片
    handleShowImage(row) {
      this.currentItem = row
      this.getImageList()
      this.dialogImageVisible = true
    },
    // 图片大图预览
    handleImageView(item) {
      const url = this.getImageUrl(item)
      this.srcViewrList = [url]
      this.imgViewerVisible = true
      console.log(this.srcViewrList)
    },
    // 上传成功
    uploadSuccess(response, file, fileList) {
      this.getImageList()
      this.loadingImageList = false
    },
    // 上传失败
    // eslint-disable-next-line handle-callback-err
    uploadErr(err, file, fileList) {
      this.loadingImageList = false
    },
    // 上传之前
    beforeUpload(file) {
      this.loadingImageList = true
    },
    // 删除图片
    handleDelFile(image_id) {
      const data = { image_id }
      this.loadingImageList = true
      del_medicament_image(stringify(data)).then(
        res => {
          this.$message.success(res.msg)
          this.getImageList()
        }
      ).finally(() => { this.loadingImageList = false })
    },
    // 关闭图片预览
    closeImgViewer() {
      this.imgViewerVisible = false
    },
    // 弹窗关闭清理工作
    handleImageClose() {
      this.srcList = []
      this.srcViewrList = []
      this.currentItem = {}
    },
    /* 试剂相关*/
    // 获取试剂列表
    getList() {
      this.loading = true
      const data = {
        page: this.page,
        page_size: this.page_size,
        client_id: this.client_id,
        seach_word: this.name,
        b_code: this.b_code
      }
      drug_list(stringify(data)).then(res => {
        this.tableData = res.data.data
        this.total = res.data.total_count
      }).finally(() => {
        this.$refs['table'].doLayout()
        this.loading = false
      })
    },

    // 获取流转记录列表
    getHistoryList() {
      this.loadingHistory = true
      const data = {
        page: this.history_page,
        page_size: this.history_page_size,
        medicament_id: this.multipleSelection[0].medicament_id
      }
      get_durg_record(stringify(data)).then(res => {
        this.historyData = res.data.data_list
        this.history_total = res.data.total_count
      }).finally(() => {
        this.loadingHistory = false
      })
    },
    // 查看流转记录按钮click事件处理
    showHistory() {
      if (this.multipleSelection.length !== 1) {
        this.$message.warning('请选择一个试剂！')
        return
      }
      this.dialogHistoryVisible = true
      this.getHistoryList()
    },
    // 流转记录翻页
    HistoryPageChange(page) {
      this.history_page = page
      this.getHistoryList()
    },
    handleHistoryClose() {
      this.historyData = []
      this.history_page = 1
      this.history_total = 0
    },
    isNumber(val) {
      const regPos = /^\d+(\.\d+)?$/
      const regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/
      return regPos.test(val) || regNeg.test(val)
    },
    handleDel() {
      if (this.multipleSelection.length !== 1) {
        this.$message.warning('请选择一个试剂！')
        return
      }
      this.$confirm('此操作将永久删除该试剂, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {
          medicament_id: this.multipleSelection[0].medicament_id
        }
        del(stringify(data)).then(res => {
          this.$message.success(res.msg)
          this.getList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 刷新按钮
    handleRefresh() {
      this.getList()
    },
    // 选择试剂
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 试剂展示翻页
    pageChange(page) {
      this.page = page
      this.getList()
    },
    // 分配禁用用户 翻页
    userPageChange(page) {
      this.getUserList()
    },
    // 用户多选
    handleUserSelectionChange(val) {
      this.multipleUserSelection = val
    },
    // 分配禁用用户按钮点击事件处理
    handleDisable() {
      if (this.multipleSelection.length !== 1) {
        this.$message.warning('请选择一个试剂！')
        return
      }
      this.getUserList()
      this.dialogUserVisible = true
    },
    getUserList() {
      const data = {
        drug_id: this.multipleSelection[0].variety_id,
        page: this.user_page,
        page_size: this.user_page_size,
        seach_user: this.seach_user
      }
      this.loadingUser = true
      user_ban_list(stringify(data)).then(res => {
        this.userData = res.data.data
        this.user_total = res.data.total_count
      }).finally(() => {
        this.loadingUser = false
      })
    },
    handleDisUser() {
      if (this.multipleUserSelection.length !== 1) {
        this.$message.warning('请选择一个用户！')
        return
      }
      const data = {
        user_id: this.multipleUserSelection[0].user_id,
        drug_id: this.multipleSelection[0].variety_id
      }
      user_ban_confirm(stringify(data)).then(res => {
        if (res.status === 0) {
          this.$message.success(res.msg)
          this.getUserList()
        }
      })
    },

    handleEnUser() {
      if (this.multipleUserSelection.length !== 1) {
        this.$message.warning('请选择一个用户！')
        return
      }
      const data = {
        user_id: this.multipleUserSelection[0].user_id,
        drug_id: this.multipleSelection[0].variety_id
      }
      user_ban_relieve(stringify(data)).then(res => {
        if (res.status === 0) {
          this.$message.success(res.msg)
          this.getUserList()
        }
      })
    },

    // 编辑
    handleEdit() {
      if (this.multipleSelection.length !== 1) {
        this.$message.warning(`请选择一个需要编辑的${this.$store.state.app.title}！`)
        return
      }
      // 给form赋值
      const row = this.multipleSelection[0]
      Object.keys(this.formData).forEach(item => {
        this.formData[item] = row[item]
      })
      this.formData.is_supervise = this.formData.is_supervise === 1
      this.formData.is_weigh = this.formData.is_weigh === 1
      this.dialogEditVisible = true
    },
    onClose() {
      this.dialogEditVisible = false
      this.$refs['elForm'].resetFields()
    },
    handelConfirm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        const data = JSON.parse(JSON.stringify(this.formData))
        data.is_supervise = data.is_supervise ? 1 : 0
        data.is_weigh = data.is_weigh ? 1 : 0
        update(stringify(data)).then(res => {
          this.$message.success(res.msg)
          this.getList()
        })
        this.onClose()
      })
    },
    //  母液配置管理块
    MuyeConf() {
      if (this.multipleSelection.length < 1) {
        this.$message.warning('请选择一个试剂！')
        return
      } else if (this.multipleSelection.length > 1) {
        this.$message.warning('只能查看一条！')
        return
      }
      this.getMotherLiquorList()
    },
    // 获取试剂母液列表
    getMotherLiquorList(code = null) {
      // this.drugMotherLiquorVisble = true
      this.loadingMotherLiquor = true
      if (this.multipleSelection.length === 1) {
        this.m_id = this.multipleSelection[0].medicament_id
        this.drug_code = this.multipleSelection[0].bar_code
        this.opTitle = `名称:${this.multipleSelection[0].name}`
      } else {
        this.drug_code = code
      }
      console.log(this.drug_code)
      this.b_code =code
      const data = {
        medicament_id: this.m_id,
        code: this.drug_code
      }
      get_mother_liquor(stringify(data)).then(res => {
        this.MotherLiquorData = res.data.data_list
        if (res.status === 0) {
          this.drugMotherLiquorVisble = true
          if (res.data.name) {
            this.opTitle = `名称:${res.data.name}`
          }
        } else {
          this.$message.success(res.msg)
        }
      }).finally(() => {
        this.loadingMotherLiquor = false
      })
    },
    handleMotherLiquorOpen(t) {
      if (t === 'add') {
        this.baseTitle = '新增母液管理配置'
        this.editorMotherLiquorVisble = true
        this.oldMotherLiquor = {}
      } else {
        if (this.MotherLiquorSelection.length > 1) {
          this.$message.warning('一次只能编辑一条！')
          return
        } else if (this.MotherLiquorSelection.length === 0) {
          this.$message.warning('请选择需要编辑的条目！')
          return
        }
        this.oldMotherLiquor = this.MotherLiquorSelection[0]
        this.baseTitle = '编辑母液管理配置'
        console.log(this.oldMotherLiquor)
        this.addupdateMotherLiquorVisble = true
      }
    },
    addMotherLiquorList(obj) {
      console.log(obj)
      // obj.medicament_id = this.multipleSelection[0].medicament_id
      // obj.medicament_name = this.multipleSelection[0].name
      // obj.unit_code = this.multipleSelection[0].unit_code
      if (this.multipleSelection.length === 1) {
        obj.medicament_id = this.multipleSelection[0].medicament_id
      } else {
        obj.medicament_id = null
      }
      obj.drug_code = this.drug_code
      add_mother_liquor(stringify(obj)).then(
        res => {
          if (res.status === 0) {
            this.$message.success('操作成功')
            this.getMotherLiquorList(this.drug_code)
            this.reagentAddVisible = false
          } else {
            this.$message.success('操作失败，请重试！')
          }
        }
      ).finally(() => {
        this.editorMotherLiquorVisble = false
        this.oldMotherLiquor = {}
      })
    },
    updateMotherLiquorList(obj) {
      update_mother_liquor(stringify(obj)).then(
        res => {
          if (res.status === 0) {
            this.$message.success('操作成功')
            this.getMotherLiquorList(this.drug_code)
            this.reagentAddVisible = false
          } else {
            this.$message.success('操作失败，请重试！')
          }
        }
      )
      this.addupdateMotherLiquorVisble = false
    },
    delMotherLiquorList() {
      if (this.MotherLiquorSelection.length === 0) {
        this.$message.warning(`请选择一个删除`)
        return
      }
      const data = {
        ids: this.MotherLiquorSelection.map(item => item.id).toString()
      }
      del_mother_liquor(stringify(data)).then(res => {
        this.$message.success(res.msg)
        this.getMotherLiquorList(this.drug_code)
      })
    },
    MotherLiquorClose() {
      this.opTitle = ''
      this.drug_code = null
      this.MotherLiquorSelection = []
      this.loadingMotherLiquor = false
    },
    updateMotherLiquorClose() {
      this.baseTitle = ''
      this.oldMotherLiquor = {}
      this.addupdateMotherLiquorVisble = false
    },
    MotherLiquoronClose() {
      this.oldMotherLiquor = {}
      this.baseTitle = ''
      this.editorMotherLiquorVisble = false
    },
    // 配置多选
    MotherLiquorSelectionChange(val) {
      this.MotherLiquorSelection = val
      // this.oldMotherLiquor = this.MotherLiquorSelection[0]
    },
    MotherLiquorprinterLabel() {
      if (this.MotherLiquorSelection.length === 0) {
        this.$message.warning(`请选择需要打印的条目`)
      } else {
        const data = {
          ids: this.MotherLiquorSelection.map(item => item.id).toString()
        }
        printer_label_mother_liquor(stringify(data)).then(
          res => {
            this.$message.success(res.msg)
          }
        )
      }
    }
  }
}
</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: 12.5rem;
      margin-right: 1rem;
    }

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

    .header-right {
      float: right;

    }
  }
}

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

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

.upload-demo {
  margin-right: 50px;
}

</style>
