<template>
    <div>
        <div class="picture-show" v-for="(item) in curpictures" v-if=" curpictures && item.state!='3' && item.id == showImgId " :key="item.id">
            <div class='picture-show-img'>
                <img style="width:100%;height:100%" :src='item.image'>
            </div>
            <div class = 'picture-show-msg'>
                <span>图片描述</span>
                <Input v-model="item.tip" placeholder="请输入图片描述信息..." />
                <span>跳转链接</span>
                <Input v-model="item.linkTo" placeholder="请输入点击图片跳转地址链接..." />
            </div>
        </div>
    
        <div class="picture-list-container" >
            <div v-for="(item,index) in curpictures" :key="item.id" class="picture-list-item"  v-if="item.state!='3'?true:false"  @mouseover="onhover(index)"  @mouseout="onhover(-1)">
                <div class="process-img" >
                    <img :src = 'item.image' @click="imgClicked(item.id)" >
                    <div  v-show="hoverIndex == index " @click = 'reUploadImg(item.id)' class = 'reupload' ></div>
                </div>
                <Icon  v-if="hoverIndex == index " @click = 'delImg(item.id)' class = 'del' title="删除" type="md-close-circle" />      
            </div>
            <webUploader :item = "item" title="添加图片" :methods = "uploaderMethods" class="picture-list-item process-img webUploader-add"></webUploader>
        </div>  
    </div>
