<!-- 
 * @name    表格操作栏折叠按钮组件
 * @authors pen (you@example.org)
 * @date    2022-06-08 
 * @version 1.0.0
 *
 -->
 <template>
  <el-popover placement="bottom" popper-class="table_more_pop" trigger="click">
    <ul class="more_list_box">
      <el-link
        class="column_toolbar_link more_item"
        v-for="(item, index) in TableMoreOperateData.slice(
          2,
          TableMoreOperateData.length
        )"
        :key="index"
        :underline="false"
        :href="item.href"
        :icon="item.icon"
        :type="item.type"
        @click="toolbarClick(TableRowData, item, rowIndex)"
        :disabled="
          (typeof item.isDisabled === 'function' &&
            item.isDisabled(TableRowData)) ||
          item.disabled
        "
        :style="item.style"
      >
        {{ item.text }}
      </el-link>
    </ul>
    <div slot="reference">
      <el-link class="more_text" :underline="false"
        >{{ moreText }}<i class="el-icon-arrow-down"></i
      ></el-link>
    </div>
  </el-popover>
</template>
<script>
export default {
  name: 'table-more-operate-view',
  props: {
    //vxeTable才需要传这个
    rowIndex: {
      type: Number || String
    },
    TableMoreOperateData: {
      type: Array,
      default: () => []
    },
    TableRowData: {
      type: Object,
      default: () => ({})
    },
    moreText: {
      type: String,
      default: '更多'
    }
  },
  methods: {
    toolbarClick(row, item, index) {
      this.$emit('toolbar-click', row, item, index)
    }
  }
}
</script>
<style>
.table_more_pop {
  min-width: 88px;
  padding: 5px 0;
}
</style>
<style lang="less" scoped>
/deep/ .el-link.el-link--primary.is-disabled,
.el-link.el-link--danger.is-disabled {
  // color: rgba(0, 0, 0, 0.25);
  color: #bfbfbf;
}
.el-link.el-link--default {
  color: #18a1fb;
}
.el-link.el-link--default.is-disabled {
  // color: rgba(0, 0, 0, 0.25);
  color: #bfbfbf;
}
.el-popover__reference {
  display: inline-block;
}
.more_list_box {
  display: flex;
  flex-direction: column;
  .more_item {
    flex: 1;
    // margin-top: 10px;
    line-height: 28px;
  }
  .more_item:hover {
    background: #f5f5f5;
  }
  .more_item:first-child {
    margin-top: 0px;
  }
}
.column_toolbar_link {
  // margin-right: 10px;
}
.more_text {
  margin-left: 10px;
}
</style>
