<template>
  <div>
    <div>
      <el-tooltip
        v-for="item in msg"
        :key="item.name"
        :content="item.name"
        placement="bottom"
        effect="light"
      >
        <span v-if="item.disabled">
          <i
            v-show="$showBtn(item.id)"
            :id="item.id"
            :class="item.type"
            class="margin-right-5 iconfont"
            :style="objStyle"
            style="margin-bottom: 10px;font-size: 22px"
          ></i>
        </span>
        <span v-else-if="item.upload">
          <el-upload
            style="display: inline-block"
            :action="item.action + currentFolderId"
            :on-success="_handelsuccess"
            :on-progress="beforeAvatarUpload"
            :before-upload="_beupload"
            :data="dataObj"
            :with-credentials="true"
            :show-file-list="false"
            :max-size="51200"
          >
            <i
              v-show="$showBtn(item.id)"
              :id="item.id"
              :key="item.name"
              :class="item.type?item.type:''"
              class="margin-right-5 iconfont"
              :style="{color:item.color}"
              style="margin-bottom: 10px;font-size: 22px"
              @click="_iClick(item.name,item.id,item.componentName, item.action)"
            >
            </i>
          </el-upload>
        </span>
        <span v-else>
          <i
            v-show="$showBtn(item.id)"
            :id="item.id"
            :key="item.name"
            :class="item.type?item.type:''"
            class="margin-right-5 iconfont"
            :style="{color: item.color ? item.color : '#ff9900'}"
            style="margin-bottom: 10px;font-size: 22px;cursor: pointer"
            @click="_iClick(item.name,item.id,item.componentName)"
          >
          </i>
        </span>
      </el-tooltip>
    </div>

    <!--显示表单弹框-->
    <formTypeModal ref="formModal" @on-result-change="_formResult" />
  </div>
</template>

<script>
import { sysForm } from '../../api'
import global from '../../api/config'
import formTypeModal from '../../components/base/formTypeModal'

export default {
  name: 'IList',
  components: { formTypeModal },
  props: ['msg', 'id', 'rowData', 'rowIndex', 'residue', 'currentFolderId'],
  data() {
    return {
      color: '',
      objStyle: {
        color: '#999',
        cursor: 'not-allowed'
      },
      dataObj: {
        file: ''
      },
      accessToken: ''
    }
  },
  mounted() {
    this.accessToken = global.getToken()
  },
  // 点击事件
  methods: {
    _iClick(name, id, componentName, action) {
      if (id) {
        this._getForm(id, name)
      } else {
        // 无配置表单
        this.$emit(
          'on-result-change',
          name,
          this.rowData,
          this.rowIndex,
          componentName
        )
      }
    },
    _getForm: async function(id, name) {
      const result = await sysForm.getByBtnCode(id, name)
      if (result.length === 0) {
        // 无配置表单
        this.$emit('on-result-change', name, this.rowData, this.rowIndex)
      } else if (result.length === 1) {
        // 只有一个配置表单(不需要选择)
        this.$emit('on-result-change', name, result[0])
      } else {
        // 有多个配置表单(需要打开弹框进行选择)
        this.$refs.formModal._open(name, result)
      }
    },
    // 表单返回数据
    _formResult(data) {
      // 返回按钮名称和表单标识
      this.$emit('on-result-change', data.name, data.formType)
    },
    // 上传文件
    _beupload(file) {
      this.dataObj.file = file.name
      const fileSize = file.size / 1024 / 1024 < 150
      const residueSpace = file.size / 1024 / 1024 < this.residue
      if (!fileSize) {
        this.$message.warning('上传文件大小不能超过150MB')
      }
      if (!residueSpace) {
        this.$message.warning('您所上传的文件已超过所剩共享空间')
      }
      return fileSize && residueSpace
    },
    beforeAvatarUpload(event, file, fileList) {
      const loadProgress = Math.floor(event.percent) // 这就是当前上传的进度
      console.log(loadProgress)
    },
    _handelsuccess(response, file, fileList) {
      // 上传成功
      if (response.success) {
        this.$message.success('上传成功！')
        this.showEditModal = false
        this.$emit('on-result-change', 'upload')
      } else {
        this.$message.error(response.msg)
      }
    }
  }
}
</script>

<style scoped>
.margin-right-5 {
  margin-right: 5px;
}
</style>
