<template>
  <div>
    <div style="display: flex">
      <el-checkbox v-model="checked" class="checkitemTag"
        >是否关联第三方产品信息</el-checkbox
      >
      <el-button
        style="margin-right: 20px"
        type="primary"
        size="mini"
        icon="search"
        @click="combine"
        >选入</el-button
      >
    </div>

    <el-card class="el-card" v-if="checked">
      <div>
        <el-form :inline="true" :model="erpQuery" style="display: flex" size="mini">
          <el-form-item class="query-form-item">
            <el-input
              v-model="erpQuery.invcode"
              placeholder="存货编码"
              @keyup.enter.native="keyupErp_submit($event)"
            ></el-input>
          </el-form-item>
          <el-form-item class="query-form-item">
            <el-input v-model="erpQuery.goodsname" placeholder="存货名称"></el-input>
          </el-form-item>

          <el-form-item style="display: flex">
            <el-button type="primary" icon="search" @click="getErpList">查询</el-button>
          </el-form-item>
        </el-form>

        <el-table
          :data="erpList"
          style="width: 100%"
          highlight-current-row="true"
          v-loading="erpLloading"
          :row-class-name="tableRowClassName"
          @current-change="handleErpChange"
        >
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="产品编码" prop="invcode"></el-table-column>
          <el-table-column label="产品名称" prop="invname"></el-table-column>
          <el-table-column label="计量单位" prop="measname"></el-table-column>
          <el-table-column label="规格型号" prop="invspec"></el-table-column>
        </el-table>
        <el-pagination
          :page-size="erpQuery.limit"
          @current-change="handleErpPageChange"
          layout="prev, pager, next"
          :total="pageTotal"
        ></el-pagination>
      </div>
    </el-card>

    <el-card class="el-card">
      <div>
        <el-form :inline="true" :model="unionQuery" class="query-form" size="mini">
          <el-row>
            <el-form-item class="query-form-item">
              <el-input
                v-model="unionQuery.nameCode"
                size="mini"
                placeholder="最小单元销售标识"
                @keyup.enter.native="keyup_submit($event)"
              ></el-input>
            </el-form-item>
            <el-form-item class="query-form-item">
              <el-input
                v-model="unionQuery.cpmctymc"
                size="mini"
                placeholder="产品通用名"
              ></el-input>
            </el-form-item>
            <el-form-item class="query-form-item">
              <el-input
                v-model="unionQuery.ylqxzcrbarmc"
                size="mini"
                placeholder="医疗器械注册人"
              ></el-input>
            </el-form-item>
            <el-form-item class="query-form-item">
              <el-input
                v-model="unionQuery.ggxh"
                placeholder="规格型号"
                size="mini"
              ></el-input>
            </el-form-item>

            <el-form-item class="query-form-item">
              <el-button-group>
                <el-button type="primary" icon="search" @click="getList" size="mini"
                  >查询</el-button
                >
              </el-button-group>
            </el-form-item>
          </el-row>
        </el-form>

        <el-table
          :data="udidlList"
          style="width: 100%"
          @row-click="intentDetail"
          v-loading="loading"
          :row-class-name="tableRowClassName"
          @selection-change="handleSelectionUdiChange"
        >
          <el-table-column
            type="selection"
            width="55"
            :selectable="checkSelectable"
          ></el-table-column>
          <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>
        <el-pagination
          :page-size="unionQuery.limit"
          @current-change="handleCurrentChange"
          layout="prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getUdiInfos } from "../../api/basic/udiInfo";
import { combineUdi } from "../../api/basic/UdiInfoRelevance";

import { getErpProduct, getInvbasdoc, combineProduct } from "../../api/erp/udiRelevance";
export default {
  name: "closeDialog",
  props: {
    closeDialog: {
      type: Function,
      required: true,
    },
  },

  data() {
    return {
      erpQuery: {
        invcode: null,
        goodsname: "",
        page: 1,
        limit: 10,
      },
      unionQuery: {
        page: 1,
        limit: 20,
        nameCode: "",
        cpmctymc: "",
        ylqxzcrbarmc: "",
        ggxh: "",
      },
      combineQuery: {
        thirdId: "",
        keys: [],
      },
      checked: true,
      udidlList: [],
      erpList: [],
      pageTotal: 1,
      total: 1,
      currentRow: null,
      loading: false,
      erpLloading: false,
      multipleUdiSelection: [],
    };
  },
  methods: {
    getList() {
      if (
        this.unionQuery.nameCode == "" &&
        this.unionQuery.cpmctymc == "" &&
        this.unionQuery.ylqxzcrbarmc == "" &&
        this.unionQuery.ggxh == ""
      ) {
        this.$message.warning("请输入查询条件");
        return;
      }
      this.loading = true;
      getUdiInfos(this.unionQuery)
        .then((response) => {
          this.loading = false;
          this.udidlList = response.data.list || [];
          this.total = response.data.total || 0;
        })
        .catch(() => {
          this.loading = false;
          this.udidlList = [];
          this.total = 0;
        });
    },

    checkSelectable(row, index) {
      return !row.check;
    },
    handleCurrentChange(val) {
      this.unionQuery.page = val;
      this.getList();
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.checked) return "warning-row";
      return "";
    },
    handleErpChange(val) {
      console.log(val);
      if (val.checked) {
        this.$message.warning("该产品已被选入");
        return;
      }
      this.currentRow = val;
      this.unionQuery.cpmctymc = this.currentRow.invname;
    },
    handleErpPageChange(val) {
      this.erpQuery.page = val;
      this.getErpList();
    },
    getErpList() {
      this.erplLoading = true;
      getInvbasdoc(this.erpQuery)
        .then((response) => {
          this.erplLoading = false;
          this.erpList = response.data.list || [];
          this.pageTotal = response.data.total || 0;
        })
        .catch(() => {
          this.erplLoading = false;
          this.erpList = [];
          this.pageTotal = 0;
        });
    },
    keyupErp_submit(event) {
      console.log("全选----");
      this.getErpList();
      event.target.select();
    },
    intentBack() {
      this.$router.go(-1);
    },
    combine() {
      let selectData = this.multipleUdiSelection;
      var ids = [];
      selectData.forEach((obj, index) => {
        ids.push(obj.uuid);
      });

      this.combineQuery.keys = ids;
      if (this.checked) {
        this.combineQuery.thirdId = this.currentRow.invcode;
        this.combineQuery.erpName = this.currentRow.invname;
      } else {
        this.combineQuery.thirdId = "";
      }
      combineUdi(this.combineQuery)
        .then((response) => {
          if (response.code == 20000) {
            this.$emit("closeUdi", true);
          } else {
            this.$emit("closeUdi", false);
          }
        })
        .catch(() => {
          this.$emit("closeUdi", false);
        });
    },

    intentDetail(row) {
      this.$emit("productInfo", row);
      this.closeDialog();
    },

    handleSelectionUdiChange(val) {
      console.log("----" + val);
      this.multipleUdiSelection = val;
    },

    keyup_submit(event) {
      console.log("全选----");
      this.getList();
      event.target.select();
    },
  },
};
</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;
}
</style>
