<template>
  <div>
    <div class="photo">
        <van-uploader
          v-model="fileList"
          multiple
          accept="image/*"
          :after-read="fileImage"
          :before-delete="deletes"
          @click-preview="preview"
          preview-size="24vw"
          :preview-full-image="false"
        />
      </div>
      <!-- <div class="drawing-container" v-show="isEditor">
      <div id="tui-image-editor"></div>
      <van-button plain type="info" class="closes" @click="close"
        >取消</van-button
      >
      <van-button type="info" class="save" @click="save">保存</van-button> -->
    <!-- </div> -->
    <van-image-preview  v-model="showPic" :images="images"></van-image-preview>
  </div>
</template>

<script>
import 'tui-image-editor/dist/tui-image-editor.css'
import 'tui-color-picker/dist/tui-color-picker.css'
// import ImageEditor from 'tui-image-editor'
import { compressImage } from '@/utils/imgCompressUtil.js'
// import { compressAccurately } from 'image-conversion'
import { ImagePreview } from 'vant'
const locale_zh = {
  ZoomIn: '放大',
  ZoomOut: '缩小',
  Hand: '手掌',
  History: '历史',
  Resize: '调整宽高',
  Crop: '裁剪',
  DeleteAll: '全部删除',
  Delete: '删除',
  Undo: '撤销',
  Redo: '反撤销',
  Reset: '重置',
  Flip: '镜像',
  Rotate: '旋转',
  Draw: '画',
  Shape: '形状标注',
  Icon: '图标标注',
  Text: '文字标注',
  Mask: '遮罩',
  Filter: '滤镜',
  Bold: '加粗',
  Italic: '斜体',
  Underline: '下划线',
  Left: '左对齐',
  Center: '居中',
  Right: '右对齐',
  Color: '颜色',
  'Text size': '字体大小',
  Custom: '自定义',
  Square: '正方形',
  Apply: '应用',
  Cancel: '取消',
  'Flip X': 'X 轴',
  'Flip Y': 'Y 轴',
  Range: '区间',
  Stroke: '描边',
  Fill: '填充',
  Circle: '圆',
  Triangle: '三角',
  Rectangle: '矩形',
  Free: '曲线',
  Straight: '直线',
  Arrow: '箭头',
  'Arrow-2': '箭头2',
  'Arrow-3': '箭头3',
  'Star-1': '星星1',
  'Star-2': '星星2',
  Polygon: '多边形',
  Location: '定位',
  Heart: '心形',
  Bubble: '气泡',
  'Custom icon': '自定义图标',
  'Load Mask Image': '加载蒙层图片',
  Grayscale: '灰度',
  Blur: '模糊',
  Sharpen: '锐化',
  Emboss: '浮雕',
  'Remove White': '除去白色',
  Distance: '距离',
  Brightness: '亮度',
  Noise: '噪音',
  'Color Filter': '彩色滤镜',
  Sepia: '棕色',
  Sepia2: '棕色2',
  Invert: '负片',
  Pixelate: '像素化',
  Threshold: '阈值',
  Tint: '色调',
  Multiply: '正片叠底',
  Blend: '混合色',
  Width: '宽度',
  Height: '高度',
  'Lock Aspect Ratio': '锁定宽高比例'
}

