<template>
  <div class="cl dk-upload">
    <div class="file_list z">
      <ul>
        <li v-for="(file,key) in fileList" :key="key">
          <div class="file">
            <img v-if="file.type==='image'" :src="file.url" alt="">
            <i v-else-if="file.type === 'cert'" class="iconfont icon-huojiang d-size-50" />
            <i v-else class="el-icon-document" />
          </div>
          <div class="file-op">
            <i class="el-icon-delete" @click="handleRemove(file,key)" />
          </div>
        </li>
      </ul>
    </div>
    <el-upload
      :action="actionUrl"
      multiple
      :limit="limit"
      :headers="headers"
      :on-exceed="handleExceed"
      :file-list="fileList"
      :show-file-list="false"
      :on-success="handleSuccess"
      :data="data"
    >
      <div v-if="fileList.length < limit" class="upload_button z">
        <div class="file">
          <i class="el-icon-plus" />
        </div>
      </div>
    </el-upload>
  </div>
</template>

<script>
import { getToken } from '../../../utils/auth'

export default {
  name: 'DkUpload',
  props: {
    limit: {
      default: 1,
      type: Number
    },
    value: {
      default: () => [],
      type: [Object, Array]
    },
    type: {
      default: '',
      type: String
    },
    actionUrl: {
      default: process.env.VUE_APP_BASE_API + '/adminapi/common/upload',
      type: String
    },
    data: {
      default: () => {},
      type: [Object]
    }
  },
  data() {
    return {
      headers: {
        'Access-Token': getToken()
      },
      fileList: this.value
    }
  },
  watch: {
    fileList(value) {
      this.$emit('input', value)
    }
  },
  mounted() {
    // console.log(this.fileList.length)
  },
  methods: {
    handleSuccess(response, file) {
      if (response.code === 0) {
        var data = {
          name: file.name,
          type: this.type,
          url: response.data
        }
        this.fileList.push(data)
        this.$emit('input', this.fileList)
      } else {
        console.log(response)
      }
    },
    // 超出
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择${this.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    // 移除前
    handleRemove(file, key) {
      this.$confirm(`确定移除 ${file.name}？`).then(res => {
        this.fileList.splice(key, 1)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.dk-upload {
  height: 80px;

  .file {
    border: 1px dashed #c0ccda;
    width: 80px;
    height: 80px;
    color: #999;
    text-align: center;
    i {
      line-height: 80px;
      font-size: 30px;
    }
  }

  .file_list {
    li {
      float: left;
      margin-right: 10px;
      position: relative;
      .file {
        border: 1px solid #ccc;
      }
      .file-op{
        position: absolute;
        top: 0;
        width: 80px;
        height: 80px;
        background: #0000006e;
        text-align: center;
        color: #fff;
        line-height: 80px;
        display: none;
        cursor: pointer;
      }
      &:hover .file-op{
        display: block;
      }
    }
  }

  .upload_button .file {
    &:hover {
      border: 1px dashed #409EFF;
    }
  }
}
</style>
