<template>
  <div class="about">
    <!-- 列表 -->
    <div class="center">
      <p>
        <input v-model="name" placeholder="请输入标题" />
      </p>
      <!-- 详细信息 -->
      <div class="mark">
        <el-input
          type="textarea"
          :rows="6"
          placeholder="请输入内容"
          v-model="textarea"
        >
        </el-input>
      </div>
    </div>
    <!-- end -->

    <!-- 上传图片 -->
    <input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none"/>
    

<div class="add-img">
 <!-- <p class="font14">图片(最多6张，还可上传<span v-text="3-imgList.length"></span>张)</p> -->
 <ul class="img-list">
  <li v-for="(url,index) in imgList" :key="index">
   <!-- <i class="el-icon-error"  @click.stop="delImg(index)"></i> -->

   <img class="del" src="../../img/cancel.png" @click.stop="delImg(index)"/> 
   <!-- //del删除样式，icon字体图标需要自己找哦 -->
   <img :src="url.file.src">
  </li>
    <li class="add" @click="chooseType" v-show="imgList.length<=3">
 <!-- <p class="add-image" align="center"> -->
   <!-- <i class="el-icon-error"  @click.stop="delImg(index)"></i> -->
  <img class="dell" src="../../img/tianjiatup.png" @click.stop="delImg(index)"/> 
  <p class="opyi">添加图片</p>
 <!-- </p> -->
</li>
 </ul>

</div>
    <!-- end -->

    <!-- end -->
    <div style="background:#f6fbff">
      <button @click="sumit" class="btn">
        确定
      </button>
    </div>
  </div>
</template>
<script>
 export default {
  name: "Feedback",
  data() {
   return {
     name:'',
     textarea:'',
    showFace: false,
    imgList: [],
    size: 0,
    limit:6, //限制图片上传的数量
    tempImgs:[]
   }
  },
  methods: {
    sumit(){
console.log(this.name)
console.log(this.textarea)
console.log(this.imgList)
    },
   chooseType() {
    document.getElementById('upload_file').click();
   },
   fileChange(el) {
    if (!el.target.files[0].size) return;
    this.fileList(el.target);
    el.target.value = ''
   },
   fileList(fileList) {
    let files = fileList.files;
    for (let i = 0; i < files.length; i++) {
     //判断是否为文件夹
     if (files[i].type != '') {
      this.fileAdd(files[i]);
     } else {
      //文件夹处理
      this.folders(fileList.items[i]);
     }
    }
   },
   //文件夹处理
   folders(files) {
    let _this = this;
    //判断是否为原生file
    if (files.kind) {
     files = files.webkitGetAsEntry();
    }
    files.createReader().readEntries(function (file) {
     for (let i = 0; i < file.length; i++) {
      if (file[i].isFile) {
       _this.foldersAdd(file[i]);
      } else {
       _this.folders(file[i]);
      }
     }
    });
   },
   foldersAdd(entry) {
    let _this = this;
    entry.file(function (file) {
     _this.fileAdd(file)
    })
   },
   fileAdd(file) {
    if (this.limit !== undefined) this.limit--;
    if (this.limit !== undefined && this.limit < 0) return;
    //总大小
    this.size = this.size + file.size;
    //判断是否为图片文件
    if (file.type.indexOf('image') == -1) {
     this.$dialog.toast({mes: '请选择图片文件'});
    } else {
     let reader = new FileReader();
     let image = new Image();
     let _this = this;
     reader.readAsDataURL(file);
     reader.onload = function () {
      file.src = this.result;
      image.onload = function(){
       let width = image.width;
       let height = image.height;
       file.width = width;
       file.height = height;
       _this.imgList.push({
        file
       });
       console.log( _this.imgList);
      };
      image.src= file.src;
     }
    }
   },
   delImg(index) {
    this.size = this.size - this.imgList[index].file.size;//总大小
    this.imgList.splice(index, 1);
    if (this.limit !== undefined) this.limit = 3-this.imgList.length;
   },
   displayImg() {
   }
  }
 }
</script>
<style scoped>
/* 上传 */
.unload {
  width: 90%;
  margin: 10px auto;
  background: #fff;
  padding: 10px;
}
#img {
  width: 70px;
  height: 75px;
}


.Img {
  position: relative;
  margin-right: 10px;
}
/* end */

