<template>
  <div class="table-size">
    <a-tooltip :title="$t('密度')">
      <a-dropdown placement="bottomCenter" :trigger="['click']">
        <a-icon class="action" type="column-height" />
        <a-menu :selected-keys="selectedKeys" slot="overlay" @click="onClick">
          <a-menu-item key="default"> {{$t('默认')}} </a-menu-item>
          <a-menu-item key="middle"> {{$t('中等')}} </a-menu-item>
          <a-menu-item key="small"> {{$t('紧密')}} </a-menu-item>
        </a-menu>
      </a-dropdown>
    </a-tooltip>
  </div>
</template>

<script>
export default {
    props: ['value', 'that'],
    // inject
    data () {
        return {
            selectedKeys: ['default'],
        }
    },
    methods: {
        onClick ({ key }) {
            this.$emit('changeTableSize', key, this.that)
            this.selectedKeys = [key]
        },
    },

}
</script>

