<template>
  <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.zxxsdycpbs"
            size="mini"
            placeholder="最小单元销售标识"
          ></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-input
            v-model="unionQuery.zczbhhzbapzbh"
            placeholder="注册证编号"
            size="mini"
          ></el-input>
        </el-form-item>
        <el-form-item class="query-form-item">
          <el-button-group>
            <el-button
              type="primary"
              icon="el-icon-refresh"
              @click="onReset"
            ></el-button>
            <el-button
              type="primary"
              icon="search"
              @click="onSubmit"
              size="mini"
              >查询</el-button
            >
            <el-button
              type="primary"
              icon="search"
              @click="handleDownloadClick"
              size="mini"
              >更新下载</el-button
            >
          </el-button-group>
        </el-form-item>
      </el-row>
    </el-form>

    <el-row style="margin-top: 12px"> </el-row>

    <el-table :data="list" style="width: 100%">
      <el-table-column label="产品标识" prop="zxxsdycpbs"></el-table-column>
      <el-table-column label="产品名称" prop="cpmctymc"></el-table-column>
      <el-table-column label="规格型号" prop="ggxh"></el-table-column>
      <el-table-column
        label="医疗器械注册人"
        prop="ylqxzcrbarmc"
      ></el-table-column>
      <el-table-column
        label="注册证编号"
        prop="zczbhhzbapzbh"
      ></el-table-column>
      <el-table-column label="发布日期" prop="cpbsfbrq"></el-table-column>
      <el-table-column label="发布状态" prop="bssjzt"></el-table-column>
      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click.native.stop="intentDetail(scope.row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="国家局UDI数据下载"
      :visible.sync="downloadDialogVisible"
      width="70%"
      v-if="downloadDialogVisible"
    >
      <downloadDialog></downloadDialog>
    </el-dialog>
    <el-pagination
      :page-size="unionQuery.limit"
      @current-change="handleCurrentChange"
      layout="prev, pager, next"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import { orderList, codeList } from "../../api/warehouse/order";
import {
  downloadUdids,
  loadsingle,
  deleteById,
  unionSearch,
  stopDown,
  loadHistory,
} from "../../api/udid/udid";
import draggable from "vuedraggable";
import downloadDialog from "./udidload";

import { saveAs } from "file-saver";

export default {
  data() {
    return {
      dlQuery: {
        requestType: 3,
      },
      unionQuery: {
        page: 1,
        limit: 20,
        zxxsdycpbs: "",
        cpmctymc: "",
        ylqxzcrbarmc: "",
        ggxh: "",
        zczbhhzbapzbh: "",
      },
      loadquery: {
        primaryDeviceId: null, //通过udi下载key
      },
      dlType: "all", //下载类型
      intervalId: null,
      total: 0,
      loading: true,
      index: null,
      list: null,
      progress: 0,
      lastProgress: 0,
      progressDetail: null,
      formLoading: false,
      formVisible: false,
      deleteLoading: false,

      downloadDialogVisible: false,
    };
  },
  components: {
    draggable,
    downloadDialog,
  },
  methods: {
    onReset() {
      this.$router.push({
        path: "",
      });
      this.unionQuery = {
        page: 1,
        limit: 20,
        zxxsdycpbs: "",
        cpmctymc: "",
        ylqxzcrbarmc: "",
        ggxh: "",
        zczbhhzbapzbh: "",
      };
      this.getList();
    },
    onSubmit() {
      this.$router.push({
        path: "",
        unionQuery: this.unionQuery,
      });
      this.getList();
    },
    handleSizeChange(val) {
      this.unionQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.unionQuery.page = val;
      this.getList();
    },
    selectChange(value) {
      this.dlType = value;
      if (value == "all") {
        this.isDlzxsx = true;
      } else if (value == "zxxs") {
        this.isDlzxsx = false;
        this.inputPlaceholder = "最小销售单元标识";
      } else if (value == "history") {
        this.isDlzxsx = false;
        this.inputPlaceholder = "主键编号";
      }
      console.log(this.isUdi + "  ");
    },
    getList() {
      this.loading = true;
      unionSearch(this.unionQuery)
        .then((response) => {
          this.loading = false;
          this.list = response.data.list || [];
          this.total = response.data.total || 0;
        })
        .catch(() => {
          this.loading = false;
          this.list = [];
          this.total = 0;
        });
    },
    handleDownloadClick() {
      // this.downloadDialogVisible = true;
      downloadUdids()
        .then((response) => {
          this.loading = false;
          if (response.code == 20000) {
            this.$message.success("后台已开启同步更新，稍后刷新查询！");
          } else {
            this.$message.error(response.message);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    intentBack() {
      this.$router.go(-1);
    },

    download() {
      this.loading = true;
      var t1 = this.progress - this.lastProgress;
      if (this.progress != 0 && this.lastProgress != 0 && t1 == 0) {
      } else {
        console.log("正在下载中");
      }
      if (this.dlType == "all") {
        this.progressRefreh();
        downloadUdids()
          .then((response) => {
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });

        this.updateBtn = "正在下载中...";
        this.isDown = true;
        this.isStop = false;
        this.isProgress = true;
      } else if (this.dlType == "zxxs") {
        this.loadquery.primaryDeviceId = this.dlzxxscpbs;
        console.log("" + this.loadquery.primaryDeviceId);
        loadsingle(this.loadquery)
          .then((response) => {
            this.loading = false;
            if (response.code != 20000) {
              this.$message.error(response.message);
            } else {
              this.$message.success("后台已开始下载！");
            }
          })
          .catch(() => {
            this.loading = false;
          });
      } else if (this.dlType == "history") {
        console.log("" + this.loadquery.primaryDeviceId);
        this.loadquery.primaryDeviceId = this.dlzxxscpbs;
        loadHistory(this.loadquery)
          .then((response) => {
            this.loading = false;
            if (response.code != 20000) {
              this.$message.error(response.message);
            } else {
              this.$message.success("后台已开始下载！");
            }
          })
          .catch(() => {
            this.loading = false;
          });
      } else {
        this.$message.info("请选择下载类型");
      }
    },

    downloadid() {
      this.loading = true;
      this.loadquery.uid = this.dlzxxscpbs;
      console.log("" + this.loadquery.uid);
      loadsingle(this.loadquery)
        .then((response) => {
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },

    stop() {
      stopDown()
        .then((response) => {
          this.isDown = false;
          this.isStop = true;
          this.updateBtn = "载入国家UDI数据";
          this.isProgress = false;
        })
        .catch(() => {});
    },

    intentDetail(row) {
      this.$router.push({ path: "../publish/detail", query: { data: row } });

      //  this.$router.push({name:'home',query: {id:'1'}})
    },
  },
  filters: {},
  mounted() {
    document.body.ondrop = function (event) {
      event.preventDefault();
      event.stopPropagation();
    };
  },
  created() {
    this.getList();
    // this.progressRefreh();
  },
  destroyed() {
    // this.clear();
  },
};
</script>

<style type="text/scss" lang="scss">
.udid-query-form {
  margin-top: 10px;
  display: flex;
}
</style>
