<template>
  <div class="upload_pictures-box">
    <el-header>
      <el-page-header title @back="goBack" content="上传图片"></el-page-header>
      <img src="../../assets/imageOne/24.png" alt class="upload_pictures-img" @click="save()" />
    </el-header>

    <!-- 主内容 -->
    <el-main :style="'height:' + fullHeight + 'px'">
      <!-- 描述 -->
      <div class="miaoshu_box">
        <span class="miaoshu_box_text">图片描述</span>
        <el-input type="textarea" :rows="10" placeholder="请输入内容" v-model.trim="textarea"></el-input>
      </div>

      <!-- 上传图片-缩略图 -->
      <div class="uploading_box">
        <span class="uploading_box_text">缩略图</span>
        <el-upload
          action="#"
          list-type="picture-card"
          :limit="3"
          :auto-upload="false"
          :on-exceed="handleExceed"
        >
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{file}">
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                <i class="el-icon-zoom-in"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleDownload(file)"
              >
                <i class="el-icon-download"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
      </div>
    </el-main>
  </div>
</template>

<script>
export default {
  name: "upload_pictures",
  data() {
    return {
      textarea: "",
      fullHeight: document.documentElement.clientHeight,
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false
    };
  },
  watch: {
    fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          //防止过度调用监测事件，导致卡顿
          that.timer = false;
        }, 400);
      }
    }
  },

  mounted() {
    this.get_boderHeight();
  },
  methods: {
    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },

    goBack() {
      let _this = this;
      this.$router.push("/newmessage");
      // _this.reload()
      location.reload(); //实现视图强制刷新
    },

    //点击图标保存到本地
    save() {
      let _this = this;
      //   console.log(this.dialogImageUrl)
      this.handleDownload();

      //   if (_this.textarea !== "") {
      //     localStorage.setItem("userName", _this.textarea);
      //     this.$message({
      //       type: "success",
      //       message: "保存成功!"
      //     });
      //     _this.$router.push("/newmessage");
      //     const timer = setInterval(() => {
      //       location.reload();
      //     }, 1000);
      //   } else {
      //     this.$notify({
      //       title: "警告",
      //       message: "采集人不能为空",
      //       type: "warning",
      //       duration: 1000
      //     });
      //   }
    },

    //删除图片
    handleRemove(file) {
      console.log(file.url);
      console.log(file);
    },

    //放大图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      console.log(file.url);
      this.dialogVisible = true;
      this.save();
    },

    //下载图片
    handleDownload(file) {
      console.log(file);
    },

    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    }
  }
};
</script>

<style lang="scss">
@import "../../assets/style/bus.scss";
@import "../../assets/style/scss/upload_pictures.scss";
</style>
