<!--
 * @Description: 描述
 * @Author: chd
 * @Date: 2021-06-08 11:22:13
 * @LastEditors: chd
 * @LastEditTime: 2021-07-03 09:59:53
-->
<template>
  <div class="img_main" :style="!isFloat ? 'display:block' : ''">
    <draggable
      v-model="list"
      group="people"
      @start="drag = true"
      @end="drag = false"
      :style="!isFloat ? 'display:block' : ''"
      :move="onMove"
      class="draggable">
      <template v-if="isFloat">
        <div class="img_img" v-for="(item, i) in fileList" :key="i">
          <div class="img_item" :class="{ high: highLength > i }">
            <div class="img">
              <img
                width="58"
                height="58"
                :src="
                  item.imagePath
                    ? setimgUrl(formatUrl(item.imagePath, 75), {
                        w: width,
                        f: 'png',
                        isCustom: isCustom,
                        hasWidth: hasWidth
                      })
                    : formatUrl(item.filePath, 75)
                "
                alt="" />
              <span style="font-size: 12px">{{ item.id }}</span>
            </div>

            <div class="btn_wrap">
              <button type="button" @click="fullscreen(i)">
                <i class="el-icon-zoom-in"></i>
              </button>
              <button
                class="remove"
                v-if="isdel"
                type="button"
                @click="remove(i)">
                <i class="el-icon-close"></i>
              </button>
            </div>
            <slot name="mark" :index="i" :item="item"></slot>
            <template>
              <span
                class="select-icon"
                v-if="item.type"
                :style="
                  item.type === 'positively'
                    ? 'background-color:#67C23A'
                    : item.type === 'negative'
                    ? 'background-color:#409EFF'
                    : 'background-color:#B79860'
                ">
                {{
                  item.type === 'positively'
                    ? 'F'
                    : item.type === 'negative'
                    ? 'B'
                    : 'D'
                }}
              </span>
            </template>
          </div>
        </div>
        <div
          v-show="add && fileList.length < length"
          class="img_wrap"
          @click="upload">
          <i class="el-icon-plus"></i>
        </div>
      </template>
      <template v-else>
        <div v-for="(item, i) in fileList" :key="i" class="include-other-info">
          <div class="img_item" :class="{ high: highLength > i }">
            <div class="img">
              <img
                width="58"
                height="58"
                :src="
                  item.imagePath
                    ? setimgUrl(item.imagePath, {
                        w: width,
                        f: 'png',
                        hasWidth: hasWidth,
                        isCustom: isCustom,
                        hasOss: hasOss
                      })
                    : setimgUrl(item.filePath, {
                        w: width,
                        f: 'png',
                        hasWidth: hasWidth,
                        hasOss: hasOss
                      })
                "
                alt="" />
              <span style="font-size: 12px">{{ item.id }}</span>
            </div>

            <div class="btn_wrap">
              <button type="button" @click="fullscreen(i)">
                <i class="el-icon-zoom-in"></i>
              </button>
              <button
                class="remove"
                v-if="isdel"
                type="button"
                @click="remove(i)">
                <i class="el-icon-close"></i>
              </button>
            </div>
          </div>
          <slot name="other" :index="i" :item="item"></slot>
        </div>
        <div
          v-show="add && fileList.length < length"
          class="img_wrap"
          @click="upload">
          <i class="el-icon-plus"></i>
        </div>
      </template>
    </draggable>
    <el-image-viewer
      class="image_viewer"
      :initialIndex="initialIndex"
      :zIndex="9999"
      :urlList="urlList"
      v-if="imageVisible"
      :on-close="closeViewer"></el-image-viewer>
  </div>
</template>
<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import { inputFile } from '../../utils/commonUtil'
import { array } from 'js-md5'

