<template>
  <div>
    <Tooltip v-for="item in msg" :content="item.name" :key="item.name" transfer>
      <span v-if="item.disabled">
        <Icon :type="item.type"
              :id="item.id"
              v-if="$showBtn(item.id)"
              :style="objStyle" style="margin-left: 5px" class="marRight-10 icons"
              size=20></Icon>
      </span>
      <span v-else>
        <!--预览或预览编辑报告 需要选中前面的checkbox-->
         <Icon :type="item.type"
               :id="item.id"
               v-if="$showBtn(item.id) && (item.name.indexOf('预览') !== -1)"
               @click.native="_iconClick(item.name,item.componentName,rowIndex,item.id)"  style="margin-left: 5px" class="marRight-10 icons"
               size=20></Icon>
         <Icon :type="item.type"
               :id="item.id"
               v-else-if="$showBtn(item.id)"
               @click.native.stop="_iconClick(item.name,item.componentName,rowIndex,item.id)"  style="margin-left: 5px" class="marRight-10 icons"
               size=20></Icon>
      </span>
    </Tooltip>
  </div>
</template>
<script>
/**
 * VXE-TABLE ICON-LIST
 */
export default {
  props: {
    msg: null, // 任何类型
    id: null,
    rowData: null,
    rowIndex: null // 当前行的索引值
  },
  data() {
    return {
      objStyle: {
        color: '#999',
        cursor: 'not-allowed'
      }
    }
  },
  methods: {
    _iconClick(name, componentName, rowIndex, btnId) {
      // 按钮点击事件
      this.$emit(
        'on-result-change',
        name,
        this.rowData,
        componentName,
        rowIndex,
        { btnId: btnId }
      )
    }
  }
}
</script>
