<template>
  <div>
    <el-card class="el-card">
      <div slot="header" style="font-weight: bold">
        <span>国家UDI数据全量下载更新</span>
      </div>
      <el-row>
        <span style="color: #f56c6c; margin-top: 3px">下载进度：</span>
        <el-progress
          :text-inside="true"
          color="#f56c6c"
          :stroke-width="15"
          :percentage="progress"
          style="width: 70%; margin-top: 5px"
        ></el-progress>
        <span style="color: #f56c6c; margin-top: 5px; margin-left: 8px">{{
          progressDetail
        }}</span>
      </el-row>
      <el-row type="flex" justify="end" style="margin-top: 15px">
        <el-button-group>
          <el-button
            type="primary"
            size="small"
            :disabled="isDown"
            icon="search"
            @click="downloadAll"
            >{{ updateBtn }}</el-button
          >
          <el-button
            type="primary"
            :disabled="isStop"
            size="small"
            icon="search"
            @click="stop"
          >
            停止载入
          </el-button>
        </el-button-group>
      </el-row>
    </el-card>
    <el-card class="el-card">
      <div slot="header" style="font-weight: bold">
        <span>国家UDI数据单条下载更新</span>
        <el-row style="margin-top: 15px">
          <el-input
            style="width: 60%"
            v-model="dlsingle"
            :placeholder="inputPlaceholder"
          ></el-input>

          <el-button
            style="margin-left: 15px"
            type="primary"
            size="small"
            icon="search"
            @click="downloadSingle"
            >产品标识数据下载</el-button
          >
        </el-row>
        <el-row style="margin-top: 15px">
          <el-input
            style="width: 60%"
            v-model="dlhistory"
            :placeholder="inputPlaceholder"
          ></el-input>

          <el-button
            style="margin-left: 15px"
            type="primary"
            size="small"
            icon="search"
            @click="downloadHistory"
            >历史版本数据数据下载</el-button
          >
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  udidList,
  downloadUdids,
  loadsingle,
  getProgress,
  deleteById,
  unionSearch,
  stopDown,
  loadHistory,
} from "../../api/udid/udid";
import draggable from "vuedraggable";
import { saveAs } from "file-saver";

export default {
  data() {
    return {
      loadquery: {
        primaryDeviceId: null, //通过udi下载key
      },
      dlType: "all", //下载类型
      intervalId: null,

      loading: true,

      progress: 0,
      lastProgress: 0,
      progressDetail: null,
      formLoading: false,
      formVisible: false,
      deleteLoading: false,
      updateBtn: "载入国家UDI数据", //下载数据按钮
      isDown: true, //是否禁用下载按钮
      isStop: true, //是否禁用停止下载按钮

      dlsingle: null,
      dlhistory: null,
      inputPlaceholder: "最小销售单元标识",
      timeout: 1,
      lastDiinput: "",
      lastHistoryInput: "",
    };
  },
  components: {
    draggable,
  },
  methods: {
    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 + "  ");
    },

    downloadAll() {
      this.progressRefreh();
      downloadUdids()
        .then((response) => {
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });

      this.updateBtn = "正在下载中...";
      this.isDown = true;
      this.isStop = false;
      this.timeout = 1;
    },

    downloadSingle() {
      this.loadquery.primaryDeviceId = this.dlsingle;
      if (this.dlsingle != this.lastDiinput) {
        this.lastDiinput = this.dlsingle;
        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 {
        this.$message.warning("重复提交！");
      }
    },

    downloadHistory() {
      let tquery = {
        primaryDeviceId: this.dlhistory,
      };

      if (this.dlsingle != this.lastHistoryInput) {
        this.lastHistoryInput = this.dlhistory;
        loadHistory(tquery)
          .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.warning("重复提交！");
      }
    },

    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数据";
        })
        .catch(() => {});
    },

    fetchProgress() {
      getProgress()
        .then((response) => {
          this.progress = response.data.progress;
          this.progressDetail = response.data.index + "/" + response.data.total;
          this.progress = String(this.progress).replace(/^(.*\..{4}).*$/, "$1");
          this.progress = Number(this.progress); // number = 12.3321
          if (this.lastProgress == 0) {
            this.lastProgress = this.progress;
          }

          if (this.progress == 100 && this.timeout >= 6) {
            console.log("下载完成");
            this.updateBtn = "载入国家UDI数据";
            this.isDown = false;
            this.stop = true;
          }
        })
        .catch(() => {});
    },

    //获取下载进度
    progressRefreh() {
      if (this.intervalId != null) {
        return;
      }
      this.fetchProgress(); //先获取进度
      this.intervalId = setInterval(() => {
        this.fetchProgress();
      }, 5000);
    },
    // 停止定时器
    clear() {
      clearInterval(this.intervalId); //清除计时器
      this.intervalId = null; //设置为null
    },

    //页面初始化判断是否在下载
    isDownload() {
      setTimeout(() => {
        console.log("正在等待！");
        var tt = this.progress - this.lastProgress;
        if (tt != 0) {
          this.isDown = true;
          this.updateBtn = "正在下载中...";
          this.isStop = false;
          this.timeout = 6;
        } else if (this.timeout >= 6) {
          this.updateBtn = "载入国家UDI数据";
          this.isDown = false;
        }
        if (this.timeout < 6) {
          //初始化等待20秒
          this.isDownload();
        } else {
          if (this.updateBtn != "正在下载中...") this.isDown = false;
        }
        this.timeout++;
      }, 5500);
    },
  },
  filters: {},
  mounted() {
    document.body.ondrop = function (event) {
      event.preventDefault();
      event.stopPropagation();
    };
  },
  created() {
    this.isDownload();
    this.progressRefreh();
  },
  destroyed() {
    this.clear();
  },
};
</script>

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