<template>
  <div>
    {{multiple}}
    <div class="acea-row" v-if="multiple">
      <div
        v-for="(item,index) in imageList"
        :key="index"
        class="pictrue"
        draggable="false"
        @dragstart="handleDragStart($event, item)"
        @dragover.prevent="handleDragOver($event, item)"
        @dragenter="handleDragEnter($event, item)"
        @dragend="handleDragEnd($event, item)"
      >
        <img :src="item.sattDir">
        <i class="el-icon-error btndel" @click="handleRemove(index)" />
      </div>
      <div class="upLoadPicBox" @click="modalPicTap('2')">
        <div class="upLoad">
          <i class="el-icon-camera cameraIconfont" />
        </div>
      </div>
    </div>
    <div class="upLoadPicBox" @click="modalPicTap('1')" v-else>
      <div v-if="image" class="pictrue"><img :src="image"></div>
      <div v-else class="upLoad">
        <i class="el-icon-camera cameraIconfont" />
      </div>
    </div>
    <el-dialog
      title="上传图片"
      :visible.sync="visible"
      width="896px"
      :before-close="handleClose"
      z-index="3004"
    >
      <upload-index v-if="visible" :checkedMore="imageList" :isMore="isMore" @getImage="getImage" />
    </el-dialog>
  </div>
</template>

<script>
import UploadIndex from '@/components/uploadPicture/index.vue'
export default {
  name: 'UploadFroms',
  components: { UploadIndex },
  props:{
    value:{},
    multiple:{
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      image:"",
      visible: false,
      callback: function() {},
      isMore: '',
      imageList: []
    }
  },
  beforeMount(){
    if( this.multiple ){
      // 接收 v-model 数据
      if(this.value){
        this.imageList = JSON.parse(this.value)
      }
    }else{
      // 接收 v-model 数据
      if(this.value){
        this.image = this.value
      }
    }
    // 处理多选
    this.isMore = this.multiple ? '2':'1'
  },
  methods: {
    handleClose() {
      this.visible = false
    },
    getImage(img) {
      if (this.multiple) {
        let obj = {};
        this.imageList = img.reduce((cur,next) => {
          obj[next.attId] ? "" : obj[next.attId] = true && cur.push(next);
          return cur;
        },[])
        this.$emit('input', JSON.stringify(this.imageList))
      } else {
        this.image = img[0].sattDir
        this.$emit('input', this.image)
      }
      this.visible = false
    },
    // 点击商品图
    modalPicTap (tit, num, i) {
      this.visible = true
    },
    handleRemove (i) {
      this.imageList.splice(i, 1)
      this.$emit('input', this.imageList.join(','))
    },
    // 移动
    handleDragStart (e, item) {
      this.dragging = item;
    },
    handleDragEnd (e, item) {
      this.dragging = null
    },
    handleDragOver (e) {
      e.dataTransfer.dropEffect = 'move'
    },
    handleDragEnter (e, item) {
      e.dataTransfer.effectAllowed = 'move'
      if (item === this.dragging) {
        return
      }
      const newItems = [...this.imageList]
      const src = newItems.indexOf(this.dragging)
      const dst = newItems.indexOf(item)
      newItems.splice(dst, 0, ...newItems.splice(src, 1))
      this.imageList = newItems;
    }
  }
}
</script>

<style scoped lang="scss">
  .btndel{
    position: absolute;
    z-index: 1;
    width :20px !important;
    height: 20px !important;
    left: 46px;
    top: -4px;
  }
  .pictrue{
    width: 60px;
    height: 60px;
    border: 1px dotted rgba(0,0,0,0.1);
    margin-right: 10px;
    position: relative;
    cursor: pointer;
    img{
      width: 100%;
      height: 100%;
    }
  }
</style>