.mark >>> .el-textarea__inner {
  border: 0;
  resize: none; /* 这个是去掉 textarea 下面拉伸的那个标志，如下图 */
}
input {
  border: none;
  outline-style: none;
}
.btn {
  width: 70%;
  margin: 20px 15%;
  text-align: center;
  line-height: 40px;
  background: #52a8fb;
  border-radius: 5px;
  /* position: fixed; */
  /* bottom: 0px; */
  border: none;
  /* margin-left: -10px; */
  color: #fff;
}

.right {
  float: right;
  margin-right: 10px;
  line-height: 40px;
}
.el-button {
  width: 80%;
  margin: 0 10%;
  display: inline-block;
  line-height: 40px;
  background: #52a8fb;
  margin-top: 35px;
  border-color: #52a8fb;
}

.center {
  margin-top: 10px;
  width: 95%;
  margin: auto;
}
.center > p {
  margin: 0;
  padding: 0;
  height: 40px;
  line-height: 40px;
  padding-left: 15px;
  background: #fff;
  /* border-top: 1px solid; */
}
.center p:not(:first-child) {
  margin: 0;
  padding: 0;
  height: 40px;
  line-height: 40px;
  padding-left: 12px;
  background: #fff;
  border-top: 2px solid #fcfcfc;
}
* {
  margin: 0;
  padding: 0;
}
.about {
  width: 100%;
  height: 100%;
  background-color: #f7fbff;
  font-size: 14px;
}
/* 上传？ */
 .app-bg >>>img{
  width: 100%;
  height: 100%;
  -webkit-transform: scale(1.03);
  -moz-transform: scale(1.03);
  -ms-transform: scale(1.03);
  -o-transform: scale(1.03);
  transform: scale(1.03);
 }
 textarea {
  padding: 10px;
 }
 .text-length {
  font-size: 14px;
  z-index: 999;
  width: 100%;
  text-align: right;
  margin-bottom: 10px;
  color: #e4e4e4;
 }
 .warning {
  color: #fe9900;
 }
 .add-img {
  width: 100%;
  padding: 10px;
 }
 .add-img p {
  color: #999;
 }
 .mui-content {
  padding-bottom: 60px;
 }
 .mui-content .idea {
  margin-top: 8px;
  background-color: #FFFFFF;
 }
 .good-item {
  text-align: center;
  width: 33%;
  max-width: 100%;
  overflow: hidden;
  padding-right: 10px;
  padding-bottom: 10px;
  float: left;
 }
 .good-item span {
  font-size: 15px;
  height: 30px;
  line-height: 30px;
  border-radius: 50px;
  display: block;
  width: 100%;
  color: #333;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid #CCCCCC;
 }
 .mui-table {
  padding-top: 10px;
  color: #333;
  padding-left: calc(0.5% + 10px);
 }
 .h-line-behind {
  line-height: 40px;
  padding-left: 10px;
 }
 .question {
  border: 0;
  margin-bottom: 10px;
 }
 .add {
  display: inline-block;
  margin-bottom: 20px;
 }
 .add-image {
   position: relative;
  /* padding-top: 15px; */
  margin-left: 10px;
  /* width: 80px; */
  /* top: 20px; */
  /* height: 80px; */
  /* border: 1px dashed rgba(0, 0, 0, .2); */
 }
 .add-image .icon-camera {
  font-size: 24px;
 }
 .good-item .choose {
  color: #fff;
  background-color: #87582E;
  color: #FFF;
  border: 0;
 }
 .mui-btn-block {
  border: 0;
  border-radius: 0;
  background-color: #87582E;
  color: #fff;
  margin-bottom: 0;
  bottom: 0;
 }
 .mui-buttom {
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 999;
 }
 /*九宫格*/
 .img-list {
 /* display: inline-block; */
    margin-top: 5px;
 }
 .img-list > li {
   list-style: none;
  float: left;
  /* width: 32%; */
  text-align: center;
  /* padding-top: 31%; */
  margin-left: 1%;
  margin-top: 1%;
  position: relative;
 }
 .img-list > li > div {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
 }
 .img-list > li > div .app-bg {
  width: 100%;
  height: 100%;
 }
 .mui-fullscreen {
  z-index: 9999;
 }
 .del {
    position: absolute;
    width: 18px;
     top: -10px;
    left: -8px;
    z-index: 999;
    height: 18px;
 }
 img{
  width: 70px;
    height: 75px;
   margin: 0 5px;
 }
 .opyi{
   width: 70px;
    height: 75px;
   position: absolute;
    /* height: 100px; */
    top: 14px;
    /* width: 100px; */
    opacity: 0;
 }
</style>