<template>
  <el-dropdown trigger="click" @command="onCommand">
    <div class="user-icon">
      <i class="iconfont icon-ziti" title="组件大小"></i>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="medium" :disabled="value === 'medium'">
          中等
        </el-dropdown-item>
        <el-dropdown-item command="small" :disabled="value === 'small'">
          默认
        </el-dropdown-item>
        <el-dropdown-item command="mini" :disabled="value === 'mini'">
          超小
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script lang="ts">
import { defineComponent, PropType } from "vue";

enum GlobalComponentSize {
  MEDIUM = "medium",
  SMALL = "small",
  mini = "mini",
}

export default defineComponent({
  name: "ComponentSizeDrop",

  props: {
    value: {
      type: String as PropType<GlobalComponentSize>,
      required: true,
    },
  },

  emits: ["update:value", "change"],

  setup(_, { emit }) {
    const onCommand = (size: string) => {
      emit("update:value", size);
      emit("change", size);
    };

    return {
      onCommand,
    };
  },
});
</script>
