<template>

  <el-dialog :title="title" @close="handleClose" :visible.sync="visible" width="40%" append-to-body
    :close-on-click-modal="false">
    <el-upload :data="updata" :accept="accept" class="upload-demo" :headers="headers" v-loading="loading"
      :with-credential="true" :action="action" :on-success="handleUploadSuccess" :on-error="handleUploadError"
      :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :limit="1"
      :on-exceed="handleExceed" :file-list="fileList">
      <div class="card-page">
        <el-button size="small" type="primary">点击上传</el-button>
      </div>

      <!-- list-type="picture" -->
    </el-upload>
    <AsyncImage v-if="pendding" ref="asyncImage" class="xg_image_viewer" @imgload="handleImageLoad"
      @imgloaderror="handleImageLoadError" :src="currentSrc" :srcList="currentSrcList" />
    <span slot="footer" class="dialog-footer card-page">
      <el-button type="primary" v-if="showConfirmBtn" @click="handleConfirm">确 定</el-button>
      <el-button @click="visible = false">关 闭</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getToken } from '@/utils/auth'
import AsyncImage from '@/components/AsyncImage'
import linq from 'linq'
export default {
  components: {
    AsyncImage
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    filePath: {
      type: String,
      default: ""
    },
    title: {
      type: String,
      default: "判别图片上传"
    },
    action: {
      type: String,
      default: process.env.VUE_APP_BASE_API + '/patrol/partrolresult/lasupload'
    },
    accept: {
      type: String,
      default: '*'
    },
    updata: {
      type: Object,
      default: function () {
        return {}
      }
    },
    showConfirmBtn: {
      type: Boolean,
      default: true
    }
  },

  watch: {
    show: {
      handler (newVal) {
        this.loading = false
        this.visible = newVal
        this.fileList = []
        if (this.filePath && this.filePath.length > 0) {
          this.fileList = linq.from(this.filePath.split(',')).select(x => { return { name: '缺陷判别图片.jpg', url: x } }).toArray()
        } else {
          this.fileList = []
        }
      }
    }
  },
  data () {
    return {
      visible: false,
      fileList: [],
      loading: false,
      currentSrc: "",
      currentSrcList: [],
      pendding: false,
      headers: { 'Authorization': 'Bearer ' + getToken() }
    };
  },

  methods: {
    handleConfirm () {
      this.visible = false
      this.$emit('confirm', this.fileList)
    },
    //上传完成
    handleUploadSuccess (response, file, fileList) {
      this.fileList = []
      if (typeof (file.response) !== 'string') {
        if (file.response.code != 200) {
          this.$message.error(`上传失败。消息：${file.response.msg}`)
          return;
        }
        this.fileList.push({
          name: '机器人点位文件.xml'
        })
        return;
      }
      this.fileList.push({
        name: file.name,
        url: file.response
        //         name: "微信图片_20220520095815.png"
        // percentage: 100
        // raw: File
        // response: "/home/xgftp/微信图片_20220520095815.png"
        // size: 699595
        // status: "success"
        // uid: 1653012695833
      })
      console.log(this.fileList)

      // this.$emit('uploadSuccess', response)
    },
    // 关闭弹窗
    handleClose () {
      this.visible = false
      this.fileList = []
      this.$emit('update:show', false)
    },
    // 上传失败
    handleUploadError (err, file, fileList) {
      this.$message.error(`上传失败,请检查文件或网络。`)
    },
    handleRemove (file, fileList) {
      this.fileList = []
      console.log(file, fileList);
    },
    handlePreview (file) {
      this.pendding = false
      this.$nextTick(() => {
        this.pendding = true
        this.currentSrc = file.url
        this.currentSrcList = [file.url]
        this.loading = true
      })
    },
    handleImageLoad () {
      this.loading = false;
      this.$refs.asyncImage.$el.querySelector("img").click();
    },
    handleImageLoadError () {
      this.loading = false;
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    }
  }
}
</script>
<style lang="scss" scoped>
.xg_image_viewer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 50px;
  display: none;
}
</style>