<template>
  <el-container id="dept"  >
    <el-aside v-show="view" style="width: 315px" id="drag-dept-left">
      <muentree
        @eleMenuData="getTreeText"
        :checkbox="checkbox"
        :tablename="tablename"
        :heightVh="65"
        ref="commonTree"
      ></muentree>
    </el-aside>
    <div id="drag-dept" @click="changeview">
      <el-tooltip class="item" effect="dark" :content="view?'收缩':'展开'" placement="top-start">
      <i
        :class="view ? 'el-icon-caret-left' : 'el-icon-caret-right'"
        style="
          font-size:18px;
          z-index:2000;
          cursor: pointer;
          margin-right: 2%;
          width: 30px;
          height: 30x;
          background: rgba(6, 70, 122, 0);
        "
      ></i
      >
    </el-tooltip>
    </div>
    <el-main id="drag-dept-right" style="padding: 10px">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="客户名称:">
          <el-input
            v-model="form.crmName"
            placeholder="请输入客户名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="报告编号:">
          <el-input
            v-model="form.reportNumber"
            placeholder="请输入报告编号"
          ></el-input>
        </el-form-item>
        
        <el-form-item>
          <Timeinterval :interval="3" ref="Timeinterval"></Timeinterval>
        </el-form-item>
        <el-form-item>
          <el-form-item label="接线图:"> 
          <el-upload
            class="upload-demo"
            action="#"
            :on-remove="beforeRemove"
            :http-request="upload"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="fileList"
            accept=".png,.jpg"
          >
            <!-- <span style="font-size: 14px; font-weight: bold; margin: 0 auto"
              >一次接线图:</span
            > -->
            <el-button size="small" type="primary" icon="el-icon-top">点击上传</el-button>
            <!-- <div slot="tip" class="el-upload__tip" style="margin-top: 10px">
              只能上传jpg/png文件
            </div> -->
          </el-upload>
        </el-form-item>
          <el-button size="small" icon="el-icon-document" type="primary" @click="exportM"
            >生成</el-button
          >
        </el-form-item>
      </el-form>
      <el-row style="margin-top: 0px">
        <!-- <el-col :span="5">
         
        </el-col> -->
        <el-col  :span="24">
           <div :style="'width:100%;height:'+vhh">
            <img width="100%" :height="vhh" src="@/assets/jss.png" alt="" />
           </div>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>


<script>
import muentree from "@/views/Event-boot/Transient-Report/muentree.vue";
import Timeinterval from "@/views/components/Timeinterval.vue";
import api from "@/api/harmonic/onlineData";

export default {
  name:'worldview',
  components: {
    muentree,
    Timeinterval,
  },
  watch: {},
  data() {
    return {
      //src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      form: {
        crmName: "",
        reportNumber: "",
        lineIndex: "",
        name: "",
      },
      input: "",

      fileList: [],

      tablename: 1,
      id: 1,
      checkbox: undefined,
      view: true,
      treenode: "",
      linelist: [],
      vh: null,
      vhh: null,
      level: "",
    };
  },
  created() {
    this.fileArr = [];
  },
  mounted() {
    this.setHeight()
        window.addEventListener('resize', this.setHeight)
  
    this.bindResize();
  },
  beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
          this.vhh = window.sessionStorage.getItem("appheight") - 100 + "px";
          
        },
    handleExceed(files, fileList) {
      this.$message.warning(`只能上传1张图片`);
    },
    beforeRemove(file, fileList) {
      this.fileList = [];
    },
    //文件上传
    upload(params) {
      this.fileList.push(params.file);
    },
    changeview() {
      if (this.view) {
        this.view = false;
      } else {
        this.view = true;
      }
    },

    /**
     * 缩放条拖动进而改变左侧div宽度方法
     */
    bindResize() {
      /**开始坐标 */
      let startX;
      /**开始宽度 */
      let startWidth = getScalableDivWidth();

      document
        .querySelector("#drag-dept")
        .addEventListener("mousedown", startDrag);

      function startDrag(e) {
        startX = e.clientX;
        startWidth = getScalableDivWidth();

        document.documentElement.addEventListener("mousemove", onDrag);
        document.documentElement.addEventListener("mouseup", stopDrag);
      }

      function onDrag(e) {
        let newWidth = startWidth + e.clientX - startX;
        document.querySelector("#drag-dept-left").style.width = newWidth + "px";
      }

      function stopDrag() {
        document.documentElement.removeEventListener("mousemove", onDrag);
        document.documentElement.removeEventListener("mouseup", stopDrag);
      }

      /**获取宽度 */
      function getScalableDivWidth() {
        return parseInt(
          window.getComputedStyle(document.querySelector("#drag-dept-left"))
            .width,
          10
        );
      }
    },

    //二次点击触发点击事件
    getTreeText(treenode) {
      this.form.lineIndex = treenode.id;
      this.level = treenode.level;
      this.form.name = treenode.name;
    },
    exportM() {
      if (this.level != 6) {
        return this.$message({
          message: "请选择监测点进行报告生成!",
          type: "warning",
        });
      }
      this.$message("生成报告中...");
      let form = new FormData();
      form.append("lineIndex", this.form.lineIndex);
      form.append("name", this.form.name);
      form.append("crmName", this.form.crmName);
      form.append("reportNumber", this.form.reportNumber);
      form.append("type", 0);
      form.append("startTime", this.$refs.Timeinterval.timeValue[0]);
      form.append("endTime", this.$refs.Timeinterval.timeValue[1]);
      this.fileList.forEach((item) => {
        form.append("file", item);
      });
      api
        .exportModel(form)
        .then((res) => {
          let blob = new Blob([res], {
            type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8",
          });
          // createObjectURL(blob); //创建下载的链接
          const url = window.URL.createObjectURL(blob);
          const link = document.createElement("a"); // 创建a标签
          link.href = url;
          link.download = this.form.name; // 设置下载的文件名
          document.body.appendChild(link);
          link.click(); //执行下载
          document.body.removeChild(link);
        })
        .catch((response) => {
        //  console.log(response);
        });
      // api.exportModel().then((res) => {});
    },
  },
};
</script>
<style lang='scss' scoped>
@import url("../../../styles/common.less");

#drag-dept-left {
  min-width: 220px;
  max-width: 35%;
}
.overview_scroll::-webkit-scrollbar {
  width: 2px;
  height: 1px;
  background: rgba(6, 70, 122, 0.013);
}

.overview_scroll::-webkit-scrollbar-thumb {
  border-radius: 4px;
  margin-right: 5px;
  -webkit-box-shadow: inset 0 0 0px #0090b411;
  background: #03c1cf0e;
}

/**拖拽条样式 */
#drag-dept {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 10;
  right: 0;
  width: 4px;
  background-color: #04607c2a;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.35);
  cursor: col-resize;
}

#drag-dept i {
  display: inline-block;
  height: 14px;
  width: 1px;
  background-color: #e9e9e9;
  margin: 0 1px;
}
</style>
