<template>
  <div>
    <el-card class="el-card">
      <div>
        <el-form :model="unionQuery" size="mini" label-width="125px" v-show="showSearch">
          <el-row>
            <el-col :span="18">
              <el-form-item class="query-form-item" label="UDI码:">
                <el-input v-model="unionQuery.udiCode"
                          placeholder="请扫描或输入UDI码"
                          clearable="true"

                          @keyup.enter.native="keyup_submit($event)"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>

            <el-col :span="6">
              <el-form-item class="query-form-item" label="销售单元产品标识">
                <el-input
                  v-model="unionQuery.nameCode" clearable="true"
                  size="mini"
                  placeholder="请输入完整DI"
                  @keyup.enter.native="keyup_submit($event)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item class="query-form-item" label="医疗器械注册人:">
                <el-select
                  v-model="unionQuery.ylqxzcrbarmc"
                  filterable
                  remote
                  style="width: 100%"
                  clearable="true"
                  reserve-keyword
                  placeholder="医疗器械注册人"
                  :remote-method="findMethod"
                  :loading="loading"
                >
                  <el-option
                    v-for="item in fromOptions"
                    :key="item.ylqxzcrbarmc"
                    :label="item.ylqxzcrbarmc"
                    :value="item.ylqxzcrbarmc"
                  >
                    <span style="float: left">{{ item.ylqxzcrbarmc }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item class="query-form-item" label="器械通用名称:">
                <el-input
                  :disabled="unionQuery.ylqxzcrbarmc==null || unionQuery.ylqxzcrbarmc==''"
                  v-model="unionQuery.cpmctymc" clearable="true"
                  size="mini"
                  placeholder="器械通用名称"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="规格型号:" class="query-form-item">
                <el-input
                  v-model="unionQuery.ggxh" clearable="true"
                  :disabled="(unionQuery.cpmctymc=='' && unionQuery.nameCode=='' && unionQuery.ylqxzcrbarmc==null)"
                  placeholder="规格型号"
                  size="mini"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="注册证/备案号:" class="query-form-item">
                <el-input
                  v-model="unionQuery.zczbhhzbapzbh" clearable="true"
                  :disabled="(unionQuery.cpmctymc=='' && unionQuery.nameCode=='' && unionQuery.ylqxzcrbarmc==null)"
                  placeholder="注册证/备案号"
                  size="mini"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="top-right-btn" style="display:flex;">
          <el-button-group>
            <el-button icon="el-icon-view" type="primary" @click="hideSearch">显示/隐藏搜索栏
            </el-button>
            <el-button type="primary" icon="el-icon-refresh" @click="onReset">重置</el-button>
            <el-button type="primary" icon="el-icon-search" @click="searchList" size="mini"
            >查询
            </el-button
            >

          </el-button-group>

          <el-upload

            :action="uploadFileUrl"
            multiple
            :limit="1"
            :data="uploadData"
            :show-file-list="false"
            :on-success="handleChange"
            :on-exceed="handleExceed"
            :before-upload="handleBefore"
            icon="el-icon-search"
            :file-list="fileList"
          >
            <el-button type="primary" icon="el-icon-bottom-right" style="margin-left: 15px">导入器械信息</el-button>
          </el-upload>
        </div>
        <el-divider style="margin: 15px"></el-divider>
        <el-table
          :data="udidlList"
          style="width: 100%"
          @row-click="intentDetail"
          v-loading="loading"
          border
          highlight-current-row="true"
          :row-class-name="tableRowClassName"
          @current-change="handleErpChange"
        >

          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column
            label="产品标识"
            prop="nameCode"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="物资名称"
            prop="cpmctymc"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="规格型号"
            prop="ggxh"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="医疗器械注册人"
            prop="ylqxzcrbarmc"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="注册证编号"
            prop="zczbhhzbapzbh"
            show-overflow-tooltip
          ></el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="diDetail(scope.row)"
              >详情
              </el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :page-size="unionQuery.limit"
          @current-change="handleCurrentChange"
          layout="prev, pager, next"
          :total="total"
          :current-page="unionQuery.page"
        ></el-pagination>
      </div>
    </el-card>
    <el-dialog
      title="器械信息详情"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="selectDialog"
      width="65%"
      append-to-body
      v-if="selectDialog"
    >
      <selectDiDetail :editQuery="diDetails"
      ></selectDiDetail>
    </el-dialog>

  </div>
</template>

<script>
import {getUdiInfos, filterCompany} from "@/api/basic/udiInfo";
import axios from "axios";
import selectDiDetail from "../product/SelectDIDetailDialog";

export default {
  name: "UdiInfoDb",

  data() {
    return {
      unionQuery: {
        page: 1,
        limit: 10,
        udiCode: null,
        nameCode: "",
        cpmctymc: "",
        ylqxzcrbarmc: null,
        ggxh: "",
        zczbhhzbapzbh: "",
        isCheck: 1
      },
      combineLoading: false,
      combineQuery: {
        thirdId: "",
        relId: "",
        erpName: "",
        keys: [],
      },
      checked: true,
      udidlList: [],
      erpList: [],
      pageTotal: 1,
      total: 1,
      currentRow: null,
      fromOptions: [],
      loading: false,
      erpLloading: false,
      multipleUdiSelection: [],
      data: {},
      uploadFileUrl: null,
      uploadData: {
        thirdSys: "thirdId",
      },
      selectDialog: false,
      diDetails: null,
      showSearch: true,
    };
  },
  methods: {

    hideSearch() {
      this.showSearch = !this.showSearch;
    },

    onReset() {
      this.unionQuery = {
        page: 1,
        limit: 10,
        udiCode: null,
        nameCode: "",
        cpmctymc: "",
        ylqxzcrbarmc: null,
        ggxh: "",
        zczbhhzbapzbh: "",
        isCheck: 1
      };
    },
    searchList() {
      this.unionQuery.page = 1;
      this.getList();
    },
    getList() {
      if (
        this.unionQuery.udiCode == "" &&
        this.unionQuery.nameCode == "" &&
        this.unionQuery.cpmctymc == "" &&
        this.unionQuery.ylqxzcrbarmc == "" &&
        this.unionQuery.ggxh == "" &&
        this.unionQuery.zczbhhzbapzbh == ""
      ) {
        this.$message.warning("请输入查询条件");
        return;
      }
      this.loading = true;
      // this.unionQuery.page = 1;
      getUdiInfos(this.unionQuery)
        .then((response) => {
          this.loading = false;
          if (response.code == 20000) {
            this.udidlList = response.data.list || [];
            this.total = response.data.total || 0;
          } else {
            this.$message.error(response.message);
          }


        })
        .catch(() => {
          this.loading = false;
          this.udidlList = [];
          this.total = 0;
        });
    },


    keyup_submit(event) {
      this.unionQuery.page = 1;
      this.getList();
      event.target.select();
    },

    checkSelectable(row) {
      return !row.check;
    },
    handleCurrentChange(val) {
      this.unionQuery.page = val;
      this.getList();
    },
    tableRowClassName({row, rowIndex}) {
      if (row.check) return "warning-row";
      return "";
    },
    handleErpChange(val) {
      this.currentRow = val;
    },
    intentBack() {
      this.closeDialog();
    },

    handleSelectionUdiChange(val) {
      this.multipleUdiSelection = val;
    },
    findMethod(query) {
      let cQuery = {
        ylqxzcrbarmc: query,
        page: 1,
        limit: 10,
      };
      filterCompany(cQuery)
        .then((response) => {
          this.loading = false;
          this.fromOptions = response.data || [];
        })
        .catch(() => {
          this.loading = false;
          this.options = [];
        });
    },
    handleExceed() {
      this.$message.error("上传数量超出！");
    },
    handleBefore() {
      this.loading = true;
    },
    handleChange(response, files, fileList) {
      if (response.code != 20000) {
        this.loading = false;
        this.$message.error(response.message);
      } else {
        this.loading = false;
        this.$message.success(response.data);
      }
    },
    diDetail(row) {
      this.diDetails = row;
      this.selectDialog = true;
    },


    init() {
      axios.get("./config.json").then(res => {
        let response = res.data.UDI_SYNC_SERVER_IP + "";
        this.uploadFileUrl = response + "udisync/udiInfo/upload";
      });
    },

  },
  created() {
    this.init();
  },
  components: {
    selectDiDetail,
  },
};
</script>

<style scoped>
.checkitemTag {
  float: left;
  text-align: left;
  margin-top: 5px;
  width: 100%;
}

div /deep/ .el-table .warning-row {
  background: #bebebe;
}

div /deep/ .el-table .success-row {
  background: #ffffff;
}

.el-card {
  margin-right: 20px;
  /*transition: all .5s;*/
}

.query-form-item {
  display: block !important;
  margin-right: 10px;
  margin-bottom: 5px;
}

</style>