const customTheme = {
  'common.bi.image': '', // 左上角logo图片
  'common.bisize.width': '0px',
  'common.bisize.height': '0px',
  'common.backgroundImage': 'none',
  'common.backgroundColor': '#f3f4f6',
  'common.border': '1px solid #333',

  // header
  'header.backgroundImage': 'none',
  'header.backgroundColor': '#fff',
  'header.border': '0px',

  // load button
  'loadButton.backgroundColor': '#fff',
  'loadButton.border': '1px solid #ddd',
  'loadButton.color': '#222',
  'loadButton.fontFamily': 'NotoSans, sans-serif',
  'loadButton.fontSize': '12px',
  'loadButton.display': 'none', // 隐藏

  // download button
  'downloadButton.backgroundColor': '#fdba3b',
  'downloadButton.border': '1px solid #fdba3b',
  'downloadButton.color': '#fff',
  'downloadButton.fontFamily': 'NotoSans, sans-serif',
  'downloadButton.fontSize': '12px',
  'downloadButton.display': 'none', // 隐藏

  // icons default
  'menu.normalIcon.color': '#8a8a8a',
  'menu.activeIcon.color': '#555555',
  'menu.disabledIcon.color': '#ccc',
  'menu.hoverIcon.color': '#e9e9e9',
  'submenu.normalIcon.color': '#8a8a8a',
  'submenu.activeIcon.color': '#e9e9e9',

  'menu.iconSize.width': '24px',
  'menu.iconSize.height': '24px',
  'submenu.iconSize.width': '32px',
  'submenu.iconSize.height': '32px',

  // submenu primary color
  'submenu.backgroundColor': '#1e1e1e',
  'submenu.partition.color': '#858585',

  // submenu labels
  'submenu.normalLabel.color': '#858585',
  'submenu.normalLabel.fontWeight': 'lighter',
  'submenu.activeLabel.color': '#fff',
  'submenu.activeLabel.fontWeight': 'lighter',

  // checkbox style
  'checkbox.border': '1px solid #ccc',
  'checkbox.backgroundColor': '#fff',

  // rango style
  'range.pointer.color': '#fff',
  'range.bar.color': '#666',
  'range.subbar.color': '#d1d1d1',

  'range.disabledPointer.color': '#414141',
  'range.disabledBar.color': '#282828',
  'range.disabledSubbar.color': '#414141',

  'range.value.color': '#fff',
  'range.value.fontWeight': 'lighter',
  'range.value.fontSize': '11px',
  'range.value.border': '1px solid #353535',
  'range.value.backgroundColor': '#151515',
  'range.title.color': '#fff',
  'range.title.fontWeight': 'lighter',

  // colorpicker style
  'colorpicker.button.border': '1px solid #1e1e1e',
  'colorpicker.title.color': '#fff'
}
export default {
  props: ['list'],
  name: 'VueCli4VantIndex',

  data () {
    return {
      fileList: [],
      isEditor: false,
      showPic: false,
      images: []
    }
  },
  components: {
    [ImagePreview.Component.name]: ImagePreview.Component
  },
  watch: {
    list (cur, old) {
      if (cur) {
        this.list = cur
        this.list.forEach(item => {
          this.fileList.push({ content: item })
        })
        this.$emit('getPhoto', { fileList: this.fileList })
      }
    }
  },
  mounted () {
    console.log(this.list)
    this.fileList = []
    this.list.forEach(item => {
      this.fileList.push({ content: item })
    })
  },

  methods: {
    preview (a, b) {
      console.log(a, b)
      this.images = []
      this.images.push(a.content)
      this.showPic = true
    },
    getImages (file) {
      const isLt200K = file.size / 1024 < 200
      if (isLt200K) {
        // 小于200K不做处理
        return true
      }
      return new Promise((resolve) => {
        // 压缩到200KB,这里的200就是要压缩的大小,可自定义
        // compressAccurately(file, 200).then(res => {
        //   console.log(res)
        //   resolve(res);
        // });
        // compressAccurately有多个参数时传入对象
        compressAccurately(file, {
          size: 2048, // 图片大小压缩到200kb
          width: 400 // 宽度压缩到1280
        }).then(res => {
          // 保留原始文件名
          const files = new File([res], file.name, { type: file.type })
          resolve(files)
        })
      })
    },
    fileImage () {
      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('getPhoto', { fileList: this.fileList })
            }
          })
        }
      })
      // this.$emit('getPhoto', { fileList: this.fileList })
    },
    deletes () {
      this.$nextTick(async () => {
        this.$emit('getPhoto', { fileList: this.fileList })
      })
      return true
    },
    // preview (a, b) {
    //   console.log(a, b)
    //   // this.index = b.index
    //   // this.init(a.content)
    //   // this.isEditor = true
    // },
    close () {
      this.isEditor = false
    }
  }
}
</script>

<style lang="less" scoped>
.photo {
  // height: 1rem;
  width: 100%;
  display: inline-block;
  text-align: left;
}
/deep/ .tui-image-editor-help-menu.top {
  display: none !important;
}
/deep/ .tui-image-editor-newline.tui-image-editor-range-wrap {
  display: none !important;
}
</style>
