<template>
  <div>
    <div class="fileCon">
      <div class="list">
        <div v-for="(item,index) in list" :key="index">
          <img class="close" src="@/assets/image/icon_close.png" @click="close(index)"></img>
          <img :src="item" @click="showBigImage(item)"/>
        </div>
        <div class="add" v-show="maxStatus" @click="chooseType">
          <img class="add-image" src="@/assets/image/add-img.png"/>
        </div>
      </div>
    </div>
    <mt-popup v-model="bigImageVisible" class="imageShowPopup">
      <img :src="bigImageSrc" style="width: 100%; max-height: 100%"/>
    </mt-popup>
    <input id="upload_file" type="file" capture="camera" class="file-input" accept="image/png,image/jpeg,image/jpg" :multiple="multiple" @change="inputChange" style="display: none" />
  </div>
</template>
<script>
  import { MessageBox, Indicator, Toast} from 'mint-ui'
  import { uploadImg } from '@/api/job'
  export default {
    name:'UpdateFile',
    data() {
      return {
        maxStatus: true,  //是否为数量最多状态
        bigImageVisible: false,
        bigImageSrc:''
      }
    },
    props: {
      multiple: Boolean,
      max: Number,
      list: Array
    },
    components: {},
    mounted() {},
    methods: {
      // 显示大图
      showBigImage(src){
        this.bigImageVisible = true
        this.bigImageSrc = src
      },
      chooseType() {
        document.getElementById("upload_file").click()
      },
      close(index) {
        this.list.splice(index, 1)
        this.maxStatus = this.list == this.max ? false : true
      },
      async inputChange(e) {
        let files = e.target.files
        let len = this.list.length + files.length
        if (len > this.max) {
          document.getElementById("upload_file").value = ""
          Toast({
            message: `最多允许上传${this.max}张`,
            position: 'bottom',
          })
          return
        }

        let uploadAll = [].slice.call(files ,0).map(this.upload)

        let result = await Promise.all(uploadAll)
        document.getElementById("upload_file").value = ""
      },
      upload(file, index) {
        const base_url = process.env.BASE_API + '/static/'
        uploadImg(file).then(res => {
          if (res.code === 200) {
            this.list.push(base_url+res.data)
            console.log('uploadImg')
            console.log(this.list.length)
            if (this.list.length == this.max) {
              this.maxStatus = false
            }
          } else {
            Toast({
              message: `第${index + 1}张(${file.name})上传出错(已忽略)`,
              position: 'bottom',
            })
          }
          // resolve(response)
        })
      }
      //   return new Promise(async (resolve, reject) => {
      //     let form = new FormData()
      //     form.append("file", file)
      //     form.append("***")//根据上传入参添加参数
      //     let result = await this.post("/file/upload-file", form)
      //     if (result.cd != 0) {//失败处理
      //       Toast({
      //         message: `第${index + 1}张(${file.name})上传出错(已忽略)`,
      //         position: 'bottom',
      //       })
      //       resolve(result)
      //       return
      //     }
      //
      //     this.list.push(result.data.url)
      //     if (this.list.length == this.max) {
      //       this.maxStatus = false
      //     }
      //     resolve(result)
      //   })
      // }
    }
  }
</script>


<style lang="stylus" rel="stylesheet/stylus" scoped>
  .fileCon {
    width 100%
    min-height: 76px
    display: flex
    flex-direction row
    justify-content flex-start
    align-items center
    .list {
      width 100%
      min-height 76px
      display flex
      flex-wrap wrap
      align-items center
      div {
        width: 50px
        height: 50px
        margin: 10px 10px 10px 0
        position: relative
        background: #ccc
        img {
          width: 100%
          height: 100%
        }
        .close {
          width: 15px
          height: 15px
          //background-image: url("/static/img/icon_close.png")
          background-size: 100%
          position: absolute
          top: -3px
          right: -3px
        }
      }
    }
  }
  .add-image {
    width 50px
    height 50px
    //background-image url(/static/img/add_img.png)
    background-size 100%
  }
  .imageShowPopup{
    width:80%
  }
</style>