export default {
  components: {
    ElImageViewer
  },
  data() {
    return {
      imageVisible: false,
      initialIndex: 0,
      imageSelcted: []
    }
  },
  model: {
    prop: 'fileList',
    event: 'change'
  },
  props: {
    joinBefore: {
      type: Boolean,
      default: false
    },
    isFormat: {
      type: Boolean,
      default: false
    },
    showDeleteModel: {
      type: Boolean,
      default: true
    },
    showWarehouseSku: {
      type: Boolean,
      default: false
    },
    isFloat: {
      type: Boolean,
      default: true
    },
    highLength: {
      type: Number,
      default: 0
    },

    isdel: {
      type: Boolean,
      default: true
    },
    add: {
      type: Boolean,
      default: true
    },
    length: {
      type: Number,
      default: 50
    },
    fileList: {
      type: Array,
      default: () => []
    },
    sortField: {
      type: String,
      default: 'position'
    },
    uploadApiUrl: {
      type: String
    },
    width: {
      type: Number,
      default: 60
    },
    sizeLimit: {
      type: Number,
      default: 10
    },
    businessType: {
      type: String
    },
    multiple: {
      type: Boolean,
      default: true
    },
    type: {
      type: array,
      default: null
    },
    isMark: {
      type: Boolean,
      default: false
    },
    isSize: {
      type: Boolean,
      default: false
    },
    hasWidth: {
      type: Boolean,
      default: false
    },
    isCustom: {
      type: Boolean,
      default: false
    },
    hasOss: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    fileList(newval, oldval) {
      if (newval && newval !== oldval) {
        let arr = JSON.parse(JSON.stringify(newval))
        arr = this.deduplication(arr)
        if (arr.length !== newval.length) {
          this.$emit('change', this.deduplication(arr))
        }
      }
    }
  },
  computed: {
    list: {
      get() {
        return this.fileList
      },
      set(list) {
        this.$emit('change', this.deduplication(list))
      }
    },
    urlList() {
      return this.list.map((item) => {
        return item.imagePath
          ? this.setimgUrl(item.imagePath, {
              f: 'png',
              isCustom: this.isCustom
            })
          : item.filePath
      })
    }
  },
  methods: {
    formatUrl(url, num) {
      console.log(url, 111)
      if (this.isFormat && url) {
        if (!url.includes('custom.jomalls.com') && url.includes('http')) {
          return url
        }
        const name = url.split('/')
        const format = name[name.length - 1].split('.')
        name[name.length - 1] = format[0] + '-' + num + '.' + format[1]
        console.log(name.join('/'), 'name')
        return name.join('/')
      }
      return url
    },
    // 图片禁止拖拽
    onMove() {
      if (!this.isFloat) {
        return false
      }
      return true
    },
    imageToggleSelect(image) {
      if (!this.imageSelcted.includes(image)) {
        this.imageSelcted.push(image)
      } else {
        const index = this.imageSelcted.findIndex((e) => e === image)
        this.imageSelcted.splice(index, 1)
      }
    },
    deduplication(list) {
      const arr = []
      for (let i = 0; i < list.length; i++) {
        const item = list[i]
        if (
          item.imagePath
            ? !arr.includes(item.imagePath)
            : !arr.includes(item.filePath)
        ) {
          list[i][this.sortField] = i + 1
          item.imagePath ? arr.push(item.imagePath) : arr.push(item.filePath)
        } else {
          list.splice(i, 1)
          i--
        }
      }
      if (this.isMark) {
        return list.map((ee) => ({ ...ee }))
      } else {
        return list
      }
    },
    closeViewer() {
      this.imageVisible = false
    },
    upload() {
      inputFile({
        type: this.type,
        isSize: this.isSize,
        sizeLimit: this.sizeLimit,
        multiple: this.multiple,
        url: this.uploadApiUrl,
        businessType: this.businessType
      }).then((res) => {
        const list = this.fileList
        if (!this.multiple) {
          res = [res]
        }
        for (const data of res) {
          if (this.joinBefore) {
            data.imagePath
              ? list.unshift({
                  imagePath: data.imagePath
                })
              : list.unshift({
                  imagePath: data.filePath
                })
          } else {
            data.imagePath
              ? list.push({
                  imagePath: data.imagePath,
                  type: this.isMark ? 'positively' : ''
                })
              : list.push({
                  imagePath: data.filePath,
                  type: this.isMark ? 'positively' : ''
                })
          }
        }
        this.$emit('selectImg', this.deduplication(list))
        this.$emit('change', this.deduplication(list))
      })
    },
    // 图片预览
    fullscreen(index) {
      this.imageVisible = true
      this.initialIndex = index
    },

    // 图片移除
    remove(i) {
      if (this.showDeleteModel) {
        this.$confirm('确定删除当前图片？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            const [imgobj] = this.fileList.splice(i, 1)
            this.$emit('remove', imgobj)
          })
          .catch(() => {})
      } else {
        const [imgobj] = this.fileList.splice(i, 1)
        this.$emit('remove', imgobj)
      }
    }
  }
}
</script>
<style scoped>
.include-other-info {
  display: flex;
  justify-content: space-between;
}

.draggable {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.img_main {
  display: flex;
  flex-wrap: wrap;
}

.img_main::after {
  clear: both;
  content: '';
  display: block;
}

/* .img_main >>> .draggable::after{
  clear: both;
  content: '';
  display: inline-block;
} */
.img_wrap {
  width: 50px;
  height: 49px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
  position: relative;
  margin-bottom: 5px;
}

.img_wrap i {
  position: absolute;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.img_img {
  width: 58px;
}

.img_item {
  position: relative;
  width: 58px;
  height: 58px;
  text-align: center;
  border: 1px solid #ddd;
  margin-bottom: 5px;
}
.img_item .img {
  width: 100%;
  height: 100%;
  position: relative;
}
.img_img:last-child {
  margin-right: 6px;
}

.img_item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.img_item:hover .btn_wrap {
  display: flex;
}

.img_item::v-deep:hover .mark {
  display: block;
}

.btn_wrap {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  justify-content: space-around;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
}

.img_item:hover .warehouseSku {
  display: flex;
}

.warehouseSku {
  display: none;
  position: absolute;
  bottom: -23px;
  left: -50%;
  text-align: center;
  min-width: 240%;
  max-width: 285%;
}

.remove {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 16px;
  height: 16px;
  transform: scale(0.8);
  border-radius: 50%;
  background: #666 !important;
}

.remove i {
  display: block;
  color: #fff;
}

.btn_wrap button {
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.image_viewer >>> .el-image-viewer__close {
  color: #fff;
}

.high {
  border-color: blue;
}

.select-icon {
  position: absolute;
  top: -5px;
  left: -5px;
  font-size: 12px;
  background-color: #f56c6c;
  color: #fff;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  display: flex;
  padding: 2px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
}

.img_item::v-deep .mark {
  display: none;
  position: absolute;
  top: 50%;
  left: 2px;
  transform: translateY(-50%);
}

.img_item::v-deep .mark-item {
  cursor: pointer;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  display: flex;
  background-color: #fff;
  align-items: center;
  padding: 2px;
  border-radius: 50%;
  justify-content: center;
}

.img_item::v-deep .mark-item:not(:last-child) {
  margin-bottom: 4px;
}

.img_item::v-deep .mark-item span {
  font-size: 12px;
}
</style>
