<template>
  <div class="imgs-box-show">
    <div
        v-for="(item, index) in newForm"
        :key="index"
        :class="{deleted: item.deleted}"
        class="img">
      <p class="rate" v-if="item.rate>=0 && item.rate<100">
        上传中{{item.rate}}%
      </p>
      <span
        v-if="item.url && !(item.rate>=0 && item.rate<99)"
        class="close"
        @click="close({item, index})"
      >x</span>
      <p class="m-box">
        <img v-if="['.png', '.jpg', '.jpeg'].includes(getExtend(item.url))" :src="item.url" class="avatar">
        <video v-else-if="['.mp4', '.mov'].includes(getExtend(item.url))" crossOrigin="anonymous" ref="video" class="video" preload="metadata" >
          <source :src="item.url">
        </video>
        <span v-else-if="getExtend(item.name)" class="extend">
          <img v-if="['.png', '.jpg', '.jpeg'].includes(getExtend(item.name))" class="default" :src="$images.global.img" alt="" />
          <img v-if="['.mp3'].includes(getExtend(item.name))" class="default audio" :src="$images.global.audio" alt="" />
          <img v-if="['.mp4', '.mov'].includes(getExtend(item.name))" class="default" :src="$images.global.video" alt="" />
        </span>
      </p>
      <span class="name">{{item.name}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'imgs',
  props: {
    form: Array
  },
  watch: {
    form: {
      handler (vl) {
        this.newForm = vl
      },
      deep: true,
      immediate: true
    },
    newForm: {
      handler (vl) {
        this.$emit('update:form', vl)
      },
      deep: true,
      immediate: true
    }
  },
  data () {
    return {
      newForm: this.form
    }
  },
  methods: {
    close ({ item, index }) {
      console.log('close==>', item, index)
      const newData = this.$_.cloneDeepWith(this.newForm)
      newData[index].deleted = true
      this.newForm = newData
      // this.newForm.splice(index, 1)
    },
    getExtend (url) {
      let extend = ''
      try {
        let arr = url.split('.')
        let name = arr[arr.length - 1]
        extend = name?`.${name}`:``
      } catch (e) {
        console.log('获取文件扩展名失败==>', extend)
      }
      return extend
    }
  }
}
</script>

<style scoped>
.imgs-box-show {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  margin-top: 20px;
}
.imgs-box-show .m-box{
  width: 80px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #edf0f5;
  border-radius: 4px;
}

.imgs-box-show .m-box .default {
  width: 30px;
  height: initial;
  object-fit: contain;
}

.imgs-box-show .m-box .default.audio{
   width: 23px;
}

.imgs-box-show .m-box .video{
  width: 100%;
  height: 80px;
}
.imgs-box-show .img{
  width: 80px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 4px;
  position: relative;
}
.imgs-box-show .img.deleted{
   display: none;
 }
.imgs-box-show .img .rate{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 80px;
  background-color: rgba(0,0,0,.5);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  font-size: 12px;
}

.imgs-box-show .close{
  position: absolute;
  top: -6px;
  right: -6px;
  background-color: #fb505096;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  text-align: center;
  line-height: 15px;
  color: white;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all .2s linear;
}
.imgs-box-show .close:hover{
  background-color: #fb5050;
}
.imgs-box-show .img img{
  width: 80px;
  height: 80px;
  object-fit: contain;
}
.imgs-box-show .img .name{
  height: 30px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 80px;
  flex-shrink: 0;
}
.imgs-box-show .extend{
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #efeded;
  border-radius: 4px;
}
</style>