</template>
<script>
import { mapActions } from "vuex";
import webUploader from "@components/WebUploader/WebUploader.vue";
export default {
  data() {
    return {
      curpictures: [],
      hoverIndex: "-1",
      showImgId: "",
      RepData: {
        isRep: false,
        id: ""
      },
      thumb: {
        src: "",
        isThumb: true,
        width: 200,
                    height: 200
                },

                newPictures: null
            };
        },
        props: ["pictures", "item", "setProcessPictureData"],
        watch: {
            "RepData.isRep": function(val, oldval) {
                this.item.uploader.addButton({
                    id: ".reupload",
                    innerHTML: "<i class='ivu-icon ivu-icon-md-arrow-up' title='重新上传'></i>"
                });
            }
        },
        methods: {
            imgClicked: function(id) {
                this.$data.showImgId = id;
    },
    onhover: function(index) {
      this.hoverIndex = index;
    },
    delImg: function(id) {
      var pictures = this.curpictures,
        showImgIdChanged = false,
        changedState = false;
      for (var i = 0; i < pictures.length; i++) {
                    if (pictures[i].state != "3" && pictures[i].id != id) {
                        this.$data.showImgId = pictures[i].id;
                        showImgIdChanged = true;
                    }
                    if (pictures[i].id == id) {
                        if (pictures[i].state == 1) {
                            let fileId ="WU_FILE" +  pictures[i].id.substr(pictures[i].id.lastIndexOf("_"));
                            try{
                                this.item.uploader.removeFile(fileId, true);
                            }catch(e){

                            }
                        }
                        pictures[i].state = "3";
                    }
                }
                if (!showImgIdChanged) this.$data.showImgId = "";
    },
    reUploadImg: function(id) {
      this.RepData = {
        isRep: true,
        id: id
      };
    },
    addFileQueued(file) {
      var self = this,
        pictures = self.curpictures,
        thumb = self.thumb;
      if (thumb.isThumb) {
        self.item.uploader.makeThumb(
          file,
          function(error, src) {
            if (error) {
              thumb.isThumb = false;
              return;
            } else {
              thumb.src = src;
              let newPictures = {
                image: thumb.src,
                linkTo: "",
                tip:"",
                id:
                  self.item.formData["Guid"] +
                  file.id.substr(file.id.lastIndexOf("_")),
                state: 1
              };
              if (self.RepData.isRep) {
                let id = self.RepData.id,
                  _picture = pictures.find(t => t.id == id),
                  _index = pictures.indexOf(_picture);
                pictures[_index].state = 3;
                pictures.splice(
                  _index,
                  0,
                  JSON.parse(JSON.stringify(newPictures))
                );
                self.$data.showImgId = newPictures.id;
                self.RepData = {
                  isRep: false,
                  id: ""
                };
              } else {
                pictures.push(JSON.parse(JSON.stringify(newPictures)));
                self.showImgId = newPictures.id;
              }
              // self.$props.setProcessPictureData(pictures);
            }
          },
          thumb.width,
          thumb.height
        );
      }
    },
    loadFileSuccess(result) {
        let self = this;
        if (!result.Code && !result.ErrorMessage && !result.Result) {
            self.$Notice.info({
              title: "出现上传异常，请稍后上传.",
              desc: ""
            });
            return;
        }
      if (!result.Code && !result.ErrorMessage) {      
          self.$Notice.info({
              title: "上传成功.",
              desc: ""
          });
          let _picture = self.$props.pictures.find(t => t.id == result.Result.FileGuid);
          if (_picture) {
              _picture.linkTo = _picture.linkTo? _picture.linkTo : "";
              _picture.image = result.Result.FileUrl;
              _picture.state = 0;
          }
          self.RepData = {
          isRep: false,
          id: ""
        };
        self.$props.setProcessPictureData(self.$props.pictures);
        self.$Modal.remove();
      } else {
        self.$Notice.info({
          title: result.ErrorMessage + ",状态码为：" + result.Code,
          desc: ""
        });
      }
    }
  },
  created() {
    this.uploaderMethods = {
      addFileQueued: this.addFileQueued,
      loadFileSuccess: this.loadFileSuccess
    };
    this.curpictures = this.$props.pictures;
  },
  mounted() {
    var pictures = this.$props.pictures;
    for (var i = 0; i < pictures.length; i++) {
      if (pictures[i].state != "3") {
        this.$data.showImgId = pictures[i].id;
        break;
      }
    }
    this.item.uploader.addButton({
      id: ".reupload",
      innerHTML:
        "<i class='ivu-icon ivu-icon-md-arrow-up'  title='重新上传'></i>"
    });
  },
  components: {
    webUploader
  }
};
</script> 
<style scoped>
.picture-show,
.picture-list-container {
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
}
.picture-list-container {
  flex-wrap: wrap;
}
.picture-show-img {
  width: 150px;
  height: 150px;
  overflow: hidden;
}
.picture-show-msg {
  flex-grow: 2;
  margin-left: 20px;
}
.ivu-input-wrapper {
  display: block !important;
}
.process-img,
.process-img img {
  width: 100px;
  height: 100px;
  overflow: hidden;
  position: relative;
}
.picture-list-item {
  position: relative;
  margin: 20px 20px 0 0;
}
.process-img .reupload {
  position: absolute;
  top: 0;
  margin-left: 50%;
  margin-top: 50%;
  transform: translate(-50%, -50%);
}
.picture-list-item .del {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  cursor: pointer;
}
.picture-list-container .webuploader-pick {
  background: none;
}
.webUploader-add .webuploader-pick {
  display: inline-block;
  font-family: "Ionicons";
  speak: none;
  color: gray;
  font-size: 60px;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  text-rendering: auto;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: middle;
  padding: 0;

  position: absolute;
  margin-top: 50%;
  margin-left: 50%;
  transform: translate(-50%, -50%);
}
.webUploader-add .webuploader-pick:before {
  content: "\F102";
}
.picture-list-container .ivu-icon {
  background: white;
  font-size: 20px;
  color: gray;
  border-radius: 10px;
}
.webUploader-add {
  height: 100px !important;
  border: 1px solid gray;
}

.middleandcenter {
  position: absolute;
  margin-top: 50%;
  margin-left: 50%;
  transform: translate(-50%, -50%);
}
</style>
<style>
    .middleandcenter {
        position: absolute;
        margin-top: 50%;
        margin-left: 50%;
        transform: translate(-50%, -50%);
    }
</style>