<template>
  <div class="pd10">
    <div v-show="view">
      <div class="box">
        <el-upload
          class="upload-demo"
          ref="upload"
          action="#"
          :http-request="upload"
          :limit="2"
          accept=".DAT,.CFG"
          :on-exceed="handleExceed"
          :before-upload="handleBeforeUpload"
          :show-file-list="false"
        >
          <el-button type="primary" size="small" icon="el-icon-top"
            >上传文件</el-button
          >
        </el-upload>

        <el-button
          type="primary"
          style="margin-left: 10px"
          size="small"
          icon="el-icon-delete"
          @click="
            fileList = [];
            $refs.upload.clearFiles();
          "
          >删除文件</el-button
        >
        <el-button type="primary" size="small" icon="el-icon-view" @click="Look"
          >查看波形</el-button
        >
      </div>

      <el-table
        stripe
        :data="fileList"
        highlight-current-row
        border
        header-cell-class-name="table_header"
        style="width: 100%"
        class="mt10"
      >
        <el-table-column prop="name" label="文件名称" align="center">
        </el-table-column>
        <el-table-column prop="size" label="文件大小" align="center">
          <template slot-scope="scope">
            <span>
              {{
                1 * 1024 * 1024 > scope.row.size
                  ? (scope.row.size / 1024).toFixed(2) + "(Kb)"
                  : (scope.row.size / 1024 / 1024).toFixed(2) + "(Mb)"
              }}</span
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-row>
      <el-col :span="12">
        <span
          v-if="view2"
          style="font-size: 14px; font-weight: ; line-height: 30px"
          >值类型选择:</span
        >
        <el-select
          v-if="view2"
          v-model="value"
          @change="changeView"
          placeholder="请选择值类型"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="12">
        <el-button
          v-if="view2"
          @click="backbxlb"
          type="primary"
          class="el-icon-refresh-right"
          style="float: right"
          >返回</el-button
        >
      </el-col>
    </el-row>
    <el-tabs v-if="view2" v-model="bxactiveName" @tab-click="bxhandleClick">
      <el-tab-pane
        label="瞬时波形"
        name="ssbx"
        :style="'height:' + bxecharts + ';overflow-y: scroll;'"
      >
        <shushiboxi
          v-if="bxactiveName == 'ssbx' && showBoxi"
          :value="value"
          :wp="wp"
        ></shushiboxi>
      </el-tab-pane>
      <el-tab-pane
        label="RMS波形"
        name="rmsbx"
        :style="'height:' + bxecharts + ';overflow-y: scroll;'"
      >
        <rmsboxi
          v-if="bxactiveName == 'rmsbx' && showBoxi"
          :value="value"
          :wp="wp"
        ></rmsboxi>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import api from "@/api/pollution/pollution";
import rmsboxi from "./components/rmsboxi.vue";
import shushiboxi from "./components/shushiboxi.vue";
export default {
  name: "offlinewaveform",
  components: { rmsboxi, shushiboxi },
  props: {},
  data() {
    return {
      fileList: [],
      fileType: ["DAT", "CFG"],
      view2: false,
      view: true,
      bxecharts: null,
      wp: {},
      //里层默认波形tab标签页
      bxactiveName: "ssbx",
      value: 1,
      showBoxi: true,
      options: [
        {
          value: 1,
          label: "一次值",
        },
        {
          value: 2,
          label: "二次值",
        },
      ],
    };
  },
  created() {},
  mounted() {
    this.setHeight()
        window.addEventListener('resize', this.setHeight)
  },
  beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
          this.bxecharts = window.sessionStorage.getItem("appheight") - 100 + "px";

          
        },
    changeView() {
      this.showBoxi = false;
      setTimeout(() => {
        this.showBoxi = true;
      }, 0);
    },
    //文件上传
    upload(params) {
      this.fileList.push(params.file);
    },

    handleExceed(files, fileList) {
      this.$message.warning(`只能上传1组波形文件`);
    },

    // 上传前校检格式和大小
    handleBeforeUpload(file) {
      // 校检文件类型
      if (this.fileType) {
        let fileExtension = "";
        let fileExtensionL = "";
        let fileName = "";
        let fileNameL = "";

        if (file.name.lastIndexOf(".") > -1) {
          fileExtensionL = file.name.substring(0, file.name.lastIndexOf("."));
          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
        }
        const isTypeOk = this.fileType.some((type) => {
          if (file.type.indexOf(type) > -1) return true;
          return !!(fileExtension && fileExtension.indexOf(type) > -1);
        });
        if (!isTypeOk) {
          this.$message.error(
            `文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`
          );
          return false;
        }
        if (this.fileList.length > 0) {
          fileName = this.fileList[0].name.slice(
            this.fileList[0].name.lastIndexOf(".") + 1
          );
          fileNameL = this.fileList[0].name.substring(
            0,
            this.fileList[0].name.lastIndexOf(".")
          );

          if (fileName == fileExtension) {
            this.$message.error(
              `${this.fileType.join(
                " / "
              )}是一组波形文件!已有${fileName}文件,请上传${
                fileName == "DAT" ? "CFG" : "DAT"
              }文件`
            );
            return false;
          }
          if (fileNameL != fileExtensionL) {
            this.$message.error(
              "上传文件的名称必须和已上传的文件名称保持一致!"
            );
            return false;
          }
        }
      }

      this.$message("正在上传文件，请稍候...");
      return true;
    },

    //里层波形tab标签页触发事件
    bxhandleClick(tab, event) {
      if (tab.name == "ssbx") {
        this.bxactiveName = "ssbx";
      } else if (tab.name == "rmsbx") {
        this.bxactiveName = "rmsbx";
      }
    },
    // 查看
    Look() {
      if (this.fileList.length != 2) {
        this.$message({
          message: "请上传1组波形文件!",
          type: "warning",
        });
        return;
      }
      let form = new FormData();

      form.append("file1", this.fileList[0]);
      form.append("file2", this.fileList[1]);

      api.uploadFileAndViewWave(form).then((res) => {
           if (res != undefined) {
          this.wp = res.data;
          setTimeout(() => {
            this.view = false;
            this.view2 = true;
          }, 0);
        }
      });
    },

    //返回触发事件
    backbxlb() {
      this.view = true;
      this.view2 = false;
    },
  },

  computed: {},

  watch: {},
};
</script>
<style lang="less" scoped>
@import url("../../../styles/comStyle.less");
.box {
  display: flex;
}
.el-icon-refresh-right {
  position: absolute;
  top: 10px;
  right: 10px;
}
</style>
