<template>
  <div class="module">
  <div :class="className">
        <span class="spanTitle1">{{ title }}</span>
        <!-- <van-field
        ref="inp"
  rows="1"
  autosize
  v-model="internalValue"
  v-bind="$attrs"
  type="textarea"
  @focus="focus"  @blur="blur"
  @input="ins"
/> -->

<van-uploader :after-read="afterRead" v-model="fileList"  :before-delete="deletes" multiple accept="image/*" >
  <img  src="@/assets/images/photo.png" alt="">
</van-uploader>
<b v-if="verify" class="verify">*</b>
      </div>

      <p class="reminder" v-if="reminder">当前项为必填项</p>
       </div>
</template>

<script>
import { compressImage } from '@/utils/imgCompressUtil.js'
export default {
  props: ['title', 'value', 'verify'],
  name: 'Uploader',
  watch: {

    value (cur, old) {
      if (!cur.length) {
        this.reminder = true
        this.className = 'el_input_focusTrue1'
      } else {
        console.log(cur, '犬瘟热听听音乐')
        this.fileList = cur
      }
    }
  },
  data () {
    return {
      className: 'el_input_focus1',
      internalValue: this.value,
      reminder: false,
      fileList: []
    }
  },

  mounted () {

  },

  methods: {
    deletes () {
      this.$nextTick(async () => {
        this.$emit('input', this.fileList)
      })
      return true
    },
    ins (val) {
      this.$emit('input', val)
    },
    afterRead (file) {
      console.log(this.fileList)
      // 此时可以自行将文件上传至服务器
      const config = {
        width: 600, // 压缩后图片的宽
        height: 600, // 压缩后图片的高
        quality: 0.9 // 压缩后图片的清晰度，取值0-1，值越小，所绘制出的图像越模糊
      }
      // console.log(files, '这是好')
      this.fileList.forEach(async (item, index) => {
        if (item.file) {
          const read = new FileReader()
          // console.log(this.getImages(item.file), '这是最终')
          await compressImage(item.file, config, read).then(result => { // result 为压缩后二进制文件
            // 返回压缩后的图片
            this.fileList[index].content = result
            if (index === this.fileList.length - 1) {
              this.$emit('input', this.fileList)
            }
          })
        }
      })
      this.blur()
    },
    focus () {
      if (!this.value || this.value === '@#%__+!') {
        this.className = 'el_input_focus1'
      }
    },
    blur () {
      if (this.verify) {
        if (this.fileList) {
          this.className = 'el_input_focus1'
          this.reminder = false
        } else {
          this.reminder = true
          this.className = 'el_input_focusTrue1'
        }
      } else {
        if (this.fileList) {
          this.className = 'el_input_focus1'
        } else {
          this.className = 'el_input_focus1'
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
img{
  width: 40px;
  height: 33px;
  margin: 10px;
}
</style>
