<template>
  <div>
    <Tooltip v-for="item in msg" :key="item.name" :content="item.name" transfer>
      <span v-if="!item.upload">
        <span v-if="item.disabled">
          <i
            v-if="$showBtn(item.id)"
            :id="item.id"
            :class="item.type"
            class="margin-right-5 icons iconfont"
            :style="objStyle"
          />
        </span>
        <span v-else>
          <i
            v-if="$showBtn(item.id)"
            :id="item.id"
            :class="item.type"
            class="margin-right-5 icons iconfont"
            @click="_iconClick(item.name,item.componentName)"
          />
        </span>
      </span>
      <span v-else>
        <Upload
          :action="item.action"
          :on-success="_handelsuccess"
          :before-upload="_beupload"
          :data="dataObj"
          :with-credentials="true"
          :show-upload-list="false"
        >
          <Icon
            :id="item.id"
            :type="item.type"
            class="marRight-10 icons"
            size="20"
          />
        </Upload>
      </span>
    </Tooltip>
  </div>
</template>
<script>
export default {
  props: {
    msg: null, // 任何类型
    id: null,
    rowData: null,
    rowIndex: null // 当前行的索引值
  },
  data() {
    return {
      // 正常
      iconNormalList: [],
      // 上传
      iconUploadList: [],
      // 上传提交的参数
      dataObj: {
        file: '',
        id: ''
      },
      objStyle: {
        color: '#999',
        cursor: 'not-allowed'
      }
    }
  },
  methods: {
    _iconClick(name, componentName, rowIndex) {
      // 按钮点击事件
      this.$emit(
        'on-result-change',
        name,
        this.rowData,
        componentName,
        rowIndex
      )
    },
    // 导入
    _beupload(file) {
      this.dataObj.file = file.name
    },
    _handelsuccess(response, file, fileList) {
      // 上传成功
      if (response.success) {
        this.$Message.success('上传成功！')
      } else {
        this.$Message.warning(response.msg)
      }
      this.$emit('on-result-change', 'upload')
    }
  }
}
</script>
<style scoped>
.margin-right-5 {
  margin-right: 5px !important;
}
</style>
