<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.code"
                          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.batchNo" clearable="true"
                  size="mini"
                  placeholder="请输入批次号"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item class="query-form-item" label="产品通用名称:">
                <el-input
                  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"
                  placeholder="请输入规格型号"
                  size="mini"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="创建时间:">
                <el-date-picker
                  :picker-options="pickerOptions"
                  v-model="actDateRange"
                  type="daterange"
                  format="yyyy 年 MM 月 dd 日"
                  style="width: 98%"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </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>

        </div>
        <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="UDI码"
            prop="code"
            width="280"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="批次号"
            prop="batchNo"
            width="120"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="产品名称"
            prop="cpmctymc"
            width="80"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="规格型号"
            prop="ggxh"
            width="80"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="生产日期"
            prop="produceDate"
            width="120"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="失效日期"
            prop="expireDate"
            width="120"
            show-overflow-tooltip
          ></el-table-column>

          <el-table-column
            label="序列号"
            prop="serialNo"
            width="120"
            show-overflow-tooltip
          ></el-table-column>

          <el-table-column
            label="更新日期"
            prop="createTime"
            width="120"
            show-overflow-tooltip
          ></el-table-column>

          <el-table-column
            label="备注"
            prop="remark"
            width="120"
            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>
        <pagination
          v-show="total>0"
          :total="total"
          :limit.sync="unionQuery.limit"
          :page.sync="unionQuery.page"
          @pagination="handleCurrentChange"
        ></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"
    >
      <editCodeLost :editQuery="diDetails"
                    :closeCodeDialog="closeCodeDialog"
      ></editCodeLost>
    </el-dialog>

  </div>
</template>

<script>
import {getCodeLost} from "@/api/inout/code";

import editCodeLost from "@/views/basic/locUdi/DialogEditCodeLost";


export default {
  name: "UdiInfoDb",

  data() {
    return {
      unionQuery: {
        page: 1,
        limit: 10,
        udiCode: null,
        nameCode: "",
        cpmctymc: "",
        ylqxzcrbarmc: null,
        ggxh: "",
        zczbhhzbapzbh: "",
        isCheck: 1
      },
      actDateRange: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      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: {
    closeCodeDialog(){
      this.selectDialog=false;
      this.getList();
    },

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

    onReset() {
      this.unionQuery = {
        page: 1,
        limit: 10,
        code: null,
        batchNo: "",
        cpmctymc: "",
        ggxh: ""
      };
      this.actDateRange=[];
      this.getList();
    },
    searchList() {
      this.unionQuery.page = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      if (this.unionQuery.createTime !== null) {
        this.unionQuery.startTime = this.actDateRange[0];
        this.unionQuery.endTime = this.actDateRange[1];
      } else {
        this.unionQuery.startTime = null;
        this.unionQuery.endTime = null;
      }
      getCodeLost(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;
    },


  },
  created() {
    this.getList();

  },
  components: {
    editCodeLost,
  },
};
</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>
