<template>
  <div class="upload-form">
    <el-form-item
      :key="item.model"
      :prop="item.model"
      :label="item.label || ''"
      :label-width="item.labelWidth || item['label-width'] || ''"
      :required="item.required || false"
      :rules="item.rules || []"
      :size="item.size"
    >
      <el-upload
        :action="item.action"
        :data="item.data"
        :before-upload="beforeUploadFile"
        :on-success="onSuccessFile"
        :with-credentials="true"
        :show-file-list="false"
        v-bind="item.attrs || {}">
        <el-button type="primary">点击上传</el-button>
      </el-upload>
      <div style="overflow: hidden; padding: 20px 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">
                <div class="close" @click="deleteFile(index)">X</div>
                <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">
                <div class="close">X</div>
                <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>

      <!-- <el-input :style="{ width: item.modelWidth || item['model-width'] || '100%' }"
        v-bind="item.attrs || {}"
        v-on="$listeners"
        v-model="formData[item.model]"
        :disabled="item.disabled || false"
        :placeholder="item.placeholder || ''"
      ></el-input> -->
    </el-form-item>
  </div>
</template>

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

export default {
  name: 'UploadForm',
  componentName: 'UploadForm',
  props: {
    item: {
      type: Object,
      default () {
        return {}
      }
    },
    formData: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      'project_id': '',
      filesArr: []
    }
  },
  methods: {
    beforeUploadFile (file) {},
    onSuccessFile (response, file, fileList) {
      response.url = response.file || ''
      response.sso_file_name = file.name
      this.filesArr.push(response)
    },
    deleteFile (index) {
      let temp = this.filesArr[index]
      deleteFile({
        action: this.item.deleteAction + '/' + temp.id + '?project_id=' + this.project_id,
        onError: () => {},
        onSuccess: (res) => {
          if (res.status === 200) {
            this.filesArr.splice(index, 1)
          }
        }
      })
    }
  },
  watch: {
    formData: {
      immediate: true,
      deep: true,
      handler (value) {
        /* 单独处理 - ajax结果在组件渲染之后 */
        if (value[this.item.model] && value[this.item.model].length && !this.filesArr.length) {
          this.filesArr = value[this.item.model]
          this.project_id = this.item.data.project_id
        }
      }
    }
  }
}
</script>

<style lang="scss">
  .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: 16px;
      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>
