<template>
  <Dropdown trigger="click" placement="bottom-end" :class="dropdownClass" @on-click="handleDropdownClick">
    <img class="edit-icon" src="@/assets/ic_operation@2x.png" alt="Edit" />
    <template #list>
      <DropdownMenu>
        <DropdownItem name="edit">编辑</DropdownItem>
        <DropdownItem name="delete">删除</DropdownItem>
      </DropdownMenu>
    </template>
  </Dropdown>
</template>

<script>
export default {
  name: 'ChartOperation',
  props: {
    simple: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    dropdownClass() {
      return ['dc-chart-edit-dropdown', this.simple ? 'simple' : ''];
    },
  },
  methods: {
    handleDropdownClick(name) {
      if (name === 'edit') {
        this.$emit('on-edit');
      } else if (name === 'delete') {
        this.$emit('on-delete');
      }
    },
  },
};
</script>

<style scoped lang="less">
.dc-chart-edit-dropdown {
  position: absolute;
  right: 0;
  top: 22px;
  z-index: 99;
  line-height: 1;
  &.simple {
    right: 16px;
    /deep/ .ivu-select-dropdown {
      margin-top: 10px;
    }
  }
}
.edit-icon {
  width: 16px;
  vertical-align: middle;
  cursor: pointer;
}
</style>
