<template>
  <div class="dw-upload">
    <el-col :span="22" class="dw-col-ml30">
      <!--<el-upload
        :ref="refName"
        action=""
        list-type="picture-card"
        accept="image/*"
        :disabled="disabled"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :on-success="handleSuccess"
        :on-change="handleChange"
        :on-progress="handleprogress"
        :multiple="true"
        :auto-upload="autoUpload"
        :file-list="fileList"
        :limit="limit"
        :http-request="uploadFile"
        :before-upload="beforeUpload">
        <i class="el-icon-plus"></i>
        <div class="el-upload__tip" slot="tip">{{$tt('最多5张')}}</div>
      </el-upload>-->
      <el-upload
                :ref="refName"
                action="/md/upload_image/"
                list-type="picture-card"
                accept="image/*"
                :multiple="true"
                :auto-upload="autoUpload"
                :on-success="uploadCallBack"
                :file-list="fileList"
                :limit="limit"
                >
            <i class="el-icon-plus"></i>
            <div class="el-upload__tip" slot="tip">{{$tt('最多5张')}}</div>
        </el-upload>
    </el-col>
    <el-dialog :visible.sync="dialogVisible" size="tiny">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>
<script>
  // import aliyunUpload from '../../common/aliyun-oss-sdk/index.js'
  export default {
    name: 'dw-upload',
    components: {},
    props: {
      images: {
        type: Array,
        default: () => { return [] }
      },
      autoUpload: {
        type: Boolean,
        default: true
      },
      refName: {
        type: String,
        default: 'upload'
      },
      limit: {
        type: Number,
        default: 5
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        fileList: this.images
      }
    },
    computed: {},
    created() {},
    mounted() {},
    methods: {
      uploadCallBack(res, file, fileList) {
        console.log(res)
        this.fileList.push({ url: res.file_path })
        this.emitParen(this.fileList)
      },
      handleRemove(file, fileList) {
        // let url = file.url.replace('http://hive-oss.oss-cn-hangzhou.aliyuncs.com/', '')
        // this.$api.deleteImage(url).then((res) => {
        //   if (res.status === 204) {
        //     this.emitParen(fileList)
        //   }
        // })
        this.$api.deleteFile(file.url).then((res) => {
          if (res.status === 204) {
            this.emitParen(fileList)
          }
        })
      },
      handlePictureCardPreview(file, fileList) { // up
        // console.log('sada', file, fileList)
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      handleSuccess(response, file, fileList) {
      },
      handleChange(file, fileList) {
        this.emitParen(fileList)
      },
      handleprogress(event, file, fileList) {
      },
      // 文件上传前
      beforeUpload(files) {
        return true
      },
      // 文件上传
      uploadFile({ file }) {
        // aliyunUpload(file, 'track-helper').then((res) => {
        //   this.fileList.push({url: res.url})
        //   this.emitParen(this.fileList)
        // })
        this.$api.uploadFileToService(file).then((res) => {
          if (res.status !== 200) return
          this.fileList.push({ url: res.file_path })
          this.emitParen(this.fileList)
        })
      },
      // 传给父组件
      emitParen(files) {
        const data = []
        if (Array.isArray(files)) {
          files.forEach((item) => {
            data.push({ url: item.url })
          })
        }
        this.$emit('checkedImages', data)
      }
    },
    updated() {},
    watch: {
      images() {
        console.log(this.images)
        this.fileList = this.images
      }
    }
  }
</script>