<template>
  <div class="upload-form">
    <div class="u-babel">{{ item.label }}</div>
    <el-upload style="display: inline-block;"
      :action="item.action"
      :data="item.data"
      :before-upload="beforeUploadFile"
      :on-success="onSuccessFile"
      :with-credentials="true"
      :show-file-list="false"
      :disabled="(item.disabled || false) || !isUpload"
      v-bind="item.attrs || {}"
    >
      <el-button type="primary" size="small" :disabled="!isUpload">点击上传</el-button>
      <template v-if="formData[item.model] !== null && formData[item.model] !== '' && formData[item.model] !== undefined">
        <div class="self-icon el-icon-circle-check" style="color: #237f00;"></div>
      </template>
      <div class="self-icon el-icon-circle-close" style="color: #b01c40;"></div>
    </el-upload>
    <div style="overflow: hidden; padding: 10px 0 0 0;">
      <template v-if="filesArr.length">
        <!-- 遍历显示文件 -->
        <template v-for="(item, index) in filesArr">
          <template v-if="/(jpeg)|(jpg)|(png)|(gif)/gi.test(item.url)">
            <div v-bind:key="item.id" class="show-file">
              <template v-if="!(item.disabled || false) && isUpload">
                <div class="close" @click="deleteFiles(index)">X</div>
              </template>
              <el-avatar shape="square" :size="100" fit="contain" :src="item.url"></el-avatar>
              <span class="title">{{ item.sso_file_name }}</span>
              <div class="hover">
                <a target="_blank" :href="item.url">下载</a>
              </div>
            </div>
          </template>
          <template v-else>
            <div v-bind:key="item.id" class="show-file">
              <template v-if="!(item.disabled || false) && isUpload">
                <div class="close" @click="deleteFiles(index)">X</div>
              </template>
              <el-avatar shape="square" :size="100" fit="contain" :src="item.url"></el-avatar>
              <span class="title">{{ item.sso_file_name }}</span>
              <div class="hover">
                <a target="_blank" :href="item.url">下载</a>
              </div>
            </div>
          </template>
        </template>
      </template>
    </div>
    <div class='info' style="line-height: 1.5;" v-html="item.html"></div>
  </div>
</template>

<script>
// import { deleteFile } from './ajax'

export default {
  name: 'UploadForm',
  componentName: 'UploadForm',
  props: {
    item: {
      type: Object,
      default () {
        return {}
      }
    },
    formData: {
      type: Object,
      default () {
        return {}
      }
    },
    isUpload: {
      type: Boolean,
      default () {
        return true
      }
    }
  },
  data () {
    let tmpArr = this.formData[this.item.model] || []
    this.formData[this.item.model] = tmpArr
    return {
      'project_id': '',
      filesArr: tmpArr
    }
  },
  methods: {
    beforeUploadFile (file) {},
    onSuccessFile (response, file, fileList) {
      response.url = response.url || response.file || ''
      response.sso_file_name = file.name
      this.filesArr.push(response)
      // this.$emit('onSubmit')
    },
    deleteFiles (index) {
      this.filesArr.splice(index, 1)
      // let temp = this.filesArr[index]
      // deleteFile({
      //   action: this.item.deleteAction + '/' + temp.id + '?project_id=' + this.item.data.project_id,
      //   onError: () => {},
      //   onSuccess: (res) => {
      //     if (res.status === 200) {
      //       this.filesArr.splice(index, 1)
      //     }
      //   }
      // })
    }
  },
  watch: {
    filesArr: {
      immediate: true,
      deep: true,
      handler (value) {
        if (this.formData[this.item.model].length !== value.length) {
          this.formData[this.item.model] = value
        }
      }
    }
  }
}
</script>

<style lang="scss">
  .u-babel {
    display: inline-block;
    margin-right: 10px;
  }
  .self-icon {
    display: none !important;
    vertical-align: middle;
    margin-left: 10px;
    font-size: 21px;
    line-height: 22px;
  }
  .is-error .self-icon.el-icon-circle-close { display: inline-block !important; }
  .is-success .self-icon.el-icon-circle-check { display: inline-block !important; }

  .show-file {
    position: relative;
    float: left;
    margin-right: 10px;
    .close {
      position: absolute;
      z-index: 10;
      right: -10px;
      top: -10px;
      width: 20px;
      height: 20px;
      color: #fff;
      font-size: 12px;
      line-height: 20px;
      text-align: center;
      background: #efefef;
      border-radius: 50%;
      cursor: pointer;
    }
    .el-avatar {
      img {
        width: 100%;
      }
    }
    .title {
      position: absolute;
      left: 0;
      bottom: 8px;
      width: 100%;
      padding-left: 5px;
      font-size: 12px;
      line-height: 20px;
      background: #efefef;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: break-all;
      box-sizing: border-box;
    }
    .hover {
      display: none;
      position: absolute;
      z-index: 9;
      top: 0;
      left: 0;
      height: 100px;
      width: 100%;
      background: rgba(0, 0, 0, 0.2);
      line-height: 100px;
      text-align: center;
      a {
        color: #f1f1f1;
      }
    }
    &:hover {
      .hover {
        display: block;
      }
    }
  }
</style>